uikit 3.14.3 → 3.14.4-dev.10a07fe5a

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 (86) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/css/uikit-core-rtl.css +84 -29
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +84 -29
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +90 -44
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +90 -44
  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 +189 -26
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +189 -26
  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 +801 -617
  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 +801 -617
  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 +47 -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/offcanvas.js +1 -47
  49. package/src/js/core/switcher.js +1 -1
  50. package/src/js/mixin/modal.js +90 -4
  51. package/src/js/mixin/position.js +44 -13
  52. package/src/js/mixin/togglable.js +105 -24
  53. package/src/js/util/animation.js +1 -0
  54. package/src/js/util/viewport.js +21 -10
  55. package/src/less/components/drop.less +19 -5
  56. package/src/less/components/dropdown.less +21 -5
  57. package/src/less/components/margin.less +13 -14
  58. package/src/less/components/modal.less +19 -4
  59. package/src/less/components/nav.less +1 -1
  60. package/src/less/components/navbar.less +56 -25
  61. package/src/less/components/offcanvas.less +21 -21
  62. package/src/less/components/position.less +1 -1
  63. package/src/less/components/utility.less +0 -1
  64. package/src/less/theme/dropdown.less +11 -0
  65. package/src/less/theme/navbar.less +12 -12
  66. package/src/scss/components/drop.scss +19 -5
  67. package/src/scss/components/dropdown.scss +21 -5
  68. package/src/scss/components/margin.scss +13 -14
  69. package/src/scss/components/modal.scss +19 -4
  70. package/src/scss/components/nav.scss +1 -1
  71. package/src/scss/components/navbar.scss +45 -14
  72. package/src/scss/components/offcanvas.scss +21 -21
  73. package/src/scss/components/position.scss +1 -1
  74. package/src/scss/components/utility.scss +0 -1
  75. package/src/scss/mixins-theme.scss +8 -12
  76. package/src/scss/mixins.scss +2 -0
  77. package/src/scss/theme/dropdown.scss +8 -0
  78. package/src/scss/theme/navbar.scss +9 -0
  79. package/src/scss/variables-theme.scss +27 -11
  80. package/src/scss/variables.scss +25 -11
  81. package/tests/drop.html +151 -2
  82. package/tests/dropdown.html +228 -13
  83. package/tests/height-viewport.html +62 -0
  84. package/tests/navbar.html +325 -18
  85. package/tests/offcanvas.html +8 -8
  86. 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.10a07fe5a | 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
  right: -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
  left: -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
  left: -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
- left: 20px;
4142
+ top: 10px;
4143
+ left: 10px;
4106
4144
  }
4107
4145
  }
4108
4146
  /*
@@ -4180,7 +4218,7 @@ select.uk-form-width-xsmall {
4180
4218
  right: -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
  right: 350px;
4186
4224
  }
@@ -5067,14 +5105,12 @@ ul.uk-nav-sub {
5067
5105
  ========================================================================== */
5068
5106
  /*
5069
5107
  * 1. Align navs and items vertically if they have a different height
5070
- * 2. Note: IE 11 requires an extra `div` which affects the center selector
5071
5108
  */
5072
5109
  .uk-navbar-right,
5073
5110
  .uk-navbar-left,
5074
- .uk-navbar-center,
5075
- .uk-navbar-center-right > *,
5076
- .uk-navbar-center-left > * {
5111
+ [class*='uk-navbar-center'] {
5077
5112
  display: flex;
5113
+ gap: 30px;
5078
5114
  /* 1 */
5079
5115
  align-items: center;
5080
5116
  }
@@ -5113,10 +5149,10 @@ ul.uk-nav-sub {
5113
5149
  top: 0;
5114
5150
  }
5115
5151
  .uk-navbar-center-right {
5116
- left: 100%;
5152
+ left: calc(100% + 30px);
5117
5153
  }
5118
5154
  .uk-navbar-center-left {
5119
- right: 100%;
5155
+ right: calc(100% + 30px);
5120
5156
  }
5121
5157
  [class*='uk-navbar-center-'] {
5122
5158
  width: max-content;
@@ -5129,6 +5165,7 @@ ul.uk-nav-sub {
5129
5165
  */
5130
5166
  .uk-navbar-nav {
5131
5167
  display: flex;
5168
+ gap: 30px;
5132
5169
  /* 1 */
5133
5170
  margin: 0;
5134
5171
  padding: 0;
@@ -5163,7 +5200,7 @@ ul.uk-nav-sub {
5163
5200
  /* 3 */
5164
5201
  box-sizing: border-box;
5165
5202
  min-height: 80px;
5166
- padding: 0 15px;
5203
+ padding: 0 0;
5167
5204
  /* 4 */
5168
5205
  font-size: 0.875rem;
5169
5206
  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 +5235,7 @@ ul.uk-nav-sub {
5198
5235
  /* Item
5199
5236
  ========================================================================== */
5200
5237
  .uk-navbar-item {
5238
+ padding: 0 0;
5201
5239
  color: #666;
5202
5240
  }
5203
5241
  /*
@@ -5254,7 +5292,8 @@ ul.uk-nav-sub {
5254
5292
  position: absolute;
5255
5293
  z-index: 1020;
5256
5294
  --uk-position-offset: 15px;
5257
- --uk-position-viewport-offset: 10;
5295
+ --uk-position-shift-offset: 0;
5296
+ --uk-position-viewport-offset: 15px;
5258
5297
  /* 3 */
5259
5298
  box-sizing: border-box;
5260
5299
  width: 200px;
@@ -5303,21 +5342,39 @@ ul.uk-nav-sub {
5303
5342
  .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
5304
5343
  width: 1000px;
5305
5344
  }
5345
+ /*
5346
+ * Stretch modifier
5347
+ * 1. Allow scrolling
5348
+ */
5349
+ .uk-navbar-dropdown-stretch {
5350
+ --uk-position-offset: 0;
5351
+ --uk-position-shift-offset: 0;
5352
+ --uk-position-viewport-offset: 0;
5353
+ /* 1 */
5354
+ overflow-y: auto;
5355
+ -webkit-overflow-scrolling: touch;
5356
+ box-shadow: none;
5357
+ background: #f8f8f8;
5358
+ }
5306
5359
  /*
5307
5360
  * Dropbar modifier
5308
- * 1. Set position
5309
- * 2. Bottom padding for dropbar
5310
- * 3. Horizontal padding
5361
+ * 1. Reset dropdown width to prevent to early shifting
5362
+ * 2. Set position
5363
+ * 3. Bottom padding for dropbar
5364
+ * 4. Horizontal padding
5311
5365
  */
5312
5366
  .uk-navbar-dropdown-dropbar {
5313
5367
  /* 1 */
5368
+ width: auto;
5369
+ /* 2 */
5314
5370
  --uk-position-offset: 0px;
5315
5371
  --uk-position-viewport-offset: 0;
5316
- /* 2 */
5317
- margin-bottom: 0px;
5318
5372
  /* 3 */
5319
- padding-right: 15px;
5320
- padding-left: 15px;
5373
+ margin-bottom: 0px;
5374
+ /* 4 */
5375
+ padding-right: 0;
5376
+ padding-left: 0;
5377
+ --uk-position-shift-offset: 0;
5321
5378
  box-shadow: none;
5322
5379
  }
5323
5380
  /* Dropdown Nav
@@ -5380,19 +5437,6 @@ ul.uk-nav-sub {
5380
5437
  background: #fff;
5381
5438
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
5382
5439
  }
5383
- /*
5384
- * Navbar
5385
- */
5386
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-nav:first-child,
5387
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-item:first-child,
5388
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-toggle:first-child {
5389
- margin-right: -15px;
5390
- }
5391
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-nav:last-child,
5392
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-item:last-child,
5393
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-toggle:last-child {
5394
- margin-left: -15px;
5395
- }
5396
5440
  /*
5397
5441
  * Grid Divider
5398
5442
  */
@@ -7814,7 +7858,6 @@ iframe[data-uk-cover] {
7814
7858
  }
7815
7859
  /*
7816
7860
  * 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
7861
  */
7819
7862
  .uk-overflow-auto {
7820
7863
  overflow: auto;
@@ -8944,6 +8987,9 @@ iframe[data-uk-cover] {
8944
8987
  .uk-position-z-index {
8945
8988
  z-index: 1;
8946
8989
  }
8990
+ .uk-position-z-index-zero {
8991
+ z-index: 0;
8992
+ }
8947
8993
  .uk-position-z-index-negative {
8948
8994
  z-index: -1;
8949
8995
  }