@@ -26,14 +26,19 @@ body {
26
26
}
27
27
28
28
h2 {
29
+ margin-top : 2rem ;
29
30
font-size : x-large;
30
- padding-top : 2rem ;
31
- margin-bottom : .8rem
32
31
}
33
32
34
33
h3 {
35
34
font-family : Arial, sans-serif;
36
- font-size : large
35
+ font-size : large;
36
+ }
37
+
38
+ h4 {
39
+ font-family : Arial, sans-serif;
40
+ font-size : medium;
41
+ font-weight : bold;
37
42
}
38
43
39
44
button .button-primary {
@@ -129,4 +134,131 @@ input, select {
129
134
.tooltip : hover .tooltiptext {
130
135
visibility : visible;
131
136
opacity : 1 ;
137
+ }
138
+
139
+ div .note {
140
+ background-color : # 00316600 ;
141
+ border-left : solid 4px # ff881a ;
142
+ line-height : 18px ;
143
+ overflow : hidden;
144
+ padding : 12px ;
145
+ margin-bottom : 1.1rem
146
+ }
147
+
148
+ @supports (-webkit-appearance : none) or (-moz-appearance : none) {
149
+ .checkbox-wrapper-14 input [type = checkbox ] {
150
+ --active : # ff9734 ;
151
+ --active-inner : # fff ;
152
+ --focus : 0px rgb (255 , 169 , 88 );
153
+ --border : # ffffff ;
154
+ --border-hover : # ff9734 ;
155
+ --background : # fffff ;
156
+ --disabled : # F6F8FF ;
157
+ --disabled-inner : # E1E6F9 ;
158
+ -webkit-appearance : none;
159
+ -moz-appearance : none;
160
+ height : 21px ;
161
+ outline : none;
162
+ display : inline-block;
163
+ vertical-align : top;
164
+ position : relative;
165
+ cursor : pointer;
166
+ border : 1px solid var (--bc , var (--border ));
167
+ background : var (--b , var (--background ));
168
+ transition : background 0.3s , border-color 0.3s , box-shadow 0.2s ;
169
+ }
170
+ .checkbox-wrapper-14 input [type = checkbox ]: after {
171
+ content : "" ;
172
+ display : block;
173
+ left : 0 ;
174
+ top : 0 ;
175
+ position : absolute;
176
+ transition : transform var (--d-t , 0.3s ) var (--d-t-e , ease), opacity var (--d-o , 0.2s );
177
+ }
178
+ .checkbox-wrapper-14 input [type = checkbox ]: checked {
179
+ --b : var (--active );
180
+ --bc : var (--active );
181
+ --d-o : .3s ;
182
+ --d-t : .6s ;
183
+ --d-t-e : cubic-bezier (.2 , .85 , .32 , 1.2 );
184
+ }
185
+ .checkbox-wrapper-14 input [type = checkbox ]: disabled {
186
+ --b : var (--disabled );
187
+ cursor : not-allowed;
188
+ opacity : 0.9 ;
189
+ }
190
+ .checkbox-wrapper-14 input [type = checkbox ]: disabled : checked {
191
+ --b : var (--disabled-inner );
192
+ --bc : var (--border );
193
+ }
194
+ .checkbox-wrapper-14 input [type = checkbox ]: disabled + label {
195
+ cursor : not-allowed;
196
+ }
197
+ .checkbox-wrapper-14 input [type = checkbox ]: hover : not (: checked ): not (: disabled ) {
198
+ --bc : var (--border-hover );
199
+ }
200
+ .checkbox-wrapper-14 input [type = checkbox ]: focus {
201
+ --bc : var (--active );
202
+ }
203
+ .checkbox-wrapper-14 input [type = checkbox ]: not (.switch ) {
204
+ width : 21px ;
205
+ }
206
+ .checkbox-wrapper-14 input [type = checkbox ]: not (.switch ): after {
207
+ opacity : var (--o , 0 );
208
+ }
209
+ .checkbox-wrapper-14 input [type = checkbox ]: not (.switch ): checked {
210
+ --o : 1 ;
211
+ }
212
+ .checkbox-wrapper-14 input [type = checkbox ] + label {
213
+ display : inline-block;
214
+ vertical-align : middle;
215
+ cursor : pointer;
216
+ margin-left : 4px ;
217
+ }
218
+
219
+ .checkbox-wrapper-14 input [type = checkbox ]: not (.switch ) {
220
+ border-radius : 7px ;
221
+ }
222
+ .checkbox-wrapper-14 input [type = checkbox ]: not (.switch ): after {
223
+ width : 5px ;
224
+ height : 9px ;
225
+ border : 2px solid var (--active-inner );
226
+ border-top : 0 ;
227
+ border-left : 0 ;
228
+ left : 7px ;
229
+ top : 4px ;
230
+ transform : rotate (var (--r , 20deg ));
231
+ }
232
+ .checkbox-wrapper-14 input [type = checkbox ]: not (.switch ): checked {
233
+ --r : 43deg ;
234
+ }
235
+ .checkbox-wrapper-14 input [type = checkbox ].switch {
236
+ width : 38px ;
237
+ border-radius : 5px ;
238
+ }
239
+ .checkbox-wrapper-14 input [type = checkbox ].switch : after {
240
+ left : 2px ;
241
+ top : 2px ;
242
+ border-radius : 20% ;
243
+ width : 17px ;
244
+ height : 17px ;
245
+ background : var (--ab , var (--border ));
246
+ transform : translateX (var (--x , 0 ));
247
+ }
248
+ .checkbox-wrapper-14 input [type = checkbox ].switch : checked {
249
+ --ab : var (--active-inner );
250
+ --x : 17px ;
251
+ }
252
+ .checkbox-wrapper-14 input [type = checkbox ].switch : disabled : not (: checked ): after {
253
+ opacity : 0.6 ;
254
+ }
255
+ }
256
+
257
+ .checkbox-wrapper-14 * {
258
+ margin-top : 0.1rem ;
259
+ box-sizing : inherit;
260
+ }
261
+ .checkbox-wrapper-14 * : before ,
262
+ .checkbox-wrapper-14 * : after {
263
+ box-sizing : inherit;
132
264
}
0 commit comments