stylelint: drop selector-pseudo-element-colon-notation exception and make pass

Change-Id: Idfe36e3efb4a1c26ad677d3c9732ce66d39b9a60

diff --git a/.stylelintrc b/.stylelintrc
index 08c49ca..93f136b 100644 (file)
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -6,7 +6,6 @@
                "no-descending-specificity": null,
 
                "selector-no-id": null,
-               "selector-pseudo-element-colon-notation": null,
 
                "value-keyword-case": null
        }

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index b72573d..2ca20a5 100644 (file)
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -68,7 +68,7 @@
                }
 
                // the pseudo before element of the label after the checkbox now looks like a checkbox
-               & + label::before {
+               & + label:before {
                        content: '';
                        background-color: #fff;
                        .background-image-svg( 'images/checked.svg', 'images/checked.png' );
@@ -91,33 +91,33 @@
                }
 
                // when the input is checked, style the label pseudo before element that followed as a checked checkbox
-               &:checked + label::before {
+               &:checked + label:before {
                        .background-size( 100%, 100% );
                }
 
-               &:active + label::before {
+               &:active + label:before {
                        background-color: @colorGray13;
                        border-color: @colorGray13;
                }
 
-               &:focus + label::before {
+               &:focus + label:before {
                        border-width: 2px;
                }
 
-               &:focus:hover + label::before,
-               &:hover + label::before {
+               &:focus:hover + label:before,
+               &:hover + label:before {
                        border-bottom-width: 3px;
                }
 
                // disabled checkboxes have a gray background
-               &:disabled + label::before {
+               &:disabled + label:before {
                        cursor: default;
                        background-color: @colorGray14;
                        border-color: @colorGray14;
                }
 
                // disabled and checked checkboxes have a white circle
-               &:disabled:checked + label::before {
+               &:disabled:checked + label:before {
                        .background-image-svg( 'images/checked_disabled.svg', 'images/checked_disabled.png' );
                }
        }

diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less
index 1b3a7a0..7cb2849 100644 (file)
--- a/resources/src/mediawiki.ui/components/radio.less
+++ b/resources/src/mediawiki.ui/components/radio.less
@@ -60,7 +60,7 @@
                margin-right: 0.4em;
 
                // the pseudo before element of the label after the radio now looks like a radio
-               & + label::before {
+               & + label:before {
                        content: '';
                        background-color: #fff;
                        .background-image-svg( 'images/radio_checked.svg', 'images/radio_checked.png' );
@@ -79,33 +79,33 @@
                }
 
                // when the input is checked, style the label pseudo before element that followed as a checked radio
-               &:checked + label::before {
+               &:checked + label:before {
                        .background-size( 100%, 100% );
                }
 
-               &:active + label::before {
+               &:active + label:before {
                        background-color: @colorGray13;
                        border-color: @colorGray13;
                }
 
-               &:focus + label::before {
+               &:focus + label:before {
                        border-width: 2px;
                }
 
-               &:focus:hover + label::before,
-               &:hover + label::before {
+               &:focus:hover + label:before,
+               &:hover + label:before {
                        border-bottom-width: 3px;
                }
 
                // disabled radios have a gray background
-               &:disabled + label::before {
+               &:disabled + label:before {
                        background-color: @colorGray14;
                        border-color: @colorGray14;
                        cursor: default;
                }
 
                // disabled and checked radios have a white circle
-               &:disabled:checked + label::before {
+               &:disabled:checked + label:before {
                        .background-image-svg( 'images/radio_disabled.svg', 'images/radio_disabled.png' );
                }
        }