uikit 3.14.3 → 3.14.4-dev.6a00f7fe6

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 +17 -0
  2. package/dist/css/uikit-core-rtl.css +84 -26
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +84 -26
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +90 -41
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +90 -41
  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 +101 -22
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +101 -22
  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 +135 -34
  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 +206 -77
  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 +206 -77
  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/core/switcher.js +1 -1
  49. package/src/js/mixin/position.js +44 -13
  50. package/src/js/mixin/togglable.js +105 -24
  51. package/src/js/util/animation.js +1 -0
  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 +54 -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 +43 -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.3 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.14.4-dev.6a00f7fe6 | 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
  }
@@ -5113,10 +5153,10 @@ ul.uk-nav-sub {
5113
5153
  top: 0;
5114
5154
  }
5115
5155
  .uk-navbar-center-left {
5116
- right: 100%;
5156
+ right: calc(100% + var(--uk-navbar-nav-item-gap));
5117
5157
  }
5118
5158
  .uk-navbar-center-right {
5119
- left: 100%;
5159
+ left: calc(100% + var(--uk-navbar-nav-item-gap));
5120
5160
  }
5121
5161
  [class*='uk-navbar-center-'] {
5122
5162
  width: max-content;
@@ -5129,6 +5169,7 @@ ul.uk-nav-sub {
5129
5169
  */
5130
5170
  .uk-navbar-nav {
5131
5171
  display: flex;
5172
+ gap: var(--uk-navbar-nav-item-gap);
5132
5173
  /* 1 */
5133
5174
  margin: 0;
5134
5175
  padding: 0;
@@ -5163,7 +5204,7 @@ ul.uk-nav-sub {
5163
5204
  /* 3 */
5164
5205
  box-sizing: border-box;
5165
5206
  min-height: 80px;
5166
- padding: 0 15px;
5207
+ padding: 0 0;
5167
5208
  /* 4 */
5168
5209
  font-size: 0.875rem;
5169
5210
  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 +5239,7 @@ ul.uk-nav-sub {
5198
5239
  /* Item
5199
5240
  ========================================================================== */
5200
5241
  .uk-navbar-item {
5242
+ padding: 0 0;
5201
5243
  color: #666;
5202
5244
  }
5203
5245
  /*
@@ -5254,7 +5296,8 @@ ul.uk-nav-sub {
5254
5296
  position: absolute;
5255
5297
  z-index: 1020;
5256
5298
  --uk-position-offset: 15px;
5257
- --uk-position-viewport-offset: 10;
5299
+ --uk-position-shift-offset: 0;
5300
+ --uk-position-viewport-offset: 15px;
5258
5301
  /* 3 */
5259
5302
  box-sizing: border-box;
5260
5303
  width: 200px;
@@ -5303,21 +5346,38 @@ ul.uk-nav-sub {
5303
5346
  .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
5304
5347
  width: 1000px;
5305
5348
  }
5349
+ /*
5350
+ * Stretch modifier
5351
+ * 1. Allow scrolling
5352
+ */
5353
+ .uk-navbar-dropdown-stretch {
5354
+ --uk-position-offset: 0;
5355
+ --uk-position-shift-offset: 0;
5356
+ --uk-position-viewport-offset: 0;
5357
+ /* 1 */
5358
+ overflow-y: auto;
5359
+ -webkit-overflow-scrolling: touch;
5360
+ box-shadow: none;
5361
+ background: #f8f8f8;
5362
+ }
5306
5363
  /*
5307
5364
  * Dropbar modifier
5308
- * 1. Set position
5309
- * 2. Bottom padding for dropbar
5310
- * 3. Horizontal padding
5365
+ * 1. Reset dropdown width to prevent to early shifting
5366
+ * 2. Set position
5367
+ * 3. Bottom padding for dropbar
5368
+ * 4. Horizontal padding
5311
5369
  */
5312
5370
  .uk-navbar-dropdown-dropbar {
5313
5371
  /* 1 */
5314
- --uk-position-offset: 0px;
5315
- --uk-position-viewport-offset: 0;
5372
+ width: auto;
5316
5373
  /* 2 */
5317
- margin-bottom: 0px;
5374
+ --uk-position-offset: 0px;
5318
5375
  /* 3 */
5319
- padding-left: 15px;
5320
- padding-right: 15px;
5376
+ margin-bottom: 0px;
5377
+ /* 4 */
5378
+ padding-left: 0;
5379
+ padding-right: 0;
5380
+ --uk-position-shift-offset: 0;
5321
5381
  box-shadow: none;
5322
5382
  }
5323
5383
  /* Dropdown Nav
@@ -5380,19 +5440,6 @@ ul.uk-nav-sub {
5380
5440
  background: #fff;
5381
5441
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
5382
5442
  }
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
5443
  /*
5397
5444
  * Grid Divider
5398
5445
  */
@@ -7814,7 +7861,6 @@ iframe[data-uk-cover] {
7814
7861
  }
7815
7862
  /*
7816
7863
  * 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
7864
  */
7819
7865
  .uk-overflow-auto {
7820
7866
  overflow: auto;
@@ -8944,6 +8990,9 @@ iframe[data-uk-cover] {
8944
8990
  .uk-position-z-index {
8945
8991
  z-index: 1;
8946
8992
  }
8993
+ .uk-position-z-index-zero {
8994
+ z-index: 0;
8995
+ }
8947
8996
  .uk-position-z-index-negative {
8948
8997
  z-index: -1;
8949
8998
  }