Skip to content

Commit 41e85cb

Browse files
DimaSavchenkoDimaSavchenko
committed
Add "abc-" prefix into all styles
1 parent 60759c6 commit 41e85cb

File tree

4 files changed

+339
-333
lines changed

4 files changed

+339
-333
lines changed

‎awesome-bootstrap-checkbox.css

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
.checkbox {
1+
.abc-checkbox {
22
padding-left: 20px;
33
}
4-
.checkbox label {
4+
.abc-checkbox label {
55
display: inline-block;
66
vertical-align: middle;
77
position: relative;
88
padding-left: 5px;
99
}
10-
.checkbox label::before {
10+
.abc-checkbox label::before {
1111
content: "";
1212
display: inline-block;
1313
position: absolute;
@@ -22,7 +22,7 @@
2222
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2323
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2424
}
25-
.checkbox label::after {
25+
.abc-checkbox label::after {
2626
display: inline-block;
2727
position: absolute;
2828
width: 16px;
@@ -35,98 +35,98 @@
3535
font-size: 11px;
3636
color: #555555;
3737
}
38-
.checkbox input[type="checkbox"],
39-
.checkbox input[type="radio"] {
38+
.abc-checkbox input[type="checkbox"],
39+
.abc-checkbox input[type="radio"] {
4040
opacity: 0;
4141
z-index: 1;
4242
}
43-
.checkbox input[type="checkbox"]:focus + label::before,
44-
.checkbox input[type="radio"]:focus + label::before {
43+
.abc-checkbox input[type="checkbox"]:focus + label::before,
44+
.abc-checkbox input[type="radio"]:focus + label::before {
4545
outline: thin dotted;
4646
outline: 5px auto -webkit-focus-ring-color;
4747
outline-offset: -2px;
4848
}
49-
.checkbox input[type="checkbox"]:checked + label::after,
50-
.checkbox input[type="radio"]:checked + label::after {
49+
.abc-checkbox input[type="checkbox"]:checked + label::after,
50+
.abc-checkbox input[type="radio"]:checked + label::after {
5151
font-family: "FontAwesome";
5252
content: "\f00c";
5353
}
54-
.checkbox input[type="checkbox"]:disabled + label,
55-
.checkbox input[type="radio"]:disabled + label {
54+
.abc-checkbox input[type="checkbox"]:disabled + label,
55+
.abc-checkbox input[type="radio"]:disabled + label {
5656
opacity: 0.65;
5757
}
58-
.checkbox input[type="checkbox"]:disabled + label::before,
59-
.checkbox input[type="radio"]:disabled + label::before {
58+
.abc-checkbox input[type="checkbox"]:disabled + label::before,
59+
.abc-checkbox input[type="radio"]:disabled + label::before {
6060
background-color: #eeeeee;
6161
cursor: not-allowed;
6262
}
63-
.checkbox.checkbox-circle label::before {
63+
.abc-checkbox.abc-checkbox-circle label::before {
6464
border-radius: 50%;
6565
}
66-
.checkbox.checkbox-inline {
66+
.abc-checkbox.abc-checkbox-inline {
6767
margin-top: 0;
6868
}
6969

70-
.checkbox-primary input[type="checkbox"]:checked + label::before,
71-
.checkbox-primary input[type="radio"]:checked + label::before {
70+
.abc-checkbox-primary input[type="checkbox"]:checked + label::before,
71+
.abc-checkbox-primary input[type="radio"]:checked + label::before {
7272
background-color: #337ab7;
7373
border-color: #337ab7;
7474
}
75-
.checkbox-primary input[type="checkbox"]:checked + label::after,
76-
.checkbox-primary input[type="radio"]:checked + label::after {
75+
.abc-checkbox-primary input[type="checkbox"]:checked + label::after,
76+
.abc-checkbox-primary input[type="radio"]:checked + label::after {
7777
color: #fff;
7878
}
7979

80-
.checkbox-danger input[type="checkbox"]:checked + label::before,
81-
.checkbox-danger input[type="radio"]:checked + label::before {
80+
.abc-checkbox-danger input[type="checkbox"]:checked + label::before,
81+
.abc-checkbox-danger input[type="radio"]:checked + label::before {
8282
background-color: #d9534f;
8383
border-color: #d9534f;
8484
}
85-
.checkbox-danger input[type="checkbox"]:checked + label::after,
86-
.checkbox-danger input[type="radio"]:checked + label::after {
85+
.abc-checkbox-danger input[type="checkbox"]:checked + label::after,
86+
.abc-checkbox-danger input[type="radio"]:checked + label::after {
8787
color: #fff;
8888
}
8989

90-
.checkbox-info input[type="checkbox"]:checked + label::before,
91-
.checkbox-info input[type="radio"]:checked + label::before {
90+
.abc-checkbox-info input[type="checkbox"]:checked + label::before,
91+
.abc-checkbox-info input[type="radio"]:checked + label::before {
9292
background-color: #5bc0de;
9393
border-color: #5bc0de;
9494
}
95-
.checkbox-info input[type="checkbox"]:checked + label::after,
96-
.checkbox-info input[type="radio"]:checked + label::after {
95+
.abc-checkbox-info input[type="checkbox"]:checked + label::after,
96+
.abc-checkbox-info input[type="radio"]:checked + label::after {
9797
color: #fff;
9898
}
9999

100-
.checkbox-warning input[type="checkbox"]:checked + label::before,
101-
.checkbox-warning input[type="radio"]:checked + label::before {
100+
.abc-checkbox-warning input[type="checkbox"]:checked + label::before,
101+
.abc-checkbox-warning input[type="radio"]:checked + label::before {
102102
background-color: #f0ad4e;
103103
border-color: #f0ad4e;
104104
}
105-
.checkbox-warning input[type="checkbox"]:checked + label::after,
106-
.checkbox-warning input[type="radio"]:checked + label::after {
105+
.abc-checkbox-warning input[type="checkbox"]:checked + label::after,
106+
.abc-checkbox-warning input[type="radio"]:checked + label::after {
107107
color: #fff;
108108
}
109109

110-
.checkbox-success input[type="checkbox"]:checked + label::before,
111-
.checkbox-success input[type="radio"]:checked + label::before {
110+
.abc-checkbox-success input[type="checkbox"]:checked + label::before,
111+
.abc-checkbox-success input[type="radio"]:checked + label::before {
112112
background-color: #5cb85c;
113113
border-color: #5cb85c;
114114
}
115-
.checkbox-success input[type="checkbox"]:checked + label::after,
116-
.checkbox-success input[type="radio"]:checked + label::after {
115+
.abc-checkbox-success input[type="checkbox"]:checked + label::after,
116+
.abc-checkbox-success input[type="radio"]:checked + label::after {
117117
color: #fff;
118118
}
119119

120-
.radio {
120+
.abc-radio {
121121
padding-left: 20px;
122122
}
123-
.radio label {
123+
.abc-radio label {
124124
display: inline-block;
125125
vertical-align: middle;
126126
position: relative;
127127
padding-left: 5px;
128128
}
129-
.radio label::before {
129+
.abc-radio label::before {
130130
content: "";
131131
display: inline-block;
132132
position: absolute;
@@ -141,7 +141,7 @@
141141
-o-transition: border 0.15s ease-in-out;
142142
transition: border 0.15s ease-in-out;
143143
}
144-
.radio label::after {
144+
.abc-radio label::after {
145145
display: inline-block;
146146
position: absolute;
147147
content: " ";
@@ -161,78 +161,78 @@
161161
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
162162
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
163163
}
164-
.radio input[type="radio"] {
164+
.abc-radio input[type="radio"] {
165165
opacity: 0;
166166
z-index: 1;
167167
}
168-
.radio input[type="radio"]:focus + label::before {
168+
.abc-radio input[type="radio"]:focus + label::before {
169169
outline: thin dotted;
170170
outline: 5px auto -webkit-focus-ring-color;
171171
outline-offset: -2px;
172172
}
173-
.radio input[type="radio"]:checked + label::after {
173+
.abc-radio input[type="radio"]:checked + label::after {
174174
-webkit-transform: scale(1, 1);
175175
-ms-transform: scale(1, 1);
176176
-o-transform: scale(1, 1);
177177
transform: scale(1, 1);
178178
}
179-
.radio input[type="radio"]:disabled + label {
179+
.abc-radio input[type="radio"]:disabled + label {
180180
opacity: 0.65;
181181
}
182-
.radio input[type="radio"]:disabled + label::before {
182+
.abc-radio input[type="radio"]:disabled + label::before {
183183
cursor: not-allowed;
184184
}
185-
.radio.radio-inline {
185+
.abc-radio.radio-inline {
186186
margin-top: 0;
187187
}
188188

189-
.radio-primary input[type="radio"] + label::after {
189+
.abc-radio-primary input[type="radio"] + label::after {
190190
background-color: #337ab7;
191191
}
192-
.radio-primary input[type="radio"]:checked + label::before {
192+
.abc-radio-primary input[type="radio"]:checked + label::before {
193193
border-color: #337ab7;
194194
}
195-
.radio-primary input[type="radio"]:checked + label::after {
195+
.abc-radio-primary input[type="radio"]:checked + label::after {
196196
background-color: #337ab7;
197197
}
198198

199-
.radio-danger input[type="radio"] + label::after {
199+
.abc-radio-danger input[type="radio"] + label::after {
200200
background-color: #d9534f;
201201
}
202-
.radio-danger input[type="radio"]:checked + label::before {
202+
.abc-radio-danger input[type="radio"]:checked + label::before {
203203
border-color: #d9534f;
204204
}
205-
.radio-danger input[type="radio"]:checked + label::after {
205+
.abc-radio-danger input[type="radio"]:checked + label::after {
206206
background-color: #d9534f;
207207
}
208208

209-
.radio-info input[type="radio"] + label::after {
209+
.abc-radio-info input[type="radio"] + label::after {
210210
background-color: #5bc0de;
211211
}
212-
.radio-info input[type="radio"]:checked + label::before {
212+
.abc-radio-info input[type="radio"]:checked + label::before {
213213
border-color: #5bc0de;
214214
}
215-
.radio-info input[type="radio"]:checked + label::after {
215+
.abc-radio-info input[type="radio"]:checked + label::after {
216216
background-color: #5bc0de;
217217
}
218218

219-
.radio-warning input[type="radio"] + label::after {
219+
.abc-radio-warning input[type="radio"] + label::after {
220220
background-color: #f0ad4e;
221221
}
222-
.radio-warning input[type="radio"]:checked + label::before {
222+
.abc-radio-warning input[type="radio"]:checked + label::before {
223223
border-color: #f0ad4e;
224224
}
225-
.radio-warning input[type="radio"]:checked + label::after {
225+
.abc-radio-warning input[type="radio"]:checked + label::after {
226226
background-color: #f0ad4e;
227227
}
228228

229-
.radio-success input[type="radio"] + label::after {
229+
.abc-radio-success input[type="radio"] + label::after {
230230
background-color: #5cb85c;
231231
}
232-
.radio-success input[type="radio"]:checked + label::before {
232+
.abc-radio-success input[type="radio"]:checked + label::before {
233233
border-color: #5cb85c;
234234
}
235-
.radio-success input[type="radio"]:checked + label::after {
235+
.abc-radio-success input[type="radio"]:checked + label::after {
236236
background-color: #5cb85c;
237237
}
238238

‎awesome-bootstrap-checkbox.scss

Lines changed: 13 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,3 @@
1-
//
2-
// Mixins
3-
// --------------------------------------------------
4-
5-
6-
@mixin scale($ratio...) {
7-
-webkit-transform: scale($ratio);
8-
-ms-transform: scale($ratio); // IE9 only
9-
-o-transform: scale($ratio);
10-
transform: scale($ratio);
11-
}
12-
13-
@mixin transition-transform($transition...) {
14-
-webkit-transition: -webkit-transform $transition;
15-
-moz-transition: -moz-transform $transition;
16-
-o-transition: -o-transform $transition;
17-
transition: transform $transition;
18-
}
19-
20-
@mixin transition($transition...) {
21-
-webkit-transition: $transition;
22-
-o-transition: $transition;
23-
transition: $transition;
24-
}
25-
261

272
//
283
// Checkboxes
@@ -47,7 +22,7 @@ $check-icon: $fa-var-check !default;
4722
}
4823

4924

50-
.checkbox{
25+
.abc-checkbox{
5126
padding-left: 20px;
5227

5328
label{
@@ -110,7 +85,7 @@ $check-icon: $fa-var-check !default;
11085

11186
}
11287

113-
&.checkbox-circle label::before{
88+
&.abc-checkbox-circle label::before{
11489
border-radius: 50%;
11590
}
11691

@@ -119,11 +94,11 @@ $check-icon: $fa-var-check !default;
11994
}
12095
}
12196

122-
@include checkbox-variant('.checkbox-primary', $brand-primary);
123-
@include checkbox-variant('.checkbox-danger', $brand-danger);
124-
@include checkbox-variant('.checkbox-info', $brand-info);
125-
@include checkbox-variant('.checkbox-warning', $brand-warning);
126-
@include checkbox-variant('.checkbox-success', $brand-success);
97+
@include checkbox-variant('.abc-checkbox-primary', $brand-primary);
98+
@include checkbox-variant('.abc-checkbox-danger', $brand-danger);
99+
@include checkbox-variant('.abc-checkbox-info', $brand-info);
100+
@include checkbox-variant('.abc-checkbox-warning', $brand-warning);
101+
@include checkbox-variant('.abc-checkbox-success', $brand-success);
127102

128103
//
129104
// Radios
@@ -147,7 +122,7 @@ $check-icon: $fa-var-check !default;
147122
}
148123
}
149124

150-
.radio{
125+
.abc-radio{
151126
padding-left: 20px;
152127

153128
label{
@@ -215,11 +190,11 @@ $check-icon: $fa-var-check !default;
215190
}
216191
}
217192

218-
@include radio-variant('.radio-primary', $brand-primary);
219-
@include radio-variant('.radio-danger', $brand-danger);
220-
@include radio-variant('.radio-info', $brand-info);
221-
@include radio-variant('.radio-warning', $brand-warning);
222-
@include radio-variant('.radio-success', $brand-success);
193+
@include radio-variant('.abc-radio-primary', $brand-primary);
194+
@include radio-variant('.abc-radio-danger', $brand-danger);
195+
@include radio-variant('.abc-radio-info', $brand-info);
196+
@include radio-variant('.abc-radio-warning', $brand-warning);
197+
@include radio-variant('.abc-radio-success', $brand-success);
223198

224199

225200
input[type="checkbox"],

0 commit comments

Comments
 (0)