uikit 3.14.4-dev.310965bc8 → 3.14.4-dev.4bd89c5ca

package/CHANGELOG.md

@@ -4,8 +4,10 @@
 
 ### Added
 
+- Add dropdown large modifier to Dropdown and Navbar component
 - Add gap variable to navbar items in Navbar component
 - Add color mode variable to navbar dropdown in Navbar component
+- Add navbar parent icon to Navbar component
 - Add font size variables to nav and sublist in Nav component
 - Add small breakpoint padding variables to Modal component- Add `animate-out` option to Drop component
 - Add alignment `stretch` to Drop component
@@ -20,6 +22,9 @@
 - Rename `@offcanvas-bar-padding-horizontal-m` to `@offcanvas-bar-padding-horizontal-s`
 - Rename `@nav-primary-item-font-size` to `@nav-primary-font-size`
 - 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
 
 ### Fixed
 
@@ -27,6 +32,7 @@
 - Fix `offsetPosition()` adds `border-top` of offsetParents
 - 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
 
 ## 3.14.3 (May 27, 2022)
 

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.14.4-dev.310965bc8 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.14.4-dev.4bd89c5ca | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -3287,6 +3287,11 @@ select.uk-form-width-xsmall {
 .uk-dropdown.uk-open {
   display: block;
 }
+/* Size modifier
+ ========================================================================== */
+.uk-dropdown-large {
+  padding: 40px;
+}
 /* Stretch modifier
  ========================================================================== */
 /*
@@ -4661,12 +4666,12 @@ ul.uk-nav-sub {
   width: 1.5em;
   height: 1.5em;
   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%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E");
+  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%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E");
+  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");
 }
 /* Header
  ========================================================================== */
@@ -4936,7 +4941,6 @@ ul.uk-nav-sub {
   /* 3 */
   box-sizing: border-box;
   min-height: 80px;
-  padding: 0 15px;
   /* 4 */
   font-size: 16px;
   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";
@@ -4947,6 +4951,7 @@ ul.uk-nav-sub {
  * Nav items
  */
 .uk-navbar-nav > li > a {
+  padding: 0 15px;
   color: #999;
 }
 /*
@@ -4965,6 +4970,21 @@ ul.uk-nav-sub {
 .uk-navbar-nav > li.uk-active > a {
   color: #333;
 }
+/* Parent icon modifier
+ ========================================================================== */
+.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  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");
+}
 /* Item
  ========================================================================== */
 .uk-navbar-item {
@@ -4980,6 +5000,7 @@ ul.uk-nav-sub {
 /* Toggle
  ========================================================================== */
 .uk-navbar-toggle {
+  padding: 0 15px;
   color: #999;
 }
 .uk-navbar-toggle:hover,
@@ -5074,9 +5095,17 @@ ul.uk-nav-sub {
 .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
   width: 1000px;
 }
+/*
+ * Size modifier
+ */
+.uk-navbar-dropdown-large {
+  --uk-position-shift-offset: 0;
+  padding: 40px;
+}
 /*
  * Stretch modifier
  * 1. Allow scrolling
+ * 2. Style
  */
 .uk-navbar-dropdown-stretch {
   --uk-position-offset: 0;
@@ -5085,24 +5114,37 @@ ul.uk-nav-sub {
   /* 1 */
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  /* 2 */
+  padding: 15px 15px 15px 15px;
+  background: #f8f8f8;
+}
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-navbar-dropdown-stretch {
+    padding-right: 30px;
+    padding-left: 30px;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-navbar-dropdown-stretch {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
 }
 /*
  * Dropbar modifier
  * 1. Reset dropdown width to prevent to early shifting
- * 2. Set position
- * 3. Bottom padding for dropbar
- * 4. Horizontal padding
+ * 2. Reset style
+ * 3. Padding
  */
 .uk-navbar-dropdown-dropbar {
   /* 1 */
   width: auto;
   /* 2 */
-  --uk-position-offset: 0px;
+  background: transparent;
   /* 3 */
-  margin-bottom: 0px;
-  /* 4 */
-  padding-right: 15px;
-  padding-left: 15px;
+  padding: 15px 15px 15px 15px;
   --uk-position-shift-offset: 0;
 }
 /* Dropdown Nav
@@ -10661,7 +10703,7 @@ iframe[data-uk-cover] {
 .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%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E");
+  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,
@@ -10674,7 +10716,7 @@ iframe[data-uk-cover] {
 .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%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E");
+  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,
@@ -10960,6 +11002,43 @@ 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,