uikit 3.14.2-dev.1d34cc58b → 3.14.2-dev.35b3deec9

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 (91) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/css/uikit-core-rtl.css +92 -25
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +92 -25
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +98 -40
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +98 -40
  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 +17 -2
  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 +238 -110
  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 +254 -111
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/components/parallax.js +16 -1
  44. package/src/js/core/accordion.js +3 -3
  45. package/src/js/core/alert.js +1 -1
  46. package/src/js/core/drop.js +40 -20
  47. package/src/js/core/height-viewport.js +14 -9
  48. package/src/js/core/navbar.js +19 -18
  49. package/src/js/core/scrollspy.js +4 -0
  50. package/src/js/core/toggle.js +5 -8
  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/position.js +15 -13
  55. package/src/js/util/viewport.js +2 -5
  56. package/src/less/components/drop.less +19 -5
  57. package/src/less/components/dropdown.less +21 -5
  58. package/src/less/components/margin.less +13 -14
  59. package/src/less/components/modal.less +19 -4
  60. package/src/less/components/nav.less +1 -1
  61. package/src/less/components/navbar.less +60 -21
  62. package/src/less/components/offcanvas.less +21 -21
  63. package/src/less/components/position.less +1 -1
  64. package/src/less/components/sticky.less +7 -0
  65. package/src/less/components/utility.less +1 -2
  66. package/src/less/theme/dropdown.less +11 -0
  67. package/src/less/theme/navbar.less +10 -12
  68. package/src/scss/components/drop.scss +19 -5
  69. package/src/scss/components/dropdown.scss +21 -5
  70. package/src/scss/components/margin.scss +13 -14
  71. package/src/scss/components/modal.scss +19 -4
  72. package/src/scss/components/nav.scss +1 -1
  73. package/src/scss/components/navbar.scss +49 -10
  74. package/src/scss/components/offcanvas.scss +21 -21
  75. package/src/scss/components/position.scss +1 -1
  76. package/src/scss/components/sticky.scss +7 -0
  77. package/src/scss/components/utility.scss +1 -2
  78. package/src/scss/mixins-theme.scss +8 -12
  79. package/src/scss/mixins.scss +2 -0
  80. package/src/scss/theme/dropdown.scss +8 -0
  81. package/src/scss/theme/navbar.scss +7 -0
  82. package/src/scss/variables-theme.scss +26 -11
  83. package/src/scss/variables.scss +24 -11
  84. package/tests/drop.html +145 -2
  85. package/tests/dropdown.html +228 -13
  86. package/tests/height-viewport.html +62 -0
  87. package/tests/navbar.html +321 -14
  88. package/tests/offcanvas.html +8 -8
  89. package/tests/sticky-navbar.html +132 -0
  90. package/tests/sticky-parallax.html +2 -1
  91. package/tests/sticky.html +5 -4
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.14.2-dev.1d34cc58b | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.14.2-dev.35b3deec9 | 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
  */
@@ -3953,6 +3991,13 @@ select.uk-form-width-xsmall {
3953
3991
  .uk-sticky.uk-animation-reverse {
3954
3992
  animation-duration: 0.2s;
3955
3993
  }
3994
+ /*
3995
+ * Placeholder
3996
+ * Make content clickable for sticky cover and reveal effects
3997
+ */
3998
+ .uk-sticky-placeholder {
3999
+ pointer-events: none;
4000
+ }
3956
4001
  /* ========================================================================
3957
4002
  Component: Off-canvas
3958
4003
  ========================================================================== */
@@ -3999,12 +4044,12 @@ select.uk-form-width-xsmall {
3999
4044
  overflow-y: auto;
4000
4045
  -webkit-overflow-scrolling: touch;
4001
4046
  }
4002
- /* Tablet landscape and bigger */
4003
- @media (min-width: 960px) {
4047
+ /* Phone landscape and bigger */
4048
+ @media (min-width: 640px) {
4004
4049
  .uk-offcanvas-bar {
4005
4050
  right: -350px;
4006
4051
  width: 350px;
4007
- padding: 40px 40px;
4052
+ padding: 30px 30px;
4008
4053
  }
4009
4054
  }
4010
4055
  /* Flip modifier */
@@ -4013,7 +4058,7 @@ select.uk-form-width-xsmall {
4013
4058
  left: -270px;
4014
4059
  }
4015
4060
  /* Tablet landscape and bigger */
4016
- @media (min-width: 960px) {
4061
+ @media (min-width: 640px) {
4017
4062
  .uk-offcanvas-flip .uk-offcanvas-bar {
4018
4063
  left: -350px;
4019
4064
  }
@@ -4069,7 +4114,7 @@ select.uk-form-width-xsmall {
4069
4114
  width: 270px;
4070
4115
  }
4071
4116
  /* Tablet landscape and bigger */
4072
- @media (min-width: 960px) {
4117
+ @media (min-width: 640px) {
4073
4118
  .uk-open > .uk-offcanvas-reveal {
4074
4119
  width: 350px;
4075
4120
  }
@@ -4092,10 +4137,10 @@ select.uk-form-width-xsmall {
4092
4137
  padding: 5px;
4093
4138
  }
4094
4139
  /* Tablet landscape and bigger */
4095
- @media (min-width: 960px) {
4140
+ @media (min-width: 640px) {
4096
4141
  .uk-offcanvas-close {
4097
- top: 20px;
4098
- left: 20px;
4142
+ top: 10px;
4143
+ left: 10px;
4099
4144
  }
4100
4145
  }
4101
4146
  /*
@@ -4173,7 +4218,7 @@ select.uk-form-width-xsmall {
4173
4218
  right: -270px;
4174
4219
  }
4175
4220
  /* Tablet landscape and bigger */
4176
- @media (min-width: 960px) {
4221
+ @media (min-width: 640px) {
4177
4222
  :not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
4178
4223
  right: 350px;
4179
4224
  }
@@ -5048,6 +5093,7 @@ ul.uk-nav-sub {
5048
5093
  */
5049
5094
  .uk-navbar {
5050
5095
  display: flex;
5096
+ --uk-navbar-nav-item-gap: 30px;
5051
5097
  /* 1 */
5052
5098
  position: relative;
5053
5099
  }
@@ -5068,6 +5114,7 @@ ul.uk-nav-sub {
5068
5114
  .uk-navbar-center-right > *,
5069
5115
  .uk-navbar-center-left > * {
5070
5116
  display: flex;
5117
+ gap: var(--uk-navbar-nav-item-gap);
5071
5118
  /* 1 */
5072
5119
  align-items: center;
5073
5120
  }
@@ -5107,9 +5154,11 @@ ul.uk-nav-sub {
5107
5154
  }
5108
5155
  .uk-navbar-center-right {
5109
5156
  left: 100%;
5157
+ left: calc(100% + var(--uk-navbar-nav-item-gap));
5110
5158
  }
5111
5159
  .uk-navbar-center-left {
5112
5160
  right: 100%;
5161
+ right: calc(100% + var(--uk-navbar-nav-item-gap));
5113
5162
  }
5114
5163
  [class*='uk-navbar-center-'] {
5115
5164
  width: max-content;
@@ -5122,6 +5171,7 @@ ul.uk-nav-sub {
5122
5171
  */
5123
5172
  .uk-navbar-nav {
5124
5173
  display: flex;
5174
+ gap: var(--uk-navbar-nav-item-gap);
5125
5175
  /* 1 */
5126
5176
  margin: 0;
5127
5177
  padding: 0;
@@ -5156,7 +5206,7 @@ ul.uk-nav-sub {
5156
5206
  /* 3 */
5157
5207
  box-sizing: border-box;
5158
5208
  min-height: 80px;
5159
- padding: 0 15px;
5209
+ padding: 0 0;
5160
5210
  /* 4 */
5161
5211
  font-size: 0.875rem;
5162
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";
@@ -5191,6 +5241,7 @@ ul.uk-nav-sub {
5191
5241
  /* Item
5192
5242
  ========================================================================== */
5193
5243
  .uk-navbar-item {
5244
+ padding: 0 0;
5194
5245
  color: #666;
5195
5246
  }
5196
5247
  /*
@@ -5247,7 +5298,8 @@ ul.uk-nav-sub {
5247
5298
  position: absolute;
5248
5299
  z-index: 1020;
5249
5300
  --uk-position-offset: 15px;
5250
- --uk-position-viewport-offset: 10;
5301
+ --uk-position-shift-offset: 0;
5302
+ --uk-position-viewport-offset: 15px;
5251
5303
  /* 3 */
5252
5304
  box-sizing: border-box;
5253
5305
  width: 200px;
@@ -5296,21 +5348,38 @@ ul.uk-nav-sub {
5296
5348
  .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
5297
5349
  width: 1000px;
5298
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
+ }
5299
5365
  /*
5300
5366
  * Dropbar modifier
5301
- * 1. Set position
5302
- * 2. Bottom padding for dropbar
5303
- * 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
5304
5371
  */
5305
5372
  .uk-navbar-dropdown-dropbar {
5306
5373
  /* 1 */
5307
- --uk-position-offset: 0px;
5308
- --uk-position-viewport-offset: 0;
5374
+ width: auto;
5309
5375
  /* 2 */
5310
- margin-bottom: 0px;
5376
+ --uk-position-offset: 0px;
5311
5377
  /* 3 */
5312
- padding-right: 15px;
5313
- padding-left: 15px;
5378
+ margin-bottom: 0px;
5379
+ /* 4 */
5380
+ padding-right: 0;
5381
+ padding-left: 0;
5382
+ --uk-position-shift-offset: 0;
5314
5383
  box-shadow: none;
5315
5384
  }
5316
5385
  /* Dropdown Nav
@@ -5373,19 +5442,6 @@ ul.uk-nav-sub {
5373
5442
  background: #fff;
5374
5443
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
5375
5444
  }
5376
- /*
5377
- * Navbar
5378
- */
5379
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-nav:first-child,
5380
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-item:first-child,
5381
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-right .uk-navbar-toggle:first-child {
5382
- margin-right: -15px;
5383
- }
5384
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-nav:last-child,
5385
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-item:last-child,
5386
- .uk-container > :not(.uk-navbar-justified) > .uk-navbar-left .uk-navbar-toggle:last-child {
5387
- margin-left: -15px;
5388
- }
5389
5445
  /*
5390
5446
  * Grid Divider
5391
5447
  */
@@ -7807,7 +7863,6 @@ iframe[data-uk-cover] {
7807
7863
  }
7808
7864
  /*
7809
7865
  * Enable scrollbars if content is clipped
7810
- * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://bugzilla.mozilla.org/show_bug.cgi?id=748518
7811
7866
  */
7812
7867
  .uk-overflow-auto {
7813
7868
  overflow: auto;
@@ -8087,7 +8142,7 @@ iframe[data-uk-cover] {
8087
8142
  text-decoration: none;
8088
8143
  }
8089
8144
  .uk-logo > :where(img, svg, video) {
8090
- display: block;
8145
+ display: inline-block;
8091
8146
  }
8092
8147
  .uk-logo-inverse {
8093
8148
  display: none;
@@ -8937,6 +8992,9 @@ iframe[data-uk-cover] {
8937
8992
  .uk-position-z-index {
8938
8993
  z-index: 1;
8939
8994
  }
8995
+ .uk-position-z-index-zero {
8996
+ z-index: 0;
8997
+ }
8940
8998
  .uk-position-z-index-negative {
8941
8999
  z-index: -1;
8942
9000
  }