Skip to content

Commit 23f6671

Browse files
author
Jay
authored
fix(chore): use double colons for pseudo-elements
It's a minor nit-pick but as a FE Framework I think it's good to do things "the right way", even if one colon is probably also fine. As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements. developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
1 parent d31fe9a commit 23f6671

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+4393
-4395
lines changed

‎src/definitions/collections/form.less

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@
345345
background: @promptBackground !important;
346346
border: @promptBorder !important;
347347
color: @promptTextColor !important;
348-
& li:before {
348+
& li::before {
349349
color: @promptTextColor;
350350
}
351351
}
@@ -355,8 +355,8 @@
355355
vertical-align: top;
356356
margin: @inlinePromptMargin;
357357
}
358-
.ui.form .inline.fields .field .prompt:before,
359-
.ui.form .inline.field .prompt:before {
358+
.ui.form .inline.fields .field .prompt::before,
359+
.ui.form .inline.field .prompt::before {
360360
border-width: 0 0 @inlinePromptBorderWidth @inlinePromptBorderWidth;
361361
bottom: auto;
362362
right: auto;
@@ -541,7 +541,7 @@
541541
color: @c;
542542
}
543543

544-
.ui.form .fields.@{state} .field .ui.label,
544+
.ui.form .fields.@{state} .field .ui.label,
545545
.ui.form .field.@{state} .ui.label {
546546
background-color: @lbg;
547547
}
@@ -734,13 +734,13 @@
734734
.ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label {
735735
color: @c;
736736
}
737-
.ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label:before,
738-
.ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label:before {
737+
.ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label::before,
738+
.ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label::before {
739739
background: @bg;
740740
border-color: @bdc;
741741
}
742-
.ui.form .fields.@{state} .field .checkbox label:after,
743-
.ui.form .field.@{state} .checkbox label:after {
742+
.ui.form .fields.@{state} .field .checkbox label::after,
743+
.ui.form .field.@{state} .checkbox label::after {
744744
color: @c;
745745
}
746746

@@ -783,7 +783,7 @@
783783
cursor: default;
784784
pointer-events: none;
785785
}
786-
.ui.loading.form:before {
786+
.ui.loading.form::before {
787787
position: absolute;
788788
content: '';
789789
top: 0;
@@ -794,11 +794,11 @@
794794
z-index: @loaderDimmerZIndex;
795795
}
796796

797-
.ui.loading.form.segments:before {
797+
.ui.loading.form.segments::before {
798798
border-radius: @defaultBorderRadius;
799799
}
800800

801-
.ui.loading.form:after {
801+
.ui.loading.form::after {
802802
position: absolute;
803803
content: '';
804804
top: 50%;
@@ -827,27 +827,27 @@
827827
Required Field
828828
---------------------*/
829829

830-
.ui.form .required.fields:not(.grouped) > .field > label:after,
831-
.ui.form .required.fields.grouped > label:after,
832-
.ui.form .required.field > label:after,
833-
.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
834-
.ui.form .required.field > .checkbox:after,
835-
.ui.form label.required:after {
830+
.ui.form .required.fields:not(.grouped) > .field > label::after,
831+
.ui.form .required.fields.grouped > label::after,
832+
.ui.form .required.field > label::after,
833+
.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
834+
.ui.form .required.field > .checkbox::after,
835+
.ui.form label.required::after {
836836
margin: @requiredMargin;
837837
content: @requiredContent;
838838
color: @requiredColor;
839839
}
840840

841-
.ui.form .required.fields:not(.grouped) > .field > label:after,
842-
.ui.form .required.fields.grouped > label:after,
843-
.ui.form .required.field > label:after,
844-
.ui.form label.required:after {
841+
.ui.form .required.fields:not(.grouped) > .field > label::after,
842+
.ui.form .required.fields.grouped > label::after,
843+
.ui.form .required.field > label::after,
844+
.ui.form label.required::after {
845845
display: inline-block;
846846
vertical-align: top;
847847
}
848848

849-
.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
850-
.ui.form .required.field > .checkbox:after {
849+
.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
850+
.ui.form .required.field > .checkbox::after {
851851
position: absolute;
852852
top: 0;
853853
left: 100%;
@@ -878,7 +878,7 @@
878878
.ui.inverted.loading.form {
879879
color: @invertedLoaderLineColor;
880880
}
881-
.ui.inverted.loading.form:before {
881+
.ui.inverted.loading.form::before {
882882
background: @loaderInvertedDimmerColor;
883883
}
884884
/* Inverted Field */

‎src/definitions/collections/grid.less

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1096,7 +1096,7 @@
10961096
.ui[class*="vertically divided"].grid > .row {
10971097
position: relative;
10981098
}
1099-
.ui[class*="vertically divided"].grid > .row:before {
1099+
.ui[class*="vertically divided"].grid > .row::before {
11001100
position: absolute;
11011101
content: "";
11021102
top: 0;
@@ -1119,7 +1119,7 @@
11191119
}
11201120
& when (@variationGridVertical) {
11211121
/* First Row Vertically Divided */
1122-
.ui[class*="vertically divided"].grid > .row:first-child:before {
1122+
.ui[class*="vertically divided"].grid > .row:first-child::before {
11231123
box-shadow: none;
11241124
}
11251125
}
@@ -1134,20 +1134,20 @@
11341134
box-shadow: none;
11351135
}
11361136
& when (@variationGridVertical) {
1137-
.ui.inverted[class*="vertically divided"].grid > .row:before {
1137+
.ui.inverted[class*="vertically divided"].grid > .row::before {
11381138
box-shadow: @verticallyDividedInvertedBorder;
11391139
}
11401140
}
11411141
}
11421142
& when (@variationGridRelaxed) and (@variationGridVertical) {
11431143
/* Relaxed */
1144-
.ui.relaxed[class*="vertically divided"].grid > .row:before {
1144+
.ui.relaxed[class*="vertically divided"].grid > .row::before {
11451145
margin-left: (@relaxedGutterWidth / 2);
11461146
margin-right: (@relaxedGutterWidth / 2);
11471147
width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
11481148
}
11491149
& when (@variationGridVeryRelaxed) {
1150-
.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
1150+
.ui[class*="very relaxed"][class*="vertically divided"].grid > .row::before {
11511151
margin-left: (@veryRelaxedGutterWidth / 2);
11521152
margin-right: (@veryRelaxedGutterWidth / 2);
11531153
width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
@@ -1391,10 +1391,10 @@
13911391
box-shadow: none;
13921392
}
13931393
/* Vertically Divided Reversed */
1394-
.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
1394+
.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child::before {
13951395
box-shadow: @verticallyDividedBorder;
13961396
}
1397-
.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
1397+
.ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child::before {
13981398
box-shadow: none;
13991399
}
14001400
}
@@ -1430,10 +1430,10 @@
14301430
box-shadow: none;
14311431
}
14321432
/* Vertically Divided Reversed */
1433-
.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
1433+
.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child::before {
14341434
box-shadow: @verticallyDividedBorder;
14351435
}
1436-
.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
1436+
.ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child::before {
14371437
box-shadow: none;
14381438
}
14391439
}
@@ -1469,10 +1469,10 @@
14691469
box-shadow: none;
14701470
}
14711471
/* Vertically Divided Reversed */
1472-
.ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
1472+
.ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child::before {
14731473
box-shadow: @verticallyDividedBorder;
14741474
}
1475-
.ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
1475+
.ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child::before {
14761476
box-shadow: none;
14771477
}
14781478
}

0 commit comments

Comments
 (0)