Merge pull request #7898 from cfpb/ans_css_cleanup

Drop units from CSS zero values | Double colon pseudoelements to drop IE8 support

cfgov/unprocessed/css/atoms/partially-styled-link.less

@@ -24,7 +24,7 @@
 */
 
 .a-link__partially-styled {
-  border-bottom-width: 0px;
+  border-bottom-width: 0;
 
   &_plain {
     color: @black;

cfgov/unprocessed/css/calendar-icon.less

@@ -44,13 +44,13 @@
   line-height: 1;
   text-align: center;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     // Display & Box Model.
     display: block;
   }
 
-  &:before {
+  &::before {
     // Display & Box Model.
     padding-bottom: 0.15em;
 
@@ -63,7 +63,7 @@
     content: @month;
   }
 
-  &:after {
+  &::after {
     // Display & Box Model.
     padding: 0.15em 0 0;
     border-radius: 0 0 0.16em 0.16em;

cfgov/unprocessed/css/enhancements/layout-2-1.less

@@ -31,7 +31,7 @@
       position: relative;
 
       // Create the hero background bleed.
-      &:after {
+      &::after {
         .u-hero-background();
       }
     }
@@ -84,7 +84,7 @@
         margin-left: unit(-15px / @base-font-size-px, rem);
 
         // This is the sidebar background, which bleeds to the edge.
-        &:after {
+        &::after {
           .u-sidebar-background();
           left: 0;
         }
@@ -120,7 +120,7 @@
         margin-right: unit(-15px / @base-font-size-px, rem);
 
         // This is the sidebar background, which bleeds to the edge.
-        &:after {
+        &::after {
           .u-sidebar-background();
           right: 0;
           left: auto;

cfgov/unprocessed/css/enhancements/typography.less

@@ -21,7 +21,7 @@ dd {
   display: inline;
   margin-left: 0.2em;
 
-  &:after {
+  &::after {
     display: block;
     content: '';
   }

cfgov/unprocessed/css/misc.less

@@ -1,5 +1,5 @@
 .u-drop-shadow-after() {
-  &:after {
+  &::after {
     display: block;
     height: 5px;
     width: 100%;

cfgov/unprocessed/css/molecules/global-search.less

@@ -1,4 +1,5 @@
 // TODO: Move the theme variables to /enhancements/ for CF.
+
 /* topdoc
   name: Theme variables
   family: cf-core

cfgov/unprocessed/css/molecules/related-metadata.less

@@ -103,7 +103,7 @@
     .u-link__colors(@gray, @gray, @gray, @gray, @gray,
     @gold-80, @gold-80, @gold-80, @gold-80, @gold-80);
 
-    &:before {
+    &::before {
       position: absolute;
       left: -@bullet-font-size__em;
       width: @bullet-font-size__em;

cfgov/unprocessed/css/on-demand/ask.less

@@ -1,4 +1,5 @@
 @import (reference) '../main.less';
+
 /* ==========================================================================
    consumerfinance.gov
    Ask CFPB pages at /ask-cfpb/.

cfgov/unprocessed/css/on-demand/error.less

@@ -1,4 +1,5 @@
 @import (reference) '../main.less';
+
 /* ==========================================================================
    consumerfinance.gov
    Page-specific styles for the error pages.

cfgov/unprocessed/css/on-demand/event.less

@@ -20,7 +20,7 @@
 /* Event-Agenda Table
    ========================================================================== */
 .event-agenda_table {
-  h2 + & td[data-label]:before {
+  h2 + & td[data-label]::before {
     margin-top: 0;
   }
 
@@ -72,8 +72,8 @@
   text-transform: capitalize;
   display: inline-block;
 
-  .event-meta_street:not(:empty):after,
-  .event-meta_suite:not(:empty):after {
+  .event-meta_street:not(:empty)::after,
+  .event-meta_suite:not(:empty)::after {
     // Adding a linebreak after the street if it's contents
     // aren't empty.
     content: '\A';

cfgov/unprocessed/css/organisms/header.less

@@ -1,4 +1,5 @@
 // TODO: Move the theme variables to cf-enhancements.
+
 /* topdoc
   name: Theme variables
   family: cf-core

cfgov/unprocessed/css/organisms/mega-menu.less

@@ -199,7 +199,7 @@ body {
 .u-bar-left( @color, @position: -@menu_link_hover_bar_px - 10px ) {
   position: relative;
 
-  &:before {
+  &::before {
     position: absolute;
     left: @position;
     top: 0;
@@ -221,12 +221,12 @@ body {
   }
 
   // Make the pseudo-element have an outline.
-  &:focus:after {
+  &:focus::after {
     outline: 1px dotted @pacific;
   }
 
   // Create the dimensions for the pseudo-element focus rectangle.
-  &:after {
+  &::after {
     position: absolute;
     left: 0;
     top: 0;
@@ -300,7 +300,7 @@ body {
 .u-focus-link-desktop() {
   .u-focus-rectangle();
 
-  &:after {
+  &::after {
     left: -@menu_link_hover_bar_px - 9px;
     width: calc(100% + @menu_link_hover_bar_px + 6px);
   }
@@ -310,7 +310,7 @@ body {
 .u-focus-overview-link-desktop() {
   .u-focus-rectangle();
 
-  &:after {
+  &::after {
     left: -@menu_link_hover_bar_px - 9px;
     width: calc(100% + @menu_link_hover_bar_px + 9px);
   }
@@ -320,7 +320,7 @@ body {
 .u-focus-link-icon-desktop() {
   .u-focus-rectangle();
 
-  &:after {
+  &::after {
     left: -@menu_link_hover_bar_px - 7px;
     width: calc(100% + @menu_link_hover_bar_px + 6px);
   }
@@ -330,7 +330,7 @@ body {
 .u-focus-link-featured-desktop() {
   .u-focus-rectangle();
 
-  &:after {
+  &::after {
     left: -@menu_link_hover_bar_px;
     width: calc(100% + @menu_link_hover_bar_px + 5px);
   }
@@ -340,7 +340,7 @@ body {
 .u-focus-link-mobile() {
   .u-focus-rectangle();
 
-  &:after {
+  &::after {
     left: -@menu_link_hover_bar_px - 9px;
     width: calc(100% + @menu_link_hover_bar_px + 14px);
   }
@@ -1102,7 +1102,8 @@ body {
   } );
 
   // Large desktop size. 1021px. Not currently used.
-  /*.respond-to-min( @bp-lg-min, { } );*/
+
+  /* .respond-to-min( @bp-lg-min, { } ); */
 
   // Xtra-Large desktop size. 1261px.
   .respond-to-min( @bp-xl-min + @grid_gutter-width, {

cfgov/unprocessed/css/search.less

@@ -52,7 +52,7 @@
     }
   }
   .content_main {
-    &:after {
+    &::after {
       border: 0;
     }
     border: 0;