uikit 3.13.1-dev.dedbd3fce → 3.13.2-dev.696f00752

package/.eslintrc.json

@@ -13,5 +13,14 @@
         "VERSION": true,
         "ICONS": true,
         "NAME": true
+    },
+    "rules": {
+        "sort-imports": [
+            "error",
+            {
+                "ignoreCase": true,
+                "ignoreDeclarationSort": true
+            }
+        ]
     }
 }

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 ## WIP
 
+### Added
+
+- Drop/Dropdowns try to shift to stay within viewport
+
+### Changed
+
+- Use custom property for direction offset in components based on Position mixin
+- Add max-width to drops in Drop, Dropdown and Navbar components
+
+### Removed
+
+- Remove dropbar push mode from Navbar component
+
+### Fixed
+
+- Fix dropbar dropdown alignment
+- Fix dropbar dropdown top margin flickering
+- Fix Switcher component with disabled toggles
+- Fix responsiveness in Responsive component
+
+## 3.13.1 (March 18, 2022)
+
 ### Fixed
 
 - Fix Switcher component with disabled toggles

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.13.1-dev.dedbd3fce | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.13.2-dev.696f00752 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -3227,29 +3227,16 @@ select.uk-form-width-xsmall {
   /* 2 */
   position: absolute;
   z-index: 1020;
+  --uk-position-margin-offset: 20px;
   /* 3 */
   box-sizing: border-box;
   width: 300px;
+  max-width: 100vw;
 }
 /* Show */
 .uk-drop.uk-open {
   display: block;
 }
-/* Direction / Alignment modifiers
- ========================================================================== */
-/* Direction */
-[class*='uk-drop-top'] {
-  margin-top: -20px;
-}
-[class*='uk-drop-bottom'] {
-  margin-top: 20px;
-}
-[class*='uk-drop-right'] {
-  margin-right: -20px;
-}
-[class*='uk-drop-left'] {
-  margin-right: 20px;
-}
 /* Grid modifiers
  ========================================================================== */
 .uk-drop-stack .uk-drop-grid > * {
@@ -3270,9 +3257,11 @@ select.uk-form-width-xsmall {
   /* 2 */
   position: absolute;
   z-index: 1020;
+  --uk-position-margin-offset: 10px;
   /* 3 */
   box-sizing: border-box;
   min-width: 200px;
+  max-width: 100vw;
   /* 4 */
   padding: 15px;
   background: #f8f8f8;
@@ -3321,21 +3310,6 @@ select.uk-form-width-xsmall {
 .uk-dropdown-nav .uk-nav-sub li.uk-active > a {
   color: #666;
 }
-/* Direction / Alignment modifiers
- ========================================================================== */
-/* Direction */
-[class*='uk-dropdown-top'] {
-  margin-top: -10px;
-}
-[class*='uk-dropdown-bottom'] {
-  margin-top: 10px;
-}
-[class*='uk-dropdown-right'] {
-  margin-right: -10px;
-}
-[class*='uk-dropdown-left'] {
-  margin-right: 10px;
-}
 /* Grid modifiers
  ========================================================================== */
 .uk-dropdown-stack .uk-dropdown-grid > * {
@@ -3830,10 +3804,23 @@ select.uk-form-width-xsmall {
 .uk-offcanvas-close {
   position: absolute;
   z-index: 1000;
-  top: 20px;
-  left: 20px;
+  top: 5px;
+  left: 5px;
   padding: 5px;
 }
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-offcanvas-close {
+    top: 20px;
+    left: 20px;
+  }
+}
+/*
+ * Remove margin from adjacent element
+ */
+.uk-offcanvas-close:first-child + * {
+  margin-top: 0;
+}
 /* Overlay
  ========================================================================== */
 /*
@@ -4085,6 +4072,7 @@ select.uk-form-width-xsmall {
   /* 2 */
   position: absolute;
   z-index: 1030;
+  --uk-position-margin-offset: 10px;
   /* 3 */
   top: 0;
   /* 4 */
@@ -4101,21 +4089,6 @@ select.uk-form-width-xsmall {
 .uk-tooltip.uk-active {
   display: block;
 }
-/* Direction / Alignment modifiers
- ========================================================================== */
-/* Direction */
-[class*='uk-tooltip-top'] {
-  margin-top: -10px;
-}
-[class*='uk-tooltip-bottom'] {
-  margin-top: 10px;
-}
-[class*='uk-tooltip-right'] {
-  margin-right: -10px;
-}
-[class*='uk-tooltip-left'] {
-  margin-right: 10px;
-}
 /* ========================================================================
    Component: Sortable
  ========================================================================== */
@@ -4966,9 +4939,11 @@ ul.uk-nav-sub {
   /* 2 */
   position: absolute;
   z-index: 1020;
+  --uk-position-margin-offset: 0;
   /* 3 */
   box-sizing: border-box;
   width: 200px;
+  max-width: 100vw;
   /* 4 */
   padding: 15px;
   background: #f8f8f8;
@@ -4978,22 +4953,6 @@ ul.uk-nav-sub {
 .uk-navbar-dropdown.uk-open {
   display: block;
 }
-/*
- * Direction / Alignment modifiers
- */
-/* Direction */
-[class*='uk-navbar-dropdown-top'] {
-  margin-top: 0;
-}
-[class*='uk-navbar-dropdown-bottom'] {
-  margin-top: 0;
-}
-[class*='uk-navbar-dropdown-right'] {
-  margin-right: 0;
-}
-[class*='uk-navbar-dropdown-left'] {
-  margin-right: 0;
-}
 /*
  * Grid
  * Adopts `uk-grid`
@@ -5030,10 +4989,16 @@ ul.uk-nav-sub {
 }
 /*
  * Dropbar modifier
+ * 1. Set position
+ * 2. Bottom padding for dropbar
+ * 3. Horizontal padding
  */
 .uk-navbar-dropdown-dropbar {
-  margin-top: 0;
+  /* 1 */
+  --uk-position-margin-offset: 0;
+  /* 2 */
   margin-bottom: 0;
+  padding: 15px;
 }
 /* Dropdown Nav
  * Adopts `uk-nav`
@@ -5079,16 +5044,11 @@ ul.uk-nav-sub {
 /* Dropbar
  ========================================================================== */
 .uk-navbar-dropbar {
-  background: #f8f8f8;
-}
-/*
- * Slide modifier
- */
-.uk-navbar-dropbar-slide {
   position: absolute;
   z-index: 980;
   right: 0;
   left: 0;
+  background: #f8f8f8;
 }
 /* ========================================================================
    Component: Subnav