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