Updates pseudo-selectors to use the standards-compliant double colon …

…syntax. We can change from single colons to double colons, as single colons were only needed for IE8 support. Includes a temporary override of the GDS Stylelint configuration to not raise complaints about the use of double colons.
alphagov · May 2, 2023 · 986f11f · 986f11f
1 parent 8ccbb60
commit 986f11f
Show file tree

Hide file tree

Showing 17 changed files with 60 additions and 49 deletions.
diff --git a/app/src/stylesheets/partials/_app.scss b/app/src/stylesheets/partials/_app.scss
@@ -26,7 +26,7 @@
 }
 
 // Removes the breakpoint sass-mq debug display
-.app-iframe-in-component-preview:before {
+.app-iframe-in-component-preview::before {
   display: none;
 }
 

diff --git a/src/govuk/components/accordion/_index.scss b/src/govuk/components/accordion/_index.scss
@@ -116,7 +116,7 @@
           background: $govuk-accordion-base-colour;
         }
 
-        .govuk-accordion-nav__chevron:after {
+        .govuk-accordion-nav__chevron::after {
           color: $govuk-accordion-hover-colour;
         }
       }
@@ -128,7 +128,7 @@
           background: $govuk-accordion-base-colour;
         }
 
-        .govuk-accordion-nav__chevron:after {
+        .govuk-accordion-nav__chevron::after {
           color: $govuk-accordion-icon-focus-colour;
         }
       }
@@ -155,7 +155,7 @@
       vertical-align: middle;
 
       // Create inner chevron arrow
-      &:after {
+      &::after {
         content: "";
         box-sizing: border-box;
         display: block;
@@ -222,7 +222,7 @@
           background: $govuk-accordion-base-colour;
         }
 
-        .govuk-accordion-nav__chevron:after {
+        .govuk-accordion-nav__chevron::after {
           color: $govuk-accordion-hover-colour;
         }
       }
@@ -243,7 +243,7 @@
           background: $govuk-accordion-base-colour;
         }
 
-        .govuk-accordion-nav__chevron:after {
+        .govuk-accordion-nav__chevron::after {
           color: $govuk-accordion-icon-focus-colour;
         }
       }

diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
@@ -28,7 +28,7 @@
   }
 
   // Prepend left pointing chevron
-  .govuk-back-link:before {
+  .govuk-back-link::before {
     content: "";
     display: block;
 
@@ -67,11 +67,11 @@
     }
   }
 
-  .govuk-back-link:focus:before {
+  .govuk-back-link:focus::before {
     border-color: $govuk-focus-text-colour;
   }
 
-  .govuk-back-link:after {
+  .govuk-back-link::after {
     content: "";
     position: absolute;
     top: -14px;

diff --git a/src/govuk/components/breadcrumbs/_index.scss b/src/govuk/components/breadcrumbs/_index.scss
@@ -49,7 +49,7 @@
     float: left;
 
     // Create a chevron using a box with borders on two sides, rotated 45deg.
-    &:before {
+    &::before {
       content: "";
       display: block;
 
@@ -93,7 +93,7 @@
       margin-left: 0;
       padding-left: 0;
 
-      &:before {
+      &::before {
         content: none;
         display: none;
       }
@@ -115,7 +115,7 @@
           display: inline-block;
         }
 
-        &:before {
+        &::before {
           top: govuk-em(6px, $font-size);
           margin: 0;
         }

diff --git a/src/govuk/components/button/_index.scss b/src/govuk/components/button/_index.scss
@@ -124,7 +124,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
 
     // Use a pseudo element to expand the click target area to include the
     // button's shadow as well, in case users try to click it.
-    &:before {
+    &::before {
       content: "";
       display: block;
 
@@ -148,7 +148,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
     // the click event is still fired.
     //
     // 🎉
-    &:active:before {
+    &:active::before {
       top: -($govuk-border-width-form-element + $button-shadow-size);
     }
   }

diff --git a/src/govuk/components/character-count/_index.scss b/src/govuk/components/character-count/_index.scss
@@ -18,7 +18,7 @@
     margin-top: 0;
     margin-bottom: 0;
 
-    &:after {
+    &::after {
       // Zero-width space that will reserve vertical space when no hint is provided
       // as:
       // - setting a min-height is not possible without a magic number

diff --git a/src/govuk/components/checkboxes/_index.scss b/src/govuk/components/checkboxes/_index.scss
@@ -57,7 +57,7 @@
   }
 
   // [ ] Check box
-  .govuk-checkboxes__label:before {
+  .govuk-checkboxes__label::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -73,7 +73,7 @@
   //
   // The check mark is a box with a border on the left and bottom side (└──),
   // rotated 45 degrees
-  .govuk-checkboxes__label:after {
+  .govuk-checkboxes__label::after {
     content: "";
     box-sizing: border-box;
 
@@ -102,7 +102,7 @@
   }
 
   // Focused state
-  .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
     border-width: 4px;
 
     // When colours are overridden, the yellow box-shadow becomes invisible
@@ -122,7 +122,7 @@
   }
 
   // Selected state
-  .govuk-checkboxes__input:checked + .govuk-checkboxes__label:after {
+  .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
     opacity: 1;
   }
 
@@ -228,7 +228,7 @@
     //
     // Reduce the size of the check box [1], vertically center it within the
     // touch target [2]
-    .govuk-checkboxes__label:before {
+    .govuk-checkboxes__label::before {
       top: $input-offset - $govuk-border-width-form-element; // 2
       width: $govuk-small-checkboxes-size; // 1
       height: $govuk-small-checkboxes-size; // 1
@@ -237,7 +237,7 @@
     // ✔ Check mark
     //
     // Reduce the size of the check mark and re-align within the checkbox
-    .govuk-checkboxes__label:after {
+    .govuk-checkboxes__label::after {
       top: 15px;
       left: 6px;
       width: 12px;
@@ -272,7 +272,7 @@
     // is so much larger than their visible size, and so we need to provide
     // feedback to the user as to which checkbox they will select when their
     // cursor is outside of the visible area.
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -281,7 +281,7 @@
     //
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
-    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
       box-shadow:
         0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
         0 0 0 $govuk-hover-width $govuk-hover-colour; // 2
@@ -294,11 +294,11 @@
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
     @media (hover: none), (pointer: coarse) {
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label:before {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
         box-shadow: initial;
       }
 
-      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
+      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
         box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
       }
     }

diff --git a/src/govuk/components/details/_index.scss b/src/govuk/components/details/_index.scss
@@ -53,7 +53,7 @@
   }
 
   // Append our own open / closed marker using a pseudo-element
-  .govuk-details__summary:before {
+  .govuk-details__summary::before {
     content: "";
     position: absolute;
 

diff --git a/src/govuk/components/header/_index.scss b/src/govuk/components/header/_index.scss
@@ -199,13 +199,13 @@
       @include govuk-focused-text;
     }
 
-    &:after {
+    &::after {
       @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
       content: "";
       margin-left: govuk-spacing(1);
     }
 
-    &[aria-expanded="true"]:after {
+    &[aria-expanded="true"]::after {
       @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
     }
 
@@ -317,7 +317,7 @@
       }
 
       // Do not append link href to GOV.UK link when printing (e.g. '(/)')
-      &:after {
+      &::after {
         display: none;
       }
     }

diff --git a/src/govuk/components/pagination/_index.scss b/src/govuk/components/pagination/_index.scss
@@ -108,7 +108,7 @@
 
     // Increase the touch area for the link to the parent element.
     @media screen {
-      &:after {
+      &::after {
         content: "";
         position: absolute;
         top: 0;
@@ -210,7 +210,7 @@
     // as block level whilst programmatically being inline
     // We do this to get around an NVDA quirk where adjacent block level
     // elements are always read out separately
-    .govuk-pagination__link-title:after {
+    .govuk-pagination__link-title::after {
       content: "";
       display: block;
     }

diff --git a/src/govuk/components/radios/_index.scss b/src/govuk/components/radios/_index.scss
@@ -60,7 +60,7 @@
   }
 
   // ( ) Radio ring
-  .govuk-radios__label:before {
+  .govuk-radios__label::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
@@ -79,7 +79,7 @@
   //
   // We create the 'button' entirely out of 'border' so that they remain
   // 'filled' even when colours are overridden in the browser.
-  .govuk-radios__label:after {
+  .govuk-radios__label::after {
     content: "";
 
     position: absolute;
@@ -102,7 +102,7 @@
   }
 
   // Focused state
-  .govuk-radios__input:focus + .govuk-radios__label:before {
+  .govuk-radios__input:focus + .govuk-radios__label::before {
     border-width: 4px;
 
     // When colours are overridden, the yellow box-shadow becomes invisible
@@ -122,7 +122,7 @@
   }
 
   // Selected state
-  .govuk-radios__input:checked + .govuk-radios__label:after {
+  .govuk-radios__input:checked + .govuk-radios__label::after {
     opacity: 1;
   }
 
@@ -244,7 +244,7 @@
     //
     // Reduce the size of the control [1], vertically centering it within the
     // touch target [2]
-    .govuk-radios__label:before {
+    .govuk-radios__label::before {
       top: $input-offset - $govuk-border-width-form-element; // 2
       width: $govuk-small-radios-size; // 1
       height: $govuk-small-radios-size; // 1
@@ -253,7 +253,7 @@
     //  •  Radio button
     //
     // Reduce the size of the 'button' and center it within the ring
-    .govuk-radios__label:after {
+    .govuk-radios__label::after {
       top: 15px;
       left: 7px;
       border-width: 5px;
@@ -292,7 +292,7 @@
     // is so much larger than their visible size, and so we need to provide
     // feedback to the user as to which radio they will select when their
     // cursor is outside of the visible area.
-    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
+    .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -301,7 +301,7 @@
     //
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
-    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
+    .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
       box-shadow:
         0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
         0 0 0 $govuk-hover-width        $govuk-hover-colour; // 2
@@ -314,11 +314,11 @@
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
     @media (hover: none), (pointer: coarse) {
-      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label:before {
+      .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
         box-shadow: initial;
       }
 
-      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label:before {
+      .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
         box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
       }
     }

diff --git a/src/govuk/components/summary-list/_index.scss b/src/govuk/components/summary-list/_index.scss
@@ -32,7 +32,7 @@
   // bottom border is not drawn for that part of the row in some browsers.
   .govuk-summary-list__row--no-actions {
     @include govuk-media-query($from: tablet) {
-      &:after {
+      &::after {
         content: "";
         display: table-cell;
         width: 20%;

diff --git a/src/govuk/components/tabs/_index.scss b/src/govuk/components/tabs/_index.scss
@@ -21,7 +21,7 @@
     @include govuk-font($size: 19);
     margin-left: govuk-spacing(5);
 
-    &:before {
+    &::before {
       @include govuk-text-colour;
       content: "\2014 "; // "— "
       margin-left: govuk-spacing(-5);
@@ -67,7 +67,7 @@
         background-color: govuk-colour("light-grey", $legacy: "grey-4");
         text-align: center;
 
-        &:before {
+        &::before {
           content: none;
         }
       }
@@ -101,7 +101,7 @@
 
         margin-bottom: 0;
 
-        &:after {
+        &::after {
           content: "";
           position: absolute;
           top: 0;

diff --git a/src/govuk/helpers/_clearfix.scss b/src/govuk/helpers/_clearfix.scss
@@ -7,7 +7,7 @@
 /// @access public
 
 @mixin govuk-clearfix {
-  &:after {
+  &::after {
     content: "";
     display: block;
     clear: both;