uikit 3.14.2 → 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 (84) hide show
  1. package/CHANGELOG.md +24 -3
  2. package/dist/css/uikit-core-rtl.css +84 -24
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +1 -1
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +90 -39
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +90 -39
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +1 -1
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +1 -1
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +1 -1
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +6 -6
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +209 -75
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/core/accordion.js +3 -3
  44. package/src/js/core/alert.js +1 -1
  45. package/src/js/core/drop.js +40 -20
  46. package/src/js/core/height-viewport.js +14 -9
  47. package/src/js/core/navbar.js +11 -9
  48. package/src/js/mixin/position.js +44 -13
  49. package/src/js/mixin/togglable.js +105 -19
  50. package/src/js/util/animation.js +1 -0
  51. package/src/js/util/dom.js +4 -3
  52. package/src/js/util/viewport.js +1 -1
  53. package/src/less/components/drop.less +19 -5
  54. package/src/less/components/dropdown.less +21 -5
  55. package/src/less/components/margin.less +13 -14
  56. package/src/less/components/modal.less +19 -4
  57. package/src/less/components/nav.less +1 -1
  58. package/src/less/components/navbar.less +60 -21
  59. package/src/less/components/offcanvas.less +21 -21
  60. package/src/less/components/position.less +1 -1
  61. package/src/less/components/utility.less +0 -1
  62. package/src/less/theme/dropdown.less +11 -0
  63. package/src/less/theme/navbar.less +10 -12
  64. package/src/scss/components/drop.scss +19 -5
  65. package/src/scss/components/dropdown.scss +21 -5
  66. package/src/scss/components/margin.scss +13 -14
  67. package/src/scss/components/modal.scss +19 -4
  68. package/src/scss/components/nav.scss +1 -1
  69. package/src/scss/components/navbar.scss +49 -10
  70. package/src/scss/components/offcanvas.scss +21 -21
  71. package/src/scss/components/position.scss +1 -1
  72. package/src/scss/components/utility.scss +0 -1
  73. package/src/scss/mixins-theme.scss +8 -12
  74. package/src/scss/mixins.scss +2 -0
  75. package/src/scss/theme/dropdown.scss +8 -0
  76. package/src/scss/theme/navbar.scss +7 -0
  77. package/src/scss/variables-theme.scss +26 -11
  78. package/src/scss/variables.scss +24 -11
  79. package/tests/drop.html +145 -2
  80. package/tests/dropdown.html +228 -13
  81. package/tests/height-viewport.html +62 -0
  82. package/tests/navbar.html +321 -14
  83. package/tests/offcanvas.html +8 -8
  84. package/tests/sticky-navbar.html +132 -0
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.14.2 | 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,7 +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: 10;
3495
+ --uk-position-viewport-offset: 15px;
3496
3496
  /* 3 */
3497
3497
  box-sizing: border-box;
3498
3498
  width: 300px;
@@ -3501,6 +3501,18 @@ select.uk-form-width-xsmall {
3501
3501
  .uk-drop.uk-open {
3502
3502
  display: block;
3503
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
+ }
3504
3516
  /* Grid modifiers
3505
3517
  ========================================================================== */
3506
3518
  .uk-drop-stack .uk-drop-grid > * {
@@ -3522,7 +3534,7 @@ select.uk-form-width-xsmall {
3522
3534
  position: absolute;
3523
3535
  z-index: 1020;
3524
3536
  --uk-position-offset: 10px;
3525
- --uk-position-viewport-offset: 10;
3537
+ --uk-position-viewport-offset: 15px;
3526
3538
  /* 3 */
3527
3539
  box-sizing: border-box;
3528
3540
  min-width: 200px;
@@ -3537,6 +3549,20 @@ select.uk-form-width-xsmall {
3537
3549
  .uk-dropdown.uk-open {
3538
3550
  display: block;
3539
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
+ }
3540
3566
  /* Nav
3541
3567
  * Adopts `uk-nav`
3542
3568
  ========================================================================== */
@@ -3709,20 +3735,32 @@ select.uk-form-width-xsmall {
3709
3735
  ========================================================================== */
3710
3736
  .uk-modal-body {
3711
3737
  display: flow-root;
3712
- padding: 30px 30px;
3738
+ padding: 20px 20px;
3713
3739
  }
3714
3740
  .uk-modal-header {
3715
3741
  display: flow-root;
3716
- padding: 15px 30px;
3742
+ padding: 10px 20px;
3717
3743
  background: #fff;
3718
3744
  border-bottom: 1px solid #e5e5e5;
3719
3745
  }
3720
3746
  .uk-modal-footer {
3721
3747
  display: flow-root;
3722
- padding: 15px 30px;
3748
+ padding: 10px 20px;
3723
3749
  background: #fff;
3724
3750
  border-top: 1px solid #e5e5e5;
3725
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
+ }
3726
3764
  /*
3727
3765
  * Remove margin from the last-child
3728
3766
  */
@@ -4006,12 +4044,12 @@ select.uk-form-width-xsmall {
4006
4044
  overflow-y: auto;
4007
4045
  -webkit-overflow-scrolling: touch;
4008
4046
  }
4009
- /* Tablet landscape and bigger */
4010
- @media (min-width: 960px) {
4047
+ /* Phone landscape and bigger */
4048
+ @media (min-width: 640px) {
4011
4049
  .uk-offcanvas-bar {
4012
4050
  left: -350px;
4013
4051
  width: 350px;
4014
- padding: 40px 40px;
4052
+ padding: 30px 30px;
4015
4053
  }
4016
4054
  }
4017
4055
  /* Flip modifier */
@@ -4020,7 +4058,7 @@ select.uk-form-width-xsmall {
4020
4058
  right: -270px;
4021
4059
  }
4022
4060
  /* Tablet landscape and bigger */
4023
- @media (min-width: 960px) {
4061
+ @media (min-width: 640px) {
4024
4062
  .uk-offcanvas-flip .uk-offcanvas-bar {
4025
4063
  right: -350px;
4026
4064
  }
@@ -4076,7 +4114,7 @@ select.uk-form-width-xsmall {
4076
4114
  width: 270px;
4077
4115
  }
4078
4116
  /* Tablet landscape and bigger */
4079
- @media (min-width: 960px) {
4117
+ @media (min-width: 640px) {
4080
4118
  .uk-open > .uk-offcanvas-reveal {
4081
4119
  width: 350px;
4082
4120
  }
@@ -4099,10 +4137,10 @@ select.uk-form-width-xsmall {
4099
4137
  padding: 5px;
4100
4138
  }
4101
4139
  /* Tablet landscape and bigger */
4102
- @media (min-width: 960px) {
4140
+ @media (min-width: 640px) {
4103
4141
  .uk-offcanvas-close {
4104
- top: 20px;
4105
- right: 20px;
4142
+ top: 10px;
4143
+ right: 10px;
4106
4144
  }
4107
4145
  }
4108
4146
  /*
@@ -4180,7 +4218,7 @@ select.uk-form-width-xsmall {
4180
4218
  left: -270px;
4181
4219
  }
4182
4220
  /* Tablet landscape and bigger */
4183
- @media (min-width: 960px) {
4221
+ @media (min-width: 640px) {
4184
4222
  :not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
4185
4223
  left: 350px;
4186
4224
  }
@@ -5055,6 +5093,7 @@ ul.uk-nav-sub {
5055
5093
  */
5056
5094
  .uk-navbar {
5057
5095
  display: flex;
5096
+ --uk-navbar-nav-item-gap: 30px;
5058
5097
  /* 1 */
5059
5098
  position: relative;
5060
5099
  }
@@ -5075,6 +5114,7 @@ ul.uk-nav-sub {
5075
5114
  .uk-navbar-center-left > *,
5076
5115
  .uk-navbar-center-right > * {
5077
5116
  display: flex;
5117
+ gap: var(--uk-navbar-nav-item-gap);
5078
5118
  /* 1 */
5079
5119
  align-items: center;
5080
5120
  }
@@ -5114,9 +5154,11 @@ ul.uk-nav-sub {
5114
5154
  }
5115
5155
  .uk-navbar-center-left {
5116
5156
  right: 100%;
5157
+ right: calc(100% + var(--uk-navbar-nav-item-gap));
5117
5158
  }
5118
5159
  .uk-navbar-center-right {
5119
5160
  left: 100%;
5161
+ left: calc(100% + var(--uk-navbar-nav-item-gap));
5120
5162
  }
5121
5163
  [class*='uk-navbar-center-'] {
5122
5164
  width: max-content;
@@ -5129,6 +5171,7 @@ ul.uk-nav-sub {
5129
5171
  */
5130
5172
  .uk-navbar-nav {
5131
5173
  display: flex;
5174
+ gap: var(--uk-navbar-nav-item-gap);
5132
5175
  /* 1 */
5133
5176
  margin: 0;
5134
5177
  padding: 0;
@@ -5163,7 +5206,7 @@ ul.uk-nav-sub {
5163
5206
  /* 3 */
5164
5207
  box-sizing: border-box;
5165
5208
  min-height: 80px;
5166
- padding: 0 15px;
5209
+ padding: 0 0;
5167
5210
  /* 4 */
5168
5211
  font-size: 0.875rem;
5169
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";
@@ -5198,6 +5241,7 @@ ul.uk-nav-sub {
5198
5241
  /* Item
5199
5242
  ========================================================================== */
5200
5243
  .uk-navbar-item {
5244
+ padding: 0 0;
5201
5245
  color: #666;
5202
5246
  }
5203
5247
  /*
@@ -5254,7 +5298,8 @@ ul.uk-nav-sub {
5254
5298
  position: absolute;
5255
5299
  z-index: 1020;
5256
5300
  --uk-position-offset: 15px;
5257
- --uk-position-viewport-offset: 10;
5301
+ --uk-position-shift-offset: 0;
5302
+ --uk-position-viewport-offset: 15px;
5258
5303
  /* 3 */
5259
5304
  box-sizing: border-box;
5260
5305
  width: 200px;
@@ -5303,21 +5348,38 @@ ul.uk-nav-sub {
5303
5348
  .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
5304
5349
  width: 1000px;
5305
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
+ }
5306
5365
  /*
5307
5366
  * Dropbar modifier
5308
- * 1. Set position
5309
- * 2. Bottom padding for dropbar
5310
- * 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
5311
5371
  */
5312
5372
  .uk-navbar-dropdown-dropbar {
5313
5373
  /* 1 */
5314
- --uk-position-offset: 0px;
5315
- --uk-position-viewport-offset: 0;
5374
+ width: auto;
5316
5375
  /* 2 */
5317
- margin-bottom: 0px;
5376
+ --uk-position-offset: 0px;
5318
5377
  /* 3 */
5319
- padding-left: 15px;
5320
- padding-right: 15px;
5378
+ margin-bottom: 0px;
5379
+ /* 4 */
5380
+ padding-left: 0;
5381
+ padding-right: 0;
5382
+ --uk-position-shift-offset: 0;
5321
5383
  box-shadow: none;
5322
5384
  }
5323
5385
  /* Dropdown Nav
@@ -5380,19 +5442,6 @@ ul.uk-nav-sub {
5380
5442
  background: #fff;
5381
5443
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
5382
5444
  }
5383
- /*
5384
- * Navbar
5385
- */
5386
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-nav:first-child,
5387
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-item:first-child,
5388
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-toggle:first-child {
5389
- margin-left: -15px;
5390
- }
5391
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-nav:last-child,
5392
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-item:last-child,
5393
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-toggle:last-child {
5394
- margin-right: -15px;
5395
- }
5396
5445
  /*
5397
5446
  * Grid Divider
5398
5447
  */
@@ -7814,7 +7863,6 @@ iframe[data-uk-cover] {
7814
7863
  }
7815
7864
  /*
7816
7865
  * Enable scrollbars if content is clipped
7817
- * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518
7818
7866
  */
7819
7867
  .uk-overflow-auto {
7820
7868
  overflow: auto;
@@ -8944,6 +8992,9 @@ iframe[data-uk-cover] {
8944
8992
  .uk-position-z-index {
8945
8993
  z-index: 1;
8946
8994
  }
8995
+ .uk-position-z-index-zero {
8996
+ z-index: 0;
8997
+ }
8947
8998
  .uk-position-z-index-negative {
8948
8999
  z-index: -1;
8949
9000
  }