@carbon/grid 10.24.0 → 10.26.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "10.24.0",
+  "version": "10.26.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,10 +32,10 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.22.0"
+    "@carbon/layout": "^10.23.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.21.0",
+    "@carbon/cli": "^10.22.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {
@@ -44,5 +44,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "8b9c3660aa5b585052b2aa88079a039697ef276f"
+  "gitHead": "ee650dfb14b7428a1509fcef32db2438b9b9eb76"
 }

package/scss/_inlined/_mixins.scss

@@ -62,11 +62,11 @@
   } @else {
     // Explicitly include `display: block` to override
     display: block;
-    flex: 0 0 percentage($span / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     max-width: percentage($span / $columns);
+    flex: 0 0 percentage($span / $columns);
   }
 }
 
@@ -117,17 +117,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
+        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
         width: auto;
         // Reset earlier grid tiers
         max-width: 100%;
+        flex: 1 0 0%;
       }
 
       @for $i from 0 through $columns {
@@ -243,6 +243,8 @@ $carbon--aspect-ratios: (
   (1, 2),
   (4, 3),
   (3, 4),
+  (3, 2),
+  (2, 3),
   (1, 1)
 );
 
@@ -264,11 +266,11 @@ $carbon--aspect-ratios: (
   }
 
   .#{$prefix}--aspect-ratio::before {
-    float: left;
     width: 1px;
     height: 0;
     margin-left: -1px;
     content: '';
+    float: left;
   }
 
   .#{$prefix}--aspect-ratio::after {

package/scss/_mixins.scss

@@ -62,11 +62,11 @@
   } @else {
     // Explicitly include `display: block` to override
     display: block;
-    flex: 0 0 percentage($span / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     max-width: percentage($span / $columns);
+    flex: 0 0 percentage($span / $columns);
   }
 }
 
@@ -117,17 +117,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
+        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
         width: auto;
         // Reset earlier grid tiers
         max-width: 100%;
+        flex: 1 0 0%;
       }
 
       @for $i from 0 through $columns {
@@ -243,6 +243,8 @@ $carbon--aspect-ratios: (
   (1, 2),
   (4, 3),
   (3, 4),
+  (3, 2),
+  (2, 3),
   (1, 1)
 );
 
@@ -264,11 +266,11 @@ $carbon--aspect-ratios: (
   }
 
   .#{$prefix}--aspect-ratio::before {
-    float: left;
     width: 1px;
     height: 0;
     margin-left: -1px;
     content: '';
+    float: left;
   }
 
   .#{$prefix}--aspect-ratio::after {

package/scss/modules/_css-grid.scss

@@ -11,24 +11,24 @@
 
 @mixin css-grid() {
   display: grid;
+  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  margin-right: auto;
+  margin-left: auto;
+  column-gap: var(--cds-grid-gutter);
   grid-template-columns: repeat(
     var(--cds-grid-columns),
     minmax(0, var(--cds-grid-column-size))
   );
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  column-gap: var(--cds-grid-gutter);
 }
 
 @mixin subgrid() {
   display: grid;
+  column-gap: var(--cds-grid-gutter);
   grid-template-columns: repeat(
     var(--cds-grid-columns),
     minmax(0, var(--cds-grid-column-size))
   );
-  column-gap: var(--cds-grid-gutter);
 }
 
 :root {
@@ -68,19 +68,19 @@
 }
 
 .#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  margin-right: 0;
-  margin-left: 0;
   padding-right: 0;
   padding-left: 0;
+  margin-right: 0;
+  margin-left: 0;
 }
 
 .#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
   --cds-grid-gutter: 2rem;
 
-  margin-right: 0;
-  margin-left: 0;
   padding-right: calc(var(--cds-grid-gutter) / 2);
   padding-left: calc(var(--cds-grid-gutter) / 2);
+  margin-right: 0;
+  margin-left: 0;
 }
 
 // -----------------------------------------------------------------------------
@@ -98,7 +98,7 @@
   }
 }
 
-.#{$prefix}--css-grid--narrow > [class*='#{$prefix}--col'] {
+.#{$prefix}--css-grid--narrow > [class*='col'] {
   margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
 }
 

package/scss/modules/_mixins.scss

@@ -58,11 +58,11 @@
   } @else {
     // Explicitly include `display: block` to override
     display: block;
-    flex: 0 0 percentage($span / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     max-width: percentage($span / $columns);
+    flex: 0 0 percentage($span / $columns);
   }
 }
 
@@ -113,17 +113,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
+        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
         width: auto;
         // Reset earlier grid tiers
         max-width: 100%;
+        flex: 1 0 0%;
       }
 
       @for $i from 0 through $columns {

package/scss/vendor/@carbon/layout/_breakpoint.scss

@@ -196,8 +196,16 @@ $carbon--grid-breakpoints: (
   $max: if($is-number-upper, $upper, map-get($breakpoints, $upper));
 
   @if $min and $max {
-    $min-width: if(not $is-number-lower and $min, map-get($min, width), $min);
-    $max-width: if(not $is-number-upper and $max, map-get($max, width), $max);
+    $min-width: if(
+      not $is-number-lower and $min,
+      map-get($min, width + 0.02),
+      $min
+    );
+    $max-width: if(
+      not $is-number-upper and $max,
+      map-get($max, width - 0.02),
+      $max
+    );
     @media (min-width: $min-width) and (max-width: $max-width) {
       @content;
     }