uikit 3.14.2-dev.e270e98f7 → 3.14.3-dev.5325d42a0

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 (96) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/build/util.js +8 -2
  3. package/dist/css/uikit-core-rtl.css +93 -21
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +93 -21
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +99 -33
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +99 -33
  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 +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +106 -17
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +106 -17
  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 +71 -36
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +55 -35
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +55 -35
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +142 -36
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +276 -129
  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 +346 -164
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +11 -11
  44. package/src/js/components/parallax.js +16 -1
  45. package/src/js/core/accordion.js +3 -3
  46. package/src/js/core/alert.js +1 -1
  47. package/src/js/core/drop.js +47 -18
  48. package/src/js/core/height-viewport.js +15 -11
  49. package/src/js/core/navbar.js +19 -18
  50. package/src/js/core/scrollspy.js +4 -0
  51. package/src/js/core/toggle.js +9 -8
  52. package/src/js/mixin/parallax.js +54 -34
  53. package/src/js/mixin/position.js +36 -20
  54. package/src/js/mixin/togglable.js +110 -19
  55. package/src/js/util/animation.js +1 -0
  56. package/src/js/util/dom.js +4 -3
  57. package/src/js/util/position.js +24 -22
  58. package/src/js/util/viewport.js +7 -8
  59. package/src/less/components/drop.less +19 -4
  60. package/src/less/components/dropdown.less +21 -4
  61. package/src/less/components/margin.less +13 -14
  62. package/src/less/components/modal.less +19 -4
  63. package/src/less/components/nav.less +1 -1
  64. package/src/less/components/navbar.less +60 -19
  65. package/src/less/components/offcanvas.less +21 -21
  66. package/src/less/components/position.less +1 -1
  67. package/src/less/components/sticky.less +7 -0
  68. package/src/less/components/tooltip.less +1 -0
  69. package/src/less/components/utility.less +1 -2
  70. package/src/less/theme/dropdown.less +11 -0
  71. package/src/less/theme/navbar.less +10 -10
  72. package/src/scss/components/drop.scss +19 -4
  73. package/src/scss/components/dropdown.scss +21 -4
  74. package/src/scss/components/margin.scss +13 -14
  75. package/src/scss/components/modal.scss +19 -4
  76. package/src/scss/components/nav.scss +1 -1
  77. package/src/scss/components/navbar.scss +49 -8
  78. package/src/scss/components/offcanvas.scss +21 -21
  79. package/src/scss/components/position.scss +1 -1
  80. package/src/scss/components/sticky.scss +7 -0
  81. package/src/scss/components/tooltip.scss +1 -0
  82. package/src/scss/components/utility.scss +1 -2
  83. package/src/scss/mixins-theme.scss +8 -10
  84. package/src/scss/mixins.scss +2 -0
  85. package/src/scss/theme/dropdown.scss +8 -0
  86. package/src/scss/theme/navbar.scss +7 -0
  87. package/src/scss/variables-theme.scss +26 -11
  88. package/src/scss/variables.scss +24 -11
  89. package/tests/drop.html +165 -4
  90. package/tests/dropdown.html +234 -13
  91. package/tests/height-viewport.html +62 -0
  92. package/tests/navbar.html +333 -64
  93. package/tests/offcanvas.html +8 -8
  94. package/tests/sticky-navbar.html +132 -0
  95. package/tests/sticky-parallax.html +2 -1
  96. package/tests/sticky.html +5 -4
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.14.2-dev.e270e98f7 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.14.3-dev.5325d42a0 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
2
2
  /* ========================================================================
3
3
  Component: Base
4
4
  ========================================================================== */
@@ -3492,6 +3492,7 @@ select.uk-form-width-xsmall {
3492
3492
  position: absolute;
3493
3493
  z-index: 1020;
3494
3494
  --uk-position-offset: 20px;
3495
+ --uk-position-viewport-offset: 15px;
3495
3496
  /* 3 */
3496
3497
  box-sizing: border-box;
3497
3498
  width: 300px;
@@ -3500,6 +3501,18 @@ select.uk-form-width-xsmall {
3500
3501
  .uk-drop.uk-open {
3501
3502
  display: block;
3502
3503
  }
3504
+ /* Stretch modifier
3505
+ ========================================================================== */
3506
+ /*
3507
+ * 1. Allow scrolling
3508
+ */
3509
+ .uk-drop-stretch {
3510
+ --uk-position-offset: 0;
3511
+ --uk-position-viewport-offset: 0;
3512
+ /* 1 */
3513
+ overflow-y: auto;
3514
+ -webkit-overflow-scrolling: touch;
3515
+ }
3503
3516
  /* Grid modifiers
3504
3517
  ========================================================================== */
3505
3518
  .uk-drop-stack .uk-drop-grid > * {
@@ -3521,6 +3534,7 @@ select.uk-form-width-xsmall {
3521
3534
  position: absolute;
3522
3535
  z-index: 1020;
3523
3536
  --uk-position-offset: 10px;
3537
+ --uk-position-viewport-offset: 15px;
3524
3538
  /* 3 */
3525
3539
  box-sizing: border-box;
3526
3540
  min-width: 200px;
@@ -3535,6 +3549,20 @@ select.uk-form-width-xsmall {
3535
3549
  .uk-dropdown.uk-open {
3536
3550
  display: block;
3537
3551
  }
3552
+ /* Stretch modifier
3553
+ ========================================================================== */
3554
+ /*
3555
+ * 1. Allow scrolling
3556
+ */
3557
+ .uk-dropdown-stretch {
3558
+ --uk-position-offset: 0;
3559
+ --uk-position-viewport-offset: 0;
3560
+ /* 1 */
3561
+ overflow-y: auto;
3562
+ -webkit-overflow-scrolling: touch;
3563
+ box-shadow: none;
3564
+ background: #f8f8f8;
3565
+ }
3538
3566
  /* Nav
3539
3567
  * Adopts `uk-nav`
3540
3568
  ========================================================================== */
@@ -3707,20 +3735,32 @@ select.uk-form-width-xsmall {
3707
3735
  ========================================================================== */
3708
3736
  .uk-modal-body {
3709
3737
  display: flow-root;
3710
- padding: 30px 30px;
3738
+ padding: 20px 20px;
3711
3739
  }
3712
3740
  .uk-modal-header {
3713
3741
  display: flow-root;
3714
- padding: 15px 30px;
3742
+ padding: 10px 20px;
3715
3743
  background: #fff;
3716
3744
  border-bottom: 1px solid #e5e5e5;
3717
3745
  }
3718
3746
  .uk-modal-footer {
3719
3747
  display: flow-root;
3720
- padding: 15px 30px;
3748
+ padding: 10px 20px;
3721
3749
  background: #fff;
3722
3750
  border-top: 1px solid #e5e5e5;
3723
3751
  }
3752
+ /* Phone landscape and bigger */
3753
+ @media (min-width: 640px) {
3754
+ .uk-modal-body {
3755
+ padding: 30px 30px;
3756
+ }
3757
+ .uk-modal-header {
3758
+ padding: 15px 30px;
3759
+ }
3760
+ .uk-modal-footer {
3761
+ padding: 15px 30px;
3762
+ }
3763
+ }
3724
3764
  /*
3725
3765
  * Remove margin from the last-child
3726
3766
  */
@@ -3951,6 +3991,13 @@ select.uk-form-width-xsmall {
3951
3991
  .uk-sticky.uk-animation-reverse {
3952
3992
  animation-duration: 0.2s;
3953
3993
  }
3994
+ /*
3995
+ * Placeholder
3996
+ * Make content clickable for sticky cover and reveal effects
3997
+ */
3998
+ .uk-sticky-placeholder {
3999
+ pointer-events: none;
4000
+ }
3954
4001
  /* ========================================================================
3955
4002
  Component: Off-canvas
3956
4003
  ========================================================================== */
@@ -3997,12 +4044,12 @@ select.uk-form-width-xsmall {
3997
4044
  overflow-y: auto;
3998
4045
  -webkit-overflow-scrolling: touch;
3999
4046
  }
4000
- /* Tablet landscape and bigger */
4001
- @media (min-width: 960px) {
4047
+ /* Phone landscape and bigger */
4048
+ @media (min-width: 640px) {
4002
4049
  .uk-offcanvas-bar {
4003
4050
  left: -350px;
4004
4051
  width: 350px;
4005
- padding: 40px 40px;
4052
+ padding: 30px 30px;
4006
4053
  }
4007
4054
  }
4008
4055
  /* Flip modifier */
@@ -4011,7 +4058,7 @@ select.uk-form-width-xsmall {
4011
4058
  right: -270px;
4012
4059
  }
4013
4060
  /* Tablet landscape and bigger */
4014
- @media (min-width: 960px) {
4061
+ @media (min-width: 640px) {
4015
4062
  .uk-offcanvas-flip .uk-offcanvas-bar {
4016
4063
  right: -350px;
4017
4064
  }
@@ -4067,7 +4114,7 @@ select.uk-form-width-xsmall {
4067
4114
  width: 270px;
4068
4115
  }
4069
4116
  /* Tablet landscape and bigger */
4070
- @media (min-width: 960px) {
4117
+ @media (min-width: 640px) {
4071
4118
  .uk-open > .uk-offcanvas-reveal {
4072
4119
  width: 350px;
4073
4120
  }
@@ -4090,10 +4137,10 @@ select.uk-form-width-xsmall {
4090
4137
  padding: 5px;
4091
4138
  }
4092
4139
  /* Tablet landscape and bigger */
4093
- @media (min-width: 960px) {
4140
+ @media (min-width: 640px) {
4094
4141
  .uk-offcanvas-close {
4095
- top: 20px;
4096
- right: 20px;
4142
+ top: 10px;
4143
+ right: 10px;
4097
4144
  }
4098
4145
  }
4099
4146
  /*
@@ -4171,7 +4218,7 @@ select.uk-form-width-xsmall {
4171
4218
  left: -270px;
4172
4219
  }
4173
4220
  /* Tablet landscape and bigger */
4174
- @media (min-width: 960px) {
4221
+ @media (min-width: 640px) {
4175
4222
  :not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
4176
4223
  left: 350px;
4177
4224
  }
@@ -4354,6 +4401,7 @@ select.uk-form-width-xsmall {
4354
4401
  position: absolute;
4355
4402
  z-index: 1030;
4356
4403
  --uk-position-offset: 10px;
4404
+ --uk-position-viewport-offset: 10;
4357
4405
  /* 3 */
4358
4406
  top: 0;
4359
4407
  /* 4 */
@@ -5045,6 +5093,7 @@ ul.uk-nav-sub {
5045
5093
  */
5046
5094
  .uk-navbar {
5047
5095
  display: flex;
5096
+ --uk-navbar-nav-item-gap: 30px;
5048
5097
  /* 1 */
5049
5098
  position: relative;
5050
5099
  }
@@ -5065,6 +5114,7 @@ ul.uk-nav-sub {
5065
5114
  .uk-navbar-center-left > *,
5066
5115
  .uk-navbar-center-right > * {
5067
5116
  display: flex;
5117
+ gap: var(--uk-navbar-nav-item-gap);
5068
5118
  /* 1 */
5069
5119
  align-items: center;
5070
5120
  }
@@ -5104,9 +5154,11 @@ ul.uk-nav-sub {
5104
5154
  }
5105
5155
  .uk-navbar-center-left {
5106
5156
  right: 100%;
5157
+ right: calc(100% + var(--uk-navbar-nav-item-gap));
5107
5158
  }
5108
5159
  .uk-navbar-center-right {
5109
5160
  left: 100%;
5161
+ left: calc(100% + var(--uk-navbar-nav-item-gap));
5110
5162
  }
5111
5163
  [class*='uk-navbar-center-'] {
5112
5164
  width: max-content;
@@ -5119,6 +5171,7 @@ ul.uk-nav-sub {
5119
5171
  */
5120
5172
  .uk-navbar-nav {
5121
5173
  display: flex;
5174
+ gap: var(--uk-navbar-nav-item-gap);
5122
5175
  /* 1 */
5123
5176
  margin: 0;
5124
5177
  padding: 0;
@@ -5153,7 +5206,7 @@ ul.uk-nav-sub {
5153
5206
  /* 3 */
5154
5207
  box-sizing: border-box;
5155
5208
  min-height: 80px;
5156
- padding: 0 15px;
5209
+ padding: 0 0;
5157
5210
  /* 4 */
5158
5211
  font-size: 0.875rem;
5159
5212
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -5188,6 +5241,7 @@ ul.uk-nav-sub {
5188
5241
  /* Item
5189
5242
  ========================================================================== */
5190
5243
  .uk-navbar-item {
5244
+ padding: 0 0;
5191
5245
  color: #666;
5192
5246
  }
5193
5247
  /*
@@ -5244,6 +5298,8 @@ ul.uk-nav-sub {
5244
5298
  position: absolute;
5245
5299
  z-index: 1020;
5246
5300
  --uk-position-offset: 15px;
5301
+ --uk-position-shift-offset: 0;
5302
+ --uk-position-viewport-offset: 15px;
5247
5303
  /* 3 */
5248
5304
  box-sizing: border-box;
5249
5305
  width: 200px;
@@ -5292,20 +5348,38 @@ ul.uk-nav-sub {
5292
5348
  .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
5293
5349
  width: 1000px;
5294
5350
  }
5351
+ /*
5352
+ * Stretch modifier
5353
+ * 1. Allow scrolling
5354
+ */
5355
+ .uk-navbar-dropdown-stretch {
5356
+ --uk-position-offset: 0;
5357
+ --uk-position-shift-offset: 0;
5358
+ --uk-position-viewport-offset: 0;
5359
+ /* 1 */
5360
+ overflow-y: auto;
5361
+ -webkit-overflow-scrolling: touch;
5362
+ box-shadow: none;
5363
+ background: #f8f8f8;
5364
+ }
5295
5365
  /*
5296
5366
  * Dropbar modifier
5297
- * 1. Set position
5298
- * 2. Bottom padding for dropbar
5299
- * 3. Horizontal padding
5367
+ * 1. Reset dropdown width to prevent to early shifting
5368
+ * 2. Set position
5369
+ * 3. Bottom padding for dropbar
5370
+ * 4. Horizontal padding
5300
5371
  */
5301
5372
  .uk-navbar-dropdown-dropbar {
5302
5373
  /* 1 */
5303
- --uk-position-offset: 0px;
5374
+ width: auto;
5304
5375
  /* 2 */
5305
- margin-bottom: 0px;
5376
+ --uk-position-offset: 0px;
5306
5377
  /* 3 */
5307
- padding-left: 15px;
5308
- padding-right: 15px;
5378
+ margin-bottom: 0px;
5379
+ /* 4 */
5380
+ padding-left: 0;
5381
+ padding-right: 0;
5382
+ --uk-position-shift-offset: 0;
5309
5383
  box-shadow: none;
5310
5384
  }
5311
5385
  /* Dropdown Nav
@@ -5368,16 +5442,6 @@ ul.uk-nav-sub {
5368
5442
  background: #fff;
5369
5443
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
5370
5444
  }
5371
- /*
5372
- * Navbar
5373
- */
5374
- .uk-navbar-container > .uk-container .uk-navbar-left {
5375
- margin-left: -15px;
5376
- margin-right: -15px;
5377
- }
5378
- .uk-navbar-container > .uk-container .uk-navbar-right {
5379
- margin-right: -15px;
5380
- }
5381
5445
  /*
5382
5446
  * Grid Divider
5383
5447
  */
@@ -7799,7 +7863,6 @@ iframe[data-uk-cover] {
7799
7863
  }
7800
7864
  /*
7801
7865
  * Enable scrollbars if content is clipped
7802
- * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518
7803
7866
  */
7804
7867
  .uk-overflow-auto {
7805
7868
  overflow: auto;
@@ -8079,7 +8142,7 @@ iframe[data-uk-cover] {
8079
8142
  text-decoration: none;
8080
8143
  }
8081
8144
  .uk-logo > :where(img, svg, video) {
8082
- display: block;
8145
+ display: inline-block;
8083
8146
  }
8084
8147
  .uk-logo-inverse {
8085
8148
  display: none;
@@ -8929,6 +8992,9 @@ iframe[data-uk-cover] {
8929
8992
  .uk-position-z-index {
8930
8993
  z-index: 1;
8931
8994
  }
8995
+ .uk-position-z-index-zero {
8996
+ z-index: 0;
8997
+ }
8932
8998
  .uk-position-z-index-negative {
8933
8999
  z-index: -1;
8934
9000
  }