uikit 3.23.7 → 3.23.8-dev.65e3f4fda

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 (197) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/build/release.js +1 -1
  3. package/build/scss.js +49 -12
  4. package/build/util.js +2 -0
  5. package/dist/css/uikit-core-rtl.css +1 -1
  6. package/dist/css/uikit-core-rtl.min.css +1 -1
  7. package/dist/css/uikit-core.css +1 -1
  8. package/dist/css/uikit-core.min.css +1 -1
  9. package/dist/css/uikit-rtl.css +1 -1
  10. package/dist/css/uikit-rtl.min.css +1 -1
  11. package/dist/css/uikit.css +1 -1
  12. package/dist/css/uikit.min.css +1 -1
  13. package/dist/js/components/countdown.js +1 -1
  14. package/dist/js/components/countdown.min.js +1 -1
  15. package/dist/js/components/filter.js +1 -1
  16. package/dist/js/components/filter.min.js +1 -1
  17. package/dist/js/components/lightbox-panel.js +7 -2
  18. package/dist/js/components/lightbox-panel.min.js +1 -1
  19. package/dist/js/components/lightbox.js +7 -2
  20. package/dist/js/components/lightbox.min.js +1 -1
  21. package/dist/js/components/notification.js +1 -1
  22. package/dist/js/components/notification.min.js +1 -1
  23. package/dist/js/components/parallax.js +3 -2
  24. package/dist/js/components/parallax.min.js +1 -1
  25. package/dist/js/components/slider-parallax.js +3 -2
  26. package/dist/js/components/slider-parallax.min.js +1 -1
  27. package/dist/js/components/slider.js +3 -2
  28. package/dist/js/components/slider.min.js +1 -1
  29. package/dist/js/components/slideshow-parallax.js +3 -2
  30. package/dist/js/components/slideshow-parallax.min.js +1 -1
  31. package/dist/js/components/slideshow.js +3 -2
  32. package/dist/js/components/slideshow.min.js +1 -1
  33. package/dist/js/components/sortable.js +1 -1
  34. package/dist/js/components/sortable.min.js +1 -1
  35. package/dist/js/components/tooltip.js +1 -1
  36. package/dist/js/components/tooltip.min.js +1 -1
  37. package/dist/js/components/upload.js +1 -1
  38. package/dist/js/components/upload.min.js +1 -1
  39. package/dist/js/uikit-core.js +13 -7
  40. package/dist/js/uikit-core.min.js +1 -1
  41. package/dist/js/uikit-icons.js +1 -1
  42. package/dist/js/uikit-icons.min.js +1 -1
  43. package/dist/js/uikit.js +13 -7
  44. package/dist/js/uikit.min.js +1 -1
  45. package/package.json +1 -1
  46. package/src/js/core/drop.js +3 -2
  47. package/src/js/mixin/modal.js +7 -1
  48. package/src/js/mixin/svg.js +0 -2
  49. package/src/js/util/selector.js +1 -1
  50. package/src/scss/components/accordion.scss +8 -6
  51. package/src/scss/components/alert.scss +10 -8
  52. package/src/scss/components/align.scss +3 -1
  53. package/src/scss/components/animation.scss +3 -1
  54. package/src/scss/components/article.scss +7 -5
  55. package/src/scss/components/background.scss +3 -1
  56. package/src/scss/components/badge.scss +5 -3
  57. package/src/scss/components/base.scss +20 -17
  58. package/src/scss/components/breadcrumb.scss +9 -7
  59. package/src/scss/components/button.scss +25 -23
  60. package/src/scss/components/card.scss +26 -24
  61. package/src/scss/components/close.scss +5 -3
  62. package/src/scss/components/column.scss +3 -1
  63. package/src/scss/components/comment.scss +13 -11
  64. package/src/scss/components/container.scss +14 -11
  65. package/src/scss/components/countdown.scss +8 -6
  66. package/src/scss/components/cover.scss +3 -1
  67. package/src/scss/components/description-list.scss +6 -4
  68. package/src/scss/components/divider.scss +13 -10
  69. package/src/scss/components/dotnav.scss +8 -6
  70. package/src/scss/components/drop.scss +3 -1
  71. package/src/scss/components/dropbar.scss +8 -6
  72. package/src/scss/components/dropdown.scss +12 -10
  73. package/src/scss/components/dropnav.scss +3 -1
  74. package/src/scss/components/flex.scss +3 -1
  75. package/src/scss/components/form-range.scss +13 -10
  76. package/src/scss/components/form.scss +23 -21
  77. package/src/scss/components/grid.scss +5 -3
  78. package/src/scss/components/heading.scss +16 -13
  79. package/src/scss/components/height.scss +3 -1
  80. package/src/scss/components/icon.scss +9 -7
  81. package/src/scss/components/iconnav.scss +7 -5
  82. package/src/scss/components/inverse.scss +4 -2
  83. package/src/scss/components/label.scss +7 -5
  84. package/src/scss/components/leader.scss +4 -2
  85. package/src/scss/components/lightbox.scss +6 -4
  86. package/src/scss/components/link.scss +10 -8
  87. package/src/scss/components/list.scss +5 -3
  88. package/src/scss/components/margin.scss +3 -1
  89. package/src/scss/components/marker.scss +5 -3
  90. package/src/scss/components/mixin.scss +6 -4
  91. package/src/scss/components/modal.scss +18 -16
  92. package/src/scss/components/nav.scss +33 -31
  93. package/src/scss/components/navbar.scss +33 -30
  94. package/src/scss/components/notification.scss +10 -8
  95. package/src/scss/components/offcanvas.scss +6 -4
  96. package/src/scss/components/overlay.scss +7 -5
  97. package/src/scss/components/padding.scss +3 -1
  98. package/src/scss/components/pagination.scss +8 -6
  99. package/src/scss/components/placeholder.scss +4 -2
  100. package/src/scss/components/position.scss +9 -6
  101. package/src/scss/components/print.scss +3 -1
  102. package/src/scss/components/progress.scss +6 -4
  103. package/src/scss/components/search.scss +15 -13
  104. package/src/scss/components/section.scss +9 -7
  105. package/src/scss/components/slidenav.scss +10 -8
  106. package/src/scss/components/slider.scss +4 -2
  107. package/src/scss/components/slideshow.scss +4 -2
  108. package/src/scss/components/sortable.scss +7 -5
  109. package/src/scss/components/spinner.scss +6 -3
  110. package/src/scss/components/sticky.scss +3 -1
  111. package/src/scss/components/subnav.scss +13 -11
  112. package/src/scss/components/svg.scss +3 -1
  113. package/src/scss/components/switcher.scss +3 -1
  114. package/src/scss/components/tab.scss +14 -12
  115. package/src/scss/components/table.scss +17 -14
  116. package/src/scss/components/text.scss +8 -6
  117. package/src/scss/components/thumbnav.scss +7 -5
  118. package/src/scss/components/tile.scss +12 -10
  119. package/src/scss/components/tooltip.scss +4 -2
  120. package/src/scss/components/totop.scss +6 -4
  121. package/src/scss/components/transition.scss +3 -1
  122. package/src/scss/components/utility.scss +8 -6
  123. package/src/scss/components/visibility.scss +3 -1
  124. package/src/scss/components/width.scss +34 -31
  125. package/src/scss/mixins-theme.scss +169 -168
  126. package/src/scss/mixins.scss +175 -175
  127. package/src/scss/uikit-theme.scss +0 -1
  128. package/src/scss/variables-theme.scss +70 -66
  129. package/src/scss/variables.scss +74 -70
  130. package/src/scss/theme/_import.scss +0 -82
  131. package/src/scss/theme/accordion.scss +0 -55
  132. package/src/scss/theme/alert.scss +0 -45
  133. package/src/scss/theme/align.scss +0 -14
  134. package/src/scss/theme/animation.scss +0 -14
  135. package/src/scss/theme/article.scss +0 -49
  136. package/src/scss/theme/background.scss +0 -14
  137. package/src/scss/theme/badge.scss +0 -29
  138. package/src/scss/theme/base.scss +0 -104
  139. package/src/scss/theme/breadcrumb.scss +0 -45
  140. package/src/scss/theme/button.scss +0 -132
  141. package/src/scss/theme/card.scss +0 -111
  142. package/src/scss/theme/close.scss +0 -29
  143. package/src/scss/theme/column.scss +0 -14
  144. package/src/scss/theme/comment.scss +0 -67
  145. package/src/scss/theme/container.scss +0 -14
  146. package/src/scss/theme/countdown.scss +0 -53
  147. package/src/scss/theme/description-list.scss +0 -29
  148. package/src/scss/theme/divider.scss +0 -49
  149. package/src/scss/theme/dotnav.scss +0 -46
  150. package/src/scss/theme/drop.scss +0 -14
  151. package/src/scss/theme/dropbar.scss +0 -38
  152. package/src/scss/theme/dropdown.scss +0 -53
  153. package/src/scss/theme/form-range.scss +0 -51
  154. package/src/scss/theme/form.scss +0 -117
  155. package/src/scss/theme/grid.scss +0 -28
  156. package/src/scss/theme/heading.scss +0 -71
  157. package/src/scss/theme/height.scss +0 -14
  158. package/src/scss/theme/icon.scss +0 -50
  159. package/src/scss/theme/iconnav.scss +0 -39
  160. package/src/scss/theme/inverse.scss +0 -14
  161. package/src/scss/theme/label.scss +0 -41
  162. package/src/scss/theme/leader.scss +0 -26
  163. package/src/scss/theme/lightbox.scss +0 -32
  164. package/src/scss/theme/link.scss +0 -55
  165. package/src/scss/theme/list.scss +0 -34
  166. package/src/scss/theme/margin.scss +0 -14
  167. package/src/scss/theme/marker.scss +0 -29
  168. package/src/scss/theme/modal.scss +0 -77
  169. package/src/scss/theme/nav.scss +0 -131
  170. package/src/scss/theme/navbar.scss +0 -135
  171. package/src/scss/theme/notification.scss +0 -44
  172. package/src/scss/theme/offcanvas.scss +0 -32
  173. package/src/scss/theme/overlay.scss +0 -33
  174. package/src/scss/theme/padding.scss +0 -14
  175. package/src/scss/theme/pagination.scss +0 -41
  176. package/src/scss/theme/placeholder.scss +0 -26
  177. package/src/scss/theme/position.scss +0 -14
  178. package/src/scss/theme/progress.scss +0 -23
  179. package/src/scss/theme/search.scss +0 -101
  180. package/src/scss/theme/section.scss +0 -32
  181. package/src/scss/theme/slidenav.scss +0 -52
  182. package/src/scss/theme/slider.scss +0 -14
  183. package/src/scss/theme/sortable.scss +0 -38
  184. package/src/scss/theme/spinner.scss +0 -14
  185. package/src/scss/theme/sticky.scss +0 -14
  186. package/src/scss/theme/subnav.scss +0 -72
  187. package/src/scss/theme/tab.scss +0 -67
  188. package/src/scss/theme/table.scss +0 -65
  189. package/src/scss/theme/text.scss +0 -49
  190. package/src/scss/theme/thumbnav.scss +0 -40
  191. package/src/scss/theme/tile.scss +0 -52
  192. package/src/scss/theme/tooltip.scss +0 -20
  193. package/src/scss/theme/totop.scss +0 -32
  194. package/src/scss/theme/transition.scss +0 -14
  195. package/src/scss/theme/utility.scss +0 -49
  196. package/src/scss/theme/variables.scss +0 -36
  197. package/src/scss/theme/width.scss +0 -14
package/src/scss/uikit-theme.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  // Theme
3
3
  //
4
4
 
5
- @import "theme/_import.scss";
6
5
 
7
6
  @import "components/_import.scss";
8
7
 
package/src/scss/variables-theme.scss CHANGED
@@ -1,3 +1,7 @@
1
+ @use "sass:string";
2
+ @use "sass:math";
3
+ @use "sass:color";
4
+
1
5
  $global-margin: 20px !default;
2
6
  $accordion-item-margin-top: $global-margin !default;
3
7
  $global-medium-font-size: 1.25rem !default;
@@ -22,16 +26,16 @@ $alert-color: $global-color !default;
22
26
  $alert-close-top: $alert-padding + 5px !default;
23
27
  $alert-close-right: $alert-padding !default;
24
28
  $global-primary-background: #1e87f0 !default;
25
- $alert-primary-background: lighten(mix(white, $global-primary-background, 40%), 20%) !default;
29
+ $alert-primary-background: color.adjust(color.mix(white, $global-primary-background, 40%), $lightness: 20%) !default;
26
30
  $alert-primary-color: $global-primary-background !default;
27
31
  $global-success-background: #32d296 !default;
28
- $alert-success-background: lighten(mix(white, $global-success-background, 40%), 25%) !default;
32
+ $alert-success-background: color.adjust(color.mix(white, $global-success-background, 40%), $lightness: 25%) !default;
29
33
  $alert-success-color: $global-success-background !default;
30
34
  $global-warning-background: #faa05a !default;
31
- $alert-warning-background: lighten(mix(white, $global-warning-background, 45%), 15%) !default;
35
+ $alert-warning-background: color.adjust(color.mix(white, $global-warning-background, 45%), $lightness: 15%) !default;
32
36
  $alert-warning-color: $global-warning-background !default;
33
37
  $global-danger-background: #f0506e !default;
34
- $alert-danger-background: lighten(mix(white, $global-danger-background, 40%), 20%) !default;
38
+ $alert-danger-background: color.adjust(color.mix(white, $global-danger-background, 40%), $lightness: 20%) !default;
35
39
  $alert-danger-color: $global-danger-background !default;
36
40
  $global-gutter: 30px !default;
37
41
  $align-margin-horizontal: $global-gutter !default;
@@ -192,21 +196,21 @@ $button-default-active-background: transparent !default;
192
196
  $button-default-active-color: $global-emphasis-color !default;
193
197
  $button-primary-background: $global-primary-background !default;
194
198
  $button-primary-color: $global-inverse-color !default;
195
- $button-primary-hover-background: darken($button-primary-background, 5%) !default;
199
+ $button-primary-hover-background: color.adjust($button-primary-background, $lightness: -5%) !default;
196
200
  $button-primary-hover-color: $global-inverse-color !default;
197
- $button-primary-active-background: darken($button-primary-background, 10%) !default;
201
+ $button-primary-active-background: color.adjust($button-primary-background, $lightness: -10%) !default;
198
202
  $button-primary-active-color: $global-inverse-color !default;
199
203
  $button-secondary-background: $global-secondary-background !default;
200
204
  $button-secondary-color: $global-inverse-color !default;
201
- $button-secondary-hover-background: darken($button-secondary-background, 5%) !default;
205
+ $button-secondary-hover-background: color.adjust($button-secondary-background, $lightness: -5%) !default;
202
206
  $button-secondary-hover-color: $global-inverse-color !default;
203
- $button-secondary-active-background: darken($button-secondary-background, 10%) !default;
207
+ $button-secondary-active-background: color.adjust($button-secondary-background, $lightness: -10%) !default;
204
208
  $button-secondary-active-color: $global-inverse-color !default;
205
209
  $button-danger-background: $global-danger-background !default;
206
210
  $button-danger-color: $global-inverse-color !default;
207
- $button-danger-hover-background: darken($button-danger-background, 5%) !default;
211
+ $button-danger-hover-background: color.adjust($button-danger-background, $lightness: -5%) !default;
208
212
  $button-danger-hover-color: $global-inverse-color !default;
209
- $button-danger-active-background: darken($button-danger-background, 10%) !default;
213
+ $button-danger-active-background: color.adjust($button-danger-background, $lightness: -10%) !default;
210
214
  $button-danger-active-color: $global-inverse-color !default;
211
215
  $button-disabled-background: transparent !default;
212
216
  $button-disabled-color: $global-muted-color !default;
@@ -227,15 +231,15 @@ $inverse-button-default-active-background: transparent !default;
227
231
  $inverse-button-default-active-color: $inverse-global-emphasis-color !default;
228
232
  $inverse-button-primary-background: $inverse-global-primary-background !default;
229
233
  $inverse-button-primary-color: $inverse-global-inverse-color !default;
230
- $inverse-button-primary-hover-background: darken($inverse-button-primary-background, 5%) !default;
234
+ $inverse-button-primary-hover-background: color.adjust($inverse-button-primary-background, $lightness: -5%) !default;
231
235
  $inverse-button-primary-hover-color: $inverse-global-inverse-color !default;
232
- $inverse-button-primary-active-background: darken($inverse-button-primary-background, 10%) !default;
236
+ $inverse-button-primary-active-background: color.adjust($inverse-button-primary-background, $lightness: -10%) !default;
233
237
  $inverse-button-primary-active-color: $inverse-global-inverse-color !default;
234
238
  $inverse-button-secondary-background: $inverse-global-primary-background !default;
235
239
  $inverse-button-secondary-color: $inverse-global-inverse-color !default;
236
- $inverse-button-secondary-hover-background: darken($inverse-button-secondary-background, 5%) !default;
240
+ $inverse-button-secondary-hover-background: color.adjust($inverse-button-secondary-background, $lightness: -5%) !default;
237
241
  $inverse-button-secondary-hover-color: $inverse-global-inverse-color !default;
238
- $inverse-button-secondary-active-background: darken($inverse-button-secondary-background, 10%) !default;
242
+ $inverse-button-secondary-active-background: color.adjust($inverse-button-secondary-background, $lightness: -10%) !default;
239
243
  $inverse-button-secondary-active-color: $inverse-global-inverse-color !default;
240
244
  $inverse-button-text-color: $inverse-global-emphasis-color !default;
241
245
  $inverse-button-text-hover-color: $inverse-global-emphasis-color !default;
@@ -247,13 +251,13 @@ $card-body-padding-vertical: $global-gutter !default;
247
251
  $card-body-padding-horizontal-l: $global-medium-gutter !default;
248
252
  $card-body-padding-vertical-l: $global-medium-gutter !default;
249
253
  $card-header-padding-horizontal: $global-gutter !default;
250
- $card-header-padding-vertical: round(($global-gutter * 0.5)) !default;
254
+ $card-header-padding-vertical: math.round(($global-gutter * 0.5)) !default;
251
255
  $card-header-padding-horizontal-l: $global-medium-gutter !default;
252
- $card-header-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
256
+ $card-header-padding-vertical-l: math.round(($global-medium-gutter * 0.5)) !default;
253
257
  $card-footer-padding-horizontal: $global-gutter !default;
254
258
  $card-footer-padding-vertical: ($global-gutter * 0.5) !default;
255
259
  $card-footer-padding-horizontal-l: $global-medium-gutter !default;
256
- $card-footer-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
260
+ $card-footer-padding-vertical-l: math.round(($global-medium-gutter * 0.5)) !default;
257
261
  $card-title-font-size: $global-large-font-size !default;
258
262
  $card-title-line-height: 1.4 !default;
259
263
  $card-badge-top: 15px !default;
@@ -282,16 +286,16 @@ $card-secondary-color-mode: light !default;
282
286
  $card-small-body-padding-horizontal: $global-margin !default;
283
287
  $card-small-body-padding-vertical: $global-margin !default;
284
288
  $card-small-header-padding-horizontal: $global-margin !default;
285
- $card-small-header-padding-vertical: round(($global-margin * 0.66667)) !default;
289
+ $card-small-header-padding-vertical: math.round(($global-margin * 0.66667)) !default;
286
290
  $card-small-footer-padding-horizontal: $global-margin !default;
287
- $card-small-footer-padding-vertical: round(($global-margin * 0.66667)) !default;
291
+ $card-small-footer-padding-vertical: math.round(($global-margin * 0.66667)) !default;
288
292
  $global-large-gutter: 70px !default;
289
293
  $card-large-body-padding-horizontal-l: $global-large-gutter !default;
290
294
  $card-large-body-padding-vertical-l: $global-large-gutter !default;
291
295
  $card-large-header-padding-horizontal-l: $global-large-gutter !default;
292
- $card-large-header-padding-vertical-l: round(($global-large-gutter * 0.5)) !default;
296
+ $card-large-header-padding-vertical-l: math.round(($global-large-gutter * 0.5)) !default;
293
297
  $card-large-footer-padding-horizontal-l: $global-large-gutter !default;
294
- $card-large-footer-padding-vertical-l: round(($global-large-gutter * 0.5)) !default;
298
+ $card-large-footer-padding-vertical-l: math.round(($global-large-gutter * 0.5)) !default;
295
299
  $inverse-card-badge-background: $inverse-global-primary-background !default;
296
300
  $inverse-card-badge-color: $inverse-global-inverse-color !default;
297
301
  $close-color: $global-muted-color !default;
@@ -410,21 +414,21 @@ $dropdown-nav-sublist-item-color: $global-muted-color !default;
410
414
  $dropdown-nav-sublist-item-hover-color: $global-color !default;
411
415
  $dropnav-dropbar-z-index: $global-z-index - 20 !default;
412
416
  $form-range-track-height: 3px !default;
413
- $form-range-track-background: darken($global-muted-background, 5%) !default;
414
- $form-range-track-focus-background: darken($form-range-track-background, 5%) !default;
417
+ $form-range-track-background: color.adjust($global-muted-background, $lightness: -5%) !default;
418
+ $form-range-track-focus-background: color.adjust($form-range-track-background, $lightness: -5%) !default;
415
419
  $form-range-thumb-height: 15px !default;
416
420
  $form-range-thumb-width: $form-range-thumb-height !default;
417
421
  $form-range-thumb-border-radius: 500px !default;
418
422
  $form-range-thumb-background: $global-background !default;
419
423
  $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
420
- $inverse-form-range-track-background: darken($inverse-global-muted-background, 5%) !default;
421
- $inverse-form-range-track-focus-background: fade-in($inverse-form-range-track-background, 0.05) !default;
422
- $inverse-form-range-thumb-background: darken(fade-in($inverse-global-color, 1), 50%) !default;
424
+ $inverse-form-range-track-background: color.adjust($inverse-global-muted-background, $lightness: -5%) !default;
425
+ $inverse-form-range-track-focus-background: color.adjust($inverse-form-range-track-background, $alpha: 0.05) !default;
426
+ $inverse-form-range-thumb-background: color.adjust(color.adjust($inverse-global-color, $alpha: 1), $lightness: -50%) !default;
423
427
  $form-height: $global-control-height !default;
424
428
  $form-border-width: $global-border-width !default;
425
429
  $form-line-height: $form-height - (2* $form-border-width) !default;
426
430
  $form-padding-horizontal: 10px !default;
427
- $form-padding-vertical: round($form-padding-horizontal * 0.6) !default;
431
+ $form-padding-vertical: math.round($form-padding-horizontal * 0.6) !default;
428
432
  $form-background: $global-background !default;
429
433
  $form-color: $global-color !default;
430
434
  $form-focus-background: $global-background !default;
@@ -434,12 +438,12 @@ $form-disabled-color: $global-muted-color !default;
434
438
  $form-placeholder-color: $global-muted-color !default;
435
439
  $form-small-height: $global-control-small-height !default;
436
440
  $form-small-padding-horizontal: 8px !default;
437
- $form-small-padding-vertical: round($form-small-padding-horizontal * 0.6) !default;
441
+ $form-small-padding-vertical: math.round($form-small-padding-horizontal * 0.6) !default;
438
442
  $form-small-line-height: $form-small-height - (2* $form-border-width) !default;
439
443
  $form-small-font-size: $global-small-font-size !default;
440
444
  $form-large-height: $global-control-large-height !default;
441
445
  $form-large-padding-horizontal: 12px !default;
442
- $form-large-padding-vertical: round($form-large-padding-horizontal * 0.6) !default;
446
+ $form-large-padding-vertical: math.round($form-large-padding-horizontal * 0.6) !default;
443
447
  $form-large-line-height: $form-large-height - (2* $form-border-width) !default;
444
448
  $form-large-font-size: $global-medium-font-size !default;
445
449
  $form-danger-color: $global-danger-background !default;
@@ -457,10 +461,10 @@ $form-datalist-icon-color: $global-color !default;
457
461
  $form-radio-size: 16px !default;
458
462
  $form-radio-margin-top: -4px !default;
459
463
  $form-radio-background: transparent !default;
460
- $form-radio-focus-background: darken($form-radio-background, 5%) !default;
464
+ $form-radio-focus-background: color.adjust($form-radio-background, $lightness: -5%) !default;
461
465
  $form-radio-checked-background: $global-primary-background !default;
462
466
  $form-radio-checked-icon-color: $global-inverse-color !default;
463
- $form-radio-checked-focus-background: darken($global-primary-background, 10%) !default;
467
+ $form-radio-checked-focus-background: color.adjust($global-primary-background, $lightness: -10%) !default;
464
468
  $form-radio-disabled-background: $global-muted-background !default;
465
469
  $form-radio-disabled-icon-color: $global-muted-color !default;
466
470
  $form-legend-font-size: $global-large-font-size !default;
@@ -480,16 +484,16 @@ $internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%
480
484
  $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
481
485
  $inverse-form-background: $inverse-global-muted-background !default;
482
486
  $inverse-form-color: $inverse-global-color !default;
483
- $inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
487
+ $inverse-form-focus-background: color.adjust($inverse-form-background, $alpha: 0.05) !default;
484
488
  $inverse-form-focus-color: $inverse-global-color !default;
485
489
  $inverse-form-placeholder-color: $inverse-global-muted-color !default;
486
490
  $inverse-form-select-icon-color: $inverse-global-color !default;
487
491
  $inverse-form-datalist-icon-color: $inverse-global-color !default;
488
492
  $inverse-form-radio-background: $inverse-global-muted-background !default;
489
- $inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
493
+ $inverse-form-radio-focus-background: color.adjust($inverse-form-radio-background, $alpha: 0.05) !default;
490
494
  $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
491
495
  $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
492
- $inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
496
+ $inverse-form-radio-checked-focus-background: color.adjust($inverse-global-primary-background, $alpha: 0.1) !default;
493
497
  $inverse-form-icon-color: $inverse-global-muted-color !default;
494
498
  $inverse-form-icon-hover-color: $inverse-global-color !default;
495
499
  $grid-gutter-horizontal: $global-gutter !default;
@@ -530,20 +534,20 @@ $heading-large-line-height: 1.1 !default;
530
534
  $heading-xlarge-line-height: 1 !default;
531
535
  $heading-2xlarge-line-height: 1 !default;
532
536
  $heading-3xlarge-line-height: 1 !default;
533
- $heading-divider-padding-bottom: unquote('calc(5px + 0.1em)') !default;
534
- $heading-divider-border-width: unquote('calc(0.2px + 0.05em)') !default;
537
+ $heading-divider-padding-bottom: string.unquote('calc(5px + 0.1em)') !default;
538
+ $heading-divider-border-width: string.unquote('calc(0.2px + 0.05em)') !default;
535
539
  $heading-divider-border: $global-border !default;
536
- $heading-bullet-top: unquote('calc(-0.1 * 1em)') !default;
537
- $heading-bullet-height: unquote('calc(4px + 0.7em)') !default;
538
- $heading-bullet-margin-right: unquote('calc(5px + 0.2em)') !default;
539
- $heading-bullet-border-width: unquote('calc(5px + 0.1em)') !default;
540
+ $heading-bullet-top: string.unquote('calc(-0.1 * 1em)') !default;
541
+ $heading-bullet-height: string.unquote('calc(4px + 0.7em)') !default;
542
+ $heading-bullet-margin-right: string.unquote('calc(5px + 0.2em)') !default;
543
+ $heading-bullet-border-width: string.unquote('calc(5px + 0.1em)') !default;
540
544
  $heading-bullet-border: $global-border !default;
541
545
  $heading-line-top: 50% !default;
542
- $heading-line-border-width: unquote('calc(0.2px + 0.05em)') !default;
546
+ $heading-line-border-width: string.unquote('calc(0.2px + 0.05em)') !default;
543
547
  $heading-line-height: $heading-line-border-width !default;
544
548
  $heading-line-width: 2000px !default;
545
549
  $heading-line-border: $global-border !default;
546
- $heading-line-margin-horizontal: unquote('calc(5px + 0.3em)') !default;
550
+ $heading-line-margin-horizontal: string.unquote('calc(5px + 0.3em)') !default;
547
551
  $heading-primary-font-size-l: 3.75rem !default;
548
552
  $heading-primary-line-height-l: 1.1 !default;
549
553
  $heading-primary-font-size-m: $heading-primary-font-size-l * 0.9 !default;
@@ -564,23 +568,23 @@ $height-large-height: 450px !default;
564
568
  $icon-image-size: 20px !default;
565
569
  $icon-link-color: $global-muted-color !default;
566
570
  $icon-link-hover-color: $global-color !default;
567
- $icon-link-active-color: darken($global-color, 5%) !default;
571
+ $icon-link-active-color: color.adjust($global-color, $lightness: -5%) !default;
568
572
  $icon-button-size: 36px !default;
569
573
  $icon-button-border-radius: 500px !default;
570
574
  $icon-button-background: $global-muted-background !default;
571
575
  $icon-button-color: $global-muted-color !default;
572
- $icon-button-hover-background: darken($icon-button-background, 5%) !default;
576
+ $icon-button-hover-background: color.adjust($icon-button-background, $lightness: -5%) !default;
573
577
  $icon-button-hover-color: $global-color !default;
574
- $icon-button-active-background: darken($icon-button-background, 10%) !default;
578
+ $icon-button-active-background: color.adjust($icon-button-background, $lightness: -10%) !default;
575
579
  $icon-button-active-color: $global-color !default;
576
580
  $inverse-icon-link-color: $inverse-global-muted-color !default;
577
581
  $inverse-icon-link-hover-color: $inverse-global-color !default;
578
582
  $inverse-icon-link-active-color: $inverse-global-color !default;
579
583
  $inverse-icon-button-background: $inverse-global-muted-background !default;
580
584
  $inverse-icon-button-color: $inverse-global-muted-color !default;
581
- $inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
585
+ $inverse-icon-button-hover-background: color.adjust($inverse-icon-button-background, $alpha: 0.05) !default;
582
586
  $inverse-icon-button-hover-color: $inverse-global-color !default;
583
- $inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
587
+ $inverse-icon-button-active-background: color.adjust($inverse-icon-button-background, $alpha: 0.1) !default;
584
588
  $inverse-icon-button-active-color: $inverse-global-color !default;
585
589
  $iconnav-margin-horizontal: $global-small-margin !default;
586
590
  $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -604,7 +608,7 @@ $label-danger-background: $global-danger-background !default;
604
608
  $label-danger-color: $global-inverse-color !default;
605
609
  $inverse-label-background: $inverse-global-primary-background !default;
606
610
  $inverse-label-color: $inverse-global-inverse-color !default;
607
- $leader-fill-content: unquote('.') !default;
611
+ $leader-fill-content: string.unquote('.') !default;
608
612
  $leader-fill-margin-left: $global-small-gutter !default;
609
613
  $lightbox-z-index: $global-z-index + 10 !default;
610
614
  $lightbox-background: #000 !default;
@@ -699,7 +703,7 @@ $modal-close-position: $global-small-margin !default;
699
703
  $modal-close-padding: 5px !default;
700
704
  $modal-close-outside-position: 0 !default;
701
705
  $modal-close-outside-translate: 100% !default;
702
- $modal-close-outside-color: lighten($global-inverse-color, 20%) !default;
706
+ $modal-close-outside-color: color.adjust($global-inverse-color, $lightness: 20%) !default;
703
707
  $modal-close-outside-hover-color: $global-inverse-color !default;
704
708
  $nav-item-padding-vertical: 5px !default;
705
709
  $nav-item-padding-horizontal: 0 !default;
@@ -931,7 +935,7 @@ $search-default-width: 240px !default;
931
935
  $search-default-height: $global-control-height !default;
932
936
  $search-default-padding-horizontal: 10px !default;
933
937
  $search-default-background: transparent !default;
934
- $search-default-focus-background: darken($search-default-background, 2%) !default;
938
+ $search-default-focus-background: color.adjust($search-default-background, $lightness: -2%) !default;
935
939
  $search-default-icon-width: 20px !default;
936
940
  $search-default-icon-padding: 10px !default;
937
941
  $search-navbar-width: 240px !default;
@@ -946,7 +950,7 @@ $search-medium-height: $global-control-large-height !default;
946
950
  $search-medium-padding-horizontal: 12px !default;
947
951
  $search-medium-background: transparent !default;
948
952
  $search-medium-font-size: $global-large-font-size !default;
949
- $search-medium-focus-background: darken($search-medium-background, 2%) !default;
953
+ $search-medium-focus-background: color.adjust($search-medium-background, $lightness: -2%) !default;
950
954
  $search-medium-icon-width: 24px !default;
951
955
  $search-medium-icon-padding: 12px !default;
952
956
  $search-large-width: 500px !default;
@@ -954,7 +958,7 @@ $search-large-height: 90px !default;
954
958
  $search-large-padding-horizontal: 20px !default;
955
959
  $search-large-background: transparent !default;
956
960
  $search-large-font-size: $global-2xlarge-font-size !default;
957
- $search-large-focus-background: darken($search-large-background, 2%) !default;
961
+ $search-large-focus-background: color.adjust($search-large-background, $lightness: -2%) !default;
958
962
  $search-large-icon-width: 40px !default;
959
963
  $search-large-icon-padding: 20px !default;
960
964
  $search-toggle-color: $global-muted-color !default;
@@ -963,13 +967,13 @@ $inverse-search-color: $inverse-global-color !default;
963
967
  $inverse-search-placeholder-color: $inverse-global-muted-color !default;
964
968
  $inverse-search-icon-color: $inverse-global-muted-color !default;
965
969
  $inverse-search-default-background: transparent !default;
966
- $inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
970
+ $inverse-search-default-focus-background: color.adjust($inverse-search-default-background, $alpha: 0.05) !default;
967
971
  $inverse-search-navbar-background: transparent !default;
968
- $inverse-search-navbar-focus-background: fade-in($inverse-search-navbar-background, 0.05) !default;
972
+ $inverse-search-navbar-focus-background: color.adjust($inverse-search-navbar-background, $alpha: 0.05) !default;
969
973
  $inverse-search-medium-background: transparent !default;
970
- $inverse-search-medium-focus-background: fade-in($inverse-search-medium-background, 0.05) !default;
974
+ $inverse-search-medium-focus-background: color.adjust($inverse-search-medium-background, $alpha: 0.05) !default;
971
975
  $inverse-search-large-background: transparent !default;
972
- $inverse-search-large-focus-background: fade-in($inverse-search-large-background, 0.05) !default;
976
+ $inverse-search-large-focus-background: color.adjust($inverse-search-large-background, $alpha: 0.05) !default;
973
977
  $inverse-search-toggle-color: $inverse-global-muted-color !default;
974
978
  $inverse-search-toggle-hover-color: $inverse-global-color !default;
975
979
  $section-padding-vertical: $global-medium-margin !default;
@@ -1007,8 +1011,8 @@ $sortable-placeholder-opacity: 0 !default;
1007
1011
  $sortable-empty-height: 50px !default;
1008
1012
  $spinner-size: 30px !default;
1009
1013
  $spinner-stroke-width: 1 !default;
1010
- $spinner-radius: floor((($spinner-size - $spinner-stroke-width) * 0.5)) !default;
1011
- $spinner-circumference: round(2 * 3.141 * $spinner-radius) !default;
1014
+ $spinner-radius: math.floor((($spinner-size - $spinner-stroke-width) * 0.5)) !default;
1015
+ $spinner-circumference: math.round(2 * 3.141 * $spinner-radius) !default;
1012
1016
  $spinner-duration: 1.4s !default;
1013
1017
  $sticky-z-index: $global-z-index - 20 !default;
1014
1018
  $sticky-animation-duration: 0.2s !default;
@@ -1080,7 +1084,7 @@ $table-large-cell-padding-horizontal: 12px !default;
1080
1084
  $table-expand-min-width: 150px !default;
1081
1085
  $inverse-table-header-cell-color: $inverse-global-color !default;
1082
1086
  $inverse-table-caption-color: $inverse-global-muted-color !default;
1083
- $inverse-table-row-active-background: fade-out($inverse-global-muted-background, 0.02) !default;
1087
+ $inverse-table-row-active-background: color.adjust($inverse-global-muted-background, $alpha: -0.02) !default;
1084
1088
  $inverse-table-divider-border: $inverse-global-border !default;
1085
1089
  $inverse-table-striped-row-background: $inverse-global-muted-background !default;
1086
1090
  $inverse-table-hover-row-background: $inverse-table-row-active-background !default;
@@ -1102,7 +1106,7 @@ $text-success-color: $global-success-background !default;
1102
1106
  $text-warning-color: $global-warning-background !default;
1103
1107
  $text-danger-color: $global-danger-background !default;
1104
1108
  $text-background-color: $global-primary-background !default;
1105
- $text-stroke-text-stroke: unquote('calc(1.4px + 0.002em)') !default;
1109
+ $text-stroke-text-stroke: string.unquote('calc(1.4px + 0.002em)') !default;
1106
1110
  $inverse-text-lead-color: $inverse-global-color !default;
1107
1111
  $inverse-text-meta-color: $inverse-global-muted-color !default;
1108
1112
  $inverse-text-muted-color: $inverse-global-muted-color !default;
@@ -1212,8 +1216,8 @@ $inverse-base-blockquote-color: $inverse-global-emphasis-color !default;
1212
1216
  $inverse-base-blockquote-footer-color: $inverse-global-color !default;
1213
1217
  $button-text-transform: uppercase !default;
1214
1218
  $button-default-border: $global-border !default;
1215
- $button-default-hover-border: darken($global-border, 20%) !default;
1216
- $button-default-active-border: darken($global-border, 30%) !default;
1219
+ $button-default-hover-border: color.adjust($global-border, $lightness: -20%) !default;
1220
+ $button-default-active-border: color.adjust($global-border, $lightness: -30%) !default;
1217
1221
  $button-disabled-border: $global-border !default;
1218
1222
  $button-text-border-width: $global-border-width !default;
1219
1223
  $button-text-border: currentColor !default;
@@ -1248,8 +1252,8 @@ $dropdown-nav-font-size: $global-small-font-size !default;
1248
1252
  $dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
1249
1253
  $form-range-track-border-radius: 500px !default;
1250
1254
  $form-range-thumb-border-width: $global-border-width !default;
1251
- $form-range-thumb-border: darken($global-border, 10%) !default;
1252
- $inverse-form-range-thumb-border: darken(fade-in($inverse-global-border, 1), 10%) !default;
1255
+ $form-range-thumb-border: color.adjust($global-border, $lightness: -10%) !default;
1256
+ $inverse-form-range-thumb-border: color.adjust(color.adjust($inverse-global-border, $alpha: 1), $lightness: -10%) !default;
1253
1257
  $form-border: $global-border !default;
1254
1258
  $form-focus-border: $global-primary-background !default;
1255
1259
  $form-disabled-border: $global-border !default;
@@ -1258,7 +1262,7 @@ $form-success-border: $global-success-background !default;
1258
1262
  $form-blank-focus-border: $global-border !default;
1259
1263
  $form-blank-focus-border-style: solid !default;
1260
1264
  $form-radio-border-width: $global-border-width !default;
1261
- $form-radio-border: darken($global-border, 10%) !default;
1265
+ $form-radio-border: color.adjust($global-border, $lightness: -10%) !default;
1262
1266
  $form-radio-focus-border: $global-primary-background !default;
1263
1267
  $form-radio-checked-border: transparent !default;
1264
1268
  $form-radio-disabled-border: $global-border !default;
@@ -1316,7 +1320,7 @@ $table-striped-border-width: $global-border-width !default;
1316
1320
  $table-striped-border: $global-border !default;
1317
1321
  $text-meta-link-color: $text-meta-color !default;
1318
1322
  $text-meta-link-hover-color: $global-color !default;
1319
- $internal-text-background-color-gradient: linear-gradient(90deg, $text-background-color 0%, adjust-hue($text-background-color, 40) 100%) !default;
1323
+ $internal-text-background-color-gradient: linear-gradient(90deg, $text-background-color 0%, color.adjust($text-background-color, $hue: 40) 100%) !default;
1320
1324
  $thumbnav-item-gradient: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.4)) !default;
1321
1325
  $thumbnav-item-hover-opacity: 0 !default;
1322
1326
  $thumbnav-item-active-opacity: 0 !default;