uikit 3.23.13 → 3.23.14-dev.be820cd99

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 (128) hide show
  1. package/.prettierignore +1 -0
  2. package/CHANGELOG.md +36 -0
  3. package/dist/css/uikit-core-rtl.css +301 -111
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +301 -111
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +305 -111
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +305 -111
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +49 -23
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +19 -14
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +19 -14
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +2 -2
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +2 -2
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +8 -3
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +2 -2
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +8 -3
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +48 -22
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +3 -3
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +2 -2
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +136 -63
  38. package/dist/js/uikit-core.min.js +1 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +185 -90
  42. package/dist/js/uikit.min.js +1 -1
  43. package/eslint.config.mjs +1 -1
  44. package/package.json +1 -1
  45. package/src/images/backgrounds/form-checkbox.svg +2 -2
  46. package/src/images/components/navbar-toggle-icon.svg +14 -7
  47. package/src/js/api/options.js +1 -1
  48. package/src/js/components/lightbox-panel.js +6 -4
  49. package/src/js/components/upload.js +1 -3
  50. package/src/js/core/drop.js +3 -8
  51. package/src/js/core/dropnav.js +4 -4
  52. package/src/js/core/img.js +1 -1
  53. package/src/js/core/index.js +1 -0
  54. package/src/js/core/navbar.js +3 -5
  55. package/src/js/core/overflow-fade.js +67 -0
  56. package/src/js/core/scrollspy.js +10 -10
  57. package/src/js/core/sticky.js +18 -16
  58. package/src/js/core/toggle.js +3 -5
  59. package/src/js/core/video.js +36 -10
  60. package/src/js/mixin/internal/animate-fade.js +32 -15
  61. package/src/js/mixin/internal/animate-slide.js +27 -9
  62. package/src/js/mixin/modal.js +3 -4
  63. package/src/js/mixin/slider.js +3 -1
  64. package/src/js/mixin/togglable.js +1 -1
  65. package/src/js/util/animation.js +3 -4
  66. package/src/js/util/await.js +7 -0
  67. package/src/js/util/player.js +1 -3
  68. package/src/js/util/scroll.js +2 -2
  69. package/src/js/util/selector.js +1 -1
  70. package/src/js/util/viewport.js +3 -1
  71. package/src/less/components/base.less +19 -4
  72. package/src/less/components/card.less +40 -1
  73. package/src/less/components/countdown.less +4 -42
  74. package/src/less/components/form.less +87 -67
  75. package/src/less/components/heading.less +0 -84
  76. package/src/less/components/icon.less +44 -0
  77. package/src/less/components/navbar.less +23 -9
  78. package/src/less/components/position.less +1 -1
  79. package/src/less/components/section.less +33 -0
  80. package/src/less/components/subnav.less +1 -1
  81. package/src/less/components/utility.less +45 -0
  82. package/src/less/components/visibility.less +1 -1
  83. package/src/less/components/width.less +0 -5
  84. package/src/less/theme/card.less +13 -0
  85. package/src/less/theme/icon.less +14 -0
  86. package/src/scss/components/base.scss +19 -4
  87. package/src/scss/components/card.scss +35 -1
  88. package/src/scss/components/countdown.scss +2 -40
  89. package/src/scss/components/form.scss +73 -55
  90. package/src/scss/components/heading.scss +0 -83
  91. package/src/scss/components/icon.scss +22 -0
  92. package/src/scss/components/navbar.scss +23 -9
  93. package/src/scss/components/position.scss +1 -1
  94. package/src/scss/components/section.scss +33 -0
  95. package/src/scss/components/subnav.scss +1 -1
  96. package/src/scss/components/utility.scss +45 -0
  97. package/src/scss/components/visibility.scss +1 -1
  98. package/src/scss/components/width.scss +0 -15
  99. package/src/scss/mixins-theme.scss +28 -8
  100. package/src/scss/mixins.scss +25 -8
  101. package/src/scss/variables-theme.scss +27 -30
  102. package/src/scss/variables.scss +25 -30
  103. package/tests/article.html +7 -7
  104. package/tests/base.html +13 -13
  105. package/tests/card.html +9 -1
  106. package/tests/column.html +1 -1
  107. package/tests/countdown.html +595 -8
  108. package/tests/cover.html +7 -13
  109. package/tests/dropbar.html +3 -3
  110. package/tests/dropdown.html +13 -13
  111. package/tests/dropnav.html +9 -9
  112. package/tests/form.html +56 -3
  113. package/tests/icon.html +31 -0
  114. package/tests/index.html +68 -58
  115. package/tests/js/index.js +76 -83
  116. package/tests/lightbox.html +4 -4
  117. package/tests/link.html +71 -8
  118. package/tests/modal.html +1 -1
  119. package/tests/navbar.html +32 -32
  120. package/tests/notification.html +5 -5
  121. package/tests/search.html +3 -3
  122. package/tests/slideshow.html +3 -3
  123. package/tests/sticky-navbar.html +72 -72
  124. package/tests/subnav.html +106 -2
  125. package/tests/tab.html +68 -21
  126. package/tests/table.html +8 -8
  127. package/tests/utility.html +159 -1
  128. package/tests/video.html +137 -10
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.23.13 | https://www.getuikit.com | (c) 2014 - 2025 YOOtheme | MIT License */
1
+ /*! UIkit 3.23.14-dev.be820cd99 | https://www.getuikit.com | (c) 2014 - 2025 YOOtheme | MIT License */
2
2
  /* ========================================================================
3
3
  Component: Base
4
4
  ========================================================================== */
@@ -42,6 +42,14 @@ a:hover,
42
42
  color: #0f6ecd;
43
43
  text-decoration: underline;
44
44
  }
45
+ /*
46
+ * Fix text underline offset if `vertical-align`is set to `middle`
47
+ */
48
+ a:has(.uk-text-middle),
49
+ .uk-link:has(.uk-text-middle),
50
+ .uk-link-toggle:hover .uk-link:has(.uk-text-middle) {
51
+ text-underline-offset: 0.1875em;
52
+ }
45
53
  /* Text-level semantics
46
54
  ========================================================================== */
47
55
  /*
@@ -143,8 +151,11 @@ video {
143
151
  }
144
152
  /*
145
153
  * 1. Constrain the element to its parent width.
146
- * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
147
- * 3. Take border and padding into account.
154
+ * 2. Take border and padding into account.
155
+ * 3. Reset `height` attribute if present to scale the height based on the intrinsic aspect ratio.
156
+ * 4. Scale height based on the extrinsic aspect ratio. Works only in Chrome yet.
157
+ * 5. Size image to fill the element's content box.
158
+ * Note: Add `iframe` as soon as `attr` is supported in all browsers and remove `uk-responsive`.
148
159
  */
149
160
  canvas,
150
161
  img,
@@ -153,9 +164,13 @@ video {
153
164
  /* 1 */
154
165
  max-width: 100%;
155
166
  /* 2 */
156
- height: auto;
157
- /* 3 */
158
167
  box-sizing: border-box;
168
+ /* 3 */
169
+ height: auto;
170
+ /* 4 */
171
+ aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
172
+ /* 5 */
173
+ object-fit: cover;
159
174
  }
160
175
  /*
161
176
  * Deprecated: only needed for `img` elements with `uk-img`
@@ -562,16 +577,6 @@ a.uk-link-reset,
562
577
  font-size: 15rem;
563
578
  }
564
579
  }
565
- /* Primary
566
- Deprecated: Use `uk-heading-medium` instead
567
- ========================================================================== */
568
- /* Tablet landscape and bigger */
569
- /* Desktop and bigger */
570
- /* Hero
571
- Deprecated: Use `uk-heading-xlarge` instead
572
- ========================================================================== */
573
- /* Tablet landscape and bigger */
574
- /* Desktop and bigger */
575
580
  /* Divider
576
581
  ========================================================================== */
577
582
  .uk-heading-divider {
@@ -1201,6 +1206,19 @@ button.uk-icon:not(:disabled) {
1201
1206
  background-color: #dfdfdf;
1202
1207
  color: #666;
1203
1208
  }
1209
+ /*
1210
+ * Overlay
1211
+ */
1212
+ .uk-icon-overlay,
1213
+ a .uk-icon-overlay {
1214
+ color: rgba(51, 51, 51, 0.6);
1215
+ transition: 0.1s ease-in-out;
1216
+ transition-property: color;
1217
+ }
1218
+ .uk-icon-overlay:hover,
1219
+ a:hover .uk-icon-overlay {
1220
+ color: #333;
1221
+ }
1204
1222
  /* ========================================================================
1205
1223
  Component: Form Range
1206
1224
  ========================================================================== */
@@ -1440,21 +1458,27 @@ button.uk-icon:not(:disabled) {
1440
1458
  }
1441
1459
  /*
1442
1460
  * Single-line
1443
- * 1. Allow any element to look like an `input` or `select` element
1444
- * 2. Make sure line-height is not larger than height
1445
- * Also needed to center the text vertically
1446
1461
  */
1447
1462
  .uk-input,
1448
1463
  .uk-select:not([multiple]):not([size]) {
1449
1464
  height: 40px;
1450
1465
  vertical-align: middle;
1466
+ }
1467
+ /*
1468
+ * 1. Allow any element to look like an `input` or `select` element
1469
+ * 2. Make sure line-height is not larger than height. Also needed to center the text vertically
1470
+ * 3. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
1471
+ */
1472
+ .uk-input:where(:not(input)),
1473
+ .uk-select:where(:not(select)) {
1451
1474
  /* 1 */
1452
1475
  display: inline-block;
1453
- }
1454
- /* 2 */
1455
- .uk-input:not(input),
1456
- .uk-select:not(select) {
1476
+ /* 2 */
1457
1477
  line-height: 38px;
1478
+ /* 3 */
1479
+ overflow: hidden;
1480
+ text-overflow: ellipsis;
1481
+ white-space: nowrap;
1458
1482
  }
1459
1483
  /*
1460
1484
  * Multi-line
@@ -1496,50 +1520,6 @@ button.uk-icon:not(:disabled) {
1496
1520
  .uk-textarea::placeholder {
1497
1521
  color: #999;
1498
1522
  }
1499
- /* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
1500
- ========================================================================== */
1501
- /*
1502
- * Small
1503
- */
1504
- .uk-form-small {
1505
- font-size: 0.875rem;
1506
- }
1507
- /* Single-line */
1508
- .uk-form-small:not(textarea):not([multiple]):not([size]) {
1509
- height: 30px;
1510
- padding-right: 8px;
1511
- padding-left: 8px;
1512
- }
1513
- /* Multi-line */
1514
- textarea.uk-form-small,
1515
- [multiple].uk-form-small,
1516
- [size].uk-form-small {
1517
- padding: 5px 8px;
1518
- }
1519
- .uk-form-small:not(select):not(input):not(textarea) {
1520
- line-height: 28px;
1521
- }
1522
- /*
1523
- * Large
1524
- */
1525
- .uk-form-large {
1526
- font-size: 1.25rem;
1527
- }
1528
- /* Single-line */
1529
- .uk-form-large:not(textarea):not([multiple]):not([size]) {
1530
- height: 55px;
1531
- padding-right: 12px;
1532
- padding-left: 12px;
1533
- }
1534
- /* Multi-line */
1535
- textarea.uk-form-large,
1536
- [multiple].uk-form-large,
1537
- [size].uk-form-large {
1538
- padding: 7px 12px;
1539
- }
1540
- .uk-form-large:not(select):not(input):not(textarea) {
1541
- line-height: 53px;
1542
- }
1543
1523
  /* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
1544
1524
  ========================================================================== */
1545
1525
  /*
@@ -1643,7 +1623,7 @@ select.uk-form-width-xsmall {
1643
1623
  * 3. Vertical alignment
1644
1624
  * 4. Remove default style
1645
1625
  * 5. Fix black background on iOS
1646
- * 6. Center icons
1626
+ * 6. Cover icons
1647
1627
  */
1648
1628
  .uk-radio,
1649
1629
  .uk-checkbox {
@@ -1662,8 +1642,7 @@ select.uk-form-width-xsmall {
1662
1642
  /* 5 */
1663
1643
  background-color: transparent;
1664
1644
  /* 6 */
1665
- background-repeat: no-repeat;
1666
- background-position: 50% 50%;
1645
+ background-size: cover;
1667
1646
  border: 1px solid #cccccc;
1668
1647
  transition: 0.2s ease-in-out;
1669
1648
  transition-property: background-color, border;
@@ -1700,7 +1679,7 @@ select.uk-form-width-xsmall {
1700
1679
  background-image: url("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%3Ccircle%20fill%3D%22%23fff%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
1701
1680
  }
1702
1681
  .uk-checkbox:checked {
1703
- background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
1682
+ background-image: url("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%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2213%203.5%206%2010%203%207.5%202%208%206%2012.5%2014%204%2013%203.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
1704
1683
  }
1705
1684
  .uk-checkbox:indeterminate {
1706
1685
  background-image: url("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%23fff%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
@@ -1717,11 +1696,63 @@ select.uk-form-width-xsmall {
1717
1696
  background-image: url("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%3Ccircle%20fill%3D%22%23999%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E");
1718
1697
  }
1719
1698
  .uk-checkbox:disabled:checked {
1720
- background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
1699
+ background-image: url("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%3Cpolygon%20fill%3D%22%23999%22%20points%3D%2213%203.5%206%2010%203%207.5%202%208%206%2012.5%2014%204%2013%203.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
1721
1700
  }
1722
1701
  .uk-checkbox:disabled:indeterminate {
1723
1702
  background-image: url("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%23999%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
1724
1703
  }
1704
+ /* Style modifier (`uk-input`, `uk-select`, `uk-textarea`, `uk-radio`, `uk-checkbox`)
1705
+ ========================================================================== */
1706
+ /*
1707
+ * Small
1708
+ */
1709
+ .uk-form-small:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) {
1710
+ font-size: 0.875rem;
1711
+ }
1712
+ /* Single-line */
1713
+ .uk-form-small:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
1714
+ height: 30px;
1715
+ padding-right: 8px;
1716
+ padding-left: 8px;
1717
+ }
1718
+ /* Multi-line */
1719
+ .uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) {
1720
+ padding: 5px 8px;
1721
+ }
1722
+ /* Any element */
1723
+ .uk-form-small:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) {
1724
+ line-height: 28px;
1725
+ }
1726
+ /* Radio + Checkbox */
1727
+ .uk-form-small:is(.uk-radio, .uk-checkbox) {
1728
+ height: 14px;
1729
+ width: 14px;
1730
+ }
1731
+ /*
1732
+ * Large
1733
+ */
1734
+ .uk-form-large:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) {
1735
+ font-size: 1.25rem;
1736
+ }
1737
+ /* Single-line */
1738
+ .uk-form-large:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
1739
+ height: 55px;
1740
+ padding-right: 12px;
1741
+ padding-left: 12px;
1742
+ }
1743
+ /* Multi-line */
1744
+ .uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) {
1745
+ padding: 7px 12px;
1746
+ }
1747
+ /* Any element */
1748
+ .uk-form-large:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) {
1749
+ line-height: 53px;
1750
+ }
1751
+ /* Radio + Checkbox */
1752
+ .uk-form-large:is(.uk-radio, .uk-checkbox) {
1753
+ height: 22px;
1754
+ width: 22px;
1755
+ }
1725
1756
  /* Legend
1726
1757
  ========================================================================== */
1727
1758
  /*
@@ -2233,6 +2264,12 @@ select.uk-form-width-xsmall {
2233
2264
  padding-top: 20px;
2234
2265
  padding-bottom: 20px;
2235
2266
  }
2267
+ .uk-section-xsmall-top {
2268
+ padding-top: 20px;
2269
+ }
2270
+ .uk-section-xsmall-bottom {
2271
+ padding-bottom: 20px;
2272
+ }
2236
2273
  /*
2237
2274
  * Small
2238
2275
  */
@@ -2240,6 +2277,30 @@ select.uk-form-width-xsmall {
2240
2277
  padding-top: 40px;
2241
2278
  padding-bottom: 40px;
2242
2279
  }
2280
+ .uk-section-small-top {
2281
+ padding-top: 40px;
2282
+ }
2283
+ .uk-section-small-bottom {
2284
+ padding-bottom: 40px;
2285
+ }
2286
+ /*
2287
+ * Medium
2288
+ */
2289
+ .uk-section-medium-top {
2290
+ padding-top: 40px;
2291
+ }
2292
+ .uk-section-medium-bottom {
2293
+ padding-bottom: 40px;
2294
+ }
2295
+ /* Desktop and bigger */
2296
+ @media (min-width: 960px) {
2297
+ .uk-section-medium-top {
2298
+ padding-top: 70px;
2299
+ }
2300
+ .uk-section-medium-bottom {
2301
+ padding-bottom: 70px;
2302
+ }
2303
+ }
2243
2304
  /*
2244
2305
  * Large
2245
2306
  */
@@ -2247,12 +2308,24 @@ select.uk-form-width-xsmall {
2247
2308
  padding-top: 70px;
2248
2309
  padding-bottom: 70px;
2249
2310
  }
2311
+ .uk-section-large-top {
2312
+ padding-top: 70px;
2313
+ }
2314
+ .uk-section-large-bottom {
2315
+ padding-bottom: 70px;
2316
+ }
2250
2317
  /* Tablet landscape and bigger */
2251
2318
  @media (min-width: 960px) {
2252
2319
  .uk-section-large {
2253
2320
  padding-top: 140px;
2254
2321
  padding-bottom: 140px;
2255
2322
  }
2323
+ .uk-section-large-top {
2324
+ padding-top: 140px;
2325
+ }
2326
+ .uk-section-large-bottom {
2327
+ padding-bottom: 140px;
2328
+ }
2256
2329
  }
2257
2330
  /*
2258
2331
  * XLarge
@@ -2261,12 +2334,24 @@ select.uk-form-width-xsmall {
2261
2334
  padding-top: 140px;
2262
2335
  padding-bottom: 140px;
2263
2336
  }
2337
+ .uk-section-xlarge-top {
2338
+ padding-top: 140px;
2339
+ }
2340
+ .uk-section-xlarge-bottom {
2341
+ padding-bottom: 140px;
2342
+ }
2264
2343
  /* Tablet landscape and bigger */
2265
2344
  @media (min-width: 960px) {
2266
2345
  .uk-section-xlarge {
2267
2346
  padding-top: 210px;
2268
2347
  padding-bottom: 210px;
2269
2348
  }
2349
+ .uk-section-xlarge-top {
2350
+ padding-top: 210px;
2351
+ }
2352
+ .uk-section-xlarge-bottom {
2353
+ padding-bottom: 210px;
2354
+ }
2270
2355
  }
2271
2356
  /* Style modifiers
2272
2357
  ========================================================================== */
@@ -2651,7 +2736,7 @@ select.uk-form-width-xsmall {
2651
2736
  }
2652
2737
  /* Hover modifier
2653
2738
  ========================================================================== */
2654
- .uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
2739
+ .uk-card-hover:not(.uk-card-default, .uk-card-primary, .uk-card-secondary, .uk-card-overlay):hover {
2655
2740
  background-color: #fff;
2656
2741
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
2657
2742
  }
@@ -2712,6 +2797,22 @@ select.uk-form-width-xsmall {
2712
2797
  background-color: #222;
2713
2798
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
2714
2799
  }
2800
+ /*
2801
+ * Overlay
2802
+ */
2803
+ .uk-card-overlay {
2804
+ --uk-inverse: dark;
2805
+ background-color: rgba(255, 255, 255, 0.8);
2806
+ color: #666;
2807
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
2808
+ }
2809
+ .uk-card-overlay .uk-card-title {
2810
+ color: #333;
2811
+ }
2812
+ .uk-card-overlay.uk-card-hover:hover {
2813
+ background-color: rgba(255, 255, 255, 0.9);
2814
+ box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
2815
+ }
2715
2816
  /* Size modifier
2716
2817
  ========================================================================== */
2717
2818
  /*
@@ -4520,50 +4621,26 @@ select.uk-form-width-xsmall {
4520
4621
  /* ========================================================================
4521
4622
  Component: Countdown
4522
4623
  ========================================================================== */
4624
+ .uk-countdown {
4625
+ margin: 0;
4626
+ }
4523
4627
  /* Item
4524
4628
  ========================================================================== */
4525
4629
  /* Number
4526
4630
  ========================================================================== */
4527
4631
  /*
4528
4632
  * 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
4529
- * 2. Style
4530
4633
  */
4531
4634
  .uk-countdown-number {
4635
+ margin: 0;
4532
4636
  /* 1 */
4533
4637
  font-variant-numeric: tabular-nums;
4534
- /* 2 */
4535
- font-size: 2rem;
4536
- line-height: 0.8;
4537
- }
4538
- /* Phone landscape and bigger */
4539
- @media (min-width: 640px) {
4540
- .uk-countdown-number {
4541
- font-size: 4rem;
4542
- }
4543
- }
4544
- /* Tablet landscape and bigger */
4545
- @media (min-width: 960px) {
4546
- .uk-countdown-number {
4547
- font-size: 6rem;
4548
- }
4549
4638
  }
4550
4639
  /* Separator
4551
4640
  ========================================================================== */
4552
4641
  .uk-countdown-separator {
4553
- font-size: 1rem;
4554
- line-height: 1.6;
4555
- }
4556
- /* Phone landscape and bigger */
4557
- @media (min-width: 640px) {
4558
- .uk-countdown-separator {
4559
- font-size: 2rem;
4560
- }
4561
- }
4562
- /* Tablet landscape and bigger */
4563
- @media (min-width: 960px) {
4564
- .uk-countdown-separator {
4565
- font-size: 3rem;
4566
- }
4642
+ font-size: 0.5em;
4643
+ line-height: 2;
4567
4644
  }
4568
4645
  /* Label
4569
4646
  ========================================================================== */
@@ -5438,7 +5515,7 @@ ul.uk-nav-sub {
5438
5515
  /* Groups
5439
5516
  ========================================================================== */
5440
5517
  /*
5441
- * 1. Align navs and items vertically if they have a different height
5518
+ * 1. Stretch height if a sibling's height is expanded by its content
5442
5519
  */
5443
5520
  .uk-navbar-right,
5444
5521
  .uk-navbar-left,
@@ -5446,7 +5523,7 @@ ul.uk-nav-sub {
5446
5523
  display: flex;
5447
5524
  gap: 15px;
5448
5525
  /* 1 */
5449
- align-items: center;
5526
+ align-items: stretch;
5450
5527
  }
5451
5528
  /*
5452
5529
  * Horizontal alignment
@@ -5454,7 +5531,8 @@ ul.uk-nav-sub {
5454
5531
  * 2. Fix text wrapping if content is larger than 50% of the container.
5455
5532
  * 3. Needed for dropdowns because a new position context is created
5456
5533
  * `z-index` must be smaller than off-canvas
5457
- * 4. Align sub groups for centered navbar
5534
+ * 4. Stretch height if a sibling's height is expanded by its content
5535
+ * 5. Align sub groups for centered navbar
5458
5536
  */
5459
5537
  .uk-navbar-left {
5460
5538
  margin-right: auto;
@@ -5475,10 +5553,15 @@ ul.uk-nav-sub {
5475
5553
  box-sizing: border-box;
5476
5554
  /* 3 */
5477
5555
  z-index: 990;
5556
+ /* 4 */
5557
+ height: 100%;
5558
+ align-items: stretch;
5478
5559
  }
5479
- /* 4 */
5480
5560
  .uk-navbar-center-right,
5481
5561
  .uk-navbar-center-left {
5562
+ /* 4 */
5563
+ height: 100%;
5564
+ /* 5 */
5482
5565
  position: absolute;
5483
5566
  top: 0;
5484
5567
  }
@@ -5495,12 +5578,15 @@ ul.uk-nav-sub {
5495
5578
  /* Nav
5496
5579
  ========================================================================== */
5497
5580
  /*
5498
- * 1. Reset list
5581
+ * 1. Stretch height if a sibling's height is expanded by its content
5582
+ * 2. Reset list
5499
5583
  */
5500
5584
  .uk-navbar-nav {
5501
5585
  display: flex;
5502
5586
  gap: 15px;
5503
5587
  /* 1 */
5588
+ align-items: stretch;
5589
+ /* 2 */
5504
5590
  margin: 0;
5505
5591
  padding: 0;
5506
5592
  list-style: none;
@@ -5542,8 +5628,13 @@ ul.uk-nav-sub {
5542
5628
  }
5543
5629
  /*
5544
5630
  * Nav items
5631
+ * 1. Stretch height if a sibling's height is expanded by its content
5632
+ * 2. Reset list
5545
5633
  */
5546
5634
  .uk-navbar-nav > li > a {
5635
+ /* 1 */
5636
+ height: 100%;
5637
+ /* 2 */
5547
5638
  padding: 0 0;
5548
5639
  color: #999;
5549
5640
  text-transform: uppercase;
@@ -5929,7 +6020,7 @@ ul.uk-nav-sub {
5929
6020
  /* Disabled
5930
6021
  * The same for all style modifiers
5931
6022
  ========================================================================== */
5932
- .uk-subnav > .uk-disabled > a {
6023
+ .uk-subnav > .uk-disabled > :first-child {
5933
6024
  color: #999;
5934
6025
  }
5935
6026
  /* ========================================================================
@@ -8325,6 +8416,45 @@ iframe[data-uk-cover] {
8325
8416
  .uk-overflow-auto > :last-child {
8326
8417
  margin-bottom: 0;
8327
8418
  }
8419
+ /*
8420
+ * Overflow fade
8421
+ * 1. Overflow
8422
+ * 2. Mask
8423
+ */
8424
+ @property --uk-overflow-fade-start-opacity {
8425
+ syntax: "<number>";
8426
+ inherits: false;
8427
+ initial-value: 0;
8428
+ }
8429
+ @property --uk-overflow-fade-end-opacity {
8430
+ syntax: "<number>";
8431
+ inherits: false;
8432
+ initial-value: 0;
8433
+ }
8434
+ .uk-overflow-fade-horizontal {
8435
+ overflow-x: auto;
8436
+ --uk-overflow-fade-direction: right;
8437
+ }
8438
+ .uk-overflow-fade-vertical {
8439
+ overflow-y: auto;
8440
+ --uk-overflow-fade-direction: bottom;
8441
+ }
8442
+ .uk-overflow-fade-horizontal,
8443
+ .uk-overflow-fade-vertical {
8444
+ /* 1 */
8445
+ -webkit-overflow-scrolling: touch;
8446
+ -ms-overflow-style: -ms-autohiding-scrollbar;
8447
+ /* 2 */
8448
+ mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0, 0, 0, var(--uk-overflow-fade-start-opacity)), #000 100px, #000 calc(100% - 100px), rgba(0, 0, 0, var(--uk-overflow-fade-end-opacity)));
8449
+ }
8450
+ .uk-overflow-fade-horizontal > *,
8451
+ .uk-overflow-fade-vertical > * {
8452
+ min-width: max-content;
8453
+ }
8454
+ .uk-overflow-fade-horizontal::-webkit-scrollbar,
8455
+ .uk-overflow-fade-vertical::-webkit-scrollbar {
8456
+ display: none;
8457
+ }
8328
8458
  /* Box Sizing
8329
8459
  ========================================================================== */
8330
8460
  .uk-box-sizing-content {
@@ -9648,6 +9778,9 @@ iframe[data-uk-cover] {
9648
9778
  .uk-position-z-index-high {
9649
9779
  z-index: 990;
9650
9780
  }
9781
+ .uk-position-z-index-highest {
9782
+ z-index: 1060;
9783
+ }
9651
9784
  /* ========================================================================
9652
9785
  Component: Transition
9653
9786
  ========================================================================== */
@@ -9877,7 +10010,7 @@ iframe[data-uk-cover] {
9877
10010
  width: 0 !important;
9878
10011
  height: 0 !important;
9879
10012
  padding: 0 !important;
9880
- border: 0 !important;
10013
+ border-width: 0 !important;
9881
10014
  margin: 0 !important;
9882
10015
  overflow: hidden !important;
9883
10016
  }
@@ -10876,6 +11009,65 @@ iframe[data-uk-cover] {
10876
11009
  background-color: rgba(255, 255, 255, 0.2);
10877
11010
  color: rgba(255, 255, 255, 0.7);
10878
11011
  }
11012
+ .uk-light .uk-icon-overlay,
11013
+ a .uk-icon-overlay a.uk-light .uk-icon-overlay,
11014
+ .uk-section-primary:not(.uk-preserve-color) .uk-icon-overlay,
11015
+ a .uk-icon-overlay a.uk-section-primary:not(.uk-preserve-color) .uk-icon-overlay,
11016
+ .uk-section-secondary:not(.uk-preserve-color) .uk-icon-overlay,
11017
+ a .uk-icon-overlay a.uk-section-secondary:not(.uk-preserve-color) .uk-icon-overlay,
11018
+ .uk-tile-primary:not(.uk-preserve-color) .uk-icon-overlay,
11019
+ a .uk-icon-overlay a.uk-tile-primary:not(.uk-preserve-color) .uk-icon-overlay,
11020
+ .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-overlay,
11021
+ a .uk-icon-overlay a.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-overlay,
11022
+ .uk-card-primary.uk-card-body .uk-icon-overlay,
11023
+ a .uk-icon-overlay a.uk-card-primary.uk-card-body .uk-icon-overlay,
11024
+ .uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-overlay,
11025
+ a .uk-icon-overlay a.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-overlay,
11026
+ .uk-card-secondary.uk-card-body .uk-icon-overlay,
11027
+ a .uk-icon-overlay a.uk-card-secondary.uk-card-body .uk-icon-overlay,
11028
+ .uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-overlay,
11029
+ a .uk-icon-overlay a.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-overlay,
11030
+ .uk-overlay-primary .uk-icon-overlay,
11031
+ a .uk-icon-overlay a.uk-overlay-primary .uk-icon-overlay,
11032
+ .uk-offcanvas-bar .uk-icon-overlay,
11033
+ a .uk-icon-overlay a.uk-offcanvas-bar .uk-icon-overlay {
11034
+ color: rgba(255, 255, 255, 0.6);
11035
+ }
11036
+ .uk-light .uk-icon-overlay:hover,
11037
+ .uk-light a:hover .uk-icon-overlay,
11038
+ a.uk-light:hover .uk-icon-overlay,
11039
+ .uk-section-primary:not(.uk-preserve-color) .uk-icon-overlay:hover,
11040
+ .uk-section-primary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
11041
+ a.uk-section-primary:not(.uk-preserve-color):hover .uk-icon-overlay,
11042
+ .uk-section-secondary:not(.uk-preserve-color) .uk-icon-overlay:hover,
11043
+ .uk-section-secondary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
11044
+ a.uk-section-secondary:not(.uk-preserve-color):hover .uk-icon-overlay,
11045
+ .uk-tile-primary:not(.uk-preserve-color) .uk-icon-overlay:hover,
11046
+ .uk-tile-primary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
11047
+ a.uk-tile-primary:not(.uk-preserve-color):hover .uk-icon-overlay,
11048
+ .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-overlay:hover,
11049
+ .uk-tile-secondary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
11050
+ a.uk-tile-secondary:not(.uk-preserve-color):hover .uk-icon-overlay,
11051
+ .uk-card-primary.uk-card-body .uk-icon-overlay:hover,
11052
+ .uk-card-primary.uk-card-body a:hover .uk-icon-overlay,
11053
+ a.uk-card-primary.uk-card-body:hover .uk-icon-overlay,
11054
+ .uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-overlay:hover,
11055
+ .uk-card-primary > :not([class*="uk-card-media"]) a:hover .uk-icon-overlay,
11056
+ a.uk-card-primary > :not([class*="uk-card-media"]):hover .uk-icon-overlay,
11057
+ .uk-card-secondary.uk-card-body .uk-icon-overlay:hover,
11058
+ .uk-card-secondary.uk-card-body a:hover .uk-icon-overlay,
11059
+ a.uk-card-secondary.uk-card-body:hover .uk-icon-overlay,
11060
+ .uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-overlay:hover,
11061
+ .uk-card-secondary > :not([class*="uk-card-media"]) a:hover .uk-icon-overlay,
11062
+ a.uk-card-secondary > :not([class*="uk-card-media"]):hover .uk-icon-overlay,
11063
+ .uk-overlay-primary .uk-icon-overlay:hover,
11064
+ .uk-overlay-primary a:hover .uk-icon-overlay,
11065
+ a.uk-overlay-primary:hover .uk-icon-overlay,
11066
+ .uk-offcanvas-bar .uk-icon-overlay:hover,
11067
+ .uk-offcanvas-bar a:hover .uk-icon-overlay,
11068
+ a.uk-offcanvas-bar:hover .uk-icon-overlay {
11069
+ color: #fff;
11070
+ }
10879
11071
  .uk-light .uk-range::-webkit-slider-runnable-track,
10880
11072
  .uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
10881
11073
  .uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
@@ -11250,7 +11442,7 @@ iframe[data-uk-cover] {
11250
11442
  .uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox:checked,
11251
11443
  .uk-overlay-primary .uk-checkbox:checked,
11252
11444
  .uk-offcanvas-bar .uk-checkbox:checked {
11253
- background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
11445
+ background-image: url("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%3Cpolygon%20fill%3D%22%23666%22%20points%3D%2213%203.5%206%2010%203%207.5%202%208%206%2012.5%2014%204%2013%203.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
11254
11446
  }
11255
11447
  .uk-light .uk-checkbox:indeterminate,
11256
11448
  .uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
@@ -13065,10 +13257,12 @@ iframe[data-uk-cover] {
13065
13257
  .uk-tile-muted:not(.uk-preserve-color),
13066
13258
  .uk-card-default.uk-card-body,
13067
13259
  .uk-card-default > :not([class*="uk-card-media"]),
13260
+ .uk-card-overlay.uk-card-body,
13261
+ .uk-card-overlay > :not([class*="uk-card-media"]),
13068
13262
  .uk-overlay-default,
13069
13263
  .uk-dropbar,
13070
13264
  .uk-navbar-container:not(.uk-navbar-transparent),
13071
- .uk-navbar-dropdown,
13265
+ .uk-navbar-dropdown:not(.uk-preserve-color),
13072
13266
  .uk-dropdown {
13073
13267
  --uk-inverse: dark;
13074
13268
  }