@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/components/_panels.scss CHANGED
@@ -9,8 +9,16 @@
9
9
 
10
10
  @if ($enable-c-inner) {
11
11
  .c-inner {
12
- margin: math-sign($panel-header-padding-y)
13
- math-sign($panel-header-padding-x);
12
+ margin: if(
13
+ $panel-header-padding-y,
14
+ calc(#{$panel-header-padding-y} * -1),
15
+ null
16
+ )
17
+ if(
18
+ $panel-header-padding-x,
19
+ calc(#{$panel-header-padding-x} * -1),
20
+ null
21
+ );
14
22
  width: auto;
15
23
  }
16
24
  }
@@ -24,12 +32,16 @@
24
32
 
25
33
  @if ($enable-c-inner) {
26
34
  .c-inner {
27
- margin-left: #{math-sign(
28
- $panel-header-collapse-icon-padding-left
29
- )};
30
- margin-right: #{math-sign(
31
- $panel-header-collapse-icon-padding-right
32
- )};
35
+ margin-left: if(
36
+ $panel-header-collapse-icon-padding-left,
37
+ calc(#{$panel-header-collapse-icon-padding-left} * -1),
38
+ null
39
+ );
40
+ margin-right: if(
41
+ $panel-header-collapse-icon-padding-right,
42
+ calc(#{$panel-header-collapse-icon-padding-right} * -1),
43
+ null
44
+ );
33
45
  }
34
46
  }
35
47
  }
@@ -118,7 +130,7 @@
118
130
  &:not(:first-child) {
119
131
  @include border-radius(0);
120
132
 
121
- margin-top: math-sign($panel-border-bottom-width);
133
+ margin-top: calc(#{$panel-border-bottom-width} * -1);
122
134
 
123
135
  .panel-header {
124
136
  @include border-radius(0);
@@ -207,62 +219,75 @@
207
219
  > .panel-group-fluid,
208
220
  > .panel-group-fluid-first,
209
221
  > .panel-group-fluid-last {
210
- margin-left: math-sign(
211
- if(variable-exists(card-spacer-x), $card-spacer-x, 1.25rem)
222
+ margin-left: calc(
223
+ #{if(variable-exists(card-spacer-x), $card-spacer-x, 1.25rem)} * -1
212
224
  );
213
- margin-right: math-sign(
214
- if(variable-exists(card-spacer-x), $card-spacer-x, 1.25rem)
225
+ margin-right: calc(
226
+ #{if(variable-exists(card-spacer-x), $card-spacer-x, 1.25rem)} * -1
215
227
  );
216
228
  }
217
229
  }
218
230
 
219
231
  .sheet {
220
232
  > .panel-group-fluid {
221
- margin-left: math-sign(
222
- if(variable-exists(sheet-padding-left), $sheet-padding-left, 1.5rem)
233
+ margin-left: calc(
234
+ #{if(
235
+ variable-exists(sheet-padding-left),
236
+ $sheet-padding-left,
237
+ 1.5rem
238
+ )} * -1
223
239
  );
224
- margin-right: math-sign(
225
- if(
226
- variable-exists(sheet-padding-right),
227
- $sheet-padding-right,
228
- 1.5rem
229
- )
240
+ margin-right: calc(
241
+ #{if(
242
+ variable-exists(sheet-padding-right),
243
+ $sheet-padding-right,
244
+ 1.5rem
245
+ )} * -1
230
246
  );
231
247
  }
232
248
 
233
249
  > .panel-group-fluid-first {
234
- margin-left: math-sign(
235
- if(variable-exists(sheet-padding-left), $sheet-padding-left, 1.5rem)
250
+ margin-left: calc(
251
+ #{if(
252
+ variable-exists(sheet-padding-left),
253
+ $sheet-padding-left,
254
+ 1.5rem
255
+ )} * -1
236
256
  );
237
- margin-right: math-sign(
238
- if(
239
- variable-exists(sheet-padding-right),
240
- $sheet-padding-right,
241
- 1.5rem
242
- )
257
+ margin-right: calc(
258
+ #{if(
259
+ variable-exists(sheet-padding-right),
260
+ $sheet-padding-right,
261
+ 1.5rem
262
+ )} * -1
243
263
  );
244
- margin-top: math-sign(
245
- if(variable-exists(sheet-padding-top), $sheet-padding-top, 1.5rem)
264
+ margin-top: calc(
265
+ #{if(variable-exists(sheet-padding-top), $sheet-padding-top, 1.5rem)} *
266
+ -1
246
267
  );
247
268
  }
248
269
 
249
270
  > .panel-group-fluid-last {
250
- margin-bottom: math-sign(
251
- if(
252
- variable-exists(sheet-padding-bottom),
253
- $sheet-padding-bottom,
254
- 0.0625rem
255
- )
271
+ margin-bottom: calc(
272
+ #{if(
273
+ variable-exists(sheet-padding-bottom),
274
+ $sheet-padding-bottom,
275
+ 0.0625rem
276
+ )} * -1
256
277
  );
257
- margin-left: math-sign(
258
- if(variable-exists(sheet-padding-left), $sheet-padding-left, 1.5rem)
278
+ margin-left: calc(
279
+ #{if(
280
+ variable-exists(sheet-padding-left),
281
+ $sheet-padding-left,
282
+ 1.5rem
283
+ )} * -1
259
284
  );
260
- margin-right: math-sign(
261
- if(
262
- variable-exists(sheet-padding-right),
263
- $sheet-padding-right,
264
- 1.5rem
265
- )
285
+ margin-right: calc(
286
+ #{if(
287
+ variable-exists(sheet-padding-right),
288
+ $sheet-padding-right,
289
+ 1.5rem
290
+ )} * -1
266
291
  );
267
292
  }
268
293
  }
@@ -294,12 +319,18 @@
294
319
 
295
320
  @if ($enable-c-inner) {
296
321
  .c-inner {
297
- margin-left: #{math-sign(
298
- $panel-group-flush-collapse-icon-padding-left
299
- )};
300
- margin-right: #{math-sign(
301
- $panel-group-flush-collapse-icon-padding-right
302
- )};
322
+ margin-left: if(
323
+ $panel-group-flush-collapse-icon-padding-left,
324
+ calc(#{$panel-group-flush-collapse-icon-padding-left} * -1),
325
+ null
326
+ );
327
+ margin-right: if(
328
+ $panel-group-flush-collapse-icon-padding-right,
329
+ calc(
330
+ #{$panel-group-flush-collapse-icon-padding-right} * -1
331
+ ),
332
+ null
333
+ );
303
334
  }
304
335
  }
305
336
  }
package/src/scss/components/_popovers.scss CHANGED
@@ -20,21 +20,19 @@
20
20
  margin-top: $popover-arrow-height;
21
21
 
22
22
  > .arrow {
23
- top: calc(
24
- #{math-sign($popover-arrow-height)} - #{$popover-border-width}
25
- );
23
+ top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
26
24
 
27
25
  &::before {
28
26
  border-bottom-color: $popover-arrow-outer-color;
29
- border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
30
- ($popover-arrow-width * 0.5);
27
+ border-width: 0 calc(#{$popover-arrow-width} * 0.5)
28
+ $popover-arrow-height calc(#{$popover-arrow-width} * 0.5);
31
29
  top: 0;
32
30
  }
33
31
 
34
32
  &::after {
35
33
  border-bottom-color: $popover-bottom-arrow-color;
36
- border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
37
- ($popover-arrow-width * 0.5);
34
+ border-width: 0 calc(#{$popover-arrow-width} * 0.5)
35
+ $popover-arrow-height calc(#{$popover-arrow-width} * 0.5);
38
36
  top: $popover-border-width;
39
37
  }
40
38
  }
@@ -46,7 +44,7 @@
46
44
  content: '';
47
45
  display: block;
48
46
  left: 50%;
49
- margin-left: calc(#{math-sign($popover-arrow-width)} / 2);
47
+ margin-left: calc(#{$popover-arrow-width} / -2);
50
48
  position: absolute;
51
49
  top: 0;
52
50
  width: $popover-arrow-width;
@@ -59,22 +57,20 @@
59
57
  > .arrow {
60
58
  height: $popover-arrow-width;
61
59
  margin: $popover-border-radius 0;
62
- right: calc(
63
- #{math-sign($popover-arrow-height)} - #{$popover-border-width}
64
- );
60
+ right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
65
61
  width: $popover-arrow-height;
66
62
 
67
63
  &::before {
68
64
  border-left-color: $popover-arrow-outer-color;
69
- border-width: ($popover-arrow-width * 0.5) 0
70
- ($popover-arrow-width * 0.5) $popover-arrow-height;
65
+ border-width: calc(#{$popover-arrow-width} * 0.5) 0
66
+ calc(#{$popover-arrow-width} * 0.5) $popover-arrow-height;
71
67
  right: 0;
72
68
  }
73
69
 
74
70
  &::after {
75
71
  border-left-color: $popover-left-arrow-color;
76
- border-width: ($popover-arrow-width * 0.5) 0
77
- ($popover-arrow-width * 0.5) $popover-arrow-height;
72
+ border-width: calc(#{$popover-arrow-width} * 0.5) 0
73
+ calc(#{$popover-arrow-width} * 0.5) $popover-arrow-height;
78
74
  right: $popover-border-width;
79
75
  }
80
76
  }
@@ -85,23 +81,21 @@
85
81
 
86
82
  > .arrow {
87
83
  height: $popover-arrow-width;
88
- left: calc(
89
- #{math-sign($popover-arrow-height)} - #{$popover-border-width}
90
- );
84
+ left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
91
85
  margin: $popover-border-radius 0;
92
86
  width: $popover-arrow-height;
93
87
 
94
88
  &::before {
95
89
  border-right-color: $popover-arrow-outer-color;
96
- border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
97
- ($popover-arrow-width * 0.5) 0;
90
+ border-width: calc(#{$popover-arrow-width} * 0.5)
91
+ $popover-arrow-height calc(#{$popover-arrow-width} * 0.5) 0;
98
92
  left: 0;
99
93
  }
100
94
 
101
95
  &::after {
102
96
  border-right-color: $popover-right-arrow-color;
103
- border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
104
- ($popover-arrow-width * 0.5) 0;
97
+ border-width: calc(#{$popover-arrow-width} * 0.5)
98
+ $popover-arrow-height calc(#{$popover-arrow-width} * 0.5) 0;
105
99
  left: $popover-border-width;
106
100
  }
107
101
  }
@@ -112,18 +106,20 @@
112
106
 
113
107
  > .arrow {
114
108
  bottom: calc(
115
- #{math-sign($popover-arrow-height)} - #{$popover-border-width}
109
+ (#{$popover-arrow-height} + #{$popover-border-width}) * -1
116
110
  );
117
111
 
118
112
  &::before {
119
113
  border-top-color: $popover-arrow-outer-color;
120
- border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
114
+ border-width: $popover-arrow-height
115
+ calc(#{$popover-arrow-width} * 0.5) 0;
121
116
  bottom: 0;
122
117
  }
123
118
 
124
119
  &::after {
125
120
  border-top-color: $popover-top-arrow-color;
126
- border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
121
+ border-width: $popover-arrow-height
122
+ calc(#{$popover-arrow-width} * 0.5) 0;
127
123
  bottom: $popover-border-width;
128
124
  }
129
125
  }
package/src/scss/components/_sheets.scss CHANGED
@@ -125,17 +125,21 @@
125
125
  }
126
126
 
127
127
  > fieldset {
128
- margin-bottom: math-sign($sheet-section-margin-bottom);
128
+ margin-bottom: calc(#{$sheet-section-margin-bottom} * -1);
129
129
 
130
130
  @include clay-scale-component {
131
- margin-bottom: math-sign($sheet-section-margin-bottom-mobile);
131
+ margin-bottom: calc(#{$sheet-section-margin-bottom-mobile} * -1);
132
132
  }
133
133
  }
134
134
 
135
135
  > .card-page:last-child,
136
136
  .card-page-last {
137
- margin-bottom: math-sign(
138
- if(variable-exists(card-margin-bottom), $card-margin-bottom, 1.5rem)
137
+ margin-bottom: calc(
138
+ #{if(
139
+ variable-exists(card-margin-bottom),
140
+ $card-margin-bottom,
141
+ 1.5rem
142
+ )} * -1
139
143
  );
140
144
  }
141
145
 
@@ -235,10 +239,26 @@ fieldset {
235
239
 
236
240
  @if ($enable-c-inner) {
237
241
  .c-inner {
238
- margin-bottom: #{math-sign($sheet-subtitle-padding-y)};
239
- margin-left: #{math-sign($sheet-subtitle-padding-x)};
240
- margin-right: #{math-sign($sheet-subtitle-padding-x)};
241
- margin-top: #{math-sign($sheet-subtitle-padding-y)};
242
+ margin-bottom: if(
243
+ $sheet-subtitle-padding-y,
244
+ calc(#{$sheet-subtitle-padding-y} * -1),
245
+ null
246
+ );
247
+ margin-left: if(
248
+ $sheet-subtitle-padding-x,
249
+ calc(#{$sheet-subtitle-padding-x} * -1),
250
+ null
251
+ );
252
+ margin-right: if(
253
+ $sheet-subtitle-padding-x,
254
+ calc(#{$sheet-subtitle-padding-x} * -1),
255
+ null
256
+ );
257
+ margin-top: if(
258
+ $sheet-subtitle-padding-y,
259
+ calc(#{$sheet-subtitle-padding-y} * -1),
260
+ null
261
+ );
242
262
  }
243
263
  }
244
264
 
@@ -256,12 +276,16 @@ fieldset {
256
276
 
257
277
  @if ($enable-c-inner) {
258
278
  .c-inner {
259
- margin-left: #{math-sign(
260
- $sheet-subtitle-collapse-icon-padding-left
261
- )};
262
- margin-right: #{math-sign(
263
- $sheet-subtitle-collapse-icon-padding-right
264
- )};
279
+ margin-left: if(
280
+ $sheet-subtitle-collapse-icon-padding-left,
281
+ calc(#{$sheet-subtitle-collapse-icon-padding-left} * -1),
282
+ null
283
+ );
284
+ margin-right: if(
285
+ $sheet-subtitle-collapse-icon-padding-right,
286
+ calc(#{$sheet-subtitle-collapse-icon-padding-right} * -1),
287
+ null
288
+ );
265
289
  }
266
290
  }
267
291
  }
package/src/scss/components/_side-navigation.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .container-fluid-1280.sidenav-container {
2
- padding-left: floor(($grid-gutter-width * 0.5));
3
- padding-right: floor(($grid-gutter-width * 0.5));
2
+ padding-left: calc(#{$grid-gutter-width} * 0.5);
3
+ padding-right: calc(#{$grid-gutter-width} * 0.5);
4
4
  }
5
5
 
6
6
  .sidenav-container {
package/src/scss/components/_time.scss CHANGED
@@ -33,11 +33,11 @@
33
33
  @include clay-css($clay-time-edit);
34
34
 
35
35
  &:first-child {
36
- margin-left: math-sign(map-get($clay-time-edit, padding-left));
36
+ margin-left: calc(#{map-get($clay-time-edit, padding-left)} * -1);
37
37
  }
38
38
 
39
39
  &:last-child {
40
- margin-right: math-sign(map-get($clay-time-edit, padding-left));
40
+ margin-right: calc(#{map-get($clay-time-edit, padding-left)} * -1);
41
41
  }
42
42
  }
43
43
 
package/src/scss/components/_timelines.scss CHANGED
@@ -20,7 +20,9 @@
20
20
 
21
21
  .timeline-increment {
22
22
  background-color: $timeline-increment-bg;
23
- left: -($timeline-inner-spacing - $timeline-border-modifier);
23
+ left: calc(
24
+ (#{$timeline-inner-spacing} - #{$timeline-border-modifier}) * -1
25
+ );
24
26
  position: absolute;
25
27
  text-align: center;
26
28
  top: 50%;
@@ -31,7 +33,7 @@
31
33
 
32
34
  .timeline-increment-text {
33
35
  display: block;
34
- max-width: $timeline-inner-spacing + $timeline-outer-spacing;
36
+ max-width: calc(#{$timeline-inner-spacing} + #{$timeline-outer-spacing});
35
37
  }
36
38
 
37
39
  .timeline-item-label {
@@ -69,12 +71,12 @@
69
71
 
70
72
  .panel {
71
73
  .timeline-increment {
72
- margin-left: math-sign(
73
- if(
74
- variable-exists(panel-border-left-width),
75
- $panel-border-left-width,
76
- 1px
77
- )
74
+ margin-left: calc(
75
+ #{if(
76
+ variable-exists(panel-border-left-width),
77
+ $panel-border-left-width,
78
+ 1px
79
+ )} * -1
78
80
  );
79
81
  }
80
82
  }
@@ -114,7 +116,7 @@
114
116
 
115
117
  .timeline-item-label {
116
118
  left: -100%;
117
- margin-left: -($timeline-inner-spacing * 2);
119
+ margin-left: calc(#{$timeline-inner-spacing} * -2);
118
120
  position: absolute;
119
121
  text-align: right;
120
122
  top: 50%;
@@ -131,7 +133,7 @@
131
133
 
132
134
  .timeline-item-label {
133
135
  margin-left: auto;
134
- margin-right: -($timeline-inner-spacing * 2);
136
+ margin-right: calc(#{$timeline-inner-spacing} * -2);
135
137
  right: -100%;
136
138
  text-align: left;
137
139
  }
@@ -148,7 +150,7 @@
148
150
 
149
151
  .timeline-item-label {
150
152
  margin-left: auto;
151
- margin-right: -($timeline-inner-spacing * 2);
153
+ margin-right: calc(#{$timeline-inner-spacing} * -2);
152
154
  right: -100%;
153
155
  text-align: left;
154
156
  }
@@ -163,6 +165,8 @@
163
165
  );
164
166
 
165
167
  .timeline-increment-text {
166
- max-width: $timeline-inner-spacing-xl + $timeline-outer-spacing-xl;
168
+ max-width: calc(
169
+ #{$timeline-inner-spacing-xl} + #{$timeline-outer-spacing-xl}
170
+ );
167
171
  }
168
172
  }
package/src/scss/components/_tooltip.scss CHANGED
@@ -22,7 +22,8 @@
22
22
 
23
23
  &::before {
24
24
  border-top-color: $tooltip-arrow-color;
25
- border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
25
+ border-width: $tooltip-arrow-height
26
+ calc(#{$tooltip-arrow-width} * 0.5) 0;
26
27
  top: 0;
27
28
  }
28
29
  }
@@ -38,8 +39,8 @@
38
39
 
39
40
  &::before {
40
41
  border-right-color: $tooltip-arrow-color;
41
- border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height
42
- ($tooltip-arrow-width * 0.5) 0;
42
+ border-width: calc(#{$tooltip-arrow-width} * 0.5)
43
+ $tooltip-arrow-height calc(#{$tooltip-arrow-width} * 0.5) 0;
43
44
  right: 0;
44
45
  }
45
46
  }
@@ -53,7 +54,8 @@
53
54
 
54
55
  &::before {
55
56
  border-bottom-color: $tooltip-arrow-color;
56
- border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
57
+ border-width: 0 calc(#{$tooltip-arrow-width} * 0.5)
58
+ $tooltip-arrow-height;
57
59
  bottom: 0;
58
60
  }
59
61
  }
@@ -69,8 +71,8 @@
69
71
 
70
72
  &::before {
71
73
  border-left-color: $tooltip-arrow-color;
72
- border-width: ($tooltip-arrow-width * 0.5) 0
73
- ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
74
+ border-width: calc(#{$tooltip-arrow-width} * 0.5) 0
75
+ calc(#{$tooltip-arrow-width} * 0.5) $tooltip-arrow-height;
74
76
  left: 0;
75
77
  }
76
78
  }
package/src/scss/components/_treeview.scss CHANGED
@@ -5,8 +5,15 @@
5
5
  @include clay-button-variant(map-get($treeview, btn));
6
6
  }
7
7
 
8
+ $_btn-monospaced: map-get($treeview, btn-monospaced);
9
+
8
10
  .btn-monospaced {
9
- @include clay-button-variant(map-get($treeview, btn-monospaced));
11
+ @include clay-button-variant($_btn-monospaced);
12
+
13
+ &.sr-only-focusable {
14
+ height: map-get($_btn-monospaced, height);
15
+ width: map-get($_btn-monospaced, width);
16
+ }
10
17
  }
11
18
 
12
19
  .custom-control {
package/src/scss/components/_type.scss CHANGED
@@ -229,11 +229,11 @@ strong {
229
229
  padding: inherit;
230
230
 
231
231
  &:first-child {
232
- margin-left: math-sign(map-get($c-kbd, padding-left));
232
+ margin-left: calc(#{map-get($c-kbd, padding-left)} * -1);
233
233
  }
234
234
 
235
235
  &:last-child {
236
- margin-right: math-sign(map-get($c-kbd, padding-right));
236
+ margin-right: calc(#{map-get($c-kbd, padding-right)} * -1);
237
237
  }
238
238
  }
239
239
  }
package/src/scss/components/_utilities-functional-important.scss CHANGED
@@ -581,27 +581,27 @@
581
581
  @each $size, $length in $spacers {
582
582
  @if $size != 0 {
583
583
  .m#{$infix}-n#{$size} {
584
- margin: math-sign($length) !important;
584
+ margin: calc(#{$length} * -1) !important;
585
585
  }
586
586
 
587
587
  .mt#{$infix}-n#{$size},
588
588
  .my#{$infix}-n#{$size} {
589
- margin-top: math-sign($length) !important;
589
+ margin-top: calc(#{$length} * -1) !important;
590
590
  }
591
591
 
592
592
  .mr#{$infix}-n#{$size},
593
593
  .mx#{$infix}-n#{$size} {
594
- margin-right: math-sign($length) !important;
594
+ margin-right: calc(#{$length} * -1) !important;
595
595
  }
596
596
 
597
597
  .mb#{$infix}-n#{$size},
598
598
  .my#{$infix}-n#{$size} {
599
- margin-bottom: math-sign($length) !important;
599
+ margin-bottom: calc(#{$length} * -1) !important;
600
600
  }
601
601
 
602
602
  .ml#{$infix}-n#{$size},
603
603
  .mx#{$infix}-n#{$size} {
604
- margin-left: math-sign($length) !important;
604
+ margin-left: calc(#{$length} * -1) !important;
605
605
  }
606
606
  }
607
607
  }
package/src/scss/components/_utilities.scss CHANGED
@@ -81,8 +81,8 @@
81
81
  }
82
82
 
83
83
  %autofit-padded-no-gutters-x {
84
- margin-left: math-sign($autofit-padded-col-padding-x);
85
- margin-right: math-sign($autofit-padded-col-padding-x);
84
+ margin-left: calc(#{$autofit-padded-col-padding-x} * -1);
85
+ margin-right: calc(#{$autofit-padded-col-padding-x} * -1);
86
86
  width: auto;
87
87
 
88
88
  > .autofit-col {
@@ -98,8 +98,8 @@
98
98
  }
99
99
 
100
100
  %autofit-padded-no-gutters-y {
101
- margin-bottom: math-sign($autofit-padded-col-padding-y);
102
- margin-top: math-sign($autofit-padded-col-padding-y);
101
+ margin-bottom: calc(#{$autofit-padded-col-padding-y} * -1);
102
+ margin-top: calc(#{$autofit-padded-col-padding-y} * -1);
103
103
  width: auto;
104
104
 
105
105
  > .autofit-col {
@@ -115,10 +115,10 @@
115
115
  }
116
116
 
117
117
  %autofit-padded-no-gutters {
118
- margin-bottom: math-sign($autofit-padded-col-padding-y);
119
- margin-left: math-sign($autofit-padded-col-padding-x);
120
- margin-right: math-sign($autofit-padded-col-padding-x);
121
- margin-top: math-sign($autofit-padded-col-padding-y);
118
+ margin-bottom: calc(#{$autofit-padded-col-padding-y} * -1);
119
+ margin-left: calc(#{$autofit-padded-col-padding-x} * -1);
120
+ margin-right: calc(#{$autofit-padded-col-padding-x} * -1);
121
+ margin-top: calc(#{$autofit-padded-col-padding-y} * -1);
122
122
  width: auto;
123
123
 
124
124
  > .autofit-col {
@@ -389,27 +389,27 @@
389
389
  @each $size, $length in $spacers {
390
390
  @if $size != 0 {
391
391
  .c-m#{$infix}-n#{$size} {
392
- margin: math-sign($length);
392
+ margin: calc(#{$length} * -1);
393
393
  }
394
394
 
395
395
  .c-mt#{$infix}-n#{$size},
396
396
  .c-my#{$infix}-n#{$size} {
397
- margin-top: math-sign($length);
397
+ margin-top: calc(#{$length} * -1);
398
398
  }
399
399
 
400
400
  .c-mr#{$infix}-n#{$size},
401
401
  .c-mx#{$infix}-n#{$size} {
402
- margin-right: math-sign($length);
402
+ margin-right: calc(#{$length} * -1);
403
403
  }
404
404
 
405
405
  .c-mb#{$infix}-n#{$size},
406
406
  .c-my#{$infix}-n#{$size} {
407
- margin-bottom: math-sign($length);
407
+ margin-bottom: calc(#{$length} * -1);
408
408
  }
409
409
 
410
410
  .c-ml#{$infix}-n#{$size},
411
411
  .c-mx#{$infix}-n#{$size} {
412
- margin-left: math-sign($length);
412
+ margin-left: calc(#{$length} * -1);
413
413
  }
414
414
  }
415
415
  }
package/src/scss/functions/_global-functions.scss CHANGED
@@ -206,8 +206,8 @@
206
206
  // `.nav-link`)
207
207
 
208
208
  @function clay-collapse-icon-align(
209
- $container-padding-top: 0,
210
- $offset: 0,
209
+ $container-padding-top: 0rem,
210
+ $offset: 0rem,
211
211
  $font-size: 1rem,
212
212
  $line-height: 1.5
213
213
  ) {