@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/mixins/_toggle-switch.scss CHANGED
@@ -2,20 +2,1082 @@
2
2
  /// @group toggleSwitch
3
3
  ////
4
4
 
5
- /// A helper function that calculates text-indent of data-label-on and data-label-off in a `.toggle-switch`.
6
- /// @param {Number} $toggle-switch-width - Width of switch bar
7
- /// @param {Number} $toggle-switch-padding - Space between button and bar
8
- /// @param {Number} $label-spacer-x[8px] - Space between toggle-switch-bar and data-label
9
-
10
- @function clay-data-label-text-position(
11
- $toggle-switch-width,
12
- $toggle-switch-padding,
13
- $label-spacer-x: 8px
14
- ) {
15
- @if ($toggle-switch-padding < 0) {
16
- $toggle-switch-width: $toggle-switch-width +
17
- abs($toggle-switch-padding);
5
+ /// A mixin to help create `.toggle-switch-bar` variants.
6
+ /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
7
+ /// @example
8
+ /// (
9
+ /// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
10
+ /// // .toggle-switch-bar
11
+ /// before: (
12
+ /// // .toggle-switch-bar::before
13
+ /// ),
14
+ /// after: (
15
+ /// // .toggle-switch-bar::after
16
+ /// ),
17
+ /// toggle-switch-handle: (
18
+ /// // .toggle-switch-bar .toggle-switch-handle
19
+ /// before: (
20
+ /// // .toggle-switch-bar .toggle-switch-handle::before
21
+ /// ),
22
+ /// after: (
23
+ /// // .toggle-switch-bar .toggle-switch-handle::after
24
+ /// ),
25
+ /// ),
26
+ /// toggle-switch-icon: (
27
+ /// // .toggle-switch-bar .toggle-switch-icon
28
+ /// lexicon-icon: (
29
+ /// // .toggle-switch-bar .toggle-switch-icon .lexicon-icon
30
+ /// ),
31
+ /// ),
32
+ /// toggle-switch-icon-on: (
33
+ /// // .toggle-switch-bar .toggle-switch-icon-on
34
+ /// lexicon-icon: (
35
+ /// // .toggle-switch-bar .toggle-switch-icon-on .lexicon-icon
36
+ /// ),
37
+ /// ),
38
+ /// toggle-switch-icon-off: (
39
+ /// // .toggle-switch-bar .toggle-switch-icon-off
40
+ /// lexicon-icon: (
41
+ /// // .toggle-switch-bar .toggle-switch-icon-off .lexicon-icon
42
+ /// ),
43
+ /// ),
44
+ /// button-icon: (
45
+ /// // .toggle-switch-bar .button-icon
46
+ /// lexicon-icon: (
47
+ /// // .toggle-switch-bar .button-icon .lexicon-icon
48
+ /// ),
49
+ /// ),
50
+ /// button-icon-on: (
51
+ /// // .toggle-switch-bar .button-icon-on
52
+ /// lexicon-icon: (
53
+ /// // .toggle-switch-bar .button-icon-on .lexicon-icon
54
+ /// ),
55
+ /// ),
56
+ /// )
57
+
58
+ @mixin clay-toggle-switch-bar-variant($map) {
59
+ @if (type-of($map) == 'map') {
60
+ $enabled: setter(map-get($map, enabled), true);
61
+
62
+ @if ($enabled) {
63
+ @include clay-css($map);
64
+
65
+ &::before {
66
+ @include clay-css(map-get($map, before));
67
+ }
68
+
69
+ &::after {
70
+ @include clay-css(map-get($map, after));
71
+ }
72
+
73
+ .toggle-switch-handle {
74
+ @include clay-css(map-get($map, toggle-switch-handle));
75
+
76
+ &::before {
77
+ @include clay-css(
78
+ map-deep-get($map, toggle-switch-handle, before)
79
+ );
80
+ }
81
+
82
+ &::after {
83
+ @include clay-css(
84
+ map-deep-get($map, toggle-switch-handle, after)
85
+ );
86
+ }
87
+ }
88
+
89
+ .toggle-switch-icon {
90
+ @include clay-css(map-get($map, toggle-switch-icon));
91
+
92
+ .lexicon-icon {
93
+ @include clay-css(
94
+ map-deep-get($map, toggle-switch-icon, lexicon-icon)
95
+ );
96
+ }
97
+ }
98
+
99
+ .toggle-switch-icon-on {
100
+ @include clay-css(map-get($map, toggle-switch-icon-on));
101
+
102
+ .lexicon-icon {
103
+ @include clay-css(
104
+ map-deep-get($map, toggle-switch-icon-on, lexicon-icon)
105
+ );
106
+ }
107
+ }
108
+
109
+ .toggle-switch-icon-off {
110
+ @include clay-css(map-get($map, toggle-switch-icon-off));
111
+
112
+ .lexicon-icon {
113
+ @include clay-css(
114
+ map-deep-get($map, toggle-switch-icon-off, lexicon-icon)
115
+ );
116
+ }
117
+ }
118
+
119
+ .button-icon {
120
+ @include clay-css(map-get($map, button-icon));
121
+
122
+ .lexicon-icon {
123
+ @include clay-css(
124
+ map-deep-get($map, button-icon, lexicon-icon)
125
+ );
126
+ }
127
+ }
128
+
129
+ .button-icon-on {
130
+ @include clay-css(map-get($map, button-icon-on));
131
+
132
+ .lexicon-icon {
133
+ @include clay-css(
134
+ map-deep-get($map, button-icon-on, lexicon-icon)
135
+ );
136
+ }
137
+ }
138
+ }
139
+ }
140
+ }
141
+
142
+ /// A mixin to help create `.toggle-switch-check` variants.
143
+ /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
144
+ /// @example
145
+ /// (
146
+ /// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
147
+ /// breakpoint-down: {String},
148
+ /// // .toggle-switch-check
149
+ /// toggle-switch-bar: (
150
+ /// // .toggle-switch-check ~ .toggle-switch-bar
151
+ /// before: (
152
+ /// // .toggle-switch-check ~ .toggle-switch-bar::before
153
+ /// ),
154
+ /// after: (
155
+ /// // .toggle-switch-check ~ .toggle-switch-bar::after
156
+ /// ),
157
+ /// toggle-switch-handle: (
158
+ /// // .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle
159
+ /// before: (
160
+ /// // .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::before
161
+ /// ),
162
+ /// after: (
163
+ /// // .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-handle::after
164
+ /// ),
165
+ /// ),
166
+ /// toggle-switch-icon: (
167
+ /// // .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon
168
+ /// lexicon-icon: (
169
+ /// // .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon .lexicon-icon
170
+ /// ),
171
+ /// ),
172
+ /// toggle-switch-icon-on: (
173
+ /// // .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-on
174
+ /// lexicon-icon: (
175
+ /// // .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-on .lexicon-icon
176
+ /// ),
177
+ /// ),
178
+ /// toggle-switch-icon-off: (
179
+ /// // .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off
180
+ /// lexicon-icon: (
181
+ /// // .toggle-switch-check ~ .toggle-switch-bar .toggle-switch-icon-off .lexicon-icon
182
+ /// ),
183
+ /// ),
184
+ /// button-icon: (
185
+ /// // .toggle-switch-check ~ .toggle-switch-bar .button-icon
186
+ /// lexicon-icon: (
187
+ /// // .toggle-switch-check ~ .toggle-switch-bar .button-icon .lexicon-icon
188
+ /// ),
189
+ /// ),
190
+ /// button-icon-on: (
191
+ /// // .toggle-switch-check ~ .toggle-switch-bar .button-icon-on
192
+ /// lexicon-icon: (
193
+ /// // .toggle-switch-check ~ .toggle-switch-bar .button-icon-on .lexicon-icon
194
+ /// ),
195
+ /// ),
196
+ /// ),
197
+ /// hover: (
198
+ /// // N/A
199
+ /// toggle-switch-bar: (
200
+ /// // .toggle-switch-check:hover ~ .toggle-switch-bar
201
+ /// before: (),
202
+ /// after: (),
203
+ /// toggle-switch-handle: (
204
+ /// before: (),
205
+ /// after: (),
206
+ /// ),
207
+ /// toggle-switch-icon: (
208
+ /// lexicon-icon: (),
209
+ /// ),
210
+ /// toggle-switch-icon-on: (
211
+ /// lexicon-icon: (),
212
+ /// ),
213
+ /// toggle-switch-icon-off: (
214
+ /// lexicon-icon: (),
215
+ /// ),
216
+ /// button-icon: (
217
+ /// lexicon-icon: (),
218
+ /// ),
219
+ /// button-icon-on: (
220
+ /// lexicon-icon: (),
221
+ /// ),
222
+ /// ),
223
+ /// ),
224
+ /// focus: (
225
+ /// // N/A
226
+ /// toggle-switch-bar: (
227
+ /// // .toggle-switch-check:focus ~ .toggle-switch-bar
228
+ /// before: (),
229
+ /// after: (),
230
+ /// toggle-switch-handle: (
231
+ /// before: (),
232
+ /// after: (),
233
+ /// ),
234
+ /// toggle-switch-icon: (
235
+ /// lexicon-icon: (),
236
+ /// ),
237
+ /// toggle-switch-icon-on: (
238
+ /// lexicon-icon: (),
239
+ /// ),
240
+ /// toggle-switch-icon-off: (
241
+ /// lexicon-icon: (),
242
+ /// ),
243
+ /// button-icon: (
244
+ /// lexicon-icon: (),
245
+ /// ),
246
+ /// button-icon-on: (
247
+ /// lexicon-icon: (),
248
+ /// ),
249
+ /// ),
250
+ /// ),
251
+ /// active: (
252
+ /// // N/A
253
+ /// toggle-switch-bar: (
254
+ /// // .toggle-switch-check:active ~ .toggle-switch-bar
255
+ /// before: (),
256
+ /// after: (),
257
+ /// toggle-switch-handle: (
258
+ /// before: (),
259
+ /// after: (),
260
+ /// ),
261
+ /// toggle-switch-icon: (
262
+ /// lexicon-icon: (),
263
+ /// ),
264
+ /// toggle-switch-icon-on: (
265
+ /// lexicon-icon: (),
266
+ /// ),
267
+ /// toggle-switch-icon-off: (
268
+ /// lexicon-icon: (),
269
+ /// ),
270
+ /// button-icon: (
271
+ /// lexicon-icon: (),
272
+ /// ),
273
+ /// button-icon-on: (
274
+ /// lexicon-icon: (),
275
+ /// ),
276
+ /// ),
277
+ /// ),
278
+ /// disabled: (
279
+ /// // N/A
280
+ /// toggle-switch-bar: (
281
+ /// // .toggle-switch-check[disabled] ~ .toggle-switch-bar,
282
+ /// // .toggle-switch-check:disabled ~ .toggle-switch-bar
283
+ /// before: (),
284
+ /// after: (),
285
+ /// toggle-switch-handle: (
286
+ /// before: (),
287
+ /// after: (),
288
+ /// ),
289
+ /// toggle-switch-icon: (
290
+ /// lexicon-icon: (),
291
+ /// ),
292
+ /// toggle-switch-icon-on: (
293
+ /// lexicon-icon: (),
294
+ /// ),
295
+ /// toggle-switch-icon-off: (
296
+ /// lexicon-icon: (),
297
+ /// ),
298
+ /// button-icon: (
299
+ /// lexicon-icon: (),
300
+ /// ),
301
+ /// button-icon-on: (
302
+ /// lexicon-icon: (),
303
+ /// ),
304
+ /// ),
305
+ /// ),
306
+ /// checked: (
307
+ /// // N/A
308
+ /// toggle-switch-bar: (
309
+ /// // .toggle-switch-check:checked ~ .toggle-switch-bar
310
+ /// before: (),
311
+ /// after: (),
312
+ /// toggle-switch-handle: (
313
+ /// before: (),
314
+ /// after: (),
315
+ /// ),
316
+ /// toggle-switch-icon: (
317
+ /// lexicon-icon: (),
318
+ /// ),
319
+ /// toggle-switch-icon-on: (
320
+ /// lexicon-icon: (),
321
+ /// ),
322
+ /// toggle-switch-icon-off: (
323
+ /// lexicon-icon: (),
324
+ /// ),
325
+ /// button-icon: (
326
+ /// lexicon-icon: (),
327
+ /// ),
328
+ /// button-icon-on: (
329
+ /// lexicon-icon: (),
330
+ /// ),
331
+ /// ),
332
+ /// hover: (
333
+ /// // N/A
334
+ /// toggle-switch-bar: (
335
+ /// // .toggle-switch-check:checked:hover ~ .toggle-switch-bar
336
+ /// before: (),
337
+ /// after: (),
338
+ /// toggle-switch-handle: (
339
+ /// before: (),
340
+ /// after: (),
341
+ /// ),
342
+ /// toggle-switch-icon: (
343
+ /// lexicon-icon: (),
344
+ /// ),
345
+ /// toggle-switch-icon-on: (
346
+ /// lexicon-icon: (),
347
+ /// ),
348
+ /// toggle-switch-icon-off: (
349
+ /// lexicon-icon: (),
350
+ /// ),
351
+ /// button-icon: (
352
+ /// lexicon-icon: (),
353
+ /// ),
354
+ /// button-icon-on: (
355
+ /// lexicon-icon: (),
356
+ /// ),
357
+ /// ),
358
+ /// ),
359
+ /// focus: (
360
+ /// // N/A
361
+ /// toggle-switch-bar: (
362
+ /// // .toggle-switch-check:checked:focus ~ .toggle-switch-bar
363
+ /// before: (),
364
+ /// after: (),
365
+ /// toggle-switch-handle: (
366
+ /// before: (),
367
+ /// after: (),
368
+ /// ),
369
+ /// toggle-switch-icon: (
370
+ /// lexicon-icon: (),
371
+ /// ),
372
+ /// toggle-switch-icon-on: (
373
+ /// lexicon-icon: (),
374
+ /// ),
375
+ /// toggle-switch-icon-off: (
376
+ /// lexicon-icon: (),
377
+ /// ),
378
+ /// button-icon: (
379
+ /// lexicon-icon: (),
380
+ /// ),
381
+ /// button-icon-on: (
382
+ /// lexicon-icon: (),
383
+ /// ),
384
+ /// ),
385
+ /// ),
386
+ /// active: (
387
+ /// // N/A
388
+ /// toggle-switch-bar: (
389
+ /// // .toggle-switch-check:checked:active ~ .toggle-switch-bar
390
+ /// before: (),
391
+ /// after: (),
392
+ /// toggle-switch-handle: (
393
+ /// before: (),
394
+ /// after: (),
395
+ /// ),
396
+ /// toggle-switch-icon: (
397
+ /// lexicon-icon: (),
398
+ /// ),
399
+ /// toggle-switch-icon-on: (
400
+ /// lexicon-icon: (),
401
+ /// ),
402
+ /// toggle-switch-icon-off: (
403
+ /// lexicon-icon: (),
404
+ /// ),
405
+ /// button-icon: (
406
+ /// lexicon-icon: (),
407
+ /// ),
408
+ /// button-icon-on: (
409
+ /// lexicon-icon: (),
410
+ /// ),
411
+ /// ),
412
+ /// ),
413
+ /// disabled: (
414
+ /// // N/A
415
+ /// toggle-switch-bar: (
416
+ /// // .toggle-switch-check:checked[disabled] ~ .toggle-switch-bar,
417
+ /// // .toggle-switch-check:checked:disabled ~ .toggle-switch-bar
418
+ /// before: (),
419
+ /// after: (),
420
+ /// toggle-switch-handle: (
421
+ /// before: (),
422
+ /// after: (),
423
+ /// ),
424
+ /// toggle-switch-icon: (
425
+ /// lexicon-icon: (),
426
+ /// ),
427
+ /// toggle-switch-icon-on: (
428
+ /// lexicon-icon: (),
429
+ /// ),
430
+ /// toggle-switch-icon-off: (
431
+ /// lexicon-icon: (),
432
+ /// ),
433
+ /// button-icon: (
434
+ /// lexicon-icon: (),
435
+ /// ),
436
+ /// button-icon-on: (
437
+ /// lexicon-icon: (),
438
+ /// ),
439
+ /// ),
440
+ /// ),
441
+ /// ),
442
+ /// indeterminate: (
443
+ /// // N/A
444
+ /// toggle-switch-bar: (
445
+ /// // .toggle-switch-check:indeterminate ~ .toggle-switch-bar
446
+ /// before: (),
447
+ /// after: (),
448
+ /// toggle-switch-handle: (
449
+ /// before: (),
450
+ /// after: (),
451
+ /// ),
452
+ /// toggle-switch-icon: (
453
+ /// lexicon-icon: (),
454
+ /// ),
455
+ /// toggle-switch-icon-on: (
456
+ /// lexicon-icon: (),
457
+ /// ),
458
+ /// toggle-switch-icon-off: (
459
+ /// lexicon-icon: (),
460
+ /// ),
461
+ /// button-icon: (
462
+ /// lexicon-icon: (),
463
+ /// ),
464
+ /// button-icon-on: (
465
+ /// lexicon-icon: (),
466
+ /// ),
467
+ /// ),
468
+ /// hover: (
469
+ /// // N/A
470
+ /// toggle-switch-bar: (
471
+ /// // .toggle-switch-check:indeterminate:hover ~ .toggle-switch-bar
472
+ /// before: (),
473
+ /// after: (),
474
+ /// toggle-switch-handle: (
475
+ /// before: (),
476
+ /// after: (),
477
+ /// ),
478
+ /// toggle-switch-icon: (
479
+ /// lexicon-icon: (),
480
+ /// ),
481
+ /// toggle-switch-icon-on: (
482
+ /// lexicon-icon: (),
483
+ /// ),
484
+ /// toggle-switch-icon-off: (
485
+ /// lexicon-icon: (),
486
+ /// ),
487
+ /// button-icon: (
488
+ /// lexicon-icon: (),
489
+ /// ),
490
+ /// button-icon-on: (
491
+ /// lexicon-icon: (),
492
+ /// ),
493
+ /// ),
494
+ /// ),
495
+ /// focus: (
496
+ /// // N/A
497
+ /// toggle-switch-bar: (
498
+ /// // .toggle-switch-check:indeterminate:focus ~ .toggle-switch-bar
499
+ /// before: (),
500
+ /// after: (),
501
+ /// toggle-switch-handle: (
502
+ /// before: (),
503
+ /// after: (),
504
+ /// ),
505
+ /// toggle-switch-icon: (
506
+ /// lexicon-icon: (),
507
+ /// ),
508
+ /// toggle-switch-icon-on: (
509
+ /// lexicon-icon: (),
510
+ /// ),
511
+ /// toggle-switch-icon-off: (
512
+ /// lexicon-icon: (),
513
+ /// ),
514
+ /// button-icon: (
515
+ /// lexicon-icon: (),
516
+ /// ),
517
+ /// button-icon-on: (
518
+ /// lexicon-icon: (),
519
+ /// ),
520
+ /// ),
521
+ /// ),
522
+ /// active: (
523
+ /// // N/A
524
+ /// toggle-switch-bar: (
525
+ /// // .toggle-switch-check:indeterminate:active ~ .toggle-switch-bar
526
+ /// before: (),
527
+ /// after: (),
528
+ /// toggle-switch-handle: (
529
+ /// before: (),
530
+ /// after: (),
531
+ /// ),
532
+ /// toggle-switch-icon: (
533
+ /// lexicon-icon: (),
534
+ /// ),
535
+ /// toggle-switch-icon-on: (
536
+ /// lexicon-icon: (),
537
+ /// ),
538
+ /// toggle-switch-icon-off: (
539
+ /// lexicon-icon: (),
540
+ /// ),
541
+ /// button-icon: (
542
+ /// lexicon-icon: (),
543
+ /// ),
544
+ /// button-icon-on: (
545
+ /// lexicon-icon: (),
546
+ /// ),
547
+ /// ),
548
+ /// ),
549
+ /// disabled: (
550
+ /// // N/A
551
+ /// toggle-switch-bar: (
552
+ /// // .toggle-switch-check:indeterminate[disabled] ~ .toggle-switch-bar,
553
+ /// // .toggle-switch-check:indeterminate:disabled ~ .toggle-switch-bar
554
+ /// before: (),
555
+ /// after: (),
556
+ /// toggle-switch-handle: (
557
+ /// before: (),
558
+ /// after: (),
559
+ /// ),
560
+ /// toggle-switch-icon: (
561
+ /// lexicon-icon: (),
562
+ /// ),
563
+ /// toggle-switch-icon-on: (
564
+ /// lexicon-icon: (),
565
+ /// ),
566
+ /// toggle-switch-icon-off: (
567
+ /// lexicon-icon: (),
568
+ /// ),
569
+ /// button-icon: (
570
+ /// lexicon-icon: (),
571
+ /// ),
572
+ /// button-icon-on: (
573
+ /// lexicon-icon: (),
574
+ /// ),
575
+ /// ),
576
+ /// ),
577
+ /// ),
578
+ /// )
579
+
580
+ @mixin clay-toggle-switch-check-variant($map) {
581
+ @if (type-of($map) == 'map') {
582
+ $breakpoint-down: setter(map-get($map, breakpoint-down), sm);
583
+ $enabled: setter(map-get($map, enabled), true);
584
+
585
+ @include clay-css($map);
586
+
587
+ @if ($enabled) {
588
+ ~ .toggle-switch-bar {
589
+ @include clay-toggle-switch-bar-variant(
590
+ map-get($map, toggle-switch-bar)
591
+ );
592
+ }
593
+
594
+ &:hover ~ .toggle-switch-bar {
595
+ @include clay-toggle-switch-bar-variant(
596
+ map-deep-get($map, hover, toggle-switch-bar)
597
+ );
598
+ }
599
+
600
+ &:focus ~ .toggle-switch-bar {
601
+ @include clay-toggle-switch-bar-variant(
602
+ map-deep-get($map, focus, toggle-switch-bar)
603
+ );
604
+ }
605
+
606
+ &:active ~ .toggle-switch-bar {
607
+ @include clay-toggle-switch-bar-variant(
608
+ map-deep-get($map, active, toggle-switch-bar)
609
+ );
610
+ }
611
+
612
+ &[disabled] ~ .toggle-switch-bar,
613
+ &:disabled ~ .toggle-switch-bar {
614
+ @include clay-toggle-switch-bar-variant(
615
+ map-deep-get($map, disabled, toggle-switch-bar)
616
+ );
617
+ }
618
+
619
+ &:checked ~ .toggle-switch-bar {
620
+ @include clay-toggle-switch-bar-variant(
621
+ map-deep-get($map, checked, toggle-switch-bar)
622
+ );
623
+ }
624
+
625
+ &:checked:hover ~ .toggle-switch-bar {
626
+ @include clay-toggle-switch-bar-variant(
627
+ map-deep-get($map, checked, hover, toggle-switch-bar)
628
+ );
629
+ }
630
+
631
+ &:checked:focus ~ .toggle-switch-bar {
632
+ @include clay-toggle-switch-bar-variant(
633
+ map-deep-get($map, checked, focus, toggle-switch-bar)
634
+ );
635
+ }
636
+
637
+ &:checked:active ~ .toggle-switch-bar {
638
+ @include clay-toggle-switch-bar-variant(
639
+ map-deep-get($map, checked, active, toggle-switch-bar)
640
+ );
641
+ }
642
+
643
+ &:checked[disabled] ~ .toggle-switch-bar,
644
+ &:checked:disabled ~ .toggle-switch-bar {
645
+ @include clay-toggle-switch-bar-variant(
646
+ map-deep-get($map, checked, disabled, toggle-switch-bar)
647
+ );
648
+ }
649
+
650
+ &:indeterminate ~ .toggle-switch-bar {
651
+ @include clay-toggle-switch-bar-variant(
652
+ map-deep-get($map, indeterminate, toggle-switch-bar)
653
+ );
654
+ }
655
+
656
+ &:indeterminate:hover ~ .toggle-switch-bar {
657
+ @include clay-toggle-switch-bar-variant(
658
+ map-deep-get($map, indeterminate, hover, toggle-switch-bar)
659
+ );
660
+ }
661
+
662
+ &:indeterminate:focus ~ .toggle-switch-bar {
663
+ @include clay-toggle-switch-bar-variant(
664
+ map-deep-get($map, indeterminate, focus, toggle-switch-bar)
665
+ );
666
+ }
667
+
668
+ &:indeterminate:active ~ .toggle-switch-bar {
669
+ @include clay-toggle-switch-bar-variant(
670
+ map-deep-get($map, indeterminate, active, toggle-switch-bar)
671
+ );
672
+ }
673
+
674
+ &:indeterminate[disabled] ~ .toggle-switch-bar,
675
+ &:indeterminate:disabled ~ .toggle-switch-bar {
676
+ @include clay-toggle-switch-bar-variant(
677
+ map-deep-get(
678
+ $map,
679
+ indeterminate,
680
+ disabled,
681
+ toggle-switch-bar
682
+ )
683
+ );
684
+ }
685
+
686
+ @include media-breakpoint-down($breakpoint-down) {
687
+ @include clay-css(map-get($map, mobile));
688
+
689
+ ~ .toggle-switch-bar {
690
+ @include clay-toggle-switch-bar-variant(
691
+ map-deep-get($map, mobile, toggle-switch-bar)
692
+ );
693
+ }
694
+
695
+ &:hover ~ .toggle-switch-bar {
696
+ @include clay-toggle-switch-bar-variant(
697
+ map-deep-get($map, mobile, hover, toggle-switch-bar)
698
+ );
699
+ }
700
+
701
+ &:focus ~ .toggle-switch-bar {
702
+ @include clay-toggle-switch-bar-variant(
703
+ map-deep-get($map, mobile, focus, toggle-switch-bar)
704
+ );
705
+ }
706
+
707
+ &:active ~ .toggle-switch-bar {
708
+ @include clay-toggle-switch-bar-variant(
709
+ map-deep-get($map, mobile, active, toggle-switch-bar)
710
+ );
711
+ }
712
+
713
+ &[disabled] ~ .toggle-switch-bar,
714
+ &:disabled ~ .toggle-switch-bar {
715
+ @include clay-toggle-switch-bar-variant(
716
+ map-deep-get($map, mobile, disabled, toggle-switch-bar)
717
+ );
718
+ }
719
+
720
+ &:checked ~ .toggle-switch-bar {
721
+ @include clay-toggle-switch-bar-variant(
722
+ map-deep-get($map, mobile, checked, toggle-switch-bar)
723
+ );
724
+ }
725
+
726
+ &:checked:hover ~ .toggle-switch-bar {
727
+ @include clay-toggle-switch-bar-variant(
728
+ map-deep-get(
729
+ $map,
730
+ mobile,
731
+ checked,
732
+ hover,
733
+ toggle-switch-bar
734
+ )
735
+ );
736
+ }
737
+
738
+ &:checked:focus ~ .toggle-switch-bar {
739
+ @include clay-toggle-switch-bar-variant(
740
+ map-deep-get(
741
+ $map,
742
+ mobile,
743
+ checked,
744
+ focus,
745
+ toggle-switch-bar
746
+ )
747
+ );
748
+ }
749
+
750
+ &:checked:active ~ .toggle-switch-bar {
751
+ @include clay-toggle-switch-bar-variant(
752
+ map-deep-get(
753
+ $map,
754
+ mobile,
755
+ checked,
756
+ active,
757
+ toggle-switch-bar
758
+ )
759
+ );
760
+ }
761
+
762
+ &:checked[disabled] ~ .toggle-switch-bar,
763
+ &:checked:disabled ~ .toggle-switch-bar {
764
+ @include clay-toggle-switch-bar-variant(
765
+ map-deep-get(
766
+ $map,
767
+ mobile,
768
+ checked,
769
+ disabled,
770
+ toggle-switch-bar
771
+ )
772
+ );
773
+ }
774
+
775
+ &:indeterminate ~ .toggle-switch-bar {
776
+ @include clay-toggle-switch-bar-variant(
777
+ map-deep-get(
778
+ $map,
779
+ mobile,
780
+ indeterminate,
781
+ toggle-switch-bar
782
+ )
783
+ );
784
+ }
785
+
786
+ &:indeterminate:hover ~ .toggle-switch-bar {
787
+ @include clay-toggle-switch-bar-variant(
788
+ map-deep-get(
789
+ $map,
790
+ mobile,
791
+ indeterminate,
792
+ hover,
793
+ toggle-switch-bar
794
+ )
795
+ );
796
+ }
797
+
798
+ &:indeterminate:focus ~ .toggle-switch-bar {
799
+ @include clay-toggle-switch-bar-variant(
800
+ map-deep-get(
801
+ $map,
802
+ mobile,
803
+ indeterminate,
804
+ focus,
805
+ toggle-switch-bar
806
+ )
807
+ );
808
+ }
809
+
810
+ &:indeterminate:active ~ .toggle-switch-bar {
811
+ @include clay-toggle-switch-bar-variant(
812
+ map-deep-get(
813
+ $map,
814
+ mobile,
815
+ indeterminate,
816
+ active,
817
+ toggle-switch-bar
818
+ )
819
+ );
820
+ }
821
+
822
+ &:indeterminate[disabled] ~ .toggle-switch-bar,
823
+ &:indeterminate:disabled ~ .toggle-switch-bar {
824
+ @include clay-toggle-switch-bar-variant(
825
+ map-deep-get(
826
+ $map,
827
+ mobile,
828
+ indeterminate,
829
+ disabled,
830
+ toggle-switch-bar
831
+ )
832
+ );
833
+ }
834
+ }
835
+ }
18
836
  }
837
+ }
838
+
839
+ /// A mixin to help create `.toggle-switch` variants.
840
+ /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
841
+ /// @example
842
+ /// (
843
+ /// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
844
+ /// breakpoint-down: {String},
845
+ /// // .toggle-switch
846
+ /// toggle-switch-check-bar: (
847
+ /// // .toggle-switch .toggle-switch-check-bar
848
+ /// before: (
849
+ /// // .toggle-switch .toggle-switch-check-bar::before
850
+ /// ),
851
+ /// after: (
852
+ /// // .toggle-switch .toggle-switch-check-bar::after
853
+ /// ),
854
+ /// ),
855
+ /// toggle-switch-check: (
856
+ /// // .toggle-switch .toggle-switch-check
857
+ /// // See clay-toggle-switch-check-variant
858
+ /// ),
859
+ /// toggle-switch-label: (
860
+ /// // .toggle-switch .toggle-switch-label
861
+ /// ),
862
+ /// toggle-switch-text: (
863
+ /// // .toggle-switch .toggle-switch-text
864
+ /// ),
865
+ /// toggle-switch-text-left: (
866
+ /// // .toggle-switch .toggle-switch-text-left
867
+ /// ),
868
+ /// toggle-switch-text-right: (
869
+ /// // .toggle-switch .toggle-switch-text-right
870
+ /// ),
871
+ /// disabled: (
872
+ /// // .toggle-switch.disabled
873
+ /// toggle-switch-label: (
874
+ /// // .toggle-switch.disabled .toggle-switch-label
875
+ /// ),
876
+ /// toggle-switch-text: (
877
+ /// // .toggle-switch.disabled .toggle-switch-text
878
+ /// ),
879
+ /// toggle-switch-text-left: (
880
+ /// // .toggle-switch.disabled .toggle-switch-text-left
881
+ /// ),
882
+ /// toggle-switch-text-right: (
883
+ /// // .toggle-switch.disabled .toggle-switch-text-right
884
+ /// ),
885
+ /// ),
886
+ /// mobile: (
887
+ /// toggle-switch-check-bar: (
888
+ /// before: (),
889
+ /// after: (),
890
+ /// ),
891
+ /// toggle-switch-check: (),
892
+ /// toggle-switch-label: (),
893
+ /// toggle-switch-text: (),
894
+ /// toggle-switch-text-left: (),
895
+ /// toggle-switch-text-right: (),
896
+ /// disabled: (
897
+ /// toggle-switch-label: (),
898
+ /// toggle-switch-text: (),
899
+ /// toggle-switch-text-left: (),
900
+ /// toggle-switch-text-right: (),
901
+ /// ),
902
+ /// ),
903
+ /// )
904
+
905
+ @mixin clay-toggle-switch-variant($map) {
906
+ @if (type-of($map) == 'map') {
907
+ $breakpoint-down: setter(map-get($map, breakpoint-down), sm);
908
+ $enabled: setter(map-get($map, enabled), true);
909
+
910
+ @include clay-css($map);
911
+
912
+ .toggle-switch-check-bar {
913
+ @include clay-css(map-get($map, toggle-switch-check-bar));
914
+
915
+ &::before {
916
+ @include clay-css(
917
+ map-deep-get($map, toggle-switch-check-bar, before)
918
+ );
919
+ }
920
+
921
+ &::after {
922
+ @include clay-css(
923
+ map-deep-get($map, toggle-switch-check-bar, after)
924
+ );
925
+ }
926
+ }
927
+
928
+ .toggle-switch-check {
929
+ @include clay-toggle-switch-check-variant(
930
+ map-get($map, toggle-switch-check)
931
+ );
932
+ }
933
+
934
+ .toggle-switch-label {
935
+ @include clay-css(map-get($map, toggle-switch-label));
936
+ }
937
+
938
+ .toggle-switch-text {
939
+ @include clay-css(map-get($map, toggle-switch-text));
940
+ }
19
941
 
20
- @return $toggle-switch-width + $label-spacer-x;
942
+ .toggle-switch-text-left {
943
+ @include clay-css(map-get($map, toggle-switch-text-left));
944
+ }
945
+
946
+ .toggle-switch-text-right {
947
+ @include clay-css(map-get($map, toggle-switch-text-right));
948
+ }
949
+
950
+ &.disabled {
951
+ @include clay-css(map-get($map, disabled));
952
+
953
+ .toggle-switch-label {
954
+ @include clay-css(
955
+ map-deep-get($map, disabled, toggle-switch-label)
956
+ );
957
+ }
958
+
959
+ .toggle-switch-text {
960
+ @include clay-css(
961
+ map-deep-get($map, disabled, toggle-switch-text)
962
+ );
963
+ }
964
+
965
+ .toggle-switch-text-left {
966
+ @include clay-css(
967
+ map-deep-get($map, disabled, toggle-switch-text-left)
968
+ );
969
+ }
970
+
971
+ .toggle-switch-text-right {
972
+ @include clay-css(
973
+ map-deep-get($map, disabled, toggle-switch-text-right)
974
+ );
975
+ }
976
+ }
977
+
978
+ @include media-breakpoint-down($breakpoint-down) {
979
+ @include clay-css(map-get($map, mobile));
980
+
981
+ .toggle-switch-check-bar {
982
+ @include clay-css(
983
+ map-deep-get($map, mobile, toggle-switch-check-bar)
984
+ );
985
+
986
+ &::before {
987
+ @include clay-css(
988
+ map-deep-get(
989
+ $map,
990
+ mobile,
991
+ toggle-switch-check-bar,
992
+ before
993
+ )
994
+ );
995
+ }
996
+
997
+ &::after {
998
+ @include clay-css(
999
+ map-deep-get(
1000
+ $map,
1001
+ mobile,
1002
+ toggle-switch-check-bar,
1003
+ after
1004
+ )
1005
+ );
1006
+ }
1007
+ }
1008
+
1009
+ .toggle-switch-check {
1010
+ @include clay-toggle-switch-check-variant(
1011
+ map-deep-get($map, mobile, toggle-switch-check)
1012
+ );
1013
+ }
1014
+
1015
+ .toggle-switch-label {
1016
+ @include clay-css(
1017
+ map-deep-get($map, mobile, toggle-switch-label)
1018
+ );
1019
+ }
1020
+
1021
+ .toggle-switch-text {
1022
+ @include clay-css(
1023
+ map-deep-get($map, mobile, toggle-switch-text)
1024
+ );
1025
+ }
1026
+
1027
+ .toggle-switch-text-left {
1028
+ @include clay-css(
1029
+ map-deep-get($map, mobile, toggle-switch-text-left)
1030
+ );
1031
+ }
1032
+
1033
+ .toggle-switch-text-right {
1034
+ @include clay-css(
1035
+ map-deep-get($map, mobile, toggle-switch-text-right)
1036
+ );
1037
+ }
1038
+
1039
+ &.disabled {
1040
+ @include clay-css(map-deep-get($map, mobile, disabled));
1041
+
1042
+ .toggle-switch-label {
1043
+ @include clay-css(
1044
+ map-deep-get(
1045
+ $map,
1046
+ mobile,
1047
+ disabled,
1048
+ toggle-switch-label
1049
+ )
1050
+ );
1051
+ }
1052
+
1053
+ .toggle-switch-text {
1054
+ @include clay-css(
1055
+ map-deep-get($map, mobile, disabled, toggle-switch-text)
1056
+ );
1057
+ }
1058
+
1059
+ .toggle-switch-text-left {
1060
+ @include clay-css(
1061
+ map-deep-get(
1062
+ $map,
1063
+ mobile,
1064
+ disabled,
1065
+ toggle-switch-text-left
1066
+ )
1067
+ );
1068
+ }
1069
+
1070
+ .toggle-switch-text-right {
1071
+ @include clay-css(
1072
+ map-deep-get(
1073
+ $map,
1074
+ mobile,
1075
+ disabled,
1076
+ toggle-switch-text-right
1077
+ )
1078
+ );
1079
+ }
1080
+ }
1081
+ }
1082
+ }
21
1083
  }