|
1 | 1 | .checkbox {
|
2 |
| - padding-left: 20px; } |
| 2 | + padding-left: 20px; |
| 3 | +} |
3 | 4 | .checkbox label {
|
4 |
| - display: inline-block; |
5 |
| - vertical-align: middle; |
6 |
| - position: relative; |
7 |
| - padding-left: 5px; } |
| 5 | + display: inline-block; |
| 6 | + vertical-align: middle; |
| 7 | + position: relative; |
| 8 | + padding-left: 5px; |
| 9 | +} |
8 | 10 | .checkbox label::before {
|
9 |
| - content: ""; |
10 |
| - display: inline-block; |
11 |
| - position: absolute; |
12 |
| - width: 17px; |
13 |
| - height: 17px; |
14 |
| - left: 0; |
15 |
| - margin-left: -20px; |
16 |
| - border: 1px solid #cccccc; |
17 |
| - border-radius: 3px; |
18 |
| - background-color: #fff; |
19 |
| - -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; |
20 |
| - -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; |
21 |
| - transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } |
| 11 | + content: ""; |
| 12 | + display: inline-block; |
| 13 | + position: absolute; |
| 14 | + width: 17px; |
| 15 | + height: 17px; |
| 16 | + left: 0; |
| 17 | + margin-left: -20px; |
| 18 | + border: 1px solid #cccccc; |
| 19 | + border-radius: 3px; |
| 20 | + background-color: #fff; |
| 21 | + -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; |
| 22 | + -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; |
| 23 | + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; |
| 24 | +} |
22 | 25 | .checkbox label::after {
|
23 |
| - display: inline-block; |
24 |
| - position: absolute; |
25 |
| - width: 16px; |
26 |
| - height: 16px; |
27 |
| - left: 0; |
28 |
| - top: 0; |
29 |
| - margin-left: -20px; |
30 |
| - padding-left: 3px; |
31 |
| - padding-top: 1px; |
32 |
| - font-size: 11px; |
33 |
| - color: #555555; } |
| 26 | + display: inline-block; |
| 27 | + position: absolute; |
| 28 | + width: 16px; |
| 29 | + height: 16px; |
| 30 | + left: 0; |
| 31 | + top: 0; |
| 32 | + margin-left: -20px; |
| 33 | + padding-left: 3px; |
| 34 | + padding-top: 1px; |
| 35 | + font-size: 11px; |
| 36 | + color: #555555; |
| 37 | +} |
34 | 38 | .checkbox input[type="checkbox"] {
|
35 |
| - opacity: 0; |
36 |
| - z-index: 1; } |
| 39 | + opacity: 0; |
| 40 | + z-index: 1; |
| 41 | +} |
37 | 42 | .checkbox input[type="checkbox"]:focus + label::before {
|
38 |
| - outline: thin dotted; |
39 |
| - outline: 5px auto -webkit-focus-ring-color; |
40 |
| - outline-offset: -2px; } |
| 43 | + outline: thin dotted; |
| 44 | + outline: 5px auto -webkit-focus-ring-color; |
| 45 | + outline-offset: -2px; |
| 46 | +} |
41 | 47 | .checkbox input[type="checkbox"]:checked + label::after {
|
42 |
| - font-family: 'FontAwesome'; |
43 |
| - content: "\f00c"; } |
| 48 | + font-family: 'FontAwesome'; |
| 49 | + content: "\f00c"; |
| 50 | +} |
44 | 51 | .checkbox input[type="checkbox"]:disabled + label {
|
45 |
| - opacity: 0.65; } |
| 52 | + opacity: 0.65; |
| 53 | +} |
46 | 54 | .checkbox input[type="checkbox"]:disabled + label::before {
|
47 |
| - background-color: #eeeeee; |
48 |
| - cursor: not-allowed; } |
| 55 | + background-color: #eeeeee; |
| 56 | + cursor: not-allowed; |
| 57 | +} |
49 | 58 | .checkbox.checkbox-circle label::before {
|
50 |
| - border-radius: 50%; } |
| 59 | + border-radius: 50%; |
| 60 | +} |
51 | 61 | .checkbox.checkbox-inline {
|
52 |
| - margin-top: 0; } |
53 |
| - |
| 62 | + margin-top: 0; |
| 63 | +} |
54 | 64 | .checkbox-primary input[type="checkbox"]:checked + label::before {
|
55 |
| - background-color: #428bca; |
56 |
| - border-color: #428bca; } |
| 65 | + background-color: #337ab7; |
| 66 | + border-color: #337ab7; |
| 67 | +} |
57 | 68 | .checkbox-primary input[type="checkbox"]:checked + label::after {
|
58 |
| - color: #fff; } |
59 |
| - |
| 69 | + color: #fff; |
| 70 | +} |
60 | 71 | .checkbox-danger input[type="checkbox"]:checked + label::before {
|
61 |
| - background-color: #d9534f; |
62 |
| - border-color: #d9534f; } |
| 72 | + background-color: #d9534f; |
| 73 | + border-color: #d9534f; |
| 74 | +} |
63 | 75 | .checkbox-danger input[type="checkbox"]:checked + label::after {
|
64 |
| - color: #fff; } |
65 |
| - |
| 76 | + color: #fff; |
| 77 | +} |
66 | 78 | .checkbox-info input[type="checkbox"]:checked + label::before {
|
67 |
| - background-color: #5bc0de; |
68 |
| - border-color: #5bc0de; } |
| 79 | + background-color: #5bc0de; |
| 80 | + border-color: #5bc0de; |
| 81 | +} |
69 | 82 | .checkbox-info input[type="checkbox"]:checked + label::after {
|
70 |
| - color: #fff; } |
71 |
| - |
| 83 | + color: #fff; |
| 84 | +} |
72 | 85 | .checkbox-warning input[type="checkbox"]:checked + label::before {
|
73 |
| - background-color: #f0ad4e; |
74 |
| - border-color: #f0ad4e; } |
| 86 | + background-color: #f0ad4e; |
| 87 | + border-color: #f0ad4e; |
| 88 | +} |
75 | 89 | .checkbox-warning input[type="checkbox"]:checked + label::after {
|
76 |
| - color: #fff; } |
77 |
| - |
| 90 | + color: #fff; |
| 91 | +} |
78 | 92 | .checkbox-success input[type="checkbox"]:checked + label::before {
|
79 |
| - background-color: #5cb85c; |
80 |
| - border-color: #5cb85c; } |
| 93 | + background-color: #5cb85c; |
| 94 | + border-color: #5cb85c; |
| 95 | +} |
81 | 96 | .checkbox-success input[type="checkbox"]:checked + label::after {
|
82 |
| - color: #fff; } |
83 |
| - |
| 97 | + color: #fff; |
| 98 | +} |
84 | 99 | .radio {
|
85 |
| - padding-left: 20px; } |
| 100 | + padding-left: 20px; |
| 101 | +} |
86 | 102 | .radio label {
|
87 |
| - display: inline-block; |
88 |
| - vertical-align: middle; |
89 |
| - position: relative; |
90 |
| - padding-left: 5px; } |
| 103 | + display: inline-block; |
| 104 | + vertical-align: middle; |
| 105 | + position: relative; |
| 106 | + padding-left: 5px; |
| 107 | +} |
91 | 108 | .radio label::before {
|
92 |
| - content: ""; |
93 |
| - display: inline-block; |
94 |
| - position: absolute; |
95 |
| - width: 17px; |
96 |
| - height: 17px; |
97 |
| - left: 0; |
98 |
| - margin-left: -20px; |
99 |
| - border: 1px solid #cccccc; |
100 |
| - border-radius: 50%; |
101 |
| - background-color: #fff; |
102 |
| - -webkit-transition: border 0.15s ease-in-out; |
103 |
| - -o-transition: border 0.15s ease-in-out; |
104 |
| - transition: border 0.15s ease-in-out; } |
| 109 | + content: ""; |
| 110 | + display: inline-block; |
| 111 | + position: absolute; |
| 112 | + width: 17px; |
| 113 | + height: 17px; |
| 114 | + left: 0; |
| 115 | + margin-left: -20px; |
| 116 | + border: 1px solid #cccccc; |
| 117 | + border-radius: 50%; |
| 118 | + background-color: #fff; |
| 119 | + -webkit-transition: border 0.15s ease-in-out; |
| 120 | + -o-transition: border 0.15s ease-in-out; |
| 121 | + transition: border 0.15s ease-in-out; |
| 122 | +} |
105 | 123 | .radio label::after {
|
106 |
| - display: inline-block; |
107 |
| - position: absolute; |
108 |
| - content: " "; |
109 |
| - width: 11px; |
110 |
| - height: 11px; |
111 |
| - left: 3px; |
112 |
| - top: 3px; |
113 |
| - margin-left: -20px; |
114 |
| - border-radius: 50%; |
115 |
| - background-color: #555555; |
116 |
| - -webkit-transform: scale(0, 0); |
117 |
| - -ms-transform: scale(0, 0); |
118 |
| - -o-transform: scale(0, 0); |
119 |
| - transform: scale(0, 0); |
120 |
| - -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); |
121 |
| - -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); |
122 |
| - -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); |
123 |
| - transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); } |
| 124 | + display: inline-block; |
| 125 | + position: absolute; |
| 126 | + content: " "; |
| 127 | + width: 11px; |
| 128 | + height: 11px; |
| 129 | + left: 3px; |
| 130 | + top: 3px; |
| 131 | + margin-left: -20px; |
| 132 | + border-radius: 50%; |
| 133 | + background-color: #555555; |
| 134 | + -webkit-transform: scale(0, 0); |
| 135 | + -ms-transform: scale(0, 0); |
| 136 | + -o-transform: scale(0, 0); |
| 137 | + transform: scale(0, 0); |
| 138 | + -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); |
| 139 | + -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); |
| 140 | + -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); |
| 141 | + transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); |
| 142 | +} |
124 | 143 | .radio input[type="radio"] {
|
125 |
| - opacity: 0; |
126 |
| - z-index: 1; } |
| 144 | + opacity: 0; |
| 145 | + z-index: 1; |
| 146 | +} |
127 | 147 | .radio input[type="radio"]:focus + label::before {
|
128 |
| - outline: thin dotted; |
129 |
| - outline: 5px auto -webkit-focus-ring-color; |
130 |
| - outline-offset: -2px; } |
| 148 | + outline: thin dotted; |
| 149 | + outline: 5px auto -webkit-focus-ring-color; |
| 150 | + outline-offset: -2px; |
| 151 | +} |
131 | 152 | .radio input[type="radio"]:checked + label::after {
|
132 |
| - -webkit-transform: scale(1, 1); |
133 |
| - -ms-transform: scale(1, 1); |
134 |
| - -o-transform: scale(1, 1); |
135 |
| - transform: scale(1, 1); } |
| 153 | + -webkit-transform: scale(1, 1); |
| 154 | + -ms-transform: scale(1, 1); |
| 155 | + -o-transform: scale(1, 1); |
| 156 | + transform: scale(1, 1); |
| 157 | +} |
136 | 158 | .radio input[type="radio"]:disabled + label {
|
137 |
| - opacity: 0.65; } |
| 159 | + opacity: 0.65; |
| 160 | +} |
138 | 161 | .radio input[type="radio"]:disabled + label::before {
|
139 |
| - cursor: not-allowed; } |
| 162 | + cursor: not-allowed; |
| 163 | +} |
140 | 164 | .radio.radio-inline {
|
141 |
| - margin-top: 0; } |
142 |
| - |
| 165 | + margin-top: 0; |
| 166 | +} |
143 | 167 | .radio-primary input[type="radio"] + label::after {
|
144 |
| - background-color: #428bca; } |
| 168 | + background-color: #337ab7; |
| 169 | +} |
145 | 170 | .radio-primary input[type="radio"]:checked + label::before {
|
146 |
| - border-color: #428bca; } |
| 171 | + border-color: #337ab7; |
| 172 | +} |
147 | 173 | .radio-primary input[type="radio"]:checked + label::after {
|
148 |
| - background-color: #428bca; } |
149 |
| - |
| 174 | + background-color: #337ab7; |
| 175 | +} |
150 | 176 | .radio-danger input[type="radio"] + label::after {
|
151 |
| - background-color: #d9534f; } |
| 177 | + background-color: #d9534f; |
| 178 | +} |
152 | 179 | .radio-danger input[type="radio"]:checked + label::before {
|
153 |
| - border-color: #d9534f; } |
| 180 | + border-color: #d9534f; |
| 181 | +} |
154 | 182 | .radio-danger input[type="radio"]:checked + label::after {
|
155 |
| - background-color: #d9534f; } |
156 |
| - |
| 183 | + background-color: #d9534f; |
| 184 | +} |
157 | 185 | .radio-info input[type="radio"] + label::after {
|
158 |
| - background-color: #5bc0de; } |
| 186 | + background-color: #5bc0de; |
| 187 | +} |
159 | 188 | .radio-info input[type="radio"]:checked + label::before {
|
160 |
| - border-color: #5bc0de; } |
| 189 | + border-color: #5bc0de; |
| 190 | +} |
161 | 191 | .radio-info input[type="radio"]:checked + label::after {
|
162 |
| - background-color: #5bc0de; } |
163 |
| - |
| 192 | + background-color: #5bc0de; |
| 193 | +} |
164 | 194 | .radio-warning input[type="radio"] + label::after {
|
165 |
| - background-color: #f0ad4e; } |
| 195 | + background-color: #f0ad4e; |
| 196 | +} |
166 | 197 | .radio-warning input[type="radio"]:checked + label::before {
|
167 |
| - border-color: #f0ad4e; } |
| 198 | + border-color: #f0ad4e; |
| 199 | +} |
168 | 200 | .radio-warning input[type="radio"]:checked + label::after {
|
169 |
| - background-color: #f0ad4e; } |
170 |
| - |
| 201 | + background-color: #f0ad4e; |
| 202 | +} |
171 | 203 | .radio-success input[type="radio"] + label::after {
|
172 |
| - background-color: #5cb85c; } |
| 204 | + background-color: #5cb85c; |
| 205 | +} |
173 | 206 | .radio-success input[type="radio"]:checked + label::before {
|
174 |
| - border-color: #5cb85c; } |
| 207 | + border-color: #5cb85c; |
| 208 | +} |
175 | 209 | .radio-success input[type="radio"]:checked + label::after {
|
176 |
| - background-color: #5cb85c; } |
| 210 | + background-color: #5cb85c; |
| 211 | +} |
| 212 | +input[type="checkbox"].styled:checked + label:after { |
| 213 | + font-family: 'FontAwesome'; |
| 214 | + content: "\f00c"; |
| 215 | +} |
| 216 | +input[type="checkbox"] .styled:checked + label::before { |
| 217 | + color: #fff; |
| 218 | +} |
| 219 | +input[type="checkbox"] .styled:checked + label::after { |
| 220 | + color: #fff; |
| 221 | +} |
0 commit comments