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
  /*
@@ -141,8 +149,11 @@ video {
141
149
  }
142
150
  /*
143
151
  * 1. Constrain the element to its parent width.
144
- * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
145
- * 3. Take border and padding into account.
152
+ * 2. Take border and padding into account.
153
+ * 3. Reset `height` attribute if present to scale the height based on the intrinsic aspect ratio.
154
+ * 4. Scale height based on the extrinsic aspect ratio. Works only in Chrome yet.
155
+ * 5. Size image to fill the element's content box.
156
+ * Note: Add `iframe` as soon as `attr` is supported in all browsers and remove `uk-responsive`.
146
157
  */
147
158
  canvas,
148
159
  img,
@@ -151,9 +162,13 @@ video {
151
162
  /* 1 */
152
163
  max-width: 100%;
153
164
  /* 2 */
154
- height: auto;
155
- /* 3 */
156
165
  box-sizing: border-box;
166
+ /* 3 */
167
+ height: auto;
168
+ /* 4 */
169
+ aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
170
+ /* 5 */
171
+ object-fit: cover;
157
172
  }
158
173
  /*
159
174
  * Deprecated: only needed for `img` elements with `uk-img`
@@ -551,16 +566,6 @@ a.uk-link-reset,
551
566
  font-size: 15rem;
552
567
  }
553
568
  }
554
- /* Primary
555
- Deprecated: Use `uk-heading-medium` instead
556
- ========================================================================== */
557
- /* Tablet landscape and bigger */
558
- /* Desktop and bigger */
559
- /* Hero
560
- Deprecated: Use `uk-heading-xlarge` instead
561
- ========================================================================== */
562
- /* Tablet landscape and bigger */
563
- /* Desktop and bigger */
564
569
  /* Divider
565
570
  ========================================================================== */
566
571
  .uk-heading-divider {
@@ -1171,6 +1176,17 @@ button.uk-icon:not(:disabled) {
1171
1176
  background-color: #dfdfdf;
1172
1177
  color: #666;
1173
1178
  }
1179
+ /*
1180
+ * Overlay
1181
+ */
1182
+ .uk-icon-overlay,
1183
+ a .uk-icon-overlay {
1184
+ color: rgba(51, 51, 51, 0.6);
1185
+ }
1186
+ .uk-icon-overlay:hover,
1187
+ a:hover .uk-icon-overlay {
1188
+ color: #333;
1189
+ }
1174
1190
  /* ========================================================================
1175
1191
  Component: Form Range
1176
1192
  ========================================================================== */
@@ -1403,21 +1419,27 @@ button.uk-icon:not(:disabled) {
1403
1419
  }
1404
1420
  /*
1405
1421
  * Single-line
1406
- * 1. Allow any element to look like an `input` or `select` element
1407
- * 2. Make sure line-height is not larger than height
1408
- * Also needed to center the text vertically
1409
1422
  */
1410
1423
  .uk-input,
1411
1424
  .uk-select:not([multiple]):not([size]) {
1412
1425
  height: 40px;
1413
1426
  vertical-align: middle;
1427
+ }
1428
+ /*
1429
+ * 1. Allow any element to look like an `input` or `select` element
1430
+ * 2. Make sure line-height is not larger than height. Also needed to center the text vertically
1431
+ * 3. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
1432
+ */
1433
+ .uk-input:where(:not(input)),
1434
+ .uk-select:where(:not(select)) {
1414
1435
  /* 1 */
1415
1436
  display: inline-block;
1416
- }
1417
- /* 2 */
1418
- .uk-input:not(input),
1419
- .uk-select:not(select) {
1437
+ /* 2 */
1420
1438
  line-height: 40px;
1439
+ /* 3 */
1440
+ overflow: hidden;
1441
+ text-overflow: ellipsis;
1442
+ white-space: nowrap;
1421
1443
  }
1422
1444
  /*
1423
1445
  * Multi-line
@@ -1457,50 +1479,6 @@ button.uk-icon:not(:disabled) {
1457
1479
  .uk-textarea::placeholder {
1458
1480
  color: #999;
1459
1481
  }
1460
- /* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
1461
- ========================================================================== */
1462
- /*
1463
- * Small
1464
- */
1465
- .uk-form-small {
1466
- font-size: 0.875rem;
1467
- }
1468
- /* Single-line */
1469
- .uk-form-small:not(textarea):not([multiple]):not([size]) {
1470
- height: 30px;
1471
- padding-right: 8px;
1472
- padding-left: 8px;
1473
- }
1474
- /* Multi-line */
1475
- textarea.uk-form-small,
1476
- [multiple].uk-form-small,
1477
- [size].uk-form-small {
1478
- padding: 5px 8px;
1479
- }
1480
- .uk-form-small:not(select):not(input):not(textarea) {
1481
- line-height: 30px;
1482
- }
1483
- /*
1484
- * Large
1485
- */
1486
- .uk-form-large {
1487
- font-size: 1.25rem;
1488
- }
1489
- /* Single-line */
1490
- .uk-form-large:not(textarea):not([multiple]):not([size]) {
1491
- height: 55px;
1492
- padding-right: 12px;
1493
- padding-left: 12px;
1494
- }
1495
- /* Multi-line */
1496
- textarea.uk-form-large,
1497
- [multiple].uk-form-large,
1498
- [size].uk-form-large {
1499
- padding: 7px 12px;
1500
- }
1501
- .uk-form-large:not(select):not(input):not(textarea) {
1502
- line-height: 55px;
1503
- }
1504
1482
  /* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
1505
1483
  ========================================================================== */
1506
1484
  /*
@@ -1597,7 +1575,7 @@ select.uk-form-width-xsmall {
1597
1575
  * 3. Vertical alignment
1598
1576
  * 4. Remove default style
1599
1577
  * 5. Fix black background on iOS
1600
- * 6. Center icons
1578
+ * 6. Cover icons
1601
1579
  */
1602
1580
  .uk-radio,
1603
1581
  .uk-checkbox {
@@ -1616,8 +1594,7 @@ select.uk-form-width-xsmall {
1616
1594
  /* 5 */
1617
1595
  background-color: #ebebeb;
1618
1596
  /* 6 */
1619
- background-repeat: no-repeat;
1620
- background-position: 50% 50%;
1597
+ background-size: cover;
1621
1598
  }
1622
1599
  .uk-radio {
1623
1600
  border-radius: 50%;
@@ -1649,7 +1626,7 @@ select.uk-form-width-xsmall {
1649
1626
  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");
1650
1627
  }
1651
1628
  .uk-checkbox:checked {
1652
- 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");
1629
+ 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");
1653
1630
  }
1654
1631
  .uk-checkbox:indeterminate {
1655
1632
  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");
@@ -1665,11 +1642,63 @@ select.uk-form-width-xsmall {
1665
1642
  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");
1666
1643
  }
1667
1644
  .uk-checkbox:disabled:checked {
1668
- 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");
1645
+ 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");
1669
1646
  }
1670
1647
  .uk-checkbox:disabled:indeterminate {
1671
1648
  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");
1672
1649
  }
1650
+ /* Style modifier (`uk-input`, `uk-select`, `uk-textarea`, `uk-radio`, `uk-checkbox`)
1651
+ ========================================================================== */
1652
+ /*
1653
+ * Small
1654
+ */
1655
+ .uk-form-small:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) {
1656
+ font-size: 0.875rem;
1657
+ }
1658
+ /* Single-line */
1659
+ .uk-form-small:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
1660
+ height: 30px;
1661
+ padding-right: 8px;
1662
+ padding-left: 8px;
1663
+ }
1664
+ /* Multi-line */
1665
+ .uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) {
1666
+ padding: 5px 8px;
1667
+ }
1668
+ /* Any element */
1669
+ .uk-form-small:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) {
1670
+ line-height: 30px;
1671
+ }
1672
+ /* Radio + Checkbox */
1673
+ .uk-form-small:is(.uk-radio, .uk-checkbox) {
1674
+ height: 14px;
1675
+ width: 14px;
1676
+ }
1677
+ /*
1678
+ * Large
1679
+ */
1680
+ .uk-form-large:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) {
1681
+ font-size: 1.25rem;
1682
+ }
1683
+ /* Single-line */
1684
+ .uk-form-large:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
1685
+ height: 55px;
1686
+ padding-right: 12px;
1687
+ padding-left: 12px;
1688
+ }
1689
+ /* Multi-line */
1690
+ .uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) {
1691
+ padding: 7px 12px;
1692
+ }
1693
+ /* Any element */
1694
+ .uk-form-large:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) {
1695
+ line-height: 55px;
1696
+ }
1697
+ /* Radio + Checkbox */
1698
+ .uk-form-large:is(.uk-radio, .uk-checkbox) {
1699
+ height: 22px;
1700
+ width: 22px;
1701
+ }
1673
1702
  /* Legend
1674
1703
  ========================================================================== */
1675
1704
  /*
@@ -2127,6 +2156,12 @@ select.uk-form-width-xsmall {
2127
2156
  padding-top: 20px;
2128
2157
  padding-bottom: 20px;
2129
2158
  }
2159
+ .uk-section-xsmall-top {
2160
+ padding-top: 20px;
2161
+ }
2162
+ .uk-section-xsmall-bottom {
2163
+ padding-bottom: 20px;
2164
+ }
2130
2165
  /*
2131
2166
  * Small
2132
2167
  */
@@ -2134,6 +2169,30 @@ select.uk-form-width-xsmall {
2134
2169
  padding-top: 40px;
2135
2170
  padding-bottom: 40px;
2136
2171
  }
2172
+ .uk-section-small-top {
2173
+ padding-top: 40px;
2174
+ }
2175
+ .uk-section-small-bottom {
2176
+ padding-bottom: 40px;
2177
+ }
2178
+ /*
2179
+ * Medium
2180
+ */
2181
+ .uk-section-medium-top {
2182
+ padding-top: 40px;
2183
+ }
2184
+ .uk-section-medium-bottom {
2185
+ padding-bottom: 40px;
2186
+ }
2187
+ /* Desktop and bigger */
2188
+ @media (min-width: 960px) {
2189
+ .uk-section-medium-top {
2190
+ padding-top: 70px;
2191
+ }
2192
+ .uk-section-medium-bottom {
2193
+ padding-bottom: 70px;
2194
+ }
2195
+ }
2137
2196
  /*
2138
2197
  * Large
2139
2198
  */
@@ -2141,12 +2200,24 @@ select.uk-form-width-xsmall {
2141
2200
  padding-top: 70px;
2142
2201
  padding-bottom: 70px;
2143
2202
  }
2203
+ .uk-section-large-top {
2204
+ padding-top: 70px;
2205
+ }
2206
+ .uk-section-large-bottom {
2207
+ padding-bottom: 70px;
2208
+ }
2144
2209
  /* Tablet landscape and bigger */
2145
2210
  @media (min-width: 960px) {
2146
2211
  .uk-section-large {
2147
2212
  padding-top: 140px;
2148
2213
  padding-bottom: 140px;
2149
2214
  }
2215
+ .uk-section-large-top {
2216
+ padding-top: 140px;
2217
+ }
2218
+ .uk-section-large-bottom {
2219
+ padding-bottom: 140px;
2220
+ }
2150
2221
  }
2151
2222
  /*
2152
2223
  * XLarge
@@ -2155,12 +2226,24 @@ select.uk-form-width-xsmall {
2155
2226
  padding-top: 140px;
2156
2227
  padding-bottom: 140px;
2157
2228
  }
2229
+ .uk-section-xlarge-top {
2230
+ padding-top: 140px;
2231
+ }
2232
+ .uk-section-xlarge-bottom {
2233
+ padding-bottom: 140px;
2234
+ }
2158
2235
  /* Tablet landscape and bigger */
2159
2236
  @media (min-width: 960px) {
2160
2237
  .uk-section-xlarge {
2161
2238
  padding-top: 210px;
2162
2239
  padding-bottom: 210px;
2163
2240
  }
2241
+ .uk-section-xlarge-top {
2242
+ padding-top: 210px;
2243
+ }
2244
+ .uk-section-xlarge-bottom {
2245
+ padding-bottom: 210px;
2246
+ }
2164
2247
  }
2165
2248
  /* Style modifiers
2166
2249
  ========================================================================== */
@@ -2542,7 +2625,7 @@ select.uk-form-width-xsmall {
2542
2625
  }
2543
2626
  /* Hover modifier
2544
2627
  ========================================================================== */
2545
- .uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
2628
+ .uk-card-hover:not(.uk-card-default, .uk-card-primary, .uk-card-secondary, .uk-card-overlay):hover {
2546
2629
  background-color: #f8f8f8;
2547
2630
  }
2548
2631
  /* Style modifiers
@@ -2590,6 +2673,20 @@ select.uk-form-width-xsmall {
2590
2673
  .uk-card-secondary.uk-card-hover:hover {
2591
2674
  background-color: #151515;
2592
2675
  }
2676
+ /*
2677
+ * Overlay
2678
+ */
2679
+ .uk-card-overlay {
2680
+ --uk-inverse: dark;
2681
+ background-color: rgba(255, 255, 255, 0.8);
2682
+ color: #666;
2683
+ }
2684
+ .uk-card-overlay .uk-card-title {
2685
+ color: #333;
2686
+ }
2687
+ .uk-card-overlay.uk-card-hover:hover {
2688
+ background-color: rgba(255, 255, 255, 0.9);
2689
+ }
2593
2690
  /* Size modifier
2594
2691
  ========================================================================== */
2595
2692
  /*
@@ -4226,50 +4323,26 @@ select.uk-form-width-xsmall {
4226
4323
  /* ========================================================================
4227
4324
  Component: Countdown
4228
4325
  ========================================================================== */
4326
+ .uk-countdown {
4327
+ margin: 0;
4328
+ }
4229
4329
  /* Item
4230
4330
  ========================================================================== */
4231
4331
  /* Number
4232
4332
  ========================================================================== */
4233
4333
  /*
4234
4334
  * 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
4235
- * 2. Style
4236
4335
  */
4237
4336
  .uk-countdown-number {
4337
+ margin: 0;
4238
4338
  /* 1 */
4239
4339
  font-variant-numeric: tabular-nums;
4240
- /* 2 */
4241
- font-size: 2rem;
4242
- line-height: 0.8;
4243
- }
4244
- /* Phone landscape and bigger */
4245
- @media (min-width: 640px) {
4246
- .uk-countdown-number {
4247
- font-size: 4rem;
4248
- }
4249
- }
4250
- /* Tablet landscape and bigger */
4251
- @media (min-width: 960px) {
4252
- .uk-countdown-number {
4253
- font-size: 6rem;
4254
- }
4255
4340
  }
4256
4341
  /* Separator
4257
4342
  ========================================================================== */
4258
4343
  .uk-countdown-separator {
4259
- font-size: 1rem;
4260
- line-height: 1.6;
4261
- }
4262
- /* Phone landscape and bigger */
4263
- @media (min-width: 640px) {
4264
- .uk-countdown-separator {
4265
- font-size: 2rem;
4266
- }
4267
- }
4268
- /* Tablet landscape and bigger */
4269
- @media (min-width: 960px) {
4270
- .uk-countdown-separator {
4271
- font-size: 3rem;
4272
- }
4344
+ font-size: 0.5em;
4345
+ line-height: 2;
4273
4346
  }
4274
4347
  /* Label
4275
4348
  ========================================================================== */
@@ -5118,7 +5191,7 @@ ul.uk-nav-sub {
5118
5191
  /* Groups
5119
5192
  ========================================================================== */
5120
5193
  /*
5121
- * 1. Align navs and items vertically if they have a different height
5194
+ * 1. Stretch height if a sibling's height is expanded by its content
5122
5195
  */
5123
5196
  .uk-navbar-right,
5124
5197
  .uk-navbar-left,
@@ -5126,7 +5199,7 @@ ul.uk-nav-sub {
5126
5199
  display: flex;
5127
5200
  gap: 0px;
5128
5201
  /* 1 */
5129
- align-items: center;
5202
+ align-items: stretch;
5130
5203
  }
5131
5204
  /*
5132
5205
  * Horizontal alignment
@@ -5134,7 +5207,8 @@ ul.uk-nav-sub {
5134
5207
  * 2. Fix text wrapping if content is larger than 50% of the container.
5135
5208
  * 3. Needed for dropdowns because a new position context is created
5136
5209
  * `z-index` must be smaller than off-canvas
5137
- * 4. Align sub groups for centered navbar
5210
+ * 4. Stretch height if a sibling's height is expanded by its content
5211
+ * 5. Align sub groups for centered navbar
5138
5212
  */
5139
5213
  .uk-navbar-left {
5140
5214
  margin-right: auto;
@@ -5155,10 +5229,15 @@ ul.uk-nav-sub {
5155
5229
  box-sizing: border-box;
5156
5230
  /* 3 */
5157
5231
  z-index: 990;
5232
+ /* 4 */
5233
+ height: 100%;
5234
+ align-items: stretch;
5158
5235
  }
5159
- /* 4 */
5160
5236
  .uk-navbar-center-right,
5161
5237
  .uk-navbar-center-left {
5238
+ /* 4 */
5239
+ height: 100%;
5240
+ /* 5 */
5162
5241
  position: absolute;
5163
5242
  top: 0;
5164
5243
  }
@@ -5175,12 +5254,15 @@ ul.uk-nav-sub {
5175
5254
  /* Nav
5176
5255
  ========================================================================== */
5177
5256
  /*
5178
- * 1. Reset list
5257
+ * 1. Stretch height if a sibling's height is expanded by its content
5258
+ * 2. Reset list
5179
5259
  */
5180
5260
  .uk-navbar-nav {
5181
5261
  display: flex;
5182
5262
  gap: 0px;
5183
5263
  /* 1 */
5264
+ align-items: stretch;
5265
+ /* 2 */
5184
5266
  margin: 0;
5185
5267
  padding: 0;
5186
5268
  list-style: none;
@@ -5222,8 +5304,13 @@ ul.uk-nav-sub {
5222
5304
  }
5223
5305
  /*
5224
5306
  * Nav items
5307
+ * 1. Stretch height if a sibling's height is expanded by its content
5308
+ * 2. Reset list
5225
5309
  */
5226
5310
  .uk-navbar-nav > li > a {
5311
+ /* 1 */
5312
+ height: 100%;
5313
+ /* 2 */
5227
5314
  padding: 0 15px;
5228
5315
  color: #999;
5229
5316
  }
@@ -5573,7 +5660,7 @@ ul.uk-nav-sub {
5573
5660
  /* Disabled
5574
5661
  * The same for all style modifiers
5575
5662
  ========================================================================== */
5576
- .uk-subnav > .uk-disabled > a {
5663
+ .uk-subnav > .uk-disabled > :first-child {
5577
5664
  color: #999;
5578
5665
  }
5579
5666
  /* ========================================================================
@@ -7903,6 +7990,45 @@ iframe[data-uk-cover] {
7903
7990
  .uk-overflow-auto > :last-child {
7904
7991
  margin-bottom: 0;
7905
7992
  }
7993
+ /*
7994
+ * Overflow fade
7995
+ * 1. Overflow
7996
+ * 2. Mask
7997
+ */
7998
+ @property --uk-overflow-fade-start-opacity {
7999
+ syntax: "<number>";
8000
+ inherits: false;
8001
+ initial-value: 0;
8002
+ }
8003
+ @property --uk-overflow-fade-end-opacity {
8004
+ syntax: "<number>";
8005
+ inherits: false;
8006
+ initial-value: 0;
8007
+ }
8008
+ .uk-overflow-fade-horizontal {
8009
+ overflow-x: auto;
8010
+ --uk-overflow-fade-direction: right;
8011
+ }
8012
+ .uk-overflow-fade-vertical {
8013
+ overflow-y: auto;
8014
+ --uk-overflow-fade-direction: bottom;
8015
+ }
8016
+ .uk-overflow-fade-horizontal,
8017
+ .uk-overflow-fade-vertical {
8018
+ /* 1 */
8019
+ -webkit-overflow-scrolling: touch;
8020
+ -ms-overflow-style: -ms-autohiding-scrollbar;
8021
+ /* 2 */
8022
+ 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)));
8023
+ }
8024
+ .uk-overflow-fade-horizontal > *,
8025
+ .uk-overflow-fade-vertical > * {
8026
+ min-width: max-content;
8027
+ }
8028
+ .uk-overflow-fade-horizontal::-webkit-scrollbar,
8029
+ .uk-overflow-fade-vertical::-webkit-scrollbar {
8030
+ display: none;
8031
+ }
7906
8032
  /* Box Sizing
7907
8033
  ========================================================================== */
7908
8034
  .uk-box-sizing-content {
@@ -9225,6 +9351,9 @@ iframe[data-uk-cover] {
9225
9351
  .uk-position-z-index-high {
9226
9352
  z-index: 990;
9227
9353
  }
9354
+ .uk-position-z-index-highest {
9355
+ z-index: 1060;
9356
+ }
9228
9357
  /* ========================================================================
9229
9358
  Component: Transition
9230
9359
  ========================================================================== */
@@ -9454,7 +9583,7 @@ iframe[data-uk-cover] {
9454
9583
  width: 0 !important;
9455
9584
  height: 0 !important;
9456
9585
  padding: 0 !important;
9457
- border: 0 !important;
9586
+ border-width: 0 !important;
9458
9587
  margin: 0 !important;
9459
9588
  overflow: hidden !important;
9460
9589
  }
@@ -10410,6 +10539,65 @@ iframe[data-uk-cover] {
10410
10539
  background-color: rgba(255, 255, 255, 0.2);
10411
10540
  color: rgba(255, 255, 255, 0.7);
10412
10541
  }
10542
+ .uk-light .uk-icon-overlay,
10543
+ a .uk-icon-overlay a.uk-light .uk-icon-overlay,
10544
+ .uk-section-primary:not(.uk-preserve-color) .uk-icon-overlay,
10545
+ a .uk-icon-overlay a.uk-section-primary:not(.uk-preserve-color) .uk-icon-overlay,
10546
+ .uk-section-secondary:not(.uk-preserve-color) .uk-icon-overlay,
10547
+ a .uk-icon-overlay a.uk-section-secondary:not(.uk-preserve-color) .uk-icon-overlay,
10548
+ .uk-tile-primary:not(.uk-preserve-color) .uk-icon-overlay,
10549
+ a .uk-icon-overlay a.uk-tile-primary:not(.uk-preserve-color) .uk-icon-overlay,
10550
+ .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-overlay,
10551
+ a .uk-icon-overlay a.uk-tile-secondary:not(.uk-preserve-color) .uk-icon-overlay,
10552
+ .uk-card-primary.uk-card-body .uk-icon-overlay,
10553
+ a .uk-icon-overlay a.uk-card-primary.uk-card-body .uk-icon-overlay,
10554
+ .uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-overlay,
10555
+ a .uk-icon-overlay a.uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-overlay,
10556
+ .uk-card-secondary.uk-card-body .uk-icon-overlay,
10557
+ a .uk-icon-overlay a.uk-card-secondary.uk-card-body .uk-icon-overlay,
10558
+ .uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-overlay,
10559
+ a .uk-icon-overlay a.uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-overlay,
10560
+ .uk-overlay-primary .uk-icon-overlay,
10561
+ a .uk-icon-overlay a.uk-overlay-primary .uk-icon-overlay,
10562
+ .uk-offcanvas-bar .uk-icon-overlay,
10563
+ a .uk-icon-overlay a.uk-offcanvas-bar .uk-icon-overlay {
10564
+ color: rgba(255, 255, 255, 0.6);
10565
+ }
10566
+ .uk-light .uk-icon-overlay:hover,
10567
+ .uk-light a:hover .uk-icon-overlay,
10568
+ a.uk-light:hover .uk-icon-overlay,
10569
+ .uk-section-primary:not(.uk-preserve-color) .uk-icon-overlay:hover,
10570
+ .uk-section-primary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
10571
+ a.uk-section-primary:not(.uk-preserve-color):hover .uk-icon-overlay,
10572
+ .uk-section-secondary:not(.uk-preserve-color) .uk-icon-overlay:hover,
10573
+ .uk-section-secondary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
10574
+ a.uk-section-secondary:not(.uk-preserve-color):hover .uk-icon-overlay,
10575
+ .uk-tile-primary:not(.uk-preserve-color) .uk-icon-overlay:hover,
10576
+ .uk-tile-primary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
10577
+ a.uk-tile-primary:not(.uk-preserve-color):hover .uk-icon-overlay,
10578
+ .uk-tile-secondary:not(.uk-preserve-color) .uk-icon-overlay:hover,
10579
+ .uk-tile-secondary:not(.uk-preserve-color) a:hover .uk-icon-overlay,
10580
+ a.uk-tile-secondary:not(.uk-preserve-color):hover .uk-icon-overlay,
10581
+ .uk-card-primary.uk-card-body .uk-icon-overlay:hover,
10582
+ .uk-card-primary.uk-card-body a:hover .uk-icon-overlay,
10583
+ a.uk-card-primary.uk-card-body:hover .uk-icon-overlay,
10584
+ .uk-card-primary > :not([class*="uk-card-media"]) .uk-icon-overlay:hover,
10585
+ .uk-card-primary > :not([class*="uk-card-media"]) a:hover .uk-icon-overlay,
10586
+ a.uk-card-primary > :not([class*="uk-card-media"]):hover .uk-icon-overlay,
10587
+ .uk-card-secondary.uk-card-body .uk-icon-overlay:hover,
10588
+ .uk-card-secondary.uk-card-body a:hover .uk-icon-overlay,
10589
+ a.uk-card-secondary.uk-card-body:hover .uk-icon-overlay,
10590
+ .uk-card-secondary > :not([class*="uk-card-media"]) .uk-icon-overlay:hover,
10591
+ .uk-card-secondary > :not([class*="uk-card-media"]) a:hover .uk-icon-overlay,
10592
+ a.uk-card-secondary > :not([class*="uk-card-media"]):hover .uk-icon-overlay,
10593
+ .uk-overlay-primary .uk-icon-overlay:hover,
10594
+ .uk-overlay-primary a:hover .uk-icon-overlay,
10595
+ a.uk-overlay-primary:hover .uk-icon-overlay,
10596
+ .uk-offcanvas-bar .uk-icon-overlay:hover,
10597
+ .uk-offcanvas-bar a:hover .uk-icon-overlay,
10598
+ a.uk-offcanvas-bar:hover .uk-icon-overlay {
10599
+ color: #fff;
10600
+ }
10413
10601
  .uk-light .uk-range::-webkit-slider-runnable-track,
10414
10602
  .uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
10415
10603
  .uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
@@ -10777,7 +10965,7 @@ iframe[data-uk-cover] {
10777
10965
  .uk-card-secondary > :not([class*="uk-card-media"]) .uk-checkbox:checked,
10778
10966
  .uk-overlay-primary .uk-checkbox:checked,
10779
10967
  .uk-offcanvas-bar .uk-checkbox:checked {
10780
- 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");
10968
+ 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");
10781
10969
  }
10782
10970
  .uk-light .uk-checkbox:indeterminate,
10783
10971
  .uk-section-primary:not(.uk-preserve-color) .uk-checkbox:indeterminate,
@@ -12476,10 +12664,12 @@ iframe[data-uk-cover] {
12476
12664
  .uk-tile-muted:not(.uk-preserve-color),
12477
12665
  .uk-card-default.uk-card-body,
12478
12666
  .uk-card-default > :not([class*="uk-card-media"]),
12667
+ .uk-card-overlay.uk-card-body,
12668
+ .uk-card-overlay > :not([class*="uk-card-media"]),
12479
12669
  .uk-overlay-default,
12480
12670
  .uk-dropbar,
12481
12671
  .uk-navbar-container:not(.uk-navbar-transparent),
12482
- .uk-navbar-dropdown,
12672
+ .uk-navbar-dropdown:not(.uk-preserve-color),
12483
12673
  .uk-dropdown {
12484
12674
  --uk-inverse: dark;
12485
12675
  }