Properly BEMify m-inset--email

cfpb · Jun 13, 2024 · a5ea8a8 · a5ea8a8
1 parent 90db013
commit a5ea8a8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/cfgov/unprocessed/css/molecules/inset.less b/cfgov/unprocessed/css/molecules/inset.less
@@ -78,12 +78,18 @@
   }
 
   &--email {
+    // This originally was a block,
+    // so we override the 30px margin added by .full-width-text-group .m-inset.
+    margin-bottom: unit(
+      @grid_gutter-width * 2 / @base-font-size-px,
+      em
+    ) !important;
+
     // Tablet and above.
     .respond-to-min(@bp-sm-min, {
       box-sizing: border-box;
       width: 50%;
       padding-left: unit( @grid_gutter-width / @base-font-size-px, em );
-      float: right;
     });
   }
 }
diff --git a/cfgov/unprocessed/css/organisms/prefooter.less b/cfgov/unprocessed/css/organisms/prefooter.less
@@ -3,6 +3,9 @@
 //       our atomic rules.
 
 .o-prefooter {
+  // Clear any floating m-inset that may be above this.
+  clear: both;
+
   margin-top: unit(((@grid_gutter-width * 2) / @base-font-size-px), em);
   margin-bottom: 0;
 

diff --git a/cfgov/v1/jinja2/v1/includes/organisms/full-width-text.html b/cfgov/v1/jinja2/v1/includes/organisms/full-width-text.html
@@ -36,7 +36,7 @@
                 {{ block | safe }}
             </div>
         {% elif block_type in ['email_signup'] %}
-            <div class="block{{ " block--flush-top" if loop.first }} m-inset--email">
+            <div class="m-inset m-inset--email">
                 <div class="o-well">
                     {% include_block block %}
                 </div>