]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: f4469c4)
Use pull request #11115 from ncoden/fix/float-grid-uncentered-last-column-9952 for...
authorNicolas Coden <nicolas@ncoden.fr>
Sat, 16 Jun 2018 07:51:34 +0000 (09:51 +0200)
committerNicolas Coden <nicolas@ncoden.fr>
Sat, 16 Jun 2018 20:58:48 +0000 (22:58 +0200)
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 <nicolas@ncoden.fr>
scss/grid/_column.scss patch | blob | blame | history
scss/grid/_position.scss patch | blob | blame | history
test/visual/grid/uncentered-columns.html [new file with mode: 0644] patch | blob

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 3dcd29d69fcbb564988554f1b55d1860a2ec1c16..24b49dde596007858df300bfad6388969419810b 100644 (file)
--- 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 (file)
index 0000000..bfe6253
--- /dev/null
+++ b/test/visual/grid/uncentered-columns.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Foundation for Sites Testing</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+  </head>
+  <body>
+
+    <div class="row column">
+      <h1>Uncentered Columns</h1>
+    </div>
+
+    <div class="row">
+      <div class="small-7 medium-centered large-uncentered columns">
+        <p style="background-color:#eee;">I must be centered on medium only</p>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="small-7 medium-centered large-uncentered columns">
+        <p style="background-color:#eee;">I must be centered on medium only</p>
+      </div>
+      <div class="small-7 medium-centered large-uncentered columns">
+        <p style="background-color:#eee;">I must be centered on medium only</p>
+      </div>
+      <div class="small-7 medium-centered large-uncentered columns">
+        <p style="background-color:#eee;">I must be centered on medium only</p>
+      </div>
+      <div class="small-7 medium-centered large-uncentered columns">
+        <p style="background-color:#eee;">I must be centered on medium only, on the right otherwise</p>
+      </div>
+    </div>
+
+    <div class="row column"><hr></div>
+
+    <div class="row">
+      <div class="small-5 columns">
+        <p style="background-color:#aee;">This blue column is not centered.</p>
+      </div>
+      <div class="small-7 medium-centered large-uncentered columns">
+        <p style="background-color:#fbb;">This pink column should be centered and clear the blue column on medium only.</p>
+      </div>
+      <div class="small-5 columns">
+        <p style="background-color:#aee;">This blue column is not centered.</p>
+      </div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git