@clayui/css 3.40.1 → 3.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/lib/css/atlas.css +232 -164
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +196 -98
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +215 -152
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/package.json +2 -2
  9. package/src/scss/atlas/variables/_forms.scss +33 -1
  10. package/src/scss/atlas/variables/_globals.scss +13 -0
  11. package/src/scss/cadmin/components/_form-validation.scss +10 -237
  12. package/src/scss/cadmin/components/_reboot.scss +1 -8
  13. package/src/scss/cadmin/components/_toggle-switch.scss +20 -358
  14. package/src/scss/cadmin/variables/_forms.scss +353 -2
  15. package/src/scss/cadmin/variables/_globals.scss +14 -0
  16. package/src/scss/cadmin/variables/_toggle-switch.scss +404 -1
  17. package/src/scss/components/_form-validation.scss +8 -237
  18. package/src/scss/components/_reboot.scss +1 -8
  19. package/src/scss/components/_toggle-switch.scss +36 -351
  20. package/src/scss/functions/_global-functions.scss +18 -0
  21. package/src/scss/mixins/_forms.scss +419 -4
  22. package/src/scss/mixins/_globals.scss +7 -0
  23. package/src/scss/mixins/_links.scss +248 -63
  24. package/src/scss/mixins/_toggle-switch.scss +1076 -14
  25. package/src/scss/variables/_forms.scss +295 -1
  26. package/src/scss/variables/_globals.scss +13 -0
  27. package/src/scss/variables/_toggle-switch.scss +404 -5
package/src/scss/variables/_toggle-switch.scss CHANGED
@@ -6,14 +6,14 @@ $toggle-switch-transition: background-color 100ms ease-in,
6
6
 
7
7
  // must all be same units--start
8
8
  $toggle-switch-bar-padding: 0 !default; // space between button and bar, can be negative value
9
- $toggle-switch-bar-padding-mobile: $toggle-switch-bar-padding !default;
10
9
  $toggle-switch-button-width: 25px !default;
11
- $toggle-switch-button-width-mobile: $toggle-switch-button-width !default;
12
-
13
10
  $toggle-switch-bar-height: ($toggle-switch-bar-padding * 2) +
14
11
  $toggle-switch-button-width !default;
15
- $toggle-switch-bar-height-mobile: $toggle-switch-bar-height !default;
16
12
  $toggle-switch-bar-width: 50px !default; // width of switch bar
13
+
14
+ $toggle-switch-bar-padding-mobile: $toggle-switch-bar-padding !default;
15
+ $toggle-switch-button-width-mobile: $toggle-switch-button-width !default;
16
+ $toggle-switch-bar-height-mobile: $toggle-switch-bar-height !default;
17
17
  $toggle-switch-bar-width-mobile: $toggle-switch-bar-width !default;
18
18
  // must all be same units--end
19
19
 
@@ -60,7 +60,406 @@ $toggle-switch-text-font-size: 0.75rem !default;
60
60
 
61
61
  $toggle-switch-text-disabled-color: $input-label-disabled-color !default;
62
62
 
63
- // Simple Toggle Switch
63
+ // .toggle-switch
64
+
65
+ $toggle-switch: () !default;
66
+ $toggle-switch: map-deep-merge(
67
+ (
68
+ breakpoint-down: sm,
69
+ cursor: $toggle-switch-cursor,
70
+ display: inline-block,
71
+ font-weight: $toggle-switch-font-weight,
72
+ max-width: 100%,
73
+ position: relative,
74
+ disabled: (
75
+ cursor: $toggle-switch-disabled-cursor,
76
+ toggle-switch-label: (
77
+ color: $toggle-switch-label-disabled-color,
78
+ cursor: $toggle-switch-disabled-cursor,
79
+ ),
80
+ toggle-switch-text: (
81
+ color: $toggle-switch-text-disabled-color,
82
+ ),
83
+ ),
84
+ ),
85
+ $toggle-switch
86
+ );
87
+
88
+ // .toggle-switch-check-bar
89
+
90
+ $toggle-switch-check-bar: () !default;
91
+ $toggle-switch-check-bar: map-merge(
92
+ (
93
+ display: inline-flex,
94
+ position: relative,
95
+ ),
96
+ $toggle-switch-check-bar
97
+ );
98
+
99
+ // .toggle-switch-bar
100
+
101
+ $toggle-switch-bar: () !default;
102
+ $toggle-switch-bar: map-deep-merge(
103
+ (
104
+ toggle-switch-handle: (
105
+ display: block,
106
+ min-width: $toggle-switch-bar-width,
107
+ text-transform: uppercase,
108
+ ),
109
+ toggle-switch-icon: (
110
+ font-size: $toggle-switch-bar-font-size,
111
+ lexicon-icon: (
112
+ margin-top: -0.2em,
113
+ ),
114
+ ),
115
+ button-icon: (
116
+ font-size: $toggle-switch-button-font-size,
117
+ ),
118
+ ),
119
+ $toggle-switch-bar
120
+ );
121
+
122
+ // .toggle-switch-check
123
+
124
+ $toggle-switch-check: () !default;
125
+ $toggle-switch-check: map-deep-merge(
126
+ (
127
+ breakpoint-down: sm,
128
+ bottom: 0,
129
+ font-size: 62.5%,
130
+ height: $toggle-switch-bar-height,
131
+ opacity: 0,
132
+ position: absolute,
133
+ width: $toggle-switch-bar-width,
134
+ z-index: 2,
135
+ toggle-switch-bar: (
136
+ display: inline-flex,
137
+ font-size: $toggle-switch-bar-font-size,
138
+ height: $toggle-switch-bar-height,
139
+ line-height: $toggle-switch-bar-height,
140
+ position: relative,
141
+ text-indent: 0,
142
+ user-select: none,
143
+ before: (
144
+ background-color: $toggle-switch-bar-bg,
145
+ border-color: $toggle-switch-bar-border-color,
146
+ border-radius:
147
+ clay-enable-rounded($toggle-switch-bar-border-radius),
148
+ border-style: solid,
149
+ border-width: $toggle-switch-bar-border-width,
150
+ bottom: 0,
151
+ content: ' ',
152
+ display: block,
153
+ left: 0,
154
+ position: absolute,
155
+ top: 0,
156
+ transition: $toggle-switch-transition,
157
+ width: $toggle-switch-bar-width,
158
+ ),
159
+ after: (
160
+ background-color: $toggle-switch-button-bg,
161
+ border-color: $toggle-switch-button-border-color,
162
+ border-radius:
163
+ clay-enable-rounded($toggle-switch-button-border-radius),
164
+ border-style: solid,
165
+ border-width: $toggle-switch-button-border-width,
166
+ bottom: $toggle-switch-bar-padding,
167
+ content: '',
168
+ display: block,
169
+ height: $toggle-switch-button-width,
170
+ left: $toggle-switch-bar-padding,
171
+ position: absolute,
172
+ top: $toggle-switch-bar-padding,
173
+ transition: $toggle-switch-transition,
174
+ width: $toggle-switch-button-width,
175
+ ),
176
+ toggle-switch-handle: (
177
+ before: (
178
+ transition:
179
+ clay-enable-transitions($toggle-switch-transition),
180
+ ),
181
+ after: (
182
+ content: attr(data-label-off),
183
+ margin-left:
184
+ clay-data-label-text-position(
185
+ $toggle-switch-bar-width,
186
+ $toggle-switch-bar-padding
187
+ ),
188
+ transition: $toggle-switch-transition,
189
+ white-space: nowrap,
190
+ ),
191
+ ),
192
+ toggle-switch-icon: (
193
+ color: $toggle-switch-bar-icon-color,
194
+ left: $toggle-switch-bar-padding,
195
+ line-height: $toggle-switch-button-width,
196
+ position: absolute,
197
+ text-align: center,
198
+ text-indent: 0,
199
+ top: $toggle-switch-bar-padding,
200
+ transition: $toggle-switch-transition,
201
+ width: $toggle-switch-button-width,
202
+ z-index: 1,
203
+ ),
204
+ toggle-switch-icon-on: (
205
+ left: $toggle-switch-bar-padding,
206
+ opacity: 0,
207
+ ),
208
+ toggle-switch-icon-off: (
209
+ left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
210
+ $toggle-switch-button-width,
211
+ ),
212
+ button-icon: (
213
+ color: $toggle-switch-button-icon-color,
214
+ ),
215
+ button-icon-on: (
216
+ opacity: 0,
217
+ ),
218
+ ),
219
+ focus: (
220
+ toggle-switch-bar: (
221
+ before: (
222
+ box-shadow: $toggle-switch-bar-focus-box-shadow,
223
+ ),
224
+ ),
225
+ ),
226
+ disabled: (
227
+ toggle-switch-bar: (
228
+ cursor: $toggle-switch-disabled-cursor,
229
+ opacity: $toggle-switch-disabled-opacity,
230
+ ),
231
+ ),
232
+ checked: (
233
+ toggle-switch-bar: (
234
+ before: (
235
+ background-color: $toggle-switch-bar-on-bg,
236
+ border-color: $toggle-switch-bar-on-border-color,
237
+ border-radius:
238
+ clay-enable-rounded($toggle-switch-bar-border-radius),
239
+ border-style: solid,
240
+ border-width: $toggle-switch-bar-border-width,
241
+ ),
242
+ after: (
243
+ background-color: $toggle-switch-button-on-bg,
244
+ border-color: $toggle-switch-button-on-border-color,
245
+ border-radius:
246
+ clay-enable-rounded(
247
+ $toggle-switch-button-on-border-radius
248
+ ),
249
+ border-style: solid,
250
+ border-width: $toggle-switch-button-border-width,
251
+ left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
252
+ $toggle-switch-button-width,
253
+ ),
254
+ toggle-switch-handle: (
255
+ after: (
256
+ content: attr(data-label-on),
257
+ ),
258
+ ),
259
+ toggle-switch-icon: (
260
+ color: $toggle-switch-bar-on-icon-color,
261
+ ),
262
+ toggle-switch-icon-on: (
263
+ opacity: 1,
264
+ ),
265
+ toggle-switch-icon-off: (
266
+ opacity: 0,
267
+ ),
268
+ button-icon: (
269
+ color: $toggle-switch-button-on-icon-color,
270
+ left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
271
+ $toggle-switch-button-width,
272
+ ),
273
+ button-icon-on: (
274
+ opacity: 1,
275
+ ),
276
+ button-icon-off: (
277
+ opacity: 0,
278
+ ),
279
+ ),
280
+ ),
281
+ mobile: (
282
+ height: $toggle-switch-bar-height-mobile,
283
+ width: $toggle-switch-bar-width-mobile,
284
+ toggle-switch-bar: (
285
+ height: $toggle-switch-bar-height-mobile,
286
+ line-height: $toggle-switch-bar-height-mobile,
287
+ text-indent: 0,
288
+ before: (
289
+ width: $toggle-switch-bar-width-mobile,
290
+ ),
291
+ after: (
292
+ bottom: $toggle-switch-bar-padding-mobile,
293
+ height: $toggle-switch-button-width-mobile,
294
+ left: $toggle-switch-bar-padding-mobile,
295
+ top: $toggle-switch-bar-padding-mobile,
296
+ width: $toggle-switch-button-width-mobile,
297
+ ),
298
+ toggle-switch-handle: (
299
+ min-width: $toggle-switch-bar-width-mobile,
300
+ after: (
301
+ margin-left:
302
+ clay-data-label-text-position(
303
+ $toggle-switch-bar-width-mobile,
304
+ $toggle-switch-bar-padding-mobile
305
+ ),
306
+ ),
307
+ ),
308
+ toggle-switch-icon: (
309
+ font-size: $toggle-switch-bar-font-size-mobile,
310
+ left: $toggle-switch-bar-padding-mobile,
311
+ line-height: $toggle-switch-button-width-mobile,
312
+ top: $toggle-switch-bar-padding-mobile,
313
+ width: $toggle-switch-button-width-mobile,
314
+ ),
315
+ toggle-switch-icon-on: (
316
+ left: $toggle-switch-bar-padding-mobile,
317
+ ),
318
+ toggle-switch-icon-off: (
319
+ left: $toggle-switch-bar-width-mobile -
320
+ $toggle-switch-bar-padding-mobile -
321
+ $toggle-switch-button-width-mobile,
322
+ ),
323
+ button-icon: (
324
+ font-size: $toggle-switch-button-font-size-mobile,
325
+ ),
326
+ ),
327
+ checked: (
328
+ toggle-switch-bar: (
329
+ after: (
330
+ left: $toggle-switch-bar-width-mobile -
331
+ $toggle-switch-bar-padding-mobile -
332
+ $toggle-switch-button-width-mobile,
333
+ ),
334
+ toggle-switch-handle: (
335
+ after: (
336
+ margin-left:
337
+ clay-data-label-text-position(
338
+ $toggle-switch-bar-width-mobile,
339
+ $toggle-switch-bar-padding-mobile
340
+ ),
341
+ ),
342
+ ),
343
+ button-icon: (
344
+ left: $toggle-switch-bar-width-mobile -
345
+ $toggle-switch-bar-padding-mobile -
346
+ $toggle-switch-button-width-mobile,
347
+ ),
348
+ ),
349
+ ),
350
+ ),
351
+ ),
352
+ $toggle-switch-check
353
+ );
354
+
355
+ // .toggle-switch-label
356
+
357
+ $toggle-switch-label: () !default;
358
+ $toggle-switch-label: map-merge(
359
+ (
360
+ display: block,
361
+ margin-bottom: 2px,
362
+ ),
363
+ $toggle-switch-label
364
+ );
365
+
366
+ // .toggle-switch-text
367
+
368
+ $toggle-switch-text: () !default;
369
+ $toggle-switch-text: map-merge(
370
+ (
371
+ display: block,
372
+ font-size: $toggle-switch-text-font-size,
373
+ ),
374
+ $toggle-switch-text
375
+ );
376
+
377
+ // .toggle-switch-text-left
378
+
379
+ $toggle-switch-text-left: () !default;
380
+ $toggle-switch-text-left: map-merge(
381
+ (
382
+ breakpoint-down: sm,
383
+ display: inline-flex,
384
+ line-height: $toggle-switch-bar-height,
385
+ margin-right: 8px,
386
+ mobile: (
387
+ line-height: $toggle-switch-bar-height-mobile,
388
+ ),
389
+ ),
390
+ $toggle-switch-text-left
391
+ );
392
+
393
+ // .toggle-switch-text-right
394
+
395
+ $toggle-switch-text-right: () !default;
396
+ $toggle-switch-text-right: map-deep-merge(
397
+ (
398
+ breakpoint-down: sm,
399
+ display: inline-flex,
400
+ line-height: $toggle-switch-bar-height,
401
+ margin-left: 8px,
402
+ mobile: (
403
+ line-height: $toggle-switch-bar-height-mobile,
404
+ ),
405
+ ),
406
+ $toggle-switch-text-right
407
+ );
408
+
409
+ // .simple-toggle-switch
64
410
 
65
411
  $simple-toggle-switch-label-line-height: 1 !default;
66
412
  $simple-toggle-switch-label-spacer-x: 0.5rem !default;
413
+
414
+ $simple-toggle-switch: () !default;
415
+ $simple-toggle-switch: map-deep-merge(
416
+ (
417
+ breakpoint-down: sm,
418
+ align-items: center,
419
+ display: inline-flex,
420
+ toggle-switch-label: (
421
+ line-height: $simple-toggle-switch-label-line-height,
422
+ margin-bottom: 0,
423
+ max-width:
424
+ calc(
425
+ 100% - #{clay-data-label-text-position(
426
+ $toggle-switch-bar-width,
427
+ $toggle-switch-bar-padding
428
+ )}
429
+ ),
430
+ ),
431
+ mobile: (
432
+ toggle-switch-label: (
433
+ max-width:
434
+ calc(
435
+ 100% - #{clay-data-label-text-position(
436
+ $toggle-switch-bar-width-mobile,
437
+ $toggle-switch-bar-padding-mobile
438
+ )}
439
+ ),
440
+ ),
441
+ ),
442
+ ),
443
+ $simple-toggle-switch
444
+ );
445
+
446
+ // .simple-toggle-switch-reverse
447
+
448
+ $simple-toggle-switch-reverse: () !default;
449
+ $simple-toggle-switch-reverse: map-deep-merge(
450
+ (
451
+ breakpoint-down: sm,
452
+ toggle-switch-check-bar: (
453
+ order: 5,
454
+ ),
455
+ toggle-switch-check: (
456
+ toggle-switch-bar: (
457
+ order: 5,
458
+ ),
459
+ ),
460
+ toggle-switch-label: (
461
+ margin-right: $simple-toggle-switch-label-spacer-x,
462
+ ),
463
+ ),
464
+ $simple-toggle-switch-reverse
465
+ );