@clayui/css 3.159.0 → 3.161.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 (304) hide show
  1. package/lib/css/atlas.css +3170 -3016
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +2952 -2786
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +1754 -1633
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/blue-print.svg +9 -0
  8. package/lib/images/icons/books-brush.svg +9 -0
  9. package/lib/images/icons/calculator.svg +10 -0
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/lib/images/icons/layout-new-window.svg +10 -0
  12. package/lib/images/icons/medal.svg +10 -0
  13. package/lib/images/icons/megaphone.svg +9 -0
  14. package/lib/images/icons/price-list.svg +11 -0
  15. package/lib/images/icons/process-builder.svg +9 -0
  16. package/lib/images/icons/product-configuration.svg +10 -0
  17. package/lib/images/icons/product-menu-open.svg +2 -2
  18. package/lib/images/icons/products.svg +9 -0
  19. package/lib/images/icons/publications.svg +10 -0
  20. package/lib/images/icons/puzzle.svg +9 -0
  21. package/lib/images/icons/rocket.svg +11 -0
  22. package/lib/images/icons/submission.svg +10 -0
  23. package/lib/images/icons/synonyms.svg +9 -0
  24. package/package.json +1 -1
  25. package/src/images/icons/blue-print.svg +9 -0
  26. package/src/images/icons/books-brush.svg +9 -0
  27. package/src/images/icons/calculator.svg +10 -0
  28. package/src/images/icons/icons.svg +1 -1
  29. package/src/images/icons/layout-new-window.svg +10 -0
  30. package/src/images/icons/medal.svg +10 -0
  31. package/src/images/icons/megaphone.svg +9 -0
  32. package/src/images/icons/price-list.svg +11 -0
  33. package/src/images/icons/process-builder.svg +9 -0
  34. package/src/images/icons/product-configuration.svg +10 -0
  35. package/src/images/icons/product-menu-open.svg +2 -2
  36. package/src/images/icons/products.svg +9 -0
  37. package/src/images/icons/publications.svg +10 -0
  38. package/src/images/icons/puzzle.svg +9 -0
  39. package/src/images/icons/rocket.svg +11 -0
  40. package/src/images/icons/submission.svg +10 -0
  41. package/src/images/icons/synonyms.svg +9 -0
  42. package/src/scss/_license-text.scss +1 -1
  43. package/src/scss/atlas/_variables.scss +6 -4
  44. package/src/scss/atlas/variables/_alerts.scss +102 -11
  45. package/src/scss/atlas/variables/_application-bar.scss +7 -0
  46. package/src/scss/atlas/variables/_badges.scss +36 -8
  47. package/src/scss/atlas/variables/_breadcrumbs.scss +2 -1
  48. package/src/scss/atlas/variables/_cards.scss +5 -0
  49. package/src/scss/atlas/variables/_clay-color.scss +5 -0
  50. package/src/scss/atlas/variables/_custom-forms.scss +36 -5
  51. package/src/scss/atlas/variables/_date-picker.scss +14 -2
  52. package/src/scss/atlas/variables/_dropdowns.scss +9 -2
  53. package/src/scss/atlas/variables/_forms.scss +35 -5
  54. package/src/scss/atlas/variables/_globals.scss +120 -73
  55. package/src/scss/atlas/variables/_labels.scss +55 -0
  56. package/src/scss/atlas/variables/_links.scss +18 -0
  57. package/src/scss/atlas/variables/_list-group.scss +15 -4
  58. package/src/scss/atlas/variables/_management-bar.scss +11 -0
  59. package/src/scss/atlas/variables/_menubar.scss +70 -22
  60. package/src/scss/atlas/variables/_modals.scss +16 -0
  61. package/src/scss/atlas/variables/_navbar.scss +7 -0
  62. package/src/scss/atlas/variables/_navigation-bar.scss +25 -1
  63. package/src/scss/atlas/variables/_navs.scss +5 -2
  64. package/src/scss/atlas/variables/_pagination.scss +42 -22
  65. package/src/scss/atlas/variables/_panels.scss +7 -0
  66. package/src/scss/atlas/variables/_popovers.scss +6 -4
  67. package/src/scss/atlas/variables/_range.scss +6 -0
  68. package/src/scss/atlas/variables/_sheets.scss +1 -0
  69. package/src/scss/atlas/variables/_sidebar.scss +10 -0
  70. package/src/scss/atlas/variables/_tables.scss +27 -3
  71. package/src/scss/atlas/variables/_time.scss +1 -0
  72. package/src/scss/atlas/variables/_toggle-switch.scss +19 -7
  73. package/src/scss/atlas/variables/_utilities.scss +3 -0
  74. package/src/scss/atlas-custom-properties/_variables.scss +68 -0
  75. package/src/scss/atlas-custom-properties/variables/_alerts.scss +1212 -0
  76. package/src/scss/atlas-custom-properties/variables/_application-bar.scss +62 -0
  77. package/src/scss/atlas-custom-properties/variables/_aspect-ratio.scss +28 -0
  78. package/src/scss/atlas-custom-properties/variables/_badges.scss +352 -0
  79. package/src/scss/atlas-custom-properties/variables/_breadcrumbs.scss +205 -0
  80. package/src/scss/atlas-custom-properties/variables/_buttons.scss +1498 -0
  81. package/src/scss/atlas-custom-properties/variables/_c-root.scss +353 -0
  82. package/src/scss/atlas-custom-properties/variables/_cards.scss +1217 -0
  83. package/src/scss/atlas-custom-properties/variables/_clay-color.scss +647 -0
  84. package/src/scss/atlas-custom-properties/variables/_custom-forms.scss +1127 -0
  85. package/src/scss/atlas-custom-properties/variables/_date-picker.scss +701 -0
  86. package/src/scss/atlas-custom-properties/variables/_drilldown.scss +252 -0
  87. package/src/scss/atlas-custom-properties/variables/_dropdowns.scss +1250 -0
  88. package/src/scss/atlas-custom-properties/variables/_dual-listbox.scss +75 -0
  89. package/src/scss/atlas-custom-properties/variables/_empty-state.scss +104 -0
  90. package/src/scss/atlas-custom-properties/variables/_forms.scss +2342 -0
  91. package/src/scss/atlas-custom-properties/variables/_globals-z-index.scss +50 -0
  92. package/src/scss/atlas-custom-properties/variables/_globals.scss +846 -0
  93. package/src/scss/atlas-custom-properties/variables/_icons.scss +73 -0
  94. package/src/scss/atlas-custom-properties/variables/_images.scss +14 -0
  95. package/src/scss/atlas-custom-properties/variables/_labels.scss +1485 -0
  96. package/src/scss/atlas-custom-properties/variables/_links.scss +482 -0
  97. package/src/scss/atlas-custom-properties/variables/_list-group.scss +493 -0
  98. package/src/scss/atlas-custom-properties/variables/_loaders.scss +243 -0
  99. package/src/scss/atlas-custom-properties/variables/_management-bar.scss +153 -0
  100. package/src/scss/atlas-custom-properties/variables/_menubar.scss +836 -0
  101. package/src/scss/atlas-custom-properties/variables/_modals.scss +650 -0
  102. package/src/scss/atlas-custom-properties/variables/_multi-step-nav.scss +324 -0
  103. package/src/scss/atlas-custom-properties/variables/_navbar.scss +200 -0
  104. package/src/scss/atlas-custom-properties/variables/_navigation-bar.scss +473 -0
  105. package/src/scss/atlas-custom-properties/variables/_navs.scss +547 -0
  106. package/src/scss/atlas-custom-properties/variables/_pagination.scss +1101 -0
  107. package/src/scss/atlas-custom-properties/variables/_panels.scss +567 -0
  108. package/src/scss/atlas-custom-properties/variables/_popovers.scss +565 -0
  109. package/src/scss/atlas-custom-properties/variables/_progress-bars.scss +142 -0
  110. package/src/scss/atlas-custom-properties/variables/_quick-action.scss +27 -0
  111. package/src/scss/atlas-custom-properties/variables/_range.scss +267 -0
  112. package/src/scss/atlas-custom-properties/variables/_reorder.scss +91 -0
  113. package/src/scss/atlas-custom-properties/variables/_resizer.scss +26 -0
  114. package/src/scss/atlas-custom-properties/variables/_sheets.scss +301 -0
  115. package/src/scss/atlas-custom-properties/variables/_side-navigation.scss +4 -0
  116. package/src/scss/atlas-custom-properties/variables/_sidebar.scss +579 -0
  117. package/src/scss/atlas-custom-properties/variables/_slideout.scss +379 -0
  118. package/src/scss/atlas-custom-properties/variables/_stickers.scss +578 -0
  119. package/src/scss/atlas-custom-properties/variables/_tables.scss +1277 -0
  120. package/src/scss/atlas-custom-properties/variables/_tbar.scss +636 -0
  121. package/src/scss/atlas-custom-properties/variables/_time.scss +142 -0
  122. package/src/scss/atlas-custom-properties/variables/_timelines.scss +43 -0
  123. package/src/scss/atlas-custom-properties/variables/_toggle-switch.scss +706 -0
  124. package/src/scss/atlas-custom-properties/variables/_tooltip.scss +332 -0
  125. package/src/scss/atlas-custom-properties/variables/_treeview.scss +369 -0
  126. package/src/scss/atlas-custom-properties/variables/_type.scss +194 -0
  127. package/src/scss/atlas-custom-properties/variables/_utilities.scss +1016 -0
  128. package/src/scss/atlas-variables.scss +2 -0
  129. package/src/scss/atlas.scss +2 -0
  130. package/src/scss/base-variables.scss +2 -0
  131. package/src/scss/base.scss +2 -0
  132. package/src/scss/cadmin/components/_alerts.scss +3 -1
  133. package/src/scss/cadmin/components/_button-groups.scss +2 -2
  134. package/src/scss/cadmin/components/_cards.scss +2 -2
  135. package/src/scss/cadmin/components/_drilldown.scss +10 -10
  136. package/src/scss/cadmin/components/_dropdowns.scss +2 -2
  137. package/src/scss/cadmin/components/_forms.scss +2 -2
  138. package/src/scss/cadmin/components/_grid.scss +6 -6
  139. package/src/scss/cadmin/components/_icons.scss +10 -2
  140. package/src/scss/cadmin/components/_images.scss +1 -1
  141. package/src/scss/cadmin/components/_input-groups.scss +4 -4
  142. package/src/scss/cadmin/components/_list-group.scss +11 -10
  143. package/src/scss/cadmin/components/_modals.scss +5 -5
  144. package/src/scss/cadmin/components/_multi-step-nav.scss +45 -20
  145. package/src/scss/cadmin/components/_navbar.scss +14 -8
  146. package/src/scss/cadmin/components/_navs.scss +1 -1
  147. package/src/scss/cadmin/components/_panels.scss +51 -25
  148. package/src/scss/cadmin/components/_popovers.scss +25 -21
  149. package/src/scss/cadmin/components/_sheets.scss +40 -14
  150. package/src/scss/cadmin/components/_time.scss +6 -2
  151. package/src/scss/cadmin/components/_timelines.scss +15 -8
  152. package/src/scss/cadmin/components/_tooltip.scss +8 -7
  153. package/src/scss/cadmin/components/_treeview.scss +8 -1
  154. package/src/scss/cadmin/components/_type.scss +4 -2
  155. package/src/scss/cadmin/components/_utilities-functional-important.scss +5 -5
  156. package/src/scss/cadmin/components/_utilities.scss +13 -13
  157. package/src/scss/cadmin/variables/_alerts.scss +184 -34
  158. package/src/scss/cadmin/variables/_badges.scss +121 -21
  159. package/src/scss/cadmin/variables/_breadcrumbs.scss +18 -11
  160. package/src/scss/cadmin/variables/_buttons.scss +15 -10
  161. package/src/scss/cadmin/variables/_cards.scss +89 -32
  162. package/src/scss/cadmin/variables/_clay-color.scss +40 -18
  163. package/src/scss/cadmin/variables/_custom-forms.scss +49 -10
  164. package/src/scss/cadmin/variables/_date-picker.scss +47 -19
  165. package/src/scss/cadmin/variables/_dropdowns.scss +105 -49
  166. package/src/scss/cadmin/variables/_dual-listbox.scss +1 -1
  167. package/src/scss/cadmin/variables/_empty-state.scss +5 -2
  168. package/src/scss/cadmin/variables/_forms.scss +218 -74
  169. package/src/scss/cadmin/variables/_globals-z-index.scss +28 -5
  170. package/src/scss/cadmin/variables/_globals.scss +141 -71
  171. package/src/scss/cadmin/variables/_images.scss +1 -2
  172. package/src/scss/cadmin/variables/_labels.scss +99 -6
  173. package/src/scss/cadmin/variables/_links.scss +47 -11
  174. package/src/scss/cadmin/variables/_list-group.scss +25 -9
  175. package/src/scss/cadmin/variables/_loaders.scss +18 -2
  176. package/src/scss/cadmin/variables/_management-bar.scss +66 -26
  177. package/src/scss/cadmin/variables/_menubar.scss +137 -43
  178. package/src/scss/cadmin/variables/_modals.scss +75 -26
  179. package/src/scss/cadmin/variables/_multi-step-nav.scss +34 -14
  180. package/src/scss/cadmin/variables/_navbar.scss +22 -15
  181. package/src/scss/cadmin/variables/_navigation-bar.scss +73 -37
  182. package/src/scss/cadmin/variables/_navs.scss +65 -33
  183. package/src/scss/cadmin/variables/_pagination.scss +60 -22
  184. package/src/scss/cadmin/variables/_panels.scss +34 -16
  185. package/src/scss/cadmin/variables/_popovers.scss +66 -77
  186. package/src/scss/cadmin/variables/_progress-bars.scss +8 -3
  187. package/src/scss/cadmin/variables/_range.scss +29 -9
  188. package/src/scss/cadmin/variables/_reorder.scss +7 -6
  189. package/src/scss/cadmin/variables/_resizer.scss +5 -3
  190. package/src/scss/cadmin/variables/_sheets.scss +21 -12
  191. package/src/scss/cadmin/variables/_sidebar.scss +76 -5
  192. package/src/scss/cadmin/variables/_slideout.scss +88 -31
  193. package/src/scss/cadmin/variables/_stickers.scss +36 -8
  194. package/src/scss/cadmin/variables/_tables.scss +142 -51
  195. package/src/scss/cadmin/variables/_tbar.scss +79 -31
  196. package/src/scss/cadmin/variables/_time.scss +14 -12
  197. package/src/scss/cadmin/variables/_timelines.scss +4 -2
  198. package/src/scss/cadmin/variables/_toggle-switch.scss +117 -37
  199. package/src/scss/cadmin/variables/_tooltip.scss +47 -49
  200. package/src/scss/cadmin/variables/_treeview.scss +62 -10
  201. package/src/scss/cadmin/variables/_type.scss +11 -9
  202. package/src/scss/cadmin/variables/_utilities.scss +123 -6
  203. package/src/scss/components/_alerts.scss +1 -1
  204. package/src/scss/components/_button-groups.scss +2 -2
  205. package/src/scss/components/_cards.scss +10 -10
  206. package/src/scss/components/_carousel.scss +2 -2
  207. package/src/scss/components/_custom-forms.scss +23 -12
  208. package/src/scss/components/_drilldown.scss +8 -4
  209. package/src/scss/components/_forms.scss +6 -6
  210. package/src/scss/components/_grid.scss +7 -7
  211. package/src/scss/components/_icons.scss +10 -2
  212. package/src/scss/components/_images.scss +1 -1
  213. package/src/scss/components/_input-groups.scss +7 -5
  214. package/src/scss/components/_jumbotron.scss +2 -2
  215. package/src/scss/components/_list-group.scss +29 -14
  216. package/src/scss/components/_modals.scss +5 -5
  217. package/src/scss/components/_multi-step-nav.scss +32 -12
  218. package/src/scss/components/_navbar.scss +10 -6
  219. package/src/scss/components/_panels.scss +82 -51
  220. package/src/scss/components/_popovers.scss +21 -25
  221. package/src/scss/components/_sheets.scss +38 -14
  222. package/src/scss/components/_side-navigation.scss +2 -2
  223. package/src/scss/components/_time.scss +2 -2
  224. package/src/scss/components/_timelines.scss +16 -12
  225. package/src/scss/components/_tooltip.scss +8 -6
  226. package/src/scss/components/_treeview.scss +8 -1
  227. package/src/scss/components/_type.scss +2 -2
  228. package/src/scss/components/_utilities-functional-important.scss +5 -5
  229. package/src/scss/components/_utilities.scss +13 -13
  230. package/src/scss/functions/_global-functions.scss +8 -6
  231. package/src/scss/functions/_lx-icons-generated.scss +31 -1
  232. package/src/scss/mixins/_alerts.scss +10 -0
  233. package/src/scss/mixins/_aspect-ratio.scss +11 -0
  234. package/src/scss/mixins/_badges.scss +14 -2
  235. package/src/scss/mixins/_buttons.scss +68 -8
  236. package/src/scss/mixins/_cards.scss +81 -0
  237. package/src/scss/mixins/_close.scss +54 -4
  238. package/src/scss/mixins/_dropdown-menu.scss +55 -6
  239. package/src/scss/mixins/_forms.scss +150 -0
  240. package/src/scss/mixins/_globals.scss +101 -358
  241. package/src/scss/mixins/_grid.scss +21 -8
  242. package/src/scss/mixins/_highlight.scss +14 -0
  243. package/src/scss/mixins/_input-groups.scss +15 -0
  244. package/src/scss/mixins/_labels.scss +64 -10
  245. package/src/scss/mixins/_links.scss +55 -4
  246. package/src/scss/mixins/_list-group.scss +8 -4
  247. package/src/scss/mixins/_menubar.scss +80 -4
  248. package/src/scss/mixins/_modals.scss +10 -18
  249. package/src/scss/mixins/_nav.scss +19 -0
  250. package/src/scss/mixins/_navbar.scss +237 -49
  251. package/src/scss/mixins/_panels.scss +48 -4
  252. package/src/scss/mixins/_stickers.scss +8 -0
  253. package/src/scss/mixins/_tbar.scss +65 -10
  254. package/src/scss/mixins/_timelines.scss +21 -11
  255. package/src/scss/mixins/_toggle-switch.scss +4 -0
  256. package/src/scss/mixins/_utilities.scss +9 -0
  257. package/src/scss/variables/_alerts.scss +184 -29
  258. package/src/scss/variables/_application-bar.scss +11 -4
  259. package/src/scss/variables/_badges.scss +133 -35
  260. package/src/scss/variables/_breadcrumbs.scss +13 -4
  261. package/src/scss/variables/_buttons.scss +11 -10
  262. package/src/scss/variables/_cards.scss +131 -53
  263. package/src/scss/variables/_clay-color.scss +36 -18
  264. package/src/scss/variables/_custom-forms.scss +47 -12
  265. package/src/scss/variables/_date-picker.scss +41 -16
  266. package/src/scss/variables/_drilldown.scss +3 -3
  267. package/src/scss/variables/_dropdowns.scss +108 -49
  268. package/src/scss/variables/_dual-listbox.scss +1 -1
  269. package/src/scss/variables/_empty-state.scss +5 -2
  270. package/src/scss/variables/_forms.scss +200 -64
  271. package/src/scss/variables/_globals-z-index.scss +26 -5
  272. package/src/scss/variables/_globals.scss +153 -76
  273. package/src/scss/variables/_images.scss +1 -2
  274. package/src/scss/variables/_labels.scss +103 -6
  275. package/src/scss/variables/_links.scss +39 -10
  276. package/src/scss/variables/_list-group.scss +39 -13
  277. package/src/scss/variables/_loaders.scss +18 -2
  278. package/src/scss/variables/_management-bar.scss +23 -6
  279. package/src/scss/variables/_menubar.scss +86 -19
  280. package/src/scss/variables/_modals.scss +66 -25
  281. package/src/scss/variables/_multi-step-nav.scss +29 -11
  282. package/src/scss/variables/_navbar.scss +14 -8
  283. package/src/scss/variables/_navigation-bar.scss +26 -4
  284. package/src/scss/variables/_navs.scss +76 -44
  285. package/src/scss/variables/_pagination.scss +30 -5
  286. package/src/scss/variables/_panels.scss +77 -24
  287. package/src/scss/variables/_popovers.scss +65 -78
  288. package/src/scss/variables/_progress-bars.scss +11 -2
  289. package/src/scss/variables/_range.scss +35 -9
  290. package/src/scss/variables/_reorder.scss +7 -6
  291. package/src/scss/variables/_resizer.scss +5 -3
  292. package/src/scss/variables/_sheets.scss +21 -13
  293. package/src/scss/variables/_sidebar.scss +72 -4
  294. package/src/scss/variables/_slideout.scss +87 -31
  295. package/src/scss/variables/_stickers.scss +50 -9
  296. package/src/scss/variables/_tables.scss +125 -33
  297. package/src/scss/variables/_tbar.scss +79 -30
  298. package/src/scss/variables/_time.scss +13 -11
  299. package/src/scss/variables/_timelines.scss +2 -1
  300. package/src/scss/variables/_toggle-switch.scss +114 -30
  301. package/src/scss/variables/_tooltip.scss +46 -49
  302. package/src/scss/variables/_treeview.scss +63 -10
  303. package/src/scss/variables/_type.scss +9 -7
  304. package/src/scss/variables/_utilities.scss +124 -6
package/src/scss/atlas-custom-properties/variables/_toggle-switch.scss ADDED
@@ -0,0 +1,706 @@
1
+ @if ($enable-atlas-custom-properties) {
2
+ $toggle-switch-cursor: $link-cursor;
3
+ $toggle-switch-font-weight: var(
4
+ --toggle-switch-font-weight,
5
+ $input-label-font-weight
6
+ );
7
+ $toggle-switch-transition:
8
+ background-color 100ms ease-in,
9
+ border-color 100ms ease-in,
10
+ box-shadow 150ms ease-in-out,
11
+ color 100ms ease-in,
12
+ left 100ms ease-in,
13
+ opacity 100ms ease-in,
14
+ right 100ms ease-in;
15
+
16
+ // must all be same units--start
17
+ $toggle-switch-bar-padding: var(--toggle-switch-bar-padding, 4px);
18
+ $toggle-switch-button-width: var(--toggle-switch-button-width, 16px);
19
+
20
+ $toggle-switch-bar-padding-mobile: var(
21
+ --toggle-switch-bar-padding-mobile,
22
+ 4px
23
+ );
24
+ $toggle-switch-button-width-mobile: var(
25
+ --toggle-switch-button-width-mobile,
26
+ 16px
27
+ );
28
+
29
+ $toggle-switch-bar-height: calc(
30
+ #{$toggle-switch-bar-padding} * 2 + #{$toggle-switch-button-width}
31
+ );
32
+
33
+ $toggle-switch-bar-height-mobile: calc(
34
+ #{$toggle-switch-bar-padding-mobile} *
35
+ 2 +
36
+ #{$toggle-switch-button-width-mobile}
37
+ );
38
+
39
+ $toggle-switch-bar-width: var(--toggle-switch-bar-width, 48px);
40
+
41
+ $toggle-switch-bar-width-mobile: var(
42
+ --toggle-switch-bar-width-mobile,
43
+ 40px
44
+ );
45
+ // must all be same units--end
46
+
47
+ $toggle-switch-bar-bg: var(--toggle-switch-bar-background-color, $gray-500);
48
+ $toggle-switch-bar-border-color: var(
49
+ --toggle-switch-bar-border-color,
50
+ $toggle-switch-bar-bg
51
+ );
52
+ $toggle-switch-bar-border-radius: var(
53
+ --toggle-switch-bar-border-radius,
54
+ 20px
55
+ );
56
+ $toggle-switch-bar-border-width: var(--toggle-switch-bar-border-width, 1px);
57
+ $toggle-switch-bar-font-size: var(--toggle-switch-bar-font-size, 10px);
58
+ $toggle-switch-bar-icon-color: var(--toggle-switch-bar-icon-color, $white);
59
+
60
+ $toggle-switch-bar-focus-box-shadow: $custom-control-indicator-focus-box-shadow;
61
+
62
+ $toggle-switch-button-bg: var(
63
+ --toggle-switch-button-background-color,
64
+ $white
65
+ );
66
+ $toggle-switch-button-border-color: var(
67
+ --toggle-switch-button-border-color,
68
+ $toggle-switch-button-bg
69
+ );
70
+ $toggle-switch-button-border-radius: var(
71
+ --toggle-switch-button-border-radius,
72
+ 50%
73
+ );
74
+ $toggle-switch-button-border-width: var(
75
+ --toggle-switch-button-border-width,
76
+ 1px
77
+ );
78
+ $toggle-switch-button-font-size: var(
79
+ --toggle-switch-button-font-size,
80
+ $toggle-switch-bar-font-size
81
+ );
82
+ $toggle-switch-button-icon-color: var(
83
+ --toggle-switch-button-icon-color,
84
+ $gray-900
85
+ );
86
+
87
+ $toggle-switch-bar-font-size-mobile: var(
88
+ --toggle-switch-bar-font-size-mobile,
89
+ 10px
90
+ );
91
+
92
+ $toggle-switch-button-font-size-mobile: var(
93
+ --toggle-switch-button-font-size-mobile,
94
+ $toggle-switch-bar-font-size-mobile
95
+ );
96
+
97
+ // Toggle Switch On
98
+
99
+ $toggle-switch-bar-on-bg: var(
100
+ --toggle-switch-bar-on-background-color,
101
+ $component-active-bg
102
+ );
103
+ $toggle-switch-bar-on-border-color: var(
104
+ --toggle-switch-bar-on-border-color,
105
+ $toggle-switch-bar-on-bg
106
+ );
107
+ $toggle-switch-bar-on-icon-color: var(
108
+ --toggle-switch-bar-on-icon-color,
109
+ $white
110
+ );
111
+
112
+ $toggle-switch-button-on-bg: var(
113
+ --toggle-switch-button-on-background-color,
114
+ $white
115
+ );
116
+ $toggle-switch-button-on-border-color: var(
117
+ --toggle-switch-button-on-border-color,
118
+ $white
119
+ );
120
+ $toggle-switch-button-on-border-radius: var(
121
+ --toggle-switch-button-on-border-radius,
122
+ $toggle-switch-button-border-radius
123
+ );
124
+ $toggle-switch-button-on-icon-color: var(
125
+ --toggle-switch-button-on-icon-color,
126
+ $primary
127
+ );
128
+
129
+ // Toggle Switch Disabled
130
+
131
+ $toggle-switch-disabled-cursor: $disabled-cursor;
132
+ $toggle-switch-disabled-opacity: var(--toggle-switch-disabled-opacity, 0.4);
133
+
134
+ // Toggle Switch Label
135
+
136
+ $toggle-switch-label-disabled-color: var(
137
+ --toggle-switch-label-disabled-color,
138
+ $input-label-disabled-color
139
+ );
140
+
141
+ // Toggle Switch Text
142
+
143
+ $toggle-switch-text-font-size: var(--toggle-switch-text-font-size, 12px);
144
+
145
+ $toggle-switch-text-disabled-color: var(
146
+ --toggle-switch-text-disabled-color,
147
+ $input-label-disabled-color
148
+ );
149
+
150
+ // .toggle-switch
151
+
152
+ $toggle-switch: ();
153
+ $toggle-switch: map-deep-merge(
154
+ (
155
+ breakpoint-down: sm,
156
+ cursor: $toggle-switch-cursor,
157
+ display: inline-block,
158
+ font-weight: $toggle-switch-font-weight,
159
+ max-width: 100%,
160
+ position: relative,
161
+
162
+ disabled: (
163
+ cursor: $toggle-switch-disabled-cursor,
164
+
165
+ toggle-switch-label: (
166
+ color: $toggle-switch-label-disabled-color,
167
+ cursor: $toggle-switch-disabled-cursor,
168
+ ),
169
+
170
+ toggle-switch-text: (
171
+ color: $toggle-switch-text-disabled-color,
172
+ ),
173
+ ),
174
+ ),
175
+ $toggle-switch
176
+ );
177
+
178
+ // .toggle-switch-check-bar
179
+
180
+ $toggle-switch-check-bar: ();
181
+ $toggle-switch-check-bar: map-merge(
182
+ (
183
+ display: inline-flex,
184
+ position: relative,
185
+ ),
186
+ $toggle-switch-check-bar
187
+ );
188
+
189
+ // .toggle-switch-bar
190
+
191
+ $toggle-switch-bar: ();
192
+ $toggle-switch-bar: map-deep-merge(
193
+ (
194
+ toggle-switch-handle: (
195
+ display: block,
196
+ min-width: $toggle-switch-bar-width,
197
+ text-transform: uppercase,
198
+ ),
199
+
200
+ toggle-switch-icon: (
201
+ font-size: $toggle-switch-bar-font-size,
202
+
203
+ lexicon-icon: (
204
+ margin-top: -0.2em,
205
+ ),
206
+ ),
207
+
208
+ button-icon: (
209
+ font-size: $toggle-switch-button-font-size,
210
+ ),
211
+ ),
212
+ $toggle-switch-bar
213
+ );
214
+
215
+ // .toggle-switch-check
216
+
217
+ $toggle-switch-check: ();
218
+ $toggle-switch-check: map-deep-merge(
219
+ (
220
+ breakpoint-down: sm,
221
+
222
+ bottom: 0,
223
+ font-size: var(--togle-switch-check-font-size, 62.5%),
224
+ height: var(--togle-switch-check-height, $toggle-switch-bar-height),
225
+ opacity: 0,
226
+ position: absolute,
227
+ width: var(--togle-switch-check-width, $toggle-switch-bar-width),
228
+ z-index: 2,
229
+
230
+ toggle-switch-bar: (
231
+ display: inline-flex,
232
+ font-size: $toggle-switch-bar-font-size,
233
+ height: $toggle-switch-bar-height,
234
+ line-height: $toggle-switch-bar-height,
235
+ position: relative,
236
+ text-indent: 0,
237
+ user-select: none,
238
+
239
+ before: (
240
+ background-color: $toggle-switch-bar-bg,
241
+ border-color: $toggle-switch-bar-border-color,
242
+ border-radius:
243
+ clay-enable-rounded($toggle-switch-bar-border-radius),
244
+ border-style: solid,
245
+ border-width: $toggle-switch-bar-border-width,
246
+ bottom: 0,
247
+ content: ' ',
248
+ display: block,
249
+ left: 0,
250
+ position: absolute,
251
+ top: 0,
252
+ transition: $toggle-switch-transition,
253
+ width: $toggle-switch-bar-width,
254
+ ),
255
+
256
+ after: (
257
+ background-color: $toggle-switch-button-bg,
258
+ border-color: $toggle-switch-button-border-color,
259
+ border-radius:
260
+ clay-enable-rounded(
261
+ $toggle-switch-button-border-radius
262
+ ),
263
+ border-style: solid,
264
+ border-width: $toggle-switch-button-border-width,
265
+ bottom: $toggle-switch-bar-padding,
266
+ content: '',
267
+ display: block,
268
+ height: $toggle-switch-button-width,
269
+ left: $toggle-switch-bar-padding,
270
+ position: absolute,
271
+ top: $toggle-switch-bar-padding,
272
+ transition: $toggle-switch-transition,
273
+ width: $toggle-switch-button-width,
274
+ ),
275
+
276
+ toggle-switch-handle: (
277
+ before: (
278
+ transition: $toggle-switch-transition,
279
+ ),
280
+
281
+ after: (
282
+ content: attr(data-label-off),
283
+ margin-left:
284
+ clay-data-label-text-position(
285
+ $toggle-switch-bar-width,
286
+ $toggle-switch-bar-padding
287
+ ),
288
+ transition: $toggle-switch-transition,
289
+ white-space: nowrap,
290
+ ),
291
+ ),
292
+
293
+ toggle-switch-icon: (
294
+ color: $toggle-switch-bar-icon-color,
295
+ left: $toggle-switch-bar-padding,
296
+ line-height: $toggle-switch-button-width,
297
+ position: absolute,
298
+ text-align: center,
299
+ text-indent: 0,
300
+ top: $toggle-switch-bar-padding,
301
+ transition: $toggle-switch-transition,
302
+ width: $toggle-switch-button-width,
303
+ z-index: 1,
304
+ ),
305
+
306
+ toggle-switch-icon-on: (
307
+ left: $toggle-switch-bar-padding,
308
+ opacity: 0,
309
+ ),
310
+
311
+ toggle-switch-icon-off: (
312
+ left:
313
+ calc(
314
+ #{$toggle-switch-bar-width} -
315
+ #{$toggle-switch-bar-padding} -
316
+ #{$toggle-switch-button-width}
317
+ ),
318
+ ),
319
+
320
+ button-icon: (
321
+ color: $toggle-switch-button-icon-color,
322
+ ),
323
+
324
+ button-icon-on: (
325
+ opacity: 0,
326
+ ),
327
+ ),
328
+
329
+ focus: (
330
+ toggle-switch-bar: (
331
+ before: (
332
+ box-shadow: $toggle-switch-bar-focus-box-shadow,
333
+ ),
334
+ ),
335
+ ),
336
+
337
+ disabled: (
338
+ toggle-switch-bar: (
339
+ cursor: $toggle-switch-disabled-cursor,
340
+ opacity: $toggle-switch-disabled-opacity,
341
+ ),
342
+ ),
343
+
344
+ checked: (
345
+ toggle-switch-bar: (
346
+ before: (
347
+ background-color: $toggle-switch-bar-on-bg,
348
+ border-color: $toggle-switch-bar-on-border-color,
349
+ border-radius:
350
+ clay-enable-rounded(
351
+ $toggle-switch-bar-border-radius
352
+ ),
353
+ border-style: solid,
354
+ border-width: $toggle-switch-bar-border-width,
355
+ ),
356
+
357
+ after: (
358
+ background-color: $toggle-switch-button-on-bg,
359
+ border-color: $toggle-switch-button-on-border-color,
360
+ border-radius:
361
+ clay-enable-rounded(
362
+ $toggle-switch-button-on-border-radius
363
+ ),
364
+ border-style: solid,
365
+ border-width: $toggle-switch-button-border-width,
366
+ left:
367
+ calc(
368
+ #{$toggle-switch-bar-width} -
369
+ #{$toggle-switch-bar-padding} -
370
+ #{$toggle-switch-button-width}
371
+ ),
372
+ ),
373
+
374
+ toggle-switch-handle: (
375
+ after: (
376
+ content: attr(data-label-on),
377
+ ),
378
+ ),
379
+
380
+ toggle-switch-icon: (
381
+ color: $toggle-switch-bar-on-icon-color,
382
+ ),
383
+
384
+ toggle-switch-icon-on: (
385
+ opacity: 1,
386
+ ),
387
+
388
+ toggle-switch-icon-off: (
389
+ opacity: 0,
390
+ ),
391
+
392
+ button-icon: (
393
+ color: $toggle-switch-button-on-icon-color,
394
+ left:
395
+ calc(
396
+ #{$toggle-switch-bar-width} -
397
+ #{$toggle-switch-bar-padding} -
398
+ #{$toggle-switch-button-width}
399
+ ),
400
+ ),
401
+
402
+ button-icon-on: (
403
+ opacity: 1,
404
+ ),
405
+
406
+ button-icon-off: (
407
+ opacity: 0,
408
+ ),
409
+ ),
410
+ ),
411
+
412
+ mobile: (
413
+ height: $toggle-switch-bar-height-mobile,
414
+ width: $toggle-switch-bar-width-mobile,
415
+
416
+ toggle-switch-bar: (
417
+ height: $toggle-switch-bar-height-mobile,
418
+ line-height: $toggle-switch-bar-height-mobile,
419
+ text-indent: 0,
420
+
421
+ before: (
422
+ width: $toggle-switch-bar-width-mobile,
423
+ ),
424
+
425
+ after: (
426
+ bottom: $toggle-switch-bar-padding-mobile,
427
+ height: $toggle-switch-button-width-mobile,
428
+ left: $toggle-switch-bar-padding-mobile,
429
+ top: $toggle-switch-bar-padding-mobile,
430
+ width: $toggle-switch-button-width-mobile,
431
+ ),
432
+
433
+ toggle-switch-handle: (
434
+ min-width: $toggle-switch-bar-width-mobile,
435
+
436
+ after: (
437
+ margin-left:
438
+ clay-data-label-text-position(
439
+ $toggle-switch-bar-width-mobile,
440
+ $toggle-switch-bar-padding-mobile
441
+ ),
442
+ ),
443
+ ),
444
+
445
+ toggle-switch-icon: (
446
+ font-size: $toggle-switch-bar-font-size-mobile,
447
+ left: $toggle-switch-bar-padding-mobile,
448
+ line-height: $toggle-switch-button-width-mobile,
449
+ top: $toggle-switch-bar-padding-mobile,
450
+ width: $toggle-switch-button-width-mobile,
451
+ ),
452
+
453
+ toggle-switch-icon-on: (
454
+ left: $toggle-switch-bar-padding-mobile,
455
+ ),
456
+
457
+ toggle-switch-icon-off: (
458
+ left:
459
+ calc(
460
+ #{$toggle-switch-bar-width-mobile} -
461
+ #{$toggle-switch-bar-padding-mobile} -
462
+ #{$toggle-switch-button-width-mobile}
463
+ ),
464
+ ),
465
+
466
+ button-icon: (
467
+ font-size: $toggle-switch-button-font-size-mobile,
468
+ ),
469
+ ),
470
+
471
+ checked: (
472
+ toggle-switch-bar: (
473
+ after: (
474
+ left:
475
+ calc(
476
+ #{$toggle-switch-bar-width-mobile} -
477
+ #{$toggle-switch-bar-padding-mobile} -
478
+ #{$toggle-switch-button-width-mobile}
479
+ ),
480
+ ),
481
+
482
+ toggle-switch-handle: (
483
+ after: (
484
+ margin-left:
485
+ clay-data-label-text-position(
486
+ $toggle-switch-bar-width-mobile,
487
+ $toggle-switch-bar-padding-mobile
488
+ ),
489
+ ),
490
+ ),
491
+
492
+ button-icon: (
493
+ left:
494
+ calc(
495
+ #{$toggle-switch-bar-width-mobile} -
496
+ #{$toggle-switch-bar-padding-mobile} -
497
+ #{$toggle-switch-button-width-mobile}
498
+ ),
499
+ ),
500
+ ),
501
+ ),
502
+
503
+ toggle-switch-text-left: (
504
+ line-height: $toggle-switch-bar-height-mobile,
505
+ ),
506
+
507
+ toggle-switch-text-right: (
508
+ line-height: $toggle-switch-bar-height-mobile,
509
+ ),
510
+ ),
511
+ ),
512
+ $toggle-switch-check
513
+ );
514
+
515
+ // .toggle-switch-label
516
+
517
+ $toggle-switch-label: ();
518
+ $toggle-switch-label: map-merge(
519
+ (
520
+ display: block,
521
+ margin-bottom: var(--toggle-switch-label-margin-bottom, 2px),
522
+ ),
523
+ $toggle-switch-label
524
+ );
525
+
526
+ // .toggle-switch-text
527
+
528
+ $toggle-switch-text: ();
529
+ $toggle-switch-text: map-merge(
530
+ (
531
+ display: block,
532
+ font-size:
533
+ var(
534
+ --toggle-switch-text-font-size,
535
+ $toggle-switch-text-font-size
536
+ ),
537
+ ),
538
+ $toggle-switch-text
539
+ );
540
+
541
+ // .toggle-switch-text-left
542
+
543
+ $toggle-switch-text-left: ();
544
+ $toggle-switch-text-left: map-deep-merge(
545
+ (
546
+ display: inline-flex,
547
+ line-height: $toggle-switch-bar-height,
548
+ margin-right: 8px,
549
+ ),
550
+ $toggle-switch-text-left
551
+ );
552
+
553
+ // .toggle-switch-text-right
554
+
555
+ $toggle-switch-text-right: ();
556
+ $toggle-switch-text-right: map-merge(
557
+ (
558
+ display: inline-flex,
559
+ line-height: $toggle-switch-bar-height,
560
+ margin-left: 8px,
561
+ ),
562
+ $toggle-switch-text-right
563
+ );
564
+
565
+ // .simple-toggle-switch
566
+
567
+ $simple-toggle-switch-label-line-height: 1;
568
+ $simple-toggle-switch-label-spacer-x: 8px;
569
+
570
+ $simple-toggle-switch: ();
571
+ $simple-toggle-switch: map-deep-merge(
572
+ (
573
+ breakpoint-down: sm,
574
+
575
+ align-items: center,
576
+ display: inline-flex,
577
+
578
+ toggle-switch-label: (
579
+ line-height: $simple-toggle-switch-label-line-height,
580
+ margin-bottom: 0,
581
+ max-width:
582
+ calc(
583
+ 100% -
584
+ #{clay-data-label-text-position(
585
+ $toggle-switch-bar-width,
586
+ $toggle-switch-bar-padding
587
+ )}
588
+ ),
589
+ ),
590
+
591
+ mobile: (
592
+ toggle-switch-label: (
593
+ max-width:
594
+ calc(
595
+ 100% -
596
+ #{clay-data-label-text-position(
597
+ $toggle-switch-bar-width-mobile,
598
+ $toggle-switch-bar-padding-mobile
599
+ )}
600
+ ),
601
+ ),
602
+ ),
603
+ ),
604
+ $simple-toggle-switch
605
+ );
606
+
607
+ // .simple-toggle-switch-reverse
608
+
609
+ $simple-toggle-switch-reverse: ();
610
+ $simple-toggle-switch-reverse: map-deep-merge(
611
+ (
612
+ breakpoint-down: sm,
613
+
614
+ toggle-switch-label: (
615
+ margin-right: $simple-toggle-switch-label-spacer-x,
616
+ ),
617
+
618
+ toggle-switch-check-bar: (
619
+ order: 5,
620
+ ),
621
+
622
+ toggle-switch-check: (
623
+ toggle-switch-bar: (
624
+ order: 5,
625
+ ),
626
+ ),
627
+ ),
628
+ $simple-toggle-switch-reverse
629
+ );
630
+
631
+ // .toggle-switch-sm
632
+
633
+ $toggle-switch-sizes: ();
634
+ $toggle-switch-sizes: map-deep-merge(
635
+ (
636
+ toggle-switch-sm: (
637
+ simple-toggle-switch: (
638
+ toggle-switch-label: (
639
+ max-width: calc(100% - 34px),
640
+ ),
641
+ ),
642
+
643
+ toggle-switch-check: (
644
+ height: 16px,
645
+ width: 30px,
646
+
647
+ toggle-switch-bar: (
648
+ height: 16px,
649
+ line-height: 16px,
650
+
651
+ before: (
652
+ width: 30px,
653
+ ),
654
+
655
+ after: (
656
+ bottom: 0,
657
+ height: 12px,
658
+ left: 2px,
659
+ top: 2px,
660
+ width: 12px,
661
+ ),
662
+
663
+ toggle-switch-handle: (
664
+ min-width: 30px,
665
+
666
+ after: (
667
+ margin-left: 34px,
668
+ ),
669
+ ),
670
+
671
+ toggle-switch-icon: (
672
+ font-size: 8px,
673
+ height: 16px,
674
+ left: 0,
675
+ line-height: 16px,
676
+ top: 0px,
677
+ width: 16px,
678
+ ),
679
+
680
+ toggle-switch-icon-off: (
681
+ left: 13px,
682
+ ),
683
+ ),
684
+
685
+ checked: (
686
+ toggle-switch-bar: (
687
+ after: (
688
+ left: 16px,
689
+ ),
690
+
691
+ button-icon: (
692
+ left: 14px,
693
+ ),
694
+ ),
695
+ ),
696
+ ),
697
+
698
+ toggle-switch-label: (
699
+ font-size: 12px,
700
+ max-width: calc(100% - 38px),
701
+ ),
702
+ ),
703
+ ),
704
+ $toggle-switch-sizes
705
+ );
706
+ }