Replace hero grid layout with CSS grid-based layout

cfpb · Nov 1, 2021 · 1c67936 · 1c67936
1 parent b0e984d
commit 1c67936
Showing 1 changed file with 22 additions and 60 deletions.
diff --git a/packages/cfpb-layout/src/molecules/heroes.less b/packages/cfpb-layout/src/molecules/heroes.less
@@ -8,16 +8,21 @@
     background-color: @gray-5;
 
     &_wrapper {
-        padding-top: unit( @grid_gutter-width / @base-font-size-px, em );
-        padding-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
+        // Manually enable CSS grid for IE. IE's grid implementation differs
+        // slightly from the spec so we manually enable it per component
+        // instead of using autoprefixer to enable it for the entire site.
+        display: -ms-grid;
+        display: grid;
+        max-width: ( @grid_wrapper-width - @grid_gutter-width );
+        margin: 0 auto;
+        padding-top: @grid_gutter-width;
+        padding-bottom: @grid_gutter-width;
 
         .respond-to-min( @bp-sm-min, {
-            // IE specific fix.
-            display: table;
-
-            @supports( display: flex ) {
-                display: flex;
-            }
+            -ms-grid-columns: 7fr 5fr;
+            grid-template-columns: 7fr 5fr;
+            padding-right: ( @grid_gutter-width / 2);
+            padding-left: ( @grid_gutter-width / 2);
 
             min-height: @hero-desktop-height - ( @grid_gutter-width * 2 );
         } );
@@ -30,11 +35,10 @@
     }
 
     &_text {
-        .grid_column( 1, 1 );
+        padding-right: ( @grid_gutter-width / 2 );
+        padding-left: ( @grid_gutter-width / 2 );
 
         .respond-to-min( @bp-sm-min, {
-            .grid_column( 7, 12 );
-
             // IE specific fix
             display: table-cell;
             vertical-align: middle;
@@ -66,12 +70,12 @@
     }
 
     &_image-wrapper {
-        .grid_column( 1, 1 );
-
+        box-sizing: border-box;
         overflow: hidden;
 
         .respond-to-min( @bp-sm-min, {
-            .grid_column( 5, 12 );
+            padding-right: ( @grid_gutter-width / 2 );
+            padding-left: ( @grid_gutter-width / 2 );
 
             // IE specific fix.
             display: table-cell;
@@ -89,8 +93,6 @@
     }
 
     &_image {
-        .u-flexible-container-mixin( 16, 9 );
-
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;
@@ -104,17 +106,13 @@
     &__bleeding {
         .respond-to-min( @bp-sm-min, {
 
-            .m-hero_wrapper {
-                position: relative;
-            }
-
             .m-hero_image-wrapper {
+                width: 100%;
                 margin-top: unit( @grid_gutter-width / @base-font-size-px, em ) * -1;
                 margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em ) * -1;
 
                 // IE specific fix.
                 position: absolute;
-                height: 100%;
 
                 @supports ( display: flex ) {
                     position: relative;
@@ -127,7 +125,6 @@
                 padding-bottom: 0 !important;
                 height: 100%;
                 width: 100%;
-                position: absolute;
                 background-size: cover;
             }
         } );
@@ -153,14 +150,6 @@
                 // Overwrite the image that is set in the markup because
                 // we are showing the image container below instead.
                 background-image: none !important;
-
-                // Remove wrapper bottom padding.
-                padding-bottom: 0;
-            }
-
-            .m-hero_image-wrapper {
-                position: relative;
-                border-width: 0;
             }
         } );
 
@@ -176,18 +165,6 @@
 
         .u-jumbo-text();
 
-        .respond-to-max( @bp-xs-max, {
-            .m-hero_wrapper {
-                // Remove wrapper bottom padding.
-                padding-bottom: 0;
-            }
-
-            .m-hero_image-wrapper {
-                border-width: 0;
-                position: relative;
-            }
-        } );
-
         .respond-to-min( @bp-sm-min, {
             .m-hero_wrapper {
                 background-position: 50%;
@@ -206,20 +183,11 @@
 
         .u-jumbo-text();
 
-        .respond-to-max( @bp-xs-max, {
-            .m-hero_wrapper {
-                // Remove wrapper bottom padding.
-                padding-bottom: 0;
-            }
-
-            .m-hero_image-wrapper {
-                position: relative;
-                border-width: 0;
-            }
-        } );
-
         .respond-to-min( @bp-sm-min, {
             .m-hero_wrapper {
+                -ms-grid-columns: 1fr 1fr;
+                grid-template-columns: 1fr 1fr;
+
                 border: 1px solid @gray-40;
                 border-top: none;
                 // Position the hero image all the way to the right
@@ -231,12 +199,6 @@
             .m-hero_image {
                 display: none;
             }
-
-            // Set the hero's text and image to 50%
-            .m-hero_text,
-            .m-hero_image-wrapper {
-                .grid_column( 6, 12 );
-            }
         } );
 
         .respond-to-min( @bp-lg-min, {