Skip to content

Commit 2dd57ec

Browse files
okendokenokendoken
committed
css3 pseudo selectors (e.g. ::after instead of :after)
1 parent b6ad8c7 commit 2dd57ec

File tree

4 files changed

+101
-88
lines changed

4 files changed

+101
-88
lines changed

‎awesome-bootstrap-checkbox.css

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
display: inline-block;
33
position: relative;
44
padding-left: 5px; }
5-
.checkbox label:before {
5+
.checkbox label::before {
66
content: "";
77
display: inline-block;
88
position: absolute;
@@ -14,8 +14,9 @@
1414
border-radius: 3px;
1515
background-color: #fff;
1616
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
17+
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
1718
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
18-
.checkbox label:after {
19+
.checkbox label::after {
1920
display: inline-block;
2021
position: absolute;
2122
width: 16px;
@@ -29,52 +30,52 @@
2930
color: #555555; }
3031
.checkbox input[type=checkbox] {
3132
display: none; }
32-
.checkbox input[type=checkbox]:checked + label:after {
33+
.checkbox input[type=checkbox]:checked + label::after {
3334
font-family: 'FontAwesome';
3435
content: "\f00c"; }
3536
.checkbox input[type=checkbox]:disabled + label {
3637
opacity: 0.65; }
37-
.checkbox input[type=checkbox]:disabled + label:before {
38+
.checkbox input[type=checkbox]:disabled + label::before {
3839
background-color: #eeeeee;
3940
cursor: not-allowed; }
40-
.checkbox.checkbox-circle label:before {
41+
.checkbox.checkbox-circle label::before {
4142
border-radius: 50%; }
4243

43-
.checkbox-primary input[type=checkbox]:checked + label:before {
44+
.checkbox-primary input[type=checkbox]:checked + label::before {
4445
background-color: #428bca;
4546
border-color: #428bca; }
46-
.checkbox-primary input[type=checkbox]:checked + label:after {
47+
.checkbox-primary input[type=checkbox]:checked + label::after {
4748
color: #fff; }
4849

49-
.checkbox-danger input[type=checkbox]:checked + label:before {
50+
.checkbox-danger input[type=checkbox]:checked + label::before {
5051
background-color: #d9534f;
5152
border-color: #d9534f; }
52-
.checkbox-danger input[type=checkbox]:checked + label:after {
53+
.checkbox-danger input[type=checkbox]:checked + label::after {
5354
color: #fff; }
5455

55-
.checkbox-info input[type=checkbox]:checked + label:before {
56+
.checkbox-info input[type=checkbox]:checked + label::before {
5657
background-color: #5bc0de;
5758
border-color: #5bc0de; }
58-
.checkbox-info input[type=checkbox]:checked + label:after {
59+
.checkbox-info input[type=checkbox]:checked + label::after {
5960
color: #fff; }
6061

61-
.checkbox-warning input[type=checkbox]:checked + label:before {
62+
.checkbox-warning input[type=checkbox]:checked + label::before {
6263
background-color: #f0ad4e;
6364
border-color: #f0ad4e; }
64-
.checkbox-warning input[type=checkbox]:checked + label:after {
65+
.checkbox-warning input[type=checkbox]:checked + label::after {
6566
color: #fff; }
6667

67-
.checkbox-success input[type=checkbox]:checked + label:before {
68+
.checkbox-success input[type=checkbox]:checked + label::before {
6869
background-color: #5cb85c;
6970
border-color: #5cb85c; }
70-
.checkbox-success input[type=checkbox]:checked + label:after {
71+
.checkbox-success input[type=checkbox]:checked + label::after {
7172
color: #fff; }
7273

7374
.radio label {
7475
display: inline-block;
7576
position: relative;
7677
padding-left: 5px; }
77-
.radio label:before {
78+
.radio label::before {
7879
content: "";
7980
display: inline-block;
8081
position: absolute;
@@ -86,8 +87,9 @@
8687
border-radius: 50%;
8788
background-color: #fff;
8889
-webkit-transition: border 0.15s ease-in-out;
90+
-o-transition: border 0.15s ease-in-out;
8991
transition: border 0.15s ease-in-out; }
90-
.radio label:after {
92+
.radio label::after {
9193
display: inline-block;
9294
position: absolute;
9395
content: " ";
@@ -98,55 +100,57 @@
98100
margin-left: -20px;
99101
border-radius: 50%;
100102
background-color: #555555;
101-
-webkit-transform: scale(0);
102-
-ms-transform: scale(0);
103-
transform: scale(0);
103+
-webkit-transform: scale(0, 0);
104+
-ms-transform: scale(0, 0);
105+
-o-transform: scale(0, 0);
106+
transform: scale(0, 0);
104107
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
105108
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
106109
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
107110
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
108111
.radio input[type=radio] {
109112
display: none; }
110-
.radio input[type=radio]:checked + label:after {
111-
-webkit-transform: scale(1);
112-
-ms-transform: scale(1);
113-
transform: scale(1); }
113+
.radio input[type=radio]:checked + label::after {
114+
-webkit-transform: scale(1, 1);
115+
-ms-transform: scale(1, 1);
116+
-o-transform: scale(1, 1);
117+
transform: scale(1, 1); }
114118
.radio input[type=radio]:disabled + label {
115119
opacity: 0.65; }
116-
.radio input[type=radio]:disabled + label:before {
120+
.radio input[type=radio]:disabled + label::before {
117121
cursor: not-allowed; }
118122

119-
.radio-primary input[type=radio] + label:after {
123+
.radio-primary input[type=radio] + label::after {
120124
background-color: #428bca; }
121-
.radio-primary input[type=radio]:checked + label:before {
125+
.radio-primary input[type=radio]:checked + label::before {
122126
border-color: #428bca; }
123-
.radio-primary input[type=radio]:checked + label:after {
127+
.radio-primary input[type=radio]:checked + label::after {
124128
background-color: #428bca; }
125129

126-
.radio-danger input[type=radio] + label:after {
130+
.radio-danger input[type=radio] + label::after {
127131
background-color: #d9534f; }
128-
.radio-danger input[type=radio]:checked + label:before {
132+
.radio-danger input[type=radio]:checked + label::before {
129133
border-color: #d9534f; }
130-
.radio-danger input[type=radio]:checked + label:after {
134+
.radio-danger input[type=radio]:checked + label::after {
131135
background-color: #d9534f; }
132136

133-
.radio-info input[type=radio] + label:after {
137+
.radio-info input[type=radio] + label::after {
134138
background-color: #5bc0de; }
135-
.radio-info input[type=radio]:checked + label:before {
139+
.radio-info input[type=radio]:checked + label::before {
136140
border-color: #5bc0de; }
137-
.radio-info input[type=radio]:checked + label:after {
141+
.radio-info input[type=radio]:checked + label::after {
138142
background-color: #5bc0de; }
139143

140-
.radio-warning input[type=radio] + label:after {
144+
.radio-warning input[type=radio] + label::after {
141145
background-color: #f0ad4e; }
142-
.radio-warning input[type=radio]:checked + label:before {
146+
.radio-warning input[type=radio]:checked + label::before {
143147
border-color: #f0ad4e; }
144-
.radio-warning input[type=radio]:checked + label:after {
148+
.radio-warning input[type=radio]:checked + label::after {
145149
background-color: #f0ad4e; }
146150

147-
.radio-success input[type=radio] + label:after {
151+
.radio-success input[type=radio] + label::after {
148152
background-color: #5cb85c; }
149-
.radio-success input[type=radio]:checked + label:before {
153+
.radio-success input[type=radio]:checked + label::before {
150154
border-color: #5cb85c; }
151-
.radio-success input[type=radio]:checked + label:after {
155+
.radio-success input[type=radio]:checked + label::after {
152156
background-color: #5cb85c; }

‎awesome-bootstrap-checkbox.scss

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44

55
@mixin checkbox-variant($parent, $color) {
66
#{$parent} input[type=checkbox]:checked + label{
7-
&:before {
7+
&::before {
88
background-color: $color;
99
border-color: $color;
1010
}
11-
&:after{
11+
&::after{
1212
color: #fff;
1313
}
1414
}
@@ -22,7 +22,7 @@
2222
position: relative;
2323
padding-left: 5px;
2424

25-
&:before{
25+
&::before{
2626
content: "";
2727
display: inline-block;
2828
position: absolute;
@@ -36,7 +36,7 @@
3636
@include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
3737
}
3838

39-
&:after{
39+
&::after{
4040
display: inline-block;
4141
position: absolute;
4242
width: 16px;
@@ -54,23 +54,23 @@
5454
input[type=checkbox]{
5555
display: none;
5656

57-
&:checked + label:after{
57+
&:checked + label::after{
5858
font-family: 'FontAwesome';
5959
content: $fa-var-check;
6060
}
6161

6262
&:disabled + label{
6363
opacity: 0.65;
6464

65-
&:before{
65+
&::before{
6666
background-color: $gray-lighter;
6767
cursor: not-allowed;
6868
}
6969
}
7070

7171
}
7272

73-
&.checkbox-circle label:before{
73+
&.checkbox-circle label::before{
7474
border-radius: 50%;
7575
}
7676
}
@@ -88,15 +88,15 @@
8888
@mixin radio-variant($parent, $color) {
8989
#{$parent} input[type=radio]{
9090
& + label{
91-
&:after{
91+
&::after{
9292
background-color: $color;
9393
}
9494
}
9595
&:checked + label{
96-
&:before {
96+
&::before {
9797
border-color: $color;
9898
}
99-
&:after{
99+
&::after{
100100
background-color: $color;
101101
}
102102
}
@@ -110,7 +110,7 @@
110110
position: relative;
111111
padding-left: 5px;
112112

113-
&:before{
113+
&::before{
114114
content: "";
115115
display: inline-block;
116116
position: absolute;
@@ -124,7 +124,7 @@
124124
@include transition(border 0.15s ease-in-out);
125125
}
126126

127-
&:after{
127+
&::after{
128128
display: inline-block;
129129
position: absolute;
130130
content: " ";
@@ -145,14 +145,14 @@
145145
input[type=radio]{
146146
display: none;
147147

148-
&:checked + label:after{
148+
&:checked + label::after{
149149
@include scale(1, 1);
150150
}
151151

152152
&:disabled + label{
153153
opacity: 0.65;
154154

155-
&:before{
155+
&::before{
156156
cursor: not-allowed;
157157
}
158158
}

0 commit comments

Comments
 (0)