Skip to content

Commit

Permalink
Turn on selector-pseudo-element-colon-notation stylelint rule
Browse files Browse the repository at this point in the history 
This enforces that psuedo elements are defined with a single colon. In the
config/.sass-lint.yml file the rule for pseudo-elements was disabled which
meant this project has a mix of both single colon and double colon
pseudo elements.

The rule to use single colon rather than double was requested by GOV.UK
frontend developers as a means to not purposely break IE8 despite a lack
of a official support, see
alphagov/stylelint-config-gds#1 for more
information.
  • Loading branch information
@kevindew
kevindew committed Aug 19, 2020
1 parent 9e80d3a commit 3dc9864
Show file tree
Hide file tree
Showing 7 changed files with 28 additions and 29 deletions.
1 change: 0 additions & 1 deletion .stylelintrc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,3 @@ extends: stylelint-config-gds/scss
ignoreFiles: src/govuk/vendor/**/*
rules:
declaration-no-important: ~
selector-pseudo-element-colon-notation: ~
4 changes: 2 additions & 2 deletions src/govuk/components/button/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@

// 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;

Expand All @@ -141,7 +141,7 @@
// the click event is still fired.
//
// 🎉
&:active::before {
&:active:before {
top: -($govuk-border-width-form-element + $button-shadow-size);
}
}
Expand Down
20 changes: 10 additions & 10 deletions src/govuk/components/checkboxes/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
}

// [ ] Check box
.govuk-checkboxes__label::before {
.govuk-checkboxes__label:before {
content: "";
box-sizing: border-box;
position: absolute;
Expand All @@ -89,7 +89,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;

Expand Down Expand Up @@ -118,13 +118,13 @@
}

// Focused state
.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
.govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
border-width: 4px;
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
}

// Selected state
.govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {
.govuk-checkboxes__input:checked + .govuk-checkboxes__label:after {
opacity: 1;
}

Expand Down Expand Up @@ -222,7 +222,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
Expand All @@ -231,7 +231,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;
Expand Down Expand Up @@ -266,7 +266,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;
}

Expand All @@ -275,7 +275,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 {
// sass-lint:disable indentation
box-shadow:
0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
Expand All @@ -289,11 +289,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;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/govuk/components/header/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@
@include govuk-focused-text;
}

&::after {
&:after {
@include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
content: "";
margin-left: govuk-spacing(1);
Expand All @@ -179,7 +179,7 @@
}

.govuk-header__menu-button--open {
&::after {
&:after {
@include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
}
}
Expand Down
20 changes: 10 additions & 10 deletions src/govuk/components/radios/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
}

// ( ) Radio ring
.govuk-radios__label::before {
.govuk-radios__label:before {
content: "";
box-sizing: border-box;
position: absolute;
Expand All @@ -95,7 +95,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;
Expand All @@ -118,13 +118,13 @@
}

// Focused state
.govuk-radios__input:focus + .govuk-radios__label::before {
.govuk-radios__input:focus + .govuk-radios__label:before {
border-width: 4px;
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
}

// Selected state
.govuk-radios__input:checked + .govuk-radios__label::after {
.govuk-radios__input:checked + .govuk-radios__label:after {
opacity: 1;
}

Expand Down Expand Up @@ -259,7 +259,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
Expand All @@ -268,7 +268,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;
Expand Down Expand Up @@ -307,7 +307,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;
}

Expand All @@ -316,7 +316,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 {
// sass-lint:disable indentation
box-shadow:
0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
Expand All @@ -330,11 +330,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;
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/govuk/components/tabs/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -72,7 +72,7 @@
background-color: govuk-colour("light-grey", $legacy: "grey-4");
text-align: center;

&::before {
&:before {
content: none;
}
}
Expand Down Expand Up @@ -106,7 +106,7 @@

margin-bottom: 0;

&::after {
&:after {
content: "";
position: absolute;
top: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/govuk/helpers/_links.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@
&[href^="/"],
&[href^="http://"],
&[href^="https://"] {
&::after {
&:after {
content: " (" attr(href) ")";
font-size: 90%;

Expand Down

0 comments on commit 3dc9864

Please sign in to comment.