uikit 3.14.4-dev.f2e3be255 → 3.14.4-dev.fea9fd466

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 +8 -1
  2. package/dist/css/uikit-core-rtl.css +84 -64
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +84 -64
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +83 -63
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +83 -63
  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 +6 -14
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +6 -14
  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 +4 -5
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +4 -5
  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 +4 -5
  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 +9 -17
  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 +45 -43
  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 +51 -47
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/images/{backgrounds/nav-parent-close.svg → components/nav-parent-icon-large.svg} +0 -0
  44. package/src/images/{backgrounds/navbar-parent-close.svg → components/nav-parent-icon.svg} +0 -0
  45. package/src/images/{backgrounds/navbar-parent-open.svg → components/navbar-parent-icon.svg} +1 -1
  46. package/src/js/components/filter.js +5 -3
  47. package/src/js/core/height-viewport.js +6 -2
  48. package/src/js/core/icon.js +16 -0
  49. package/src/js/core/index.js +2 -0
  50. package/src/js/core/leader.js +2 -2
  51. package/src/js/mixin/media.js +4 -5
  52. package/src/js/mixin/position.js +3 -4
  53. package/src/js/mixin/togglable.js +8 -17
  54. package/src/js/util/style.js +4 -13
  55. package/src/js/util/viewport.js +2 -4
  56. package/src/less/components/dropdown.less +6 -0
  57. package/src/less/components/leader.less +1 -1
  58. package/src/less/components/nav.less +7 -37
  59. package/src/less/components/navbar.less +70 -21
  60. package/src/less/components/utility.less +10 -2
  61. package/src/less/theme/nav.less +0 -8
  62. package/src/scss/components/dropdown.scss +6 -0
  63. package/src/scss/components/leader.scss +1 -1
  64. package/src/scss/components/nav.scss +7 -26
  65. package/src/scss/components/navbar.scss +58 -21
  66. package/src/scss/components/utility.scss +8 -1
  67. package/src/scss/mixins-theme.scss +14 -14
  68. package/src/scss/mixins.scss +14 -14
  69. package/src/scss/theme/nav.scss +0 -8
  70. package/src/scss/variables-theme.scss +9 -13
  71. package/src/scss/variables.scss +9 -13
  72. package/tests/index.html +3 -3
  73. package/tests/nav.html +20 -87
  74. package/tests/navbar.html +15 -26
  75. package/tests/offcanvas.html +8 -8
  76. package/tests/utility.html +19 -0
  77. package/src/images/backgrounds/nav-parent-open.svg +0 -3
@@ -1,4 +1,4 @@
1
- /*! UIkit 3.14.4-dev.f2e3be255 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
1
+ /*! UIkit 3.14.4-dev.fea9fd466 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
2
2
  /* ========================================================================
3
3
  Component: Base
4
4
  ========================================================================== */
@@ -3549,6 +3549,12 @@ select.uk-form-width-xsmall {
3549
3549
  .uk-dropdown.uk-open {
3550
3550
  display: block;
3551
3551
  }
3552
+ /*
3553
+ * Remove margin from the last-child
3554
+ */
3555
+ .uk-dropdown > :last-child {
3556
+ margin-bottom: 0;
3557
+ }
3552
3558
  /* Size modifier
3553
3559
  ========================================================================== */
3554
3560
  .uk-dropdown-large {
@@ -4289,7 +4295,7 @@ select.uk-form-width-xsmall {
4289
4295
  * Pass fill character to JS
4290
4296
  */
4291
4297
  :root {
4292
- --uk-leader-fill-content: '.';
4298
+ --uk-leader-fill-content: .;
4293
4299
  }
4294
4300
  /* ========================================================================
4295
4301
  Component: Notification
@@ -4936,17 +4942,11 @@ ul.uk-nav-sub {
4936
4942
  }
4937
4943
  /* Parent icon modifier
4938
4944
  ========================================================================== */
4939
- .uk-nav-parent-icon > .uk-parent > a::after {
4940
- content: "";
4941
- width: 1.5em;
4942
- height: 1.5em;
4945
+ .uk-nav-parent-icon {
4943
4946
  margin-right: auto;
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");
4945
- background-repeat: no-repeat;
4946
- background-position: 50% 50%;
4947
4947
  }
4948
- .uk-nav-parent-icon > .uk-parent.uk-open > a::after {
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");
4948
+ .uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon {
4949
+ transform: rotate(-180deg);
4950
4950
  }
4951
4951
  /* Header
4952
4952
  ========================================================================== */
@@ -5091,14 +5091,14 @@ ul.uk-nav-sub {
5091
5091
  padding-right: 0;
5092
5092
  }
5093
5093
  /* Parent icon modifier */
5094
- .uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after {
5094
+ .uk-nav-center .uk-nav-parent-icon {
5095
5095
  margin-right: 0;
5096
5096
  }
5097
5097
  /* Style modifier
5098
5098
  ========================================================================== */
5099
5099
  .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
5100
- margin-top: 0;
5101
- padding-top: 0;
5100
+ margin-top: 5px;
5101
+ padding-top: 5px;
5102
5102
  border-top: 1px solid #e5e5e5;
5103
5103
  }
5104
5104
  /* ========================================================================
@@ -5250,18 +5250,11 @@ ul.uk-nav-sub {
5250
5250
  }
5251
5251
  /* Parent icon modifier
5252
5252
  ========================================================================== */
5253
- .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
5254
- content: "";
5255
- width: 12px;
5256
- height: 12px;
5257
- margin-right: 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%;
5253
+ .uk-navbar-parent-icon {
5254
+ margin-right: 4px;
5261
5255
  }
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");
5256
+ .uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon {
5257
+ transform: rotate(-180deg);
5265
5258
  }
5266
5259
  /* Item
5267
5260
  ========================================================================== */
@@ -5340,6 +5333,12 @@ ul.uk-nav-sub {
5340
5333
  .uk-navbar-dropdown.uk-open {
5341
5334
  display: block;
5342
5335
  }
5336
+ /*
5337
+ * Remove margin from the last-child
5338
+ */
5339
+ .uk-navbar-dropdown > :last-child {
5340
+ margin-bottom: 0;
5341
+ }
5343
5342
  /*
5344
5343
  * Grid
5345
5344
  * Adopts `uk-grid`
@@ -5378,6 +5377,7 @@ ul.uk-nav-sub {
5378
5377
  * Size modifier
5379
5378
  */
5380
5379
  .uk-navbar-dropdown-large {
5380
+ --uk-position-shift-offset: 0;
5381
5381
  padding: 40px;
5382
5382
  }
5383
5383
  /*
@@ -5397,6 +5397,20 @@ ul.uk-nav-sub {
5397
5397
  background: #fff;
5398
5398
  box-shadow: none;
5399
5399
  }
5400
+ /* Phone landscape and bigger */
5401
+ @media (min-width: 640px) {
5402
+ .uk-navbar-dropdown-stretch {
5403
+ padding-right: 30px;
5404
+ padding-left: 30px;
5405
+ }
5406
+ }
5407
+ /* Tablet landscape and bigger */
5408
+ @media (min-width: 960px) {
5409
+ .uk-navbar-dropdown-stretch {
5410
+ padding-right: 40px;
5411
+ padding-left: 40px;
5412
+ }
5413
+ }
5400
5414
  /*
5401
5415
  * Dropbar modifier
5402
5416
  * 1. Reset dropdown width to prevent to early shifting
@@ -5411,8 +5425,21 @@ ul.uk-nav-sub {
5411
5425
  /* 3 */
5412
5426
  padding: 25px 0 25px 0;
5413
5427
  --uk-position-shift-offset: 0;
5428
+ --uk-position-viewport-offset: 15px;
5414
5429
  box-shadow: none;
5415
5430
  }
5431
+ /* Phone landscape and bigger */
5432
+ @media (min-width: 640px) {
5433
+ .uk-navbar-dropdown-dropbar {
5434
+ --uk-position-viewport-offset: 30px;
5435
+ }
5436
+ }
5437
+ /* Tablet landscape and bigger */
5438
+ @media (min-width: 960px) {
5439
+ .uk-navbar-dropdown-dropbar {
5440
+ --uk-position-viewport-offset: 40px;
5441
+ }
5442
+ }
5416
5443
  /* Dropdown Nav
5417
5444
  * Adopts `uk-nav`
5418
5445
  ========================================================================== */
@@ -7902,6 +7929,14 @@ iframe[data-uk-cover] {
7902
7929
  .uk-overflow-auto > :last-child {
7903
7930
  margin-bottom: 0;
7904
7931
  }
7932
+ /* Box Sizing
7933
+ ========================================================================== */
7934
+ .uk-box-sizing-content {
7935
+ box-sizing: content-box;
7936
+ }
7937
+ .uk-box-sizing-border {
7938
+ box-sizing: border-box;
7939
+ }
7905
7940
  /* Resize
7906
7941
  ========================================================================== */
7907
7942
  .uk-resize {
@@ -8180,7 +8215,7 @@ iframe[data-uk-cover] {
8180
8215
  /* 1 */
8181
8216
  text-decoration: none;
8182
8217
  }
8183
- .uk-logo > :where(img, svg, video) {
8218
+ .uk-logo :where(img, svg, video) {
8184
8219
  display: block;
8185
8220
  }
8186
8221
  .uk-logo-inverse {
@@ -11148,32 +11183,6 @@ iframe[data-uk-cover] {
11148
11183
  .uk-offcanvas-bar .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
11149
11184
  border-top-color: rgba(255, 255, 255, 0.2);
11150
11185
  }
11151
- .uk-light .uk-nav-parent-icon > .uk-parent > a::after,
11152
- .uk-section-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after,
11153
- .uk-section-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after,
11154
- .uk-tile-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after,
11155
- .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after,
11156
- .uk-card-primary.uk-card-body .uk-nav-parent-icon > .uk-parent > a::after,
11157
- .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent > a::after,
11158
- .uk-card-secondary.uk-card-body .uk-nav-parent-icon > .uk-parent > a::after,
11159
- .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent > a::after,
11160
- .uk-overlay-primary .uk-nav-parent-icon > .uk-parent > a::after,
11161
- .uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent > a::after {
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");
11163
- }
11164
- .uk-light .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11165
- .uk-section-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11166
- .uk-section-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11167
- .uk-tile-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11168
- .uk-tile-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11169
- .uk-card-primary.uk-card-body .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11170
- .uk-card-primary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11171
- .uk-card-secondary.uk-card-body .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11172
- .uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11173
- .uk-overlay-primary .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
11174
- .uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent.uk-open > a::after {
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");
11176
- }
11177
11186
  .uk-light .uk-nav-default > li > a,
11178
11187
  .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a,
11179
11188
  .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a,
@@ -12050,17 +12059,28 @@ iframe[data-uk-cover] {
12050
12059
  .uk-offcanvas-bar .uk-logo:hover {
12051
12060
  color: #fff;
12052
12061
  }
12053
- .uk-light .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12054
- .uk-section-primary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12055
- .uk-section-secondary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12056
- .uk-tile-primary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12057
- .uk-tile-secondary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12058
- .uk-card-primary.uk-card-body .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12059
- .uk-card-primary > :not([class*='uk-card-media']) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12060
- .uk-card-secondary.uk-card-body .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12061
- .uk-card-secondary > :not([class*='uk-card-media']) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12062
- .uk-overlay-primary .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
12063
- .uk-offcanvas-bar .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) {
12062
+ .uk-light .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12063
+ .uk-light .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12064
+ .uk-section-primary:not(.uk-preserve-color) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12065
+ .uk-section-primary:not(.uk-preserve-color) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12066
+ .uk-section-secondary:not(.uk-preserve-color) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12067
+ .uk-section-secondary:not(.uk-preserve-color) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12068
+ .uk-tile-primary:not(.uk-preserve-color) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12069
+ .uk-tile-primary:not(.uk-preserve-color) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12070
+ .uk-tile-secondary:not(.uk-preserve-color) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12071
+ .uk-tile-secondary:not(.uk-preserve-color) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12072
+ .uk-card-primary.uk-card-body .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12073
+ .uk-card-primary.uk-card-body .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12074
+ .uk-card-primary > :not([class*='uk-card-media']) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12075
+ .uk-card-primary > :not([class*='uk-card-media']) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12076
+ .uk-card-secondary.uk-card-body .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12077
+ .uk-card-secondary.uk-card-body .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12078
+ .uk-card-secondary > :not([class*='uk-card-media']) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12079
+ .uk-card-secondary > :not([class*='uk-card-media']) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12080
+ .uk-overlay-primary .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12081
+ .uk-overlay-primary .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
12082
+ .uk-offcanvas-bar .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
12083
+ .uk-offcanvas-bar .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) {
12064
12084
  display: none;
12065
12085
  }
12066
12086
  .uk-light .uk-logo-inverse,