@clayui/css 3.38.0 → 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 (140) hide show
  1. package/index.js +7 -2
  2. package/lib/css/atlas.css +819 -966
  3. package/lib/css/atlas.css.map +1 -1
  4. package/lib/css/base.css +668 -814
  5. package/lib/css/base.css.map +1 -1
  6. package/lib/css/cadmin.css +1013 -881
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/geolocation.svg +1 -1
  9. package/lib/images/icons/heading.svg +9 -0
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/lib/images/icons/maps.svg +10 -0
  12. package/lib/images/icons/order-ascending.svg +11 -0
  13. package/lib/images/icons/order-descending.svg +11 -0
  14. package/package.json +5 -3
  15. package/src/images/icons/geolocation.svg +1 -1
  16. package/src/images/icons/heading.svg +9 -0
  17. package/src/images/icons/maps.svg +10 -0
  18. package/src/images/icons/order-ascending.svg +11 -0
  19. package/src/images/icons/order-descending.svg +11 -0
  20. package/src/scss/_mixins.scss +1 -0
  21. package/src/scss/atlas/variables/_alerts.scss +10 -0
  22. package/src/scss/atlas/variables/_breadcrumbs.scss +4 -2
  23. package/src/scss/atlas/variables/_cards.scss +2 -2
  24. package/src/scss/atlas/variables/_custom-forms.scss +190 -14
  25. package/src/scss/atlas/variables/_dropdowns.scss +188 -17
  26. package/src/scss/atlas/variables/_forms.scss +33 -1
  27. package/src/scss/atlas/variables/_globals.scss +14 -1
  28. package/src/scss/atlas/variables/_labels.scss +171 -71
  29. package/src/scss/atlas/variables/_navs.scss +20 -8
  30. package/src/scss/atlas/variables/_pagination.scss +2 -2
  31. package/src/scss/atlas/variables/_sheets.scss +4 -2
  32. package/src/scss/atlas/variables/_stickers.scss +167 -3
  33. package/src/scss/atlas/variables/_tables.scss +58 -28
  34. package/src/scss/cadmin/components/_alerts.scss +1 -17
  35. package/src/scss/cadmin/components/_cards.scss +14 -16
  36. package/src/scss/cadmin/components/_custom-forms.scss +15 -165
  37. package/src/scss/cadmin/components/_dropdowns.scss +66 -205
  38. package/src/scss/cadmin/components/_form-validation.scss +10 -237
  39. package/src/scss/cadmin/components/_forms.scss +1 -1
  40. package/src/scss/cadmin/components/_grid.scss +20 -20
  41. package/src/scss/cadmin/components/_icons.scss +1 -6
  42. package/src/scss/cadmin/components/_images.scss +1 -1
  43. package/src/scss/cadmin/components/_input-groups.scss +17 -14
  44. package/src/scss/cadmin/components/_labels.scss +33 -101
  45. package/src/scss/cadmin/components/_list-group.scss +4 -4
  46. package/src/scss/cadmin/components/_modals.scss +1 -1
  47. package/src/scss/cadmin/components/_multi-step-nav.scss +2 -2
  48. package/src/scss/cadmin/components/_navbar.scss +2 -2
  49. package/src/scss/cadmin/components/_popovers.scss +34 -30
  50. package/src/scss/cadmin/components/_reboot.scss +1 -8
  51. package/src/scss/cadmin/components/_sidebar.scss +1 -1
  52. package/src/scss/cadmin/components/_stickers.scss +39 -94
  53. package/src/scss/cadmin/components/_toggle-switch.scss +20 -358
  54. package/src/scss/cadmin/components/_tooltip.scss +16 -14
  55. package/src/scss/cadmin/components/_type.scss +9 -1
  56. package/src/scss/cadmin/variables/_alerts.scss +38 -14
  57. package/src/scss/cadmin/variables/_breadcrumbs.scss +10 -6
  58. package/src/scss/cadmin/variables/_cards.scss +96 -28
  59. package/src/scss/cadmin/variables/_custom-forms.scss +262 -20
  60. package/src/scss/cadmin/variables/_dropdowns.scss +449 -137
  61. package/src/scss/cadmin/variables/_forms.scss +356 -5
  62. package/src/scss/cadmin/variables/_globals.scss +15 -1
  63. package/src/scss/cadmin/variables/_icons.scss +15 -2
  64. package/src/scss/cadmin/variables/_labels.scss +288 -101
  65. package/src/scss/cadmin/variables/_links.scss +9 -7
  66. package/src/scss/cadmin/variables/_menubar.scss +4 -4
  67. package/src/scss/cadmin/variables/_multi-step-nav.scss +2 -2
  68. package/src/scss/cadmin/variables/_navbar.scss +2 -2
  69. package/src/scss/cadmin/variables/_navs.scss +2 -2
  70. package/src/scss/cadmin/variables/_stickers.scss +258 -45
  71. package/src/scss/cadmin/variables/_tables.scss +1 -1
  72. package/src/scss/cadmin/variables/_timelines.scss +1 -1
  73. package/src/scss/cadmin/variables/_toggle-switch.scss +404 -1
  74. package/src/scss/cadmin/variables/_type.scss +3 -0
  75. package/src/scss/components/_alerts.scss +5 -17
  76. package/src/scss/components/_cards.scss +7 -7
  77. package/src/scss/components/_carousel.scss +2 -2
  78. package/src/scss/components/_custom-forms.scss +20 -164
  79. package/src/scss/components/_dropdowns.scss +52 -209
  80. package/src/scss/components/_form-validation.scss +8 -237
  81. package/src/scss/components/_forms.scss +66 -9
  82. package/src/scss/components/_grid.scss +15 -17
  83. package/src/scss/components/_icons.scss +4 -9
  84. package/src/scss/components/_images.scss +1 -1
  85. package/src/scss/components/_input-groups.scss +17 -14
  86. package/src/scss/components/_jumbotron.scss +1 -1
  87. package/src/scss/components/_labels.scss +29 -99
  88. package/src/scss/components/_list-group.scss +4 -4
  89. package/src/scss/components/_modals.scss +1 -1
  90. package/src/scss/components/_multi-step-nav.scss +2 -2
  91. package/src/scss/components/_navbar.scss +2 -2
  92. package/src/scss/components/_popovers.scss +30 -30
  93. package/src/scss/components/_reboot.scss +3 -39
  94. package/src/scss/components/_side-navigation.scss +2 -2
  95. package/src/scss/components/_sidebar.scss +1 -1
  96. package/src/scss/components/_stickers.scss +36 -94
  97. package/src/scss/components/_toggle-switch.scss +36 -351
  98. package/src/scss/components/_tooltip.scss +14 -14
  99. package/src/scss/components/_type.scss +9 -1
  100. package/src/scss/components/_utilities-functional-important.scss +4 -3
  101. package/src/scss/functions/_global-functions.scss +26 -6
  102. package/src/scss/functions/_lx-icons-generated.scss +125 -117
  103. package/src/scss/functions/_polyfills.scss +17 -0
  104. package/src/scss/functions/_type-conversion-functions.scss +5 -4
  105. package/src/scss/mixins/_alerts.scss +25 -0
  106. package/src/scss/mixins/_aspect-ratio.scss +1 -1
  107. package/src/scss/mixins/_buttons.scss +256 -15
  108. package/src/scss/mixins/_cards.scss +610 -114
  109. package/src/scss/mixins/_custom-forms.scss +668 -0
  110. package/src/scss/mixins/_dropdown-menu.scss +168 -48
  111. package/src/scss/mixins/_forms.scss +427 -12
  112. package/src/scss/mixins/_globals.scss +244 -234
  113. package/src/scss/mixins/_grid.scss +13 -15
  114. package/src/scss/mixins/_labels.scss +331 -97
  115. package/src/scss/mixins/_links.scss +453 -33
  116. package/src/scss/mixins/_navbar.scss +10 -10
  117. package/src/scss/mixins/_rfs.scss +14 -9
  118. package/src/scss/mixins/_stickers.scss +168 -17
  119. package/src/scss/mixins/_toggle-switch.scss +1076 -14
  120. package/src/scss/variables/_alerts.scss +38 -14
  121. package/src/scss/variables/_breadcrumbs.scss +8 -4
  122. package/src/scss/variables/_cards.scss +46 -8
  123. package/src/scss/variables/_custom-forms.scss +253 -18
  124. package/src/scss/variables/_dropdowns.scss +583 -132
  125. package/src/scss/variables/_forms.scss +304 -2
  126. package/src/scss/variables/_globals.scss +54 -1
  127. package/src/scss/variables/_icons.scss +60 -9
  128. package/src/scss/variables/_labels.scss +303 -107
  129. package/src/scss/variables/_links.scss +15 -13
  130. package/src/scss/variables/_menubar.scss +4 -4
  131. package/src/scss/variables/_multi-step-nav.scss +2 -2
  132. package/src/scss/variables/_navbar.scss +2 -2
  133. package/src/scss/variables/_navs.scss +37 -17
  134. package/src/scss/variables/_pagination.scss +15 -13
  135. package/src/scss/variables/_sheets.scss +4 -2
  136. package/src/scss/variables/_stickers.scss +327 -50
  137. package/src/scss/variables/_tables.scss +25 -9
  138. package/src/scss/variables/_timelines.scss +1 -1
  139. package/src/scss/variables/_toggle-switch.scss +404 -5
  140. package/src/scss/variables/_type.scss +3 -0
package/src/scss/variables/_tables.scss CHANGED
@@ -50,7 +50,7 @@ $table-striped-order: odd !default;
50
50
 
51
51
  // Table Cell applies to `th` and `td`
52
52
 
53
- $table-cell-gutters: $grid-gutter-width / 2 !default; // 15px
53
+ $table-cell-gutters: $grid-gutter-width * 0.5 !default; // 15px
54
54
  $table-cell-padding: 0.75rem !default;
55
55
  $table-cell-padding-sm: 0.3rem !default;
56
56
 
@@ -170,7 +170,9 @@ $table-title-link: () !default;
170
170
  $table-title-link: map-deep-merge(
171
171
  (
172
172
  color: $gray-900,
173
- hover-color: $gray-900,
173
+ hover: (
174
+ color: $gray-900,
175
+ ),
174
176
  ),
175
177
  $table-title-link
176
178
  );
@@ -181,7 +183,9 @@ $table-link: () !default;
181
183
  $table-link: map-deep-merge(
182
184
  (
183
185
  color: $gray-700,
184
- hover-color: clay-darken($gray-700, 15%),
186
+ hover: (
187
+ color: clay-darken($gray-700, 15%),
188
+ ),
185
189
  ),
186
190
  $table-link
187
191
  );
@@ -198,8 +202,12 @@ $table-action-link: map-deep-merge(
198
202
  justify-content: center,
199
203
  vertical-align: middle,
200
204
  width: 2rem,
201
- hover-text-decoration: none,
202
- lexicon-icon-margin-top: 0,
205
+ hover: (
206
+ text-decoration: none,
207
+ ),
208
+ lexicon-icon: (
209
+ margin-top: 0,
210
+ ),
203
211
  ),
204
212
  $table-action-link
205
213
  );
@@ -371,7 +379,9 @@ $table-list-title-link: () !default;
371
379
  $table-list-title-link: map-deep-merge(
372
380
  (
373
381
  color: $gray-900,
374
- hover-color: $gray-900,
382
+ hover: (
383
+ color: $gray-900,
384
+ ),
375
385
  ),
376
386
  $table-list-title-link
377
387
  );
@@ -382,7 +392,9 @@ $table-list-link: () !default;
382
392
  $table-list-link: map-deep-merge(
383
393
  (
384
394
  color: $gray-700,
385
- hover-color: clay-darken($gray-700, 15%),
395
+ hover: (
396
+ color: clay-darken($gray-700, 15%),
397
+ ),
386
398
  ),
387
399
  $table-list-link
388
400
  );
@@ -398,8 +410,12 @@ $table-list-action-link: map-deep-merge(
398
410
  justify-content: center,
399
411
  vertical-align: middle,
400
412
  width: 2rem,
401
- hover-text-decoration: none,
402
- lexicon-icon-margin-top: 0,
413
+ hover: (
414
+ text-decoration: none,
415
+ ),
416
+ lexicon-icon: (
417
+ margin-top: 0,
418
+ ),
403
419
  ),
404
420
  $table-list-action-link
405
421
  );
package/src/scss/variables/_timelines.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  $timeline-border-color: $gray-300 !default;
2
2
  $timeline-border-width: 2px !default;
3
3
 
4
- $timeline-border-modifier: ceil($timeline-border-width / 2) !default;
4
+ $timeline-border-modifier: ceil($timeline-border-width * 0.5) !default;
5
5
 
6
6
  $timeline-icon-active-bg: $component-active-bg !default;
7
7
  $timeline-icon-active-border-color: $timeline-icon-active-bg !default;
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
+ );
package/src/scss/variables/_type.scss CHANGED
@@ -13,6 +13,9 @@ $c-kbd-group: () !default;
13
13
  $c-kbd-group: map-deep-merge(
14
14
  (
15
15
  font-size: 0.875rem,
16
+ c-kbd: (
17
+ font-size: inherit,
18
+ ),
16
19
  ),
17
20
  $c-kbd-group
18
21
  );