uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.51a1b06ef

package/CHANGELOG.md

@@ -14,6 +14,8 @@
 - Add Height Viewport uses scroll parent as viewport
 - Add zero z-index utility class to Position component
 - Add option `bg-scroll` to Drop component
+- Add support for `picture` element to logo in Utility component
+- Add box sizing classes to Utility component
 
 ### Changed
 
@@ -24,7 +26,11 @@
 - Rename `@nav-primary-item-line-height` to `@nav-primary-line-height`
 - Rename `@navbar-dropdown-dropbar-margin-top` to `@navbar-dropdown-dropbar-padding-top`
 - Rename `@navbar-dropdown-dropbar-margin-bottom` to `@navbar-dropdown-dropbar-padding-bottom`
-- Change nav parent icon
+- Use JS icon component instead of compiling icons into CSS for nav parent icon in Nav component
+
+### Removed
+
+- Remove `getCssVar()` utility function
 
 ### Fixed
 
@@ -33,6 +39,7 @@
 - Fix dragging in Slider component on iOS
 - Fix Drop component no longer flips, if it does not fit into scroll area
 - Fix Drop component alignment within Dropbar
+- Remove margin from the last-child within dropdowns in Dropdown and Navbar components
 
 ## 3.14.3 (May 27, 2022)
 

package/dist/css/uikit-core-rtl.css

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.4-dev.4bd89c5ca | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.4-dev.51a1b06ef | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -3287,6 +3287,12 @@ select.uk-form-width-xsmall {
 .uk-dropdown.uk-open {
   display: block;
 }
+/*
+ * Remove margin from the last-child
+ */
+.uk-dropdown > :last-child {
+  margin-bottom: 0;
+}
 /* Size modifier
  ========================================================================== */
 .uk-dropdown-large {
@@ -4014,7 +4020,7 @@ select.uk-form-width-xsmall {
  * Pass fill character to JS
  */
 :root {
-  --uk-leader-fill-content: '.';
+  --uk-leader-fill-content: .;
 }
 /* ========================================================================
    Component: Notification
@@ -4659,19 +4665,13 @@ ul.uk-nav-sub {
 .uk-nav-sub a {
   padding: 2px 0;
 }
-/* Parent icon modifier
+/* Parent icon
  ========================================================================== */
-.uk-nav-parent-icon > .uk-parent > a::after {
-  content: "";
-  width: 1.5em;
-  height: 1.5em;
+.uk-nav-parent-icon {
   margin-right: auto;
-  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");
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
 }
-.uk-nav-parent-icon > .uk-parent.uk-open > a::after {
-  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");
+.uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon {
+  transform: rotate(-180deg);
 }
 /* Header
  ========================================================================== */
@@ -4815,15 +4815,19 @@ ul.uk-nav-sub {
 .uk-nav-center .uk-nav-sub ul {
   padding-right: 0;
 }
-/* Parent icon modifier  */
-.uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after {
+/* Parent icon  */
+.uk-nav-center .uk-nav-parent-icon {
   margin-right: 0;
 }
 /* Style modifier
  ========================================================================== */
+/*
+ * Divider
+ * Naming is in plural to prevent conflicts with divider sub object.
+ */
 .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
-  margin-top: 0;
-  padding-top: 0;
+  margin-top: 5px;
+  padding-top: 5px;
   border-top: 1px solid #e5e5e5;
 }
 /* ========================================================================
@@ -4972,18 +4976,11 @@ ul.uk-nav-sub {
 }
 /* Parent icon modifier
  ========================================================================== */
-.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
-  content: "";
-  width: 12px;
-  height: 12px;
+.uk-navbar-parent-icon {
   margin-right: 4px;
-  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");
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
 }
-.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after {
-  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");
+.uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon {
+  transform: rotate(-180deg);
 }
 /* Item
  ========================================================================== */
@@ -5061,6 +5058,12 @@ ul.uk-nav-sub {
 .uk-navbar-dropdown.uk-open {
   display: block;
 }
+/*
+ * Remove margin from the last-child
+ */
+.uk-navbar-dropdown > :last-child {
+  margin-bottom: 0;
+}
 /*
  * Grid
  * Adopts `uk-grid`
@@ -5146,6 +5149,19 @@ ul.uk-nav-sub {
   /* 3 */
   padding: 15px 15px 15px 15px;
   --uk-position-shift-offset: 0;
+  --uk-position-viewport-offset: 15px;
+}
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-navbar-dropdown-dropbar {
+    --uk-position-viewport-offset: 30px;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-navbar-dropdown-dropbar {
+    --uk-position-viewport-offset: 40px;
+  }
 }
 /* Dropdown Nav
  * Adopts `uk-nav`
@@ -7525,6 +7541,14 @@ iframe[data-uk-cover] {
 .uk-overflow-auto > :last-child {
   margin-bottom: 0;
 }
+/* Box Sizing
+ ========================================================================== */
+.uk-box-sizing-content {
+  box-sizing: content-box;
+}
+.uk-box-sizing-border {
+  box-sizing: border-box;
+}
 /* Resize
  ========================================================================== */
 .uk-resize {
@@ -7802,7 +7826,7 @@ iframe[data-uk-cover] {
   /* 1 */
   text-decoration: none;
 }
-.uk-logo > :where(img, svg, video) {
+.uk-logo :where(img, svg, video) {
   display: block;
 }
 .uk-logo-inverse {
@@ -10692,32 +10716,6 @@ iframe[data-uk-cover] {
 .uk-offcanvas-bar .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
   border-top-color: rgba(255, 255, 255, 0.2);
 }
-.uk-light .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-section-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-section-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-tile-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-card-primary.uk-card-body .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-card-primary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-card-secondary.uk-card-body .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-overlay-primary .uk-nav-parent-icon > .uk-parent > a::after,
-.uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent > a::after {
-  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");
-}
-.uk-light .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-section-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-section-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-tile-primary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-card-primary.uk-card-body .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-card-primary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-card-secondary.uk-card-body .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-card-secondary > :not([class*='uk-card-media']) .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-overlay-primary .uk-nav-parent-icon > .uk-parent.uk-open > a::after,
-.uk-offcanvas-bar .uk-nav-parent-icon > .uk-parent.uk-open > a::after {
-  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");
-}
 .uk-light .uk-nav-default > li > a,
 .uk-section-primary:not(.uk-preserve-color) .uk-nav-default > li > a,
 .uk-section-secondary:not(.uk-preserve-color) .uk-nav-default > li > a,
@@ -11002,43 +11000,6 @@ iframe[data-uk-cover] {
 .uk-offcanvas-bar .uk-navbar-nav > li.uk-active > a {
   color: #fff;
 }
-.uk-light .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-section-primary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-card-primary.uk-card-body .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-card-secondary.uk-card-body .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-overlay-primary .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after,
-.uk-offcanvas-bar .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
-  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%22rgba%28255,%20255,%20255,%200.5%29%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");
-}
-.uk-light .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-light .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-section-primary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-section-primary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-section-secondary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-tile-primary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-card-primary.uk-card-body .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-card-primary.uk-card-body .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-card-primary > :not([class*='uk-card-media']) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-card-secondary.uk-card-body .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-card-secondary.uk-card-body .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-card-secondary > :not([class*='uk-card-media']) .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-overlay-primary .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-overlay-primary .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after,
-.uk-offcanvas-bar .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
-.uk-offcanvas-bar .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after {
-  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%22rgba%28255,%20255,%20255,%200.5%29%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");
-}
 .uk-light .uk-navbar-item,
 .uk-section-primary:not(.uk-preserve-color) .uk-navbar-item,
 .uk-section-secondary:not(.uk-preserve-color) .uk-navbar-item,
@@ -11613,17 +11574,28 @@ iframe[data-uk-cover] {
 .uk-offcanvas-bar .uk-logo:hover {
   color: #fff;
 }
-.uk-light .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-section-primary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-section-secondary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-tile-primary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-tile-secondary:not(.uk-preserve-color) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-card-primary.uk-card-body .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-card-primary > :not([class*='uk-card-media']) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-card-secondary.uk-card-body .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-card-secondary > :not([class*='uk-card-media']) .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-overlay-primary .uk-logo > :not(.uk-logo-inverse):not(:only-of-type),
-.uk-offcanvas-bar .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) {
+.uk-light .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-light .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-section-primary:not(.uk-preserve-color) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-section-primary:not(.uk-preserve-color) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-section-secondary:not(.uk-preserve-color) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-section-secondary:not(.uk-preserve-color) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-tile-primary:not(.uk-preserve-color) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-tile-primary:not(.uk-preserve-color) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-tile-secondary:not(.uk-preserve-color) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-tile-secondary:not(.uk-preserve-color) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-card-primary.uk-card-body .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-card-primary.uk-card-body .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-card-primary > :not([class*='uk-card-media']) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-card-primary > :not([class*='uk-card-media']) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-card-secondary.uk-card-body .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-card-secondary.uk-card-body .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-card-secondary > :not([class*='uk-card-media']) .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-card-secondary > :not([class*='uk-card-media']) .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-overlay-primary .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-overlay-primary .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type),
+.uk-offcanvas-bar .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+.uk-offcanvas-bar .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) {
   display: none;
 }
 .uk-light .uk-logo-inverse,