Improved position mixin, added `global-position` variable & docs updated

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index 5125214d6281d55881a7c78e275b2ad3e75c8bc3..b84d55ca6e22da181b2a485a9c947b64e591a2b5 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -339,7 +339,7 @@ This above code will generate the below output
 }
 ```
 
-See how `margin-left` wasn't printed as this mixin also accept `null` as a value. Click here for more [Sass Reference](#margin)
+See how `margin-left` wasn't printed as this mixin also accept `null` as a value. Sass Reference [here](#margin)
 
 ---
 
@@ -432,7 +432,7 @@ This above code will generate the below output
 }
 ```
 
-See how `padding-left` wasn't printed as this mixin also accept `null` as a value. Click here for more [Sass Reference](#padding)
+See how `padding-left` wasn't printed as this mixin also accept `null` as a value. Sass Reference [here](#padding)
 
 ---
 
@@ -502,6 +502,27 @@ Positioning is very helpful and basic need for complex layouts.
 <div class="position-fixed-bottom"></div>
 ``` 
 
+#### Positioning: Usage as a Mixin
+
+```scss
+.foo {
+  @include position(fixed, 1, 2, 0, null);
+}
+```
+
+This above code will generate the below output 
+
+```scss
+.foo {
+  position: fixed !important;
+  top: 1rem !important;
+  right: 2rem !important;
+  bottom: 0rem !important; 
+}
+```
+
+See how `left` offset wasn't printed as this mixin also accept `null` as a value. Sass Reference [here](#position)
+
 ---
 
 ## Overflow

diff --git a/scss/_global.scss b/scss/_global.scss
index 8f6fb164990adf249e7b670968e2d99e09d5603e..99f0e02f29e2766c8f692e35ff9b951bb2e40fbd 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -74,6 +74,10 @@ $global-margin: 1rem !default;
 /// @type Number
 $global-padding: 1rem !default;
 
+/// Global value used for positioning on components.
+/// @type Number
+$global-postion: 1rem !default;
+
 /// Global font weight used for normal type.
 /// @type Keyword | Number
 $global-weight-normal: normal !default;

diff --git a/scss/prototype/_position.scss b/scss/prototype/_position.scss
index a35d2b3eb119d1d3d9ffff6ac60908241a82eb91..9e0218ebee1f9d9afb3d4df346fdaead478ef1ce 100644 (file)
--- a/scss/prototype/_position.scss
+++ b/scss/prototype/_position.scss
@@ -20,7 +20,7 @@ $prototype-position: (
 /// @type Number
 $prototype-position-z-index: 975 !default;
 
-/// Position classes, by default coming through a map `$prototype-position`
+/// Position classes, by default coming through a map `$prototype-position`, whereas all the offset values are multiplied by `$global-position` which by default is equal to `1rem`. 
 /// @param {String} $position [] Position classes, Either `static`, `relative`, `absolute` or `fixed`
 /// @param {Number} $top [null] - Top offset
 /// @param {Number} $right [null] - Right offset
@@ -35,16 +35,16 @@ $prototype-position-z-index: 975 !default;
 ) {
   position: $position !important;
   @if $top != null {
-    top: $top !important;
+    top: $top * $global-postion !important;
   }
   @if $right != null {
-    right: $right !important;
+    right: $right * $global-postion !important;
   }
   @if $bottom != null {
-    bottom: $bottom !important;
+    bottom: $bottom * $global-postion !important;
   }
   @if $left != null {
-    left: $left !important;
+    left: $left * $global-postion !important;
   }
 }
 
@@ -53,7 +53,7 @@ $prototype-position-z-index: 975 !default;
 @mixin position-fixed-top(
   $z-index: $prototype-position-z-index
 ) {
-  @include position(fixed, $top: 0, $right: 0, $left: 0);
+  @include position(fixed, 0, 0, null, 0);
   z-index: $z-index;
 }
 
@@ -62,7 +62,7 @@ $prototype-position-z-index: 975 !default;
 @mixin position-fixed-bottom(
   $z-index: $prototype-position-z-index
 ) {
-  @include position(fixed, $right: 0, $bottom: 0, $left: 0);
+  @include position(fixed, null, 0, 0, 0);
   z-index: $z-index;
 }