uikit 3.14.4-dev.871ba3c05 → 3.14.4-dev.a02c81d72

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 (77) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/css/uikit-core-rtl.css +73 -28
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +73 -28
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +70 -29
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +70 -29
  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 +7 -5
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +110 -11
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +110 -11
  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 +22 -7
  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 +22 -7
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +3 -3
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +18 -3
  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 +717 -637
  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 +1511 -1414
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/images/backgrounds/nav-parent-close.svg +1 -1
  44. package/src/images/backgrounds/nav-parent-open.svg +1 -1
  45. package/src/images/backgrounds/navbar-parent-close.svg +3 -0
  46. package/src/images/backgrounds/navbar-parent-open.svg +3 -0
  47. package/src/js/components/filter.js +5 -3
  48. package/src/js/components/sortable.js +2 -3
  49. package/src/js/core/drop.js +7 -0
  50. package/src/js/core/height-viewport.js +11 -5
  51. package/src/js/core/navbar.js +44 -15
  52. package/src/js/core/offcanvas.js +1 -47
  53. package/src/js/core/sticky.js +8 -9
  54. package/src/js/mixin/modal.js +90 -4
  55. package/src/js/mixin/position.js +24 -7
  56. package/src/js/mixin/slider-drag.js +20 -8
  57. package/src/js/util/dimensions.js +6 -6
  58. package/src/js/util/position.js +1 -0
  59. package/src/js/util/viewport.js +2 -27
  60. package/src/less/components/dropdown.less +8 -0
  61. package/src/less/components/nav.less +22 -4
  62. package/src/less/components/navbar.less +60 -24
  63. package/src/less/components/utility.less +12 -3
  64. package/src/less/theme/nav.less +3 -7
  65. package/src/less/theme/navbar.less +7 -7
  66. package/src/scss/components/dropdown.scss +8 -0
  67. package/src/scss/components/nav.scss +24 -6
  68. package/src/scss/components/navbar.scss +60 -24
  69. package/src/scss/components/utility.scss +12 -3
  70. package/src/scss/mixins-theme.scss +2 -5
  71. package/src/scss/theme/nav.scss +3 -7
  72. package/src/scss/theme/navbar.scss +6 -3
  73. package/src/scss/variables-theme.scss +26 -10
  74. package/src/scss/variables.scss +26 -8
  75. package/tests/drop.html +72 -16
  76. package/tests/dropdown.html +103 -16
  77. package/tests/navbar.html +2132 -1126
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.14.4-dev.871ba3c05 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.14.4-dev.a02c81d72 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
2
2
  /* ========================================================================
3
3
  Component: Base
4
4
  ========================================================================== */
@@ -3549,6 +3549,11 @@ select.uk-form-width-xsmall {
3549
3549
  .uk-dropdown.uk-open {
3550
3550
  display: block;
3551
3551
  }
3552
+ /* Size modifier
3553
+ ========================================================================== */
3554
+ .uk-dropdown-large {
3555
+ padding: 40px;
3556
+ }
3552
3557
  /* Stretch modifier
3553
3558
  ========================================================================== */
3554
3559
  /*
@@ -4936,12 +4941,12 @@ ul.uk-nav-sub {
4936
4941
  width: 1.5em;
4937
4942
  height: 1.5em;
4938
4943
  margin-left: auto;
4939
- background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E");
4944
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E");
4940
4945
  background-repeat: no-repeat;
4941
4946
  background-position: 50% 50%;
4942
4947
  }
4943
4948
  .uk-nav-parent-icon > .uk-parent.uk-open > a::after {
4944
- background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E");
4949
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%2213%2010%207%204%201%2010%22%20%2F%3E%0A%3C%2Fsvg%3E");
4945
4950
  }
4946
4951
  /* Header
4947
4952
  ========================================================================== */
@@ -4962,6 +4967,7 @@ ul.uk-nav-sub {
4962
4967
  ========================================================================== */
4963
4968
  .uk-nav-default {
4964
4969
  font-size: 0.875rem;
4970
+ line-height: 1.5;
4965
4971
  }
4966
4972
  /*
4967
4973
  * Items
@@ -4998,6 +5004,10 @@ ul.uk-nav-sub {
4998
5004
  /*
4999
5005
  * Sublists
5000
5006
  */
5007
+ .uk-nav-default .uk-nav-sub {
5008
+ font-size: 0.875rem;
5009
+ line-height: 1.5;
5010
+ }
5001
5011
  .uk-nav-default .uk-nav-sub a {
5002
5012
  color: #999;
5003
5013
  }
@@ -5009,12 +5019,14 @@ ul.uk-nav-sub {
5009
5019
  }
5010
5020
  /* Primary modifier
5011
5021
  ========================================================================== */
5022
+ .uk-nav-primary {
5023
+ font-size: 1.5rem;
5024
+ line-height: 1.5;
5025
+ }
5012
5026
  /*
5013
5027
  * Items
5014
5028
  */
5015
5029
  .uk-nav-primary > li > a {
5016
- font-size: 1.5rem;
5017
- line-height: 1.5;
5018
5030
  color: #999;
5019
5031
  }
5020
5032
  /* Hover */
@@ -5046,6 +5058,10 @@ ul.uk-nav-sub {
5046
5058
  /*
5047
5059
  * Sublists
5048
5060
  */
5061
+ .uk-nav-primary .uk-nav-sub {
5062
+ font-size: 1.25rem;
5063
+ line-height: 1.5;
5064
+ }
5049
5065
  .uk-nav-primary .uk-nav-sub a {
5050
5066
  color: #999;
5051
5067
  }
@@ -5093,7 +5109,6 @@ ul.uk-nav-sub {
5093
5109
  */
5094
5110
  .uk-navbar {
5095
5111
  display: flex;
5096
- --uk-navbar-nav-item-gap: 30px;
5097
5112
  /* 1 */
5098
5113
  position: relative;
5099
5114
  }
@@ -5106,15 +5121,12 @@ ul.uk-nav-sub {
5106
5121
  ========================================================================== */
5107
5122
  /*
5108
5123
  * 1. Align navs and items vertically if they have a different height
5109
- * 2. Note: IE 11 requires an extra `div` which affects the center selector
5110
5124
  */
5111
5125
  .uk-navbar-left,
5112
5126
  .uk-navbar-right,
5113
- .uk-navbar-center,
5114
- .uk-navbar-center-left > *,
5115
- .uk-navbar-center-right > * {
5127
+ [class*='uk-navbar-center'] {
5116
5128
  display: flex;
5117
- gap: var(--uk-navbar-nav-item-gap);
5129
+ gap: 30px;
5118
5130
  /* 1 */
5119
5131
  align-items: center;
5120
5132
  }
@@ -5153,10 +5165,10 @@ ul.uk-nav-sub {
5153
5165
  top: 0;
5154
5166
  }
5155
5167
  .uk-navbar-center-left {
5156
- right: calc(100% + var(--uk-navbar-nav-item-gap));
5168
+ right: calc(100% + 30px);
5157
5169
  }
5158
5170
  .uk-navbar-center-right {
5159
- left: calc(100% + var(--uk-navbar-nav-item-gap));
5171
+ left: calc(100% + 30px);
5160
5172
  }
5161
5173
  [class*='uk-navbar-center-'] {
5162
5174
  width: max-content;
@@ -5169,7 +5181,7 @@ ul.uk-nav-sub {
5169
5181
  */
5170
5182
  .uk-navbar-nav {
5171
5183
  display: flex;
5172
- gap: var(--uk-navbar-nav-item-gap);
5184
+ gap: 30px;
5173
5185
  /* 1 */
5174
5186
  margin: 0;
5175
5187
  padding: 0;
@@ -5204,7 +5216,6 @@ ul.uk-nav-sub {
5204
5216
  /* 3 */
5205
5217
  box-sizing: border-box;
5206
5218
  min-height: 80px;
5207
- padding: 0 0;
5208
5219
  /* 4 */
5209
5220
  font-size: 0.875rem;
5210
5221
  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";
@@ -5215,6 +5226,7 @@ ul.uk-nav-sub {
5215
5226
  * Nav items
5216
5227
  */
5217
5228
  .uk-navbar-nav > li > a {
5229
+ padding: 0 0;
5218
5230
  color: #999;
5219
5231
  text-transform: uppercase;
5220
5232
  transition: 0.1s ease-in-out;
@@ -5236,6 +5248,21 @@ ul.uk-nav-sub {
5236
5248
  .uk-navbar-nav > li.uk-active > a {
5237
5249
  color: #333;
5238
5250
  }
5251
+ /* Parent icon modifier
5252
+ ========================================================================== */
5253
+ .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
5254
+ content: "";
5255
+ width: 12px;
5256
+ height: 12px;
5257
+ margin-left: auto;
5258
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23999%22%20stroke-width%3D%221.1%22%20points%3D%221%203.5%206%208.5%2011%203.5%22%2F%3E%0A%3C%2Fsvg%3E");
5259
+ background-repeat: no-repeat;
5260
+ background-position: 50% 50%;
5261
+ }
5262
+ .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
5263
+ .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after {
5264
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23999%22%20stroke-width%3D%221.1%22%20points%3D%2211%208.5%206%203.5%201%208.5%22%20%2F%3E%0A%3C%2Fsvg%3E");
5265
+ }
5239
5266
  /* Item
5240
5267
  ========================================================================== */
5241
5268
  .uk-navbar-item {
@@ -5251,6 +5278,7 @@ ul.uk-nav-sub {
5251
5278
  /* Toggle
5252
5279
  ========================================================================== */
5253
5280
  .uk-navbar-toggle {
5281
+ padding: 0 0;
5254
5282
  color: #999;
5255
5283
  }
5256
5284
  .uk-navbar-toggle:hover,
@@ -5346,9 +5374,16 @@ ul.uk-nav-sub {
5346
5374
  .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
5347
5375
  width: 1000px;
5348
5376
  }
5377
+ /*
5378
+ * Size modifier
5379
+ */
5380
+ .uk-navbar-dropdown-large {
5381
+ padding: 40px;
5382
+ }
5349
5383
  /*
5350
5384
  * Stretch modifier
5351
5385
  * 1. Allow scrolling
5386
+ * 2. Style
5352
5387
  */
5353
5388
  .uk-navbar-dropdown-stretch {
5354
5389
  --uk-position-offset: 0;
@@ -5357,26 +5392,24 @@ ul.uk-nav-sub {
5357
5392
  /* 1 */
5358
5393
  overflow-y: auto;
5359
5394
  -webkit-overflow-scrolling: touch;
5395
+ /* 2 */
5396
+ padding: 15px 15px 15px 15px;
5397
+ background: #fff;
5360
5398
  box-shadow: none;
5361
- background: #f8f8f8;
5362
5399
  }
5363
5400
  /*
5364
5401
  * Dropbar modifier
5365
5402
  * 1. Reset dropdown width to prevent to early shifting
5366
- * 2. Set position
5367
- * 3. Bottom padding for dropbar
5368
- * 4. Horizontal padding
5403
+ * 2. Reset style
5404
+ * 3. Padding
5369
5405
  */
5370
5406
  .uk-navbar-dropdown-dropbar {
5371
5407
  /* 1 */
5372
5408
  width: auto;
5373
5409
  /* 2 */
5374
- --uk-position-offset: 0px;
5410
+ background: transparent;
5375
5411
  /* 3 */
5376
- margin-bottom: 0px;
5377
- /* 4 */
5378
- padding-left: 0;
5379
- padding-right: 0;
5412
+ padding: 25px 0 25px 0;
5380
5413
  --uk-position-shift-offset: 0;
5381
5414
  box-shadow: none;
5382
5415
  }
@@ -8124,15 +8157,23 @@ iframe[data-uk-cover] {
8124
8157
  /* Logo
8125
8158
  ========================================================================== */
8126
8159
  /*
8127
- * 1. Required for `a`
8160
+ * 1. Style
8161
+ * 2. Required for `a`
8162
+ * 3. Behave like image but can be overridden through flex utility classes
8128
8163
  */
8129
8164
  .uk-logo {
8165
+ /* 1 */
8130
8166
  font-size: 1.5rem;
8131
8167
  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";
8132
8168
  color: #333;
8133
- /* 1 */
8169
+ /* 2 */
8134
8170
  text-decoration: none;
8135
8171
  }
8172
+ /* 3 */
8173
+ :where(.uk-logo) {
8174
+ display: inline-block;
8175
+ vertical-align: middle;
8176
+ }
8136
8177
  /* Hover */
8137
8178
  .uk-logo:hover {
8138
8179
  color: #333;
@@ -8140,7 +8181,7 @@ iframe[data-uk-cover] {
8140
8181
  text-decoration: none;
8141
8182
  }
8142
8183
  .uk-logo > :where(img, svg, video) {
8143
- display: inline-block;
8184
+ display: block;
8144
8185
  }
8145
8186
  .uk-logo-inverse {
8146
8187
  display: none;
@@ -11118,7 +11159,7 @@ iframe[data-uk-cover] {
11118
11159
  .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent > a::after,
11119
11160
  .uk-overlay-primary .uk-nav-parent-icon > .uk-parent > a::after,
11120
11161
  .uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent > a::after {
11121
- background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E");
11162
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E");
11122
11163
  }
11123
11164
  .uk-light .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11124
11165
  .uk-section-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
@@ -11131,7 +11172,7 @@ iframe[data-uk-cover] {
11131
11172
  .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11132
11173
  .uk-overlay-primary .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11133
11174
  .uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent.uk-open > a::after {
11134
- background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E");
11175
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22rgba%28255,%20255,%20255,%200.7%29%22%20stroke-width%3D%221.1%22%20points%3D%2213%2010%207%204%201%2010%22%20%2F%3E%0A%3C%2Fsvg%3E");
11135
11176
  }
11136
11177
  .uk-light .uk-nav-default > li > a,
11137
11178
  .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a,