@clayui/css 3.159.0 → 3.160.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 (243) hide show
  1. package/lib/css/atlas.css +2091 -1937
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +2071 -1905
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +1749 -1628
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/blue-print.svg +9 -0
  8. package/lib/images/icons/calculator.svg +10 -0
  9. package/lib/images/icons/icons.svg +1 -1
  10. package/lib/images/icons/layout-new-window.svg +10 -0
  11. package/lib/images/icons/medal.svg +10 -0
  12. package/lib/images/icons/megaphone.svg +9 -0
  13. package/lib/images/icons/price-list.svg +11 -0
  14. package/lib/images/icons/process-builder.svg +9 -0
  15. package/lib/images/icons/product-configuration.svg +10 -0
  16. package/lib/images/icons/product-menu-open.svg +2 -2
  17. package/lib/images/icons/products.svg +9 -0
  18. package/lib/images/icons/publications.svg +10 -0
  19. package/lib/images/icons/puzzle.svg +9 -0
  20. package/lib/images/icons/rocket.svg +11 -0
  21. package/lib/images/icons/submission.svg +10 -0
  22. package/lib/images/icons/synonyms.svg +9 -0
  23. package/package.json +1 -1
  24. package/src/images/icons/blue-print.svg +9 -0
  25. package/src/images/icons/calculator.svg +10 -0
  26. package/src/images/icons/icons.svg +1 -1
  27. package/src/images/icons/layout-new-window.svg +10 -0
  28. package/src/images/icons/medal.svg +10 -0
  29. package/src/images/icons/megaphone.svg +9 -0
  30. package/src/images/icons/price-list.svg +11 -0
  31. package/src/images/icons/process-builder.svg +9 -0
  32. package/src/images/icons/product-configuration.svg +10 -0
  33. package/src/images/icons/product-menu-open.svg +2 -2
  34. package/src/images/icons/products.svg +9 -0
  35. package/src/images/icons/publications.svg +10 -0
  36. package/src/images/icons/puzzle.svg +9 -0
  37. package/src/images/icons/rocket.svg +11 -0
  38. package/src/images/icons/submission.svg +10 -0
  39. package/src/images/icons/synonyms.svg +9 -0
  40. package/src/scss/_license-text.scss +1 -1
  41. package/src/scss/atlas/variables/_alerts.scss +102 -11
  42. package/src/scss/atlas/variables/_application-bar.scss +7 -0
  43. package/src/scss/atlas/variables/_badges.scss +36 -8
  44. package/src/scss/atlas/variables/_breadcrumbs.scss +2 -1
  45. package/src/scss/atlas/variables/_cards.scss +5 -0
  46. package/src/scss/atlas/variables/_clay-color.scss +5 -0
  47. package/src/scss/atlas/variables/_custom-forms.scss +36 -5
  48. package/src/scss/atlas/variables/_date-picker.scss +14 -2
  49. package/src/scss/atlas/variables/_dropdowns.scss +9 -2
  50. package/src/scss/atlas/variables/_forms.scss +35 -5
  51. package/src/scss/atlas/variables/_globals.scss +110 -63
  52. package/src/scss/atlas/variables/_labels.scss +55 -0
  53. package/src/scss/atlas/variables/_links.scss +18 -0
  54. package/src/scss/atlas/variables/_list-group.scss +15 -4
  55. package/src/scss/atlas/variables/_management-bar.scss +11 -0
  56. package/src/scss/atlas/variables/_menubar.scss +70 -22
  57. package/src/scss/atlas/variables/_modals.scss +16 -0
  58. package/src/scss/atlas/variables/_navbar.scss +7 -0
  59. package/src/scss/atlas/variables/_navigation-bar.scss +25 -1
  60. package/src/scss/atlas/variables/_navs.scss +5 -2
  61. package/src/scss/atlas/variables/_pagination.scss +42 -22
  62. package/src/scss/atlas/variables/_panels.scss +7 -0
  63. package/src/scss/atlas/variables/_popovers.scss +6 -4
  64. package/src/scss/atlas/variables/_range.scss +6 -0
  65. package/src/scss/atlas/variables/_sheets.scss +1 -0
  66. package/src/scss/atlas/variables/_sidebar.scss +10 -0
  67. package/src/scss/atlas/variables/_tables.scss +27 -3
  68. package/src/scss/atlas/variables/_time.scss +1 -0
  69. package/src/scss/atlas/variables/_toggle-switch.scss +19 -7
  70. package/src/scss/atlas/variables/_utilities.scss +3 -0
  71. package/src/scss/cadmin/components/_alerts.scss +3 -1
  72. package/src/scss/cadmin/components/_button-groups.scss +2 -2
  73. package/src/scss/cadmin/components/_cards.scss +2 -2
  74. package/src/scss/cadmin/components/_drilldown.scss +10 -10
  75. package/src/scss/cadmin/components/_dropdowns.scss +2 -2
  76. package/src/scss/cadmin/components/_forms.scss +2 -2
  77. package/src/scss/cadmin/components/_grid.scss +6 -6
  78. package/src/scss/cadmin/components/_icons.scss +10 -2
  79. package/src/scss/cadmin/components/_images.scss +1 -1
  80. package/src/scss/cadmin/components/_input-groups.scss +4 -4
  81. package/src/scss/cadmin/components/_list-group.scss +11 -10
  82. package/src/scss/cadmin/components/_modals.scss +5 -5
  83. package/src/scss/cadmin/components/_multi-step-nav.scss +45 -20
  84. package/src/scss/cadmin/components/_navbar.scss +14 -8
  85. package/src/scss/cadmin/components/_navs.scss +1 -1
  86. package/src/scss/cadmin/components/_panels.scss +51 -25
  87. package/src/scss/cadmin/components/_popovers.scss +25 -21
  88. package/src/scss/cadmin/components/_sheets.scss +40 -14
  89. package/src/scss/cadmin/components/_time.scss +6 -2
  90. package/src/scss/cadmin/components/_timelines.scss +15 -8
  91. package/src/scss/cadmin/components/_tooltip.scss +8 -7
  92. package/src/scss/cadmin/components/_treeview.scss +8 -1
  93. package/src/scss/cadmin/components/_type.scss +4 -2
  94. package/src/scss/cadmin/components/_utilities-functional-important.scss +5 -5
  95. package/src/scss/cadmin/components/_utilities.scss +13 -13
  96. package/src/scss/cadmin/variables/_alerts.scss +184 -34
  97. package/src/scss/cadmin/variables/_badges.scss +121 -21
  98. package/src/scss/cadmin/variables/_breadcrumbs.scss +18 -11
  99. package/src/scss/cadmin/variables/_buttons.scss +15 -10
  100. package/src/scss/cadmin/variables/_cards.scss +89 -32
  101. package/src/scss/cadmin/variables/_clay-color.scss +40 -18
  102. package/src/scss/cadmin/variables/_custom-forms.scss +49 -10
  103. package/src/scss/cadmin/variables/_date-picker.scss +47 -19
  104. package/src/scss/cadmin/variables/_dropdowns.scss +105 -49
  105. package/src/scss/cadmin/variables/_dual-listbox.scss +1 -1
  106. package/src/scss/cadmin/variables/_empty-state.scss +5 -2
  107. package/src/scss/cadmin/variables/_forms.scss +218 -74
  108. package/src/scss/cadmin/variables/_globals-z-index.scss +28 -5
  109. package/src/scss/cadmin/variables/_globals.scss +141 -71
  110. package/src/scss/cadmin/variables/_images.scss +1 -2
  111. package/src/scss/cadmin/variables/_labels.scss +99 -6
  112. package/src/scss/cadmin/variables/_links.scss +47 -11
  113. package/src/scss/cadmin/variables/_list-group.scss +25 -9
  114. package/src/scss/cadmin/variables/_loaders.scss +18 -2
  115. package/src/scss/cadmin/variables/_management-bar.scss +66 -26
  116. package/src/scss/cadmin/variables/_menubar.scss +137 -43
  117. package/src/scss/cadmin/variables/_modals.scss +75 -26
  118. package/src/scss/cadmin/variables/_multi-step-nav.scss +34 -14
  119. package/src/scss/cadmin/variables/_navbar.scss +22 -15
  120. package/src/scss/cadmin/variables/_navigation-bar.scss +73 -37
  121. package/src/scss/cadmin/variables/_navs.scss +65 -33
  122. package/src/scss/cadmin/variables/_pagination.scss +60 -22
  123. package/src/scss/cadmin/variables/_panels.scss +34 -16
  124. package/src/scss/cadmin/variables/_popovers.scss +66 -77
  125. package/src/scss/cadmin/variables/_progress-bars.scss +8 -3
  126. package/src/scss/cadmin/variables/_range.scss +29 -9
  127. package/src/scss/cadmin/variables/_reorder.scss +7 -6
  128. package/src/scss/cadmin/variables/_resizer.scss +5 -3
  129. package/src/scss/cadmin/variables/_sheets.scss +21 -12
  130. package/src/scss/cadmin/variables/_sidebar.scss +76 -5
  131. package/src/scss/cadmin/variables/_slideout.scss +88 -31
  132. package/src/scss/cadmin/variables/_stickers.scss +36 -8
  133. package/src/scss/cadmin/variables/_tables.scss +142 -51
  134. package/src/scss/cadmin/variables/_tbar.scss +79 -31
  135. package/src/scss/cadmin/variables/_time.scss +14 -12
  136. package/src/scss/cadmin/variables/_timelines.scss +4 -2
  137. package/src/scss/cadmin/variables/_toggle-switch.scss +117 -37
  138. package/src/scss/cadmin/variables/_tooltip.scss +47 -49
  139. package/src/scss/cadmin/variables/_treeview.scss +62 -10
  140. package/src/scss/cadmin/variables/_type.scss +11 -9
  141. package/src/scss/cadmin/variables/_utilities.scss +123 -6
  142. package/src/scss/components/_alerts.scss +1 -1
  143. package/src/scss/components/_button-groups.scss +2 -2
  144. package/src/scss/components/_cards.scss +10 -10
  145. package/src/scss/components/_carousel.scss +2 -2
  146. package/src/scss/components/_custom-forms.scss +23 -12
  147. package/src/scss/components/_drilldown.scss +8 -4
  148. package/src/scss/components/_forms.scss +6 -6
  149. package/src/scss/components/_grid.scss +7 -7
  150. package/src/scss/components/_icons.scss +10 -2
  151. package/src/scss/components/_images.scss +1 -1
  152. package/src/scss/components/_input-groups.scss +7 -5
  153. package/src/scss/components/_jumbotron.scss +2 -2
  154. package/src/scss/components/_list-group.scss +29 -14
  155. package/src/scss/components/_modals.scss +5 -5
  156. package/src/scss/components/_multi-step-nav.scss +32 -12
  157. package/src/scss/components/_navbar.scss +10 -6
  158. package/src/scss/components/_panels.scss +82 -51
  159. package/src/scss/components/_popovers.scss +21 -25
  160. package/src/scss/components/_sheets.scss +38 -14
  161. package/src/scss/components/_side-navigation.scss +2 -2
  162. package/src/scss/components/_time.scss +2 -2
  163. package/src/scss/components/_timelines.scss +16 -12
  164. package/src/scss/components/_tooltip.scss +8 -6
  165. package/src/scss/components/_treeview.scss +8 -1
  166. package/src/scss/components/_type.scss +2 -2
  167. package/src/scss/components/_utilities-functional-important.scss +5 -5
  168. package/src/scss/components/_utilities.scss +13 -13
  169. package/src/scss/functions/_global-functions.scss +2 -2
  170. package/src/scss/functions/_lx-icons-generated.scss +29 -1
  171. package/src/scss/mixins/_alerts.scss +10 -0
  172. package/src/scss/mixins/_aspect-ratio.scss +11 -0
  173. package/src/scss/mixins/_badges.scss +14 -2
  174. package/src/scss/mixins/_buttons.scss +68 -8
  175. package/src/scss/mixins/_cards.scss +81 -0
  176. package/src/scss/mixins/_close.scss +54 -4
  177. package/src/scss/mixins/_dropdown-menu.scss +55 -6
  178. package/src/scss/mixins/_forms.scss +150 -0
  179. package/src/scss/mixins/_globals.scss +101 -358
  180. package/src/scss/mixins/_grid.scss +21 -8
  181. package/src/scss/mixins/_highlight.scss +14 -0
  182. package/src/scss/mixins/_input-groups.scss +15 -0
  183. package/src/scss/mixins/_labels.scss +64 -10
  184. package/src/scss/mixins/_links.scss +55 -4
  185. package/src/scss/mixins/_list-group.scss +8 -4
  186. package/src/scss/mixins/_menubar.scss +80 -4
  187. package/src/scss/mixins/_modals.scss +10 -18
  188. package/src/scss/mixins/_nav.scss +19 -0
  189. package/src/scss/mixins/_navbar.scss +237 -49
  190. package/src/scss/mixins/_panels.scss +48 -4
  191. package/src/scss/mixins/_stickers.scss +8 -0
  192. package/src/scss/mixins/_tbar.scss +65 -10
  193. package/src/scss/mixins/_timelines.scss +21 -11
  194. package/src/scss/mixins/_toggle-switch.scss +4 -0
  195. package/src/scss/mixins/_utilities.scss +9 -0
  196. package/src/scss/variables/_alerts.scss +184 -29
  197. package/src/scss/variables/_application-bar.scss +11 -4
  198. package/src/scss/variables/_badges.scss +133 -35
  199. package/src/scss/variables/_breadcrumbs.scss +13 -4
  200. package/src/scss/variables/_buttons.scss +11 -10
  201. package/src/scss/variables/_cards.scss +131 -53
  202. package/src/scss/variables/_clay-color.scss +36 -18
  203. package/src/scss/variables/_custom-forms.scss +47 -12
  204. package/src/scss/variables/_date-picker.scss +41 -16
  205. package/src/scss/variables/_drilldown.scss +3 -3
  206. package/src/scss/variables/_dropdowns.scss +108 -49
  207. package/src/scss/variables/_dual-listbox.scss +1 -1
  208. package/src/scss/variables/_empty-state.scss +5 -2
  209. package/src/scss/variables/_forms.scss +200 -64
  210. package/src/scss/variables/_globals-z-index.scss +26 -5
  211. package/src/scss/variables/_globals.scss +145 -68
  212. package/src/scss/variables/_images.scss +1 -2
  213. package/src/scss/variables/_labels.scss +103 -6
  214. package/src/scss/variables/_links.scss +39 -10
  215. package/src/scss/variables/_list-group.scss +39 -13
  216. package/src/scss/variables/_loaders.scss +18 -2
  217. package/src/scss/variables/_management-bar.scss +23 -6
  218. package/src/scss/variables/_menubar.scss +86 -19
  219. package/src/scss/variables/_modals.scss +66 -25
  220. package/src/scss/variables/_multi-step-nav.scss +29 -11
  221. package/src/scss/variables/_navbar.scss +14 -8
  222. package/src/scss/variables/_navigation-bar.scss +26 -4
  223. package/src/scss/variables/_navs.scss +76 -44
  224. package/src/scss/variables/_pagination.scss +30 -5
  225. package/src/scss/variables/_panels.scss +77 -24
  226. package/src/scss/variables/_popovers.scss +65 -78
  227. package/src/scss/variables/_progress-bars.scss +11 -2
  228. package/src/scss/variables/_range.scss +35 -9
  229. package/src/scss/variables/_reorder.scss +7 -6
  230. package/src/scss/variables/_resizer.scss +5 -3
  231. package/src/scss/variables/_sheets.scss +21 -13
  232. package/src/scss/variables/_sidebar.scss +72 -4
  233. package/src/scss/variables/_slideout.scss +87 -31
  234. package/src/scss/variables/_stickers.scss +50 -9
  235. package/src/scss/variables/_tables.scss +125 -33
  236. package/src/scss/variables/_tbar.scss +79 -30
  237. package/src/scss/variables/_time.scss +13 -11
  238. package/src/scss/variables/_timelines.scss +2 -1
  239. package/src/scss/variables/_toggle-switch.scss +114 -30
  240. package/src/scss/variables/_tooltip.scss +46 -49
  241. package/src/scss/variables/_treeview.scss +63 -10
  242. package/src/scss/variables/_type.scss +9 -7
  243. package/src/scss/variables/_utilities.scss +124 -6
package/src/scss/cadmin/variables/_toggle-switch.scss CHANGED
@@ -11,16 +11,21 @@ $cadmin-toggle-switch-transition:
11
11
 
12
12
  // must all be same units--start
13
13
  $cadmin-toggle-switch-bar-padding: 4px !default; // space between button and bar, can be negative value
14
- $cadmin-toggle-switch-bar-padding-mobile: 4px !default;
15
14
  $cadmin-toggle-switch-button-width: 16px !default;
15
+
16
+ $cadmin-toggle-switch-bar-padding-mobile: 4px !default;
16
17
  $cadmin-toggle-switch-button-width-mobile: 16px !default; // 16px
17
18
 
18
- $cadmin-toggle-switch-bar-height: ($cadmin-toggle-switch-bar-padding * 2) +
19
- $cadmin-toggle-switch-button-width !default;
20
- $cadmin-toggle-switch-bar-height-mobile: (
21
- $cadmin-toggle-switch-bar-padding-mobile * 2
22
- ) + $cadmin-toggle-switch-button-width-mobile !default;
19
+ $cadmin-toggle-switch-bar-height: calc(
20
+ #{$cadmin-toggle-switch-bar-padding} * 2 + #{$cadmin-toggle-switch-button-width}
21
+ ) !default;
22
+
23
+ $cadmin-toggle-switch-bar-height-mobile: calc(
24
+ #{$cadmin-toggle-switch-bar-padding-mobile} * 2 + #{$cadmin-toggle-switch-button-width-mobile}
25
+ ) !default;
26
+
23
27
  $cadmin-toggle-switch-bar-width: 48px !default; // width of switch bar
28
+
24
29
  $cadmin-toggle-switch-bar-width-mobile: 40px !default; // width of switch bar
25
30
  // must all be same units--end
26
31
 
@@ -28,19 +33,22 @@ $cadmin-toggle-switch-bar-bg: $cadmin-gray-500 !default;
28
33
  $cadmin-toggle-switch-bar-border-color: $cadmin-toggle-switch-bar-bg !default;
29
34
  $cadmin-toggle-switch-bar-border-radius: 20px !default;
30
35
  $cadmin-toggle-switch-bar-border-width: 1px !default;
31
- $cadmin-toggle-switch-bar-focus-box-shadow: $cadmin-custom-control-indicator-focus-box-shadow !default;
32
36
  $cadmin-toggle-switch-bar-font-size: 10px !default;
33
- $cadmin-toggle-switch-bar-font-size-mobile: 10px !default;
34
37
  $cadmin-toggle-switch-bar-icon-color: $cadmin-white !default;
35
38
 
39
+ $cadmin-toggle-switch-bar-focus-box-shadow: $cadmin-custom-control-indicator-focus-box-shadow !default;
40
+
36
41
  $cadmin-toggle-switch-button-bg: $cadmin-white !default;
37
42
  $cadmin-toggle-switch-button-border-color: $cadmin-toggle-switch-button-bg !default;
38
43
  $cadmin-toggle-switch-button-border-radius: 50% !default;
39
44
  $cadmin-toggle-switch-button-border-width: 1px !default;
40
45
  $cadmin-toggle-switch-button-font-size: $cadmin-toggle-switch-bar-font-size !default; // 12px
41
- $cadmin-toggle-switch-button-font-size-mobile: $cadmin-toggle-switch-bar-font-size-mobile !default; // 10px
42
46
  $cadmin-toggle-switch-button-icon-color: $cadmin-gray-900 !default;
43
47
 
48
+ $cadmin-toggle-switch-bar-font-size-mobile: 10px !default;
49
+
50
+ $cadmin-toggle-switch-button-font-size-mobile: $cadmin-toggle-switch-bar-font-size-mobile !default; // 10px
51
+
44
52
  // Toggle Switch On
45
53
 
46
54
  $cadmin-toggle-switch-bar-on-bg: $cadmin-component-active-bg !default;
@@ -78,12 +86,15 @@ $cadmin-toggle-switch: map-deep-merge(
78
86
  font-weight: $cadmin-toggle-switch-font-weight,
79
87
  max-width: 100%,
80
88
  position: relative,
89
+
81
90
  disabled: (
82
91
  cursor: $cadmin-toggle-switch-disabled-cursor,
92
+
83
93
  toggle-switch-label: (
84
94
  color: $cadmin-toggle-switch-label-disabled-color,
85
95
  cursor: $cadmin-toggle-switch-disabled-cursor,
86
96
  ),
97
+
87
98
  toggle-switch-text: (
88
99
  color: $cadmin-toggle-switch-text-disabled-color,
89
100
  ),
@@ -113,12 +124,15 @@ $cadmin-toggle-switch-bar: map-deep-merge(
113
124
  min-width: $cadmin-toggle-switch-bar-width,
114
125
  text-transform: uppercase,
115
126
  ),
127
+
116
128
  toggle-switch-icon: (
117
129
  font-size: $cadmin-toggle-switch-bar-font-size,
130
+
118
131
  lexicon-icon: (
119
132
  margin-top: -0.2em,
120
133
  ),
121
134
  ),
135
+
122
136
  button-icon: (
123
137
  font-size: $cadmin-toggle-switch-button-font-size,
124
138
  ),
@@ -132,21 +146,24 @@ $cadmin-toggle-switch-check: () !default;
132
146
  $cadmin-toggle-switch-check: map-deep-merge(
133
147
  (
134
148
  breakpoint-down: sm,
135
- bottom: 0,
149
+
150
+ bottom: 0px,
136
151
  font-size: 62.5%,
137
152
  height: $cadmin-toggle-switch-bar-height,
138
153
  opacity: 0,
139
154
  position: absolute,
140
155
  width: $cadmin-toggle-switch-bar-width,
141
156
  z-index: 2,
157
+
142
158
  toggle-switch-bar: (
143
159
  display: inline-flex,
144
160
  font-size: $cadmin-toggle-switch-bar-font-size,
145
161
  height: $cadmin-toggle-switch-bar-height,
146
162
  line-height: $cadmin-toggle-switch-bar-height,
147
163
  position: relative,
148
- text-indent: 0,
164
+ text-indent: 0px,
149
165
  user-select: none,
166
+
150
167
  before: (
151
168
  background-color: $cadmin-toggle-switch-bar-bg,
152
169
  border-color: $cadmin-toggle-switch-bar-border-color,
@@ -154,15 +171,16 @@ $cadmin-toggle-switch-check: map-deep-merge(
154
171
  clay-enable-rounded($cadmin-toggle-switch-bar-border-radius),
155
172
  border-style: solid,
156
173
  border-width: $cadmin-toggle-switch-bar-border-width,
157
- bottom: 0,
174
+ bottom: 0px,
158
175
  content: ' ',
159
176
  display: block,
160
- left: 0,
177
+ left: 0px,
161
178
  position: absolute,
162
- top: 0,
179
+ top: 0px,
163
180
  transition: $cadmin-toggle-switch-transition,
164
181
  width: $cadmin-toggle-switch-bar-width,
165
182
  ),
183
+
166
184
  after: (
167
185
  background-color: $cadmin-toggle-switch-button-bg,
168
186
  border-color: $cadmin-toggle-switch-button-border-color,
@@ -182,10 +200,12 @@ $cadmin-toggle-switch-check: map-deep-merge(
182
200
  transition: $cadmin-toggle-switch-transition,
183
201
  width: $cadmin-toggle-switch-button-width,
184
202
  ),
203
+
185
204
  toggle-switch-handle: (
186
205
  before: (
187
206
  transition: $cadmin-toggle-switch-transition,
188
207
  ),
208
+
189
209
  after: (
190
210
  content: attr(data-label-off),
191
211
  margin-left:
@@ -197,34 +217,42 @@ $cadmin-toggle-switch-check: map-deep-merge(
197
217
  white-space: nowrap,
198
218
  ),
199
219
  ),
220
+
200
221
  toggle-switch-icon: (
201
222
  color: $cadmin-toggle-switch-bar-icon-color,
202
223
  left: $cadmin-toggle-switch-bar-padding,
203
224
  line-height: $cadmin-toggle-switch-button-width,
204
225
  position: absolute,
205
226
  text-align: center,
206
- text-indent: 0,
227
+ text-indent: 0px,
207
228
  top: $cadmin-toggle-switch-bar-padding,
208
229
  transition: $cadmin-toggle-switch-transition,
209
230
  width: $cadmin-toggle-switch-button-width,
210
231
  z-index: 1,
211
232
  ),
233
+
212
234
  toggle-switch-icon-on: (
213
235
  left: $cadmin-toggle-switch-bar-padding,
214
236
  opacity: 0,
215
237
  ),
238
+
216
239
  toggle-switch-icon-off: (
217
- left: $cadmin-toggle-switch-bar-width -
218
- $cadmin-toggle-switch-bar-padding -
219
- $cadmin-toggle-switch-button-width,
240
+ left:
241
+ calc(
242
+ #{$cadmin-toggle-switch-bar-width} - #{$cadmin-toggle-switch-bar-padding} -
243
+ #{$cadmin-toggle-switch-button-width}
244
+ ),
220
245
  ),
246
+
221
247
  button-icon: (
222
248
  color: $cadmin-toggle-switch-button-icon-color,
223
249
  ),
250
+
224
251
  button-icon-on: (
225
252
  opacity: 0,
226
253
  ),
227
254
  ),
255
+
228
256
  focus: (
229
257
  toggle-switch-bar: (
230
258
  before: (
@@ -232,12 +260,14 @@ $cadmin-toggle-switch-check: map-deep-merge(
232
260
  ),
233
261
  ),
234
262
  ),
263
+
235
264
  disabled: (
236
265
  toggle-switch-bar: (
237
266
  cursor: $cadmin-toggle-switch-disabled-cursor,
238
267
  opacity: $cadmin-toggle-switch-disabled-opacity,
239
268
  ),
240
269
  ),
270
+
241
271
  checked: (
242
272
  toggle-switch-bar: (
243
273
  before: (
@@ -250,6 +280,7 @@ $cadmin-toggle-switch-check: map-deep-merge(
250
280
  border-style: solid,
251
281
  border-width: $cadmin-toggle-switch-bar-border-width,
252
282
  ),
283
+
253
284
  after: (
254
285
  background-color: $cadmin-toggle-switch-button-on-bg,
255
286
  border-color: $cadmin-toggle-switch-button-on-border-color,
@@ -259,48 +290,63 @@ $cadmin-toggle-switch-check: map-deep-merge(
259
290
  ),
260
291
  border-style: solid,
261
292
  border-width: $cadmin-toggle-switch-button-border-width,
262
- left: $cadmin-toggle-switch-bar-width -
263
- $cadmin-toggle-switch-bar-padding -
264
- $cadmin-toggle-switch-button-width,
293
+ left:
294
+ calc(
295
+ #{$cadmin-toggle-switch-bar-width} - #{$cadmin-toggle-switch-bar-padding} -
296
+ #{$cadmin-toggle-switch-button-width}
297
+ ),
265
298
  ),
299
+
266
300
  toggle-switch-handle: (
267
301
  after: (
268
302
  content: attr(data-label-on),
269
303
  ),
270
304
  ),
305
+
271
306
  toggle-switch-icon: (
272
307
  color: $cadmin-toggle-switch-bar-on-icon-color,
273
308
  ),
309
+
274
310
  toggle-switch-icon-on: (
275
311
  opacity: 1,
276
312
  ),
313
+
277
314
  toggle-switch-icon-off: (
278
315
  opacity: 0,
279
316
  ),
317
+
280
318
  button-icon: (
281
319
  color: $cadmin-toggle-switch-button-on-icon-color,
282
- left: $cadmin-toggle-switch-bar-width -
283
- $cadmin-toggle-switch-bar-padding -
284
- $cadmin-toggle-switch-button-width,
320
+ left:
321
+ calc(
322
+ #{$cadmin-toggle-switch-bar-width} - #{$cadmin-toggle-switch-bar-padding} -
323
+ #{$cadmin-toggle-switch-button-width}
324
+ ),
285
325
  ),
326
+
286
327
  button-icon-on: (
287
328
  opacity: 1,
288
329
  ),
330
+
289
331
  button-icon-off: (
290
332
  opacity: 0,
291
333
  ),
292
334
  ),
293
335
  ),
336
+
294
337
  mobile: (
295
338
  height: $cadmin-toggle-switch-bar-height-mobile,
296
339
  width: $cadmin-toggle-switch-bar-width-mobile,
340
+
297
341
  toggle-switch-bar: (
298
342
  height: $cadmin-toggle-switch-bar-height-mobile,
299
343
  line-height: $cadmin-toggle-switch-bar-height-mobile,
300
- text-indent: 0,
344
+ text-indent: 0px,
345
+
301
346
  before: (
302
347
  width: $cadmin-toggle-switch-bar-width-mobile,
303
348
  ),
349
+
304
350
  after: (
305
351
  bottom: $cadmin-toggle-switch-bar-padding-mobile,
306
352
  height: $cadmin-toggle-switch-button-width-mobile,
@@ -308,8 +354,10 @@ $cadmin-toggle-switch-check: map-deep-merge(
308
354
  top: $cadmin-toggle-switch-bar-padding-mobile,
309
355
  width: $cadmin-toggle-switch-button-width-mobile,
310
356
  ),
357
+
311
358
  toggle-switch-handle: (
312
359
  min-width: $cadmin-toggle-switch-bar-width-mobile,
360
+
313
361
  after: (
314
362
  margin-left:
315
363
  clay-data-label-text-position(
@@ -318,6 +366,7 @@ $cadmin-toggle-switch-check: map-deep-merge(
318
366
  ),
319
367
  ),
320
368
  ),
369
+
321
370
  toggle-switch-icon: (
322
371
  font-size: $cadmin-toggle-switch-bar-font-size-mobile,
323
372
  left: $cadmin-toggle-switch-bar-padding-mobile,
@@ -325,25 +374,34 @@ $cadmin-toggle-switch-check: map-deep-merge(
325
374
  top: $cadmin-toggle-switch-bar-padding-mobile,
326
375
  width: $cadmin-toggle-switch-button-width-mobile,
327
376
  ),
377
+
328
378
  toggle-switch-icon-on: (
329
379
  left: $cadmin-toggle-switch-bar-padding-mobile,
330
380
  ),
381
+
331
382
  toggle-switch-icon-off: (
332
- left: $cadmin-toggle-switch-bar-width-mobile -
333
- $cadmin-toggle-switch-bar-padding-mobile -
334
- $cadmin-toggle-switch-button-width-mobile,
383
+ left:
384
+ calc(
385
+ #{$cadmin-toggle-switch-bar-width-mobile} - #{$cadmin-toggle-switch-bar-padding-mobile} -
386
+ #{$cadmin-toggle-switch-button-width-mobile}
387
+ ),
335
388
  ),
389
+
336
390
  button-icon: (
337
391
  font-size: $cadmin-toggle-switch-button-font-size-mobile,
338
392
  ),
339
393
  ),
394
+
340
395
  checked: (
341
396
  toggle-switch-bar: (
342
397
  after: (
343
- left: $cadmin-toggle-switch-bar-width-mobile -
344
- $cadmin-toggle-switch-bar-padding-mobile -
345
- $cadmin-toggle-switch-button-width-mobile,
398
+ left:
399
+ calc(
400
+ #{$cadmin-toggle-switch-bar-width-mobile} - #{$cadmin-toggle-switch-bar-padding-mobile} -
401
+ #{$cadmin-toggle-switch-button-width-mobile}
402
+ ),
346
403
  ),
404
+
347
405
  toggle-switch-handle: (
348
406
  after: (
349
407
  margin-left:
@@ -353,16 +411,21 @@ $cadmin-toggle-switch-check: map-deep-merge(
353
411
  ),
354
412
  ),
355
413
  ),
414
+
356
415
  button-icon: (
357
- left: $cadmin-toggle-switch-bar-width-mobile -
358
- $cadmin-toggle-switch-bar-padding-mobile -
359
- $cadmin-toggle-switch-button-width-mobile,
416
+ left:
417
+ calc(
418
+ #{$cadmin-toggle-switch-bar-width-mobile} - #{$cadmin-toggle-switch-bar-padding-mobile} -
419
+ #{$cadmin-toggle-switch-button-width-mobile}
420
+ ),
360
421
  ),
361
422
  ),
362
423
  ),
424
+
363
425
  toggle-switch-text-left: (
364
426
  line-height: $cadmin-toggle-switch-bar-height-mobile,
365
427
  ),
428
+
366
429
  toggle-switch-text-right: (
367
430
  line-height: $cadmin-toggle-switch-bar-height-mobile,
368
431
  ),
@@ -426,11 +489,13 @@ $cadmin-simple-toggle-switch: () !default;
426
489
  $cadmin-simple-toggle-switch: map-deep-merge(
427
490
  (
428
491
  breakpoint-down: sm,
492
+
429
493
  align-items: center,
430
494
  display: inline-flex,
495
+
431
496
  toggle-switch-label: (
432
497
  line-height: $cadmin-simple-toggle-switch-label-line-height,
433
- margin-bottom: 0,
498
+ margin-bottom: 0px,
434
499
  max-width:
435
500
  calc(
436
501
  100% - #{clay-data-label-text-position(
@@ -439,6 +504,7 @@ $cadmin-simple-toggle-switch: map-deep-merge(
439
504
  )}
440
505
  ),
441
506
  ),
507
+
442
508
  mobile: (
443
509
  toggle-switch-label: (
444
510
  max-width:
@@ -460,12 +526,15 @@ $cadmin-simple-toggle-switch-reverse: () !default;
460
526
  $cadmin-simple-toggle-switch-reverse: map-deep-merge(
461
527
  (
462
528
  breakpoint-down: sm,
529
+
463
530
  toggle-switch-label: (
464
531
  margin-right: $cadmin-simple-toggle-switch-label-spacer-x,
465
532
  ),
533
+
466
534
  toggle-switch-check-bar: (
467
535
  order: 5,
468
536
  ),
537
+
469
538
  toggle-switch-check: (
470
539
  toggle-switch-bar: (
471
540
  order: 5,
@@ -486,51 +555,62 @@ $cadmin-toggle-switch-sizes: map-deep-merge(
486
555
  max-width: calc(100% - 34px),
487
556
  ),
488
557
  ),
558
+
489
559
  toggle-switch-check: (
490
560
  height: 16px,
491
561
  width: 30px,
562
+
492
563
  toggle-switch-bar: (
493
564
  height: 16px,
494
565
  line-height: 16px,
566
+
495
567
  before: (
496
568
  width: 30px,
497
569
  ),
570
+
498
571
  after: (
499
- bottom: 0,
572
+ bottom: 0px,
500
573
  height: 12px,
501
574
  left: 2px,
502
575
  top: 2px,
503
576
  width: 12px,
504
577
  ),
578
+
505
579
  toggle-switch-handle: (
506
580
  min-width: 30px,
581
+
507
582
  after: (
508
583
  margin-left: 34px,
509
584
  ),
510
585
  ),
586
+
511
587
  toggle-switch-icon: (
512
588
  font-size: 8px,
513
589
  height: 16px,
514
- left: 0,
590
+ left: 0px,
515
591
  line-height: 16px,
516
592
  top: 0px,
517
593
  width: 16px,
518
594
  ),
595
+
519
596
  toggle-switch-icon-off: (
520
597
  left: 13px,
521
598
  ),
522
599
  ),
600
+
523
601
  checked: (
524
602
  toggle-switch-bar: (
525
603
  after: (
526
604
  left: 16px,
527
605
  ),
606
+
528
607
  button-icon: (
529
608
  left: 14px,
530
609
  ),
531
610
  ),
532
611
  ),
533
612
  ),
613
+
534
614
  toggle-switch-label: (
535
615
  font-size: 12px,
536
616
  max-width: calc(100% - 38px),
package/src/scss/cadmin/variables/_tooltip.scss CHANGED
@@ -3,7 +3,7 @@ $cadmin-tooltip-border-radius: $cadmin-border-radius !default;
3
3
  $cadmin-tooltip-box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.4) !default;
4
4
  $cadmin-tooltip-color: $cadmin-white !default;
5
5
  $cadmin-tooltip-font-size: 14px !default; // 14px
6
- $cadmin-tooltip-margin: 0 !default;
6
+ $cadmin-tooltip-margin: 0px !default;
7
7
  $cadmin-tooltip-max-width: 230px !default;
8
8
  $cadmin-tooltip-opacity: 1 !default;
9
9
  $cadmin-tooltip-padding-x: 12px !default; // 12px
@@ -46,14 +46,17 @@ $cadmin-tooltip: map-deep-merge(
46
46
  word-spacing: normal,
47
47
  word-wrap: break-word,
48
48
  z-index: $cadmin-zindex-tooltip,
49
+
49
50
  show: (
50
51
  opacity: $cadmin-tooltip-opacity,
51
52
  ),
53
+
52
54
  arrow: (
53
55
  display: block,
54
56
  height: $cadmin-tooltip-arrow-height,
55
57
  position: absolute,
56
58
  width: $cadmin-tooltip-arrow-width,
59
+
57
60
  before: (
58
61
  border-color: transparent,
59
62
  border-style: solid,
@@ -88,25 +91,25 @@ $cadmin-clay-tooltip-bottom: () !default;
88
91
  $cadmin-clay-tooltip-bottom: map-deep-merge(
89
92
  (
90
93
  padding-top: $cadmin-tooltip-arrow-height,
94
+
91
95
  arrow: (
92
96
  left: 50%,
93
- margin-left: math-sign($cadmin-tooltip-arrow-width * 0.5),
94
- top: 0,
97
+ margin-left: calc(#{$cadmin-tooltip-arrow-width} * -0.5),
98
+ top: 0px,
99
+
95
100
  before: (
96
101
  border-bottom-color: $cadmin-tooltip-arrow-color,
97
- border-width: 0
98
- (
99
- $cadmin-tooltip-arrow-width * 0.5,
100
- )
102
+ border-width: 0px calc(#{$cadmin-tooltip-arrow-width} * 0.5)
101
103
  $cadmin-tooltip-arrow-height,
102
- bottom: 0,
104
+ bottom: 0px,
103
105
  ),
104
106
  ),
107
+
105
108
  tooltip-arrow: (
106
109
  border-bottom-color: transparent,
107
110
  border-right-color: transparent,
108
111
  left: 50%,
109
- top: 0,
112
+ top: 0px,
110
113
  ),
111
114
  ),
112
115
  $cadmin-clay-tooltip-bottom
@@ -119,7 +122,7 @@ $cadmin-clay-tooltip-bottom-left: map-deep-merge(
119
122
  (
120
123
  arrow: (
121
124
  left: $cadmin-tooltip-arrow-offset,
122
- margin-left: 0,
125
+ margin-left: 0px,
123
126
  ),
124
127
  ),
125
128
  $cadmin-clay-tooltip-bottom-left
@@ -132,7 +135,7 @@ $cadmin-clay-tooltip-bottom-right: map-deep-merge(
132
135
  (
133
136
  arrow: (
134
137
  left: auto,
135
- margin-left: 0,
138
+ margin-left: 0px,
136
139
  right: $cadmin-tooltip-arrow-offset,
137
140
  ),
138
141
  ),
@@ -145,29 +148,27 @@ $cadmin-clay-tooltip-left: () !default;
145
148
  $cadmin-clay-tooltip-left: map-deep-merge(
146
149
  (
147
150
  padding-right: $cadmin-tooltip-arrow-height,
151
+
148
152
  arrow: (
149
153
  height: $cadmin-tooltip-arrow-width,
150
- margin-top: math-sign($cadmin-tooltip-arrow-width * 0.5),
151
- right: 0,
154
+ margin-top: calc(#{$cadmin-tooltip-arrow-width} * -0.5),
155
+ right: 0px,
152
156
  top: 50%,
153
157
  width: $cadmin-tooltip-arrow-height,
158
+
154
159
  before: (
155
160
  border-left-color: $cadmin-tooltip-arrow-color,
156
- border-width: (
157
- $cadmin-tooltip-arrow-width * 0.5,
158
- )
159
- 0
160
- (
161
- $cadmin-tooltip-arrow-width * 0.5,
162
- )
163
- $cadmin-tooltip-arrow-height,
164
- left: 0,
161
+ border-width: calc(#{$cadmin-tooltip-arrow-width} * 0.5) 0
162
+ calc(#{$cadmin-tooltip-arrow-width} * 0.5)
163
+ $cadmin-tooltip-arrow-height,
164
+ left: 0px,
165
165
  ),
166
166
  ),
167
+
167
168
  tooltip-arrow: (
168
169
  border-bottom-color: transparent,
169
170
  border-left-color: transparent,
170
- right: 0,
171
+ right: 0px,
171
172
  top: 50%,
172
173
  ),
173
174
  ),
@@ -181,7 +182,7 @@ $cadmin-clay-tooltip-left-bottom: map-deep-merge(
181
182
  (
182
183
  arrow: (
183
184
  bottom: $cadmin-tooltip-arrow-offset,
184
- margin-top: 0,
185
+ margin-top: 0px,
185
186
  top: auto,
186
187
  ),
187
188
  ),
@@ -194,7 +195,7 @@ $cadmin-clay-tooltip-left-top: () !default;
194
195
  $cadmin-clay-tooltip-left-top: map-deep-merge(
195
196
  (
196
197
  arrow: (
197
- margin-top: 0,
198
+ margin-top: 0px,
198
199
  top: $cadmin-tooltip-arrow-offset,
199
200
  ),
200
201
  ),
@@ -207,29 +208,27 @@ $cadmin-clay-tooltip-right: () !default;
207
208
  $cadmin-clay-tooltip-right: map-deep-merge(
208
209
  (
209
210
  padding-left: $cadmin-tooltip-arrow-height,
211
+
210
212
  arrow: (
211
213
  height: $cadmin-tooltip-arrow-width,
212
- left: 0,
213
- margin-top: math-sign($cadmin-tooltip-arrow-width * 0.5),
214
+ left: 0px,
215
+ margin-top: calc(#{$cadmin-tooltip-arrow-width} * -0.5),
214
216
  top: 50%,
215
217
  width: $cadmin-tooltip-arrow-height,
218
+
216
219
  before: (
217
220
  border-right-color: $cadmin-tooltip-arrow-color,
218
- border-width: (
219
- $cadmin-tooltip-arrow-width * 0.5,
220
- )
221
- $cadmin-tooltip-arrow-height
222
- (
223
- $cadmin-tooltip-arrow-width * 0.5,
224
- )
225
- 0,
226
- right: 0,
221
+ border-width: calc(#{$cadmin-tooltip-arrow-width} * 0.5)
222
+ $cadmin-tooltip-arrow-height
223
+ calc(#{$cadmin-tooltip-arrow-width} * 0.5) 0px,
224
+ right: 0px,
227
225
  ),
228
226
  ),
227
+
229
228
  tooltip-arrow: (
230
229
  border-right-color: transparent,
231
230
  border-top-color: transparent,
232
- left: 0,
231
+ left: 0px,
233
232
  top: 50%,
234
233
  ),
235
234
  ),
@@ -243,7 +242,7 @@ $cadmin-clay-tooltip-right-bottom: map-deep-merge(
243
242
  (
244
243
  arrow: (
245
244
  bottom: $cadmin-tooltip-arrow-offset,
246
- margin-top: 0,
245
+ margin-top: 0px,
247
246
  top: auto,
248
247
  ),
249
248
  ),
@@ -256,7 +255,7 @@ $cadmin-clay-tooltip-right-top: () !default;
256
255
  $cadmin-clay-tooltip-right-top: map-deep-merge(
257
256
  (
258
257
  arrow: (
259
- margin-top: 0,
258
+ margin-top: 0px,
260
259
  top: $cadmin-tooltip-arrow-offset,
261
260
  ),
262
261
  ),
@@ -269,24 +268,23 @@ $cadmin-tooltip-top: () !default;
269
268
  $cadmin-tooltip-top: map-deep-merge(
270
269
  (
271
270
  padding-bottom: $cadmin-tooltip-arrow-height,
271
+
272
272
  arrow: (
273
- bottom: 0,
273
+ bottom: 0px,
274
274
  left: 50%,
275
- margin-left: math-sign($cadmin-tooltip-arrow-width * 0.5),
275
+ margin-left: calc(#{$cadmin-tooltip-arrow-width} * -0.5),
276
276
  before: (
277
277
  border-top-color: $cadmin-tooltip-arrow-color,
278
278
  border-width: $cadmin-tooltip-arrow-height
279
- (
280
- $cadmin-tooltip-arrow-width * 0.5,
281
- )
282
- 0,
283
- top: 0,
279
+ calc(#{$cadmin-tooltip-arrow-width} * 0.5) 0px,
280
+ top: 0px,
284
281
  ),
285
282
  ),
283
+
286
284
  tooltip-arrow: (
287
285
  border-left-color: transparent,
288
286
  border-top-color: transparent,
289
- bottom: 0,
287
+ bottom: 0px,
290
288
  left: 50%,
291
289
  ),
292
290
  ),
@@ -300,7 +298,7 @@ $cadmin-tooltip-top-left: map-deep-merge(
300
298
  (
301
299
  arrow: (
302
300
  left: $cadmin-tooltip-arrow-offset,
303
- margin-left: 0,
301
+ margin-left: 0px,
304
302
  ),
305
303
  ),
306
304
  $cadmin-tooltip-top-left
@@ -313,7 +311,7 @@ $cadmin-tooltip-top-right: map-deep-merge(
313
311
  (
314
312
  arrow: (
315
313
  left: auto,
316
- margin-left: 0,
314
+ margin-left: 0px,
317
315
  right: $cadmin-tooltip-arrow-offset,
318
316
  ),
319
317
  ),