fix(layout-grid): "base" span class specificity and span-0

material-components · Jun 15, 2020 · 1e160ba · 1e160ba
1 parent afb1c11
commit 1e160ba
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/packages/mdc-layout-grid/_mixins.scss b/packages/mdc-layout-grid/_mixins.scss
@@ -80,19 +80,24 @@
     @error "Invalid style specified! Choose one of #{map.keys(variables.$columns)}";
   }
 
-  $percent: math.percentage($span / map.get(variables.$columns, $size));
+  @if $span == 0 {
+    margin: 0;
+    width: 0;
+  } @else {
+    $percent: math.percentage($span / map.get(variables.$columns, $size));
 
-  @if $percent > 100% {
-    $percent: 100%;
-  }
+    @if $percent > 100% {
+      $percent: 100%;
+    }
 
-  width: calc(#{$percent} - #{$gutter});
-  // stylelint-disable-next-line declaration-block-no-duplicate-properties
-  width: calc(#{$percent} - var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}));
+    width: calc(#{$percent} - #{$gutter});
+    // stylelint-disable-next-line declaration-block-no-duplicate-properties
+    width: calc(#{$percent} - var(--mdc-layout-grid-gutter-#{$size}, #{$gutter}));
 
-  @supports (display: grid) {
-    width: auto;
-    grid-column-end: span math.min($span, map.get(variables.$columns, $size));
+    @supports (display: grid) {
+      width: auto;
+      grid-column-end: span math.min($span, map.get(variables.$columns, $size));
+    }
   }
 }
 

diff --git a/packages/mdc-layout-grid/mdc-layout-grid.scss b/packages/mdc-layout-grid/mdc-layout-grid.scss
@@ -63,11 +63,18 @@
 
       @include mixins.cell($size, variables.$default-column-span, $gutter);
 
-      @for $span from 1 through map.get(variables.$columns, $upper-breakpoint) {
-        // Span classes.
+      // Base span classes.
+      // Base spans should have less specificity than size-specific spans
+      @for $span from 0 through map.get(variables.$columns, $upper-breakpoint) {
+        &--span-#{$span} {
+          @include mixins.cell-span_($size, $span, $gutter);
+        }
+      }
+
+      // Size specific span classes.
+      @for $span from 0 through map.get(variables.$columns, $upper-breakpoint) {
         // stylelint-disable max-nesting-depth
-        @at-root .mdc-layout-grid__cell--span-#{$span},
-        .mdc-layout-grid__cell--span-#{$span}-#{$size} {
+        &--span-#{$span}-#{$size} {
           @include mixins.cell-span_($size, $span, $gutter);
         }
         // stylelint-enable max-nesting-depth