From: Nicolas Coden Date: Sat, 16 Jun 2018 07:51:34 +0000 (+0200) Subject: Use pull request #11115 from ncoden/fix/float-grid-uncentered-last-column-9952 for... X-Git-Tag: v6.5.0-rc.1^2~64 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b9b8ab3e75eebfb414c20c09a8e67e6f07704db4;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Use pull request #11115 from ncoden/fix/float-grid-uncentered-last-column-9952 for v6.5.0 50e7dab90 fix: fix uncenter for last column in Float Grid #9952 fa07c03d6 refactor: add "default" position to `grid-column-positioning` to handle float position 94295399d tests: add visual test for Float Grid uncentered columns a8f850e83 fix: fix last column uncentering with edge align disabled in Float Grid Signed-off-by: Nicolas Coden --- diff --git a/scss/grid/_column.scss b/scss/grid/_column.scss index 615e6fd2d..cddf6e494 100644 --- 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 3dcd29d69..24b49dde5 100644 --- a/scss/grid/_position.scss +++ b/scss/grid/_position.scss @@ -8,14 +8,37 @@ /// 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 { + &, &:last-child:not(:first-child) { + 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,15 +47,16 @@ 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; - float: $global-left; margin-right: 0; margin-left: 0; } diff --git a/test/visual/grid/uncentered-columns.html b/test/visual/grid/uncentered-columns.html new file mode 100644 index 000000000..bfe6253c5 --- /dev/null +++ b/test/visual/grid/uncentered-columns.html @@ -0,0 +1,58 @@ + + + + + + + + Foundation for Sites Testing + + + + +
+

Uncentered Columns

+
+ +
+
+

I must be centered on medium only

+
+
+ +
+
+

I must be centered on medium only

+
+
+

I must be centered on medium only

+
+
+

I must be centered on medium only

+
+
+

I must be centered on medium only, on the right otherwise

+
+
+ +
+ +
+
+

This blue column is not centered.

+
+
+

This pink column should be centered and clear the blue column on medium only.

+
+
+

This blue column is not centered.

+
+
+ + + + + +