refactor: add "default" position to `grid-column-positioning` to handle float position

Handle all the float positioning of Float Grid in the same mixin. This also makes the "last column" selector used only in this mixin.

diff --git a/scss/grid/_column.scss b/scss/grid/_column.scss
index 615e6fd2d9c44f92346e58090633034053ad6356..cddf6e49437ddb06a1d38cfeb7a688d9d09044af 100644 (file)
--- a/scss/grid/_column.scss
+++ b/scss/grid/_column.scss
@@ -63,12 +63,8 @@
   // Gutters
   @include grid-column-gutter($gutters: $gutters);
 
-  // Last column alignment
-  @if $grid-column-align-edge {
-    &:last-child:not(:first-child) {
-      float: $global-right;
-    }
-  }
+  // Position
+  @include grid-col-pos(auto);
 }
 
 /// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.

diff --git a/scss/grid/_position.scss b/scss/grid/_position.scss
index ec6ef7d7e8888828d5a3484d6d5ae8097239fc5a..9455965025f41cd6452aff5be386dca2731b79de 100644 (file)
--- a/scss/grid/_position.scss
+++ b/scss/grid/_position.scss
@@ -8,14 +8,35 @@
 
 /// Reposition a column.
 ///
-/// @param {Number|Keyword} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. Set to center to center the column.
+/// @param {Number|Keyword} $position - It can be:
+///   * A number: The column will move equal to the width of the column count
+///     specified. A positive number will push the column to the right, while
+///     a negative number will pull it to the left.
+///   * `center`: Column will be centered
+///   * `auto`: Column will be pushed to the left (or to the right for the last column).
 @mixin grid-column-position($position) {
-  @if type-of($position) == 'number' {
+  // Auto positioning
+  @if $position == auto {
+    float: $global-left;
+    clear: none;
+
+    // Last column alignment
+    @if $grid-column-align-edge {
+      &:last-child:not(:first-child) {
+        float: $global-right;
+      }
+    }
+  }
+
+  // Push/pull
+  @else if type-of($position) == 'number' {
     $offset: percentage($position / $grid-column-count);
 
     position: relative;
     #{$global-left}: $offset;
   }
+
+  // Center positioning
   @else if $position == center {
     &, &:last-child:not(:first-child) {
       float: none;
@@ -24,23 +45,18 @@
     margin-right: auto;
     margin-left: auto;
   }
+
   @else {
-    @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.';
+    @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, "center" or "auto".';
   }
 }
 
 /// Reset a position definition.
 @mixin grid-column-unposition {
+  @include grid-column-position(auto);
   position: static;
   margin-right: 0;
   margin-left: 0;
-
-  float: $global-left;
-  @if $grid-column-align-edge {
-    &:last-child:not(:first-child) {
-      float: $global-right;
-    }
-  }
 }
 
 /// Offsets a column to the right by `$n` columns.