Fix flex grid fallback for IE in stepped list component

canonical · Mar 23, 2020 · 3900a07 · 3900a07
1 parent 40283d7
commit 3900a07
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 27 deletions.
diff --git a/scss/_base_grid-definitions.scss b/scss/_base_grid-definitions.scss
@@ -19,6 +19,7 @@
 
     // default to flexbox for IE
     display: flex;
+    flex-wrap: wrap;
 
     & & {
       @include vf-b-row-reset;
@@ -84,3 +85,18 @@
     }
   }
 }
+
+// flexbox approximation of grid column styles for IE
+// this needs to be a @mixin rather than %placeholder because it's ised inside @media queries
+@mixin vf-grid-flex-column {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  // set static gutter width
+  margin-left: map-get($grid-gutter-widths, large);
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
diff --git a/scss/_patterns_grid.scss b/scss/_patterns_grid.scss
@@ -8,23 +8,8 @@
   }
 }
 
-@mixin vf-grid-column($col, $screen: large) {
-  // on large screens provide flex box column implementation for IE
-  // on smaller screens let them display full width one under another
-  @if $screen == large {
-    flex-basis: 0;
-    flex-grow: 1;
-    flex-shrink: 1;
-
-    // set static gutter width
-    margin-left: map-get($grid-gutter-widths, $screen);
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  // CSS grid implementation of columns for all screens sizes
+// CSS grid implementation of columns for all screens sizes
+@mixin vf-grid-column($col) {
   @supports (display: grid) {
     grid-column-end: span #{$col};
 
@@ -78,7 +63,7 @@
   @media (max-width: $threshold-4-6-col) {
     @for $i from $grid-columns-small through 1 {
       .#{$grid-small-col-prefix}#{$i} {
-        @include vf-grid-column($i, small);
+        @include vf-grid-column($i);
         width: 100%;
       }
     }
@@ -88,7 +73,7 @@
   @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
     @for $i from $grid-columns-medium through 1 {
       .#{$grid-medium-col-prefix}#{$i} {
-        @include vf-grid-column($i, medium);
+        @include vf-grid-column($i);
         width: 100%;
       }
     }
@@ -99,6 +84,9 @@
     @for $i from $grid-columns through 1 {
       // set col-* to span respective number of columns on desktop
       .#{$grid-large-col-prefix}#{$i} {
+        // on large screens provide flex box column implementation for IE
+        // on smaller screens let them display full width one under another
+        @include vf-grid-flex-column;
         @include vf-grid-column($i);
       }
     }

diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss
@@ -206,17 +206,27 @@ $spv-list-item--inner: null;
 
     margin-left: auto;
 
-    .p-stepped-list__content {
-      @media (min-width: $threshold-6-12-col) {
-        grid-column-end: span 6;
-        margin-top: 0;
+    // fallback for IE flex box grid implementation
+    @media (min-width: $threshold-6-12-col) {
+      .p-stepped-list__content,
+      .p-stepped-list__title {
+        @include vf-grid-flex-column;
       }
     }
 
-    .p-stepped-list__title {
-      display: flex;
-      grid-column-end: span 6;
-      margin-left: 0;
+    @supports (display: grid) {
+      .p-stepped-list__content {
+        @media (min-width: $threshold-6-12-col) {
+          grid-column-end: span 6;
+          margin-top: 0;
+        }
+      }
+
+      .p-stepped-list__title {
+        display: flex;
+        grid-column-end: span 6;
+        margin-left: 0;
+      }
     }
 
     .p-stepped-list__item {