uikit 3.18.4-dev.379fa2bf1 → 3.18.4-dev.3b6dec3a6

package/CHANGELOG.md

@@ -2,10 +2,23 @@
 
 ## WIP
 
+### Added
+
+- Add breakpoint classes for flex direction, dimension and alignment
+- Add `active` option to Slider component
+
+### Changed
+
+- Remove obsolete fix for rounding issues in Width component in IE11/Edge
+
 ### Fixed
 
+- Fix combination of width auto and expand breakpoint classes
 - Fix logo inverse selector to work with different types of images
+- Fix Tooltips not showing in iOS
 - Fix parallax scrolling for Slideshow/Slider component with finite mode
+- Fix Slider component disables infinite scrolling prematurely
+- Fix Sass sources by renaming spin() (LESS) to adjust-hue() (Sass)
 
 ## 3.18.3 (February 13, 2024)
 

package/build/scss.js

@@ -38,6 +38,9 @@ for (const file of (await glob('src/less/**/*.less'))
         .replace(/fade\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2) => {
             return `rgba(${p1}, ${p2 / 100})`;
         }) // replace Less function fade with rgba
+        .replace(/spin\((\$[\w-]*), ([0-9]+)\)/g, (match, p1, p2) => {
+            return `adjust-hue(${p1}, ${p2})`;
+        }) // replace Less function spin with adjust-hue
         .replace(/fade(in|out)\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2, p3) => {
             return `fade-${p1}(${p2}, ${p3 / 100})`;
         }) // replace Less function fadeout with fade-out

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.18.4-dev.379fa2bf1 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.18.4-dev.3b6dec3a6 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -6418,7 +6418,7 @@ ul.uk-nav-sub {
   width: 50%;
 }
 .uk-child-width-1-3 > * {
-  width: calc(100% * 1 / 3.001);
+  width: calc(100% / 3);
 }
 .uk-child-width-1-4 > * {
   width: 25%;
@@ -6427,7 +6427,7 @@ ul.uk-nav-sub {
   width: 20%;
 }
 .uk-child-width-1-6 > * {
-  width: calc(100% * 1 / 6.001);
+  width: calc(100% / 6);
 }
 .uk-child-width-auto > * {
   width: auto;
@@ -6437,6 +6437,7 @@ ul.uk-nav-sub {
  *    flex items won't shrink below their minimum intrinsic content size.
  *    Using `1px` instead of `0`, so items still wrap into the next line,
  *    if they have zero width and padding and the predecessor is 100% wide.
+ * 2. Reset flex if auto classes are combined with expand classes
  */
 .uk-child-width-expand > :not([class*="uk-width"]) {
   flex: 1;
@@ -6452,7 +6453,7 @@ ul.uk-nav-sub {
     width: 50%;
   }
   .uk-child-width-1-3\@s > * {
-    width: calc(100% * 1 / 3.001);
+    width: calc(100% / 3);
   }
   .uk-child-width-1-4\@s > * {
     width: 25%;
@@ -6461,10 +6462,12 @@ ul.uk-nav-sub {
     width: 20%;
   }
   .uk-child-width-1-6\@s > * {
-    width: calc(100% * 1 / 6.001);
+    width: calc(100% / 6);
   }
   .uk-child-width-auto\@s > * {
     width: auto;
+    /* 2 */
+    flex: initial;
   }
   .uk-child-width-expand\@s > :not([class*="uk-width"]) {
     flex: 1;
@@ -6480,7 +6483,7 @@ ul.uk-nav-sub {
     width: 50%;
   }
   .uk-child-width-1-3\@m > * {
-    width: calc(100% * 1 / 3.001);
+    width: calc(100% / 3);
   }
   .uk-child-width-1-4\@m > * {
     width: 25%;
@@ -6489,10 +6492,11 @@ ul.uk-nav-sub {
     width: 20%;
   }
   .uk-child-width-1-6\@m > * {
-    width: calc(100% * 1 / 6.001);
+    width: calc(100% / 6);
   }
   .uk-child-width-auto\@m > * {
     width: auto;
+    flex: initial;
   }
   .uk-child-width-expand\@m > :not([class*="uk-width"]) {
     flex: 1;
@@ -6508,7 +6512,7 @@ ul.uk-nav-sub {
     width: 50%;
   }
   .uk-child-width-1-3\@l > * {
-    width: calc(100% * 1 / 3.001);
+    width: calc(100% / 3);
   }
   .uk-child-width-1-4\@l > * {
     width: 25%;
@@ -6517,10 +6521,11 @@ ul.uk-nav-sub {
     width: 20%;
   }
   .uk-child-width-1-6\@l > * {
-    width: calc(100% * 1 / 6.001);
+    width: calc(100% / 6);
   }
   .uk-child-width-auto\@l > * {
     width: auto;
+    flex: initial;
   }
   .uk-child-width-expand\@l > :not([class*="uk-width"]) {
     flex: 1;
@@ -6536,7 +6541,7 @@ ul.uk-nav-sub {
     width: 50%;
   }
   .uk-child-width-1-3\@xl > * {
-    width: calc(100% * 1 / 3.001);
+    width: calc(100% / 3);
   }
   .uk-child-width-1-4\@xl > * {
     width: 25%;
@@ -6545,10 +6550,11 @@ ul.uk-nav-sub {
     width: 20%;
   }
   .uk-child-width-1-6\@xl > * {
-    width: calc(100% * 1 / 6.001);
+    width: calc(100% / 6);
   }
   .uk-child-width-auto\@xl > * {
     width: auto;
+    flex: initial;
   }
   .uk-child-width-expand\@xl > :not([class*="uk-width"]) {
     flex: 1;
@@ -6572,10 +6578,10 @@ ul.uk-nav-sub {
 }
 /* Thirds */
 .uk-width-1-3 {
-  width: calc(100% * 1 / 3.001);
+  width: calc(100% / 3);
 }
 .uk-width-2-3 {
-  width: calc(100% * 2 / 3.001);
+  width: calc(200% / 3);
 }
 /* Quarters */
 .uk-width-1-4 {
@@ -6599,10 +6605,10 @@ ul.uk-nav-sub {
 }
 /* Sixths */
 .uk-width-1-6 {
-  width: calc(100% * 1 / 6.001);
+  width: calc(100% / 6);
 }
 .uk-width-5-6 {
-  width: calc(100% * 5 / 6.001);
+  width: calc(500% / 6);
 }
 /* Pixel */
 .uk-width-small {
@@ -6641,10 +6647,10 @@ ul.uk-nav-sub {
   }
   /* Thirds */
   .uk-width-1-3\@s {
-    width: calc(100% * 1 / 3.001);
+    width: calc(100% / 3);
   }
   .uk-width-2-3\@s {
-    width: calc(100% * 2 / 3.001);
+    width: calc(200% / 3);
   }
   /* Quarters */
   .uk-width-1-4\@s {
@@ -6668,10 +6674,10 @@ ul.uk-nav-sub {
   }
   /* Sixths */
   .uk-width-1-6\@s {
-    width: calc(100% * 1 / 6.001);
+    width: calc(100% / 6);
   }
   .uk-width-5-6\@s {
-    width: calc(100% * 5 / 6.001);
+    width: calc(500% / 6);
   }
   /* Pixel */
   .uk-width-small\@s {
@@ -6692,6 +6698,7 @@ ul.uk-nav-sub {
   /* Auto */
   .uk-width-auto\@s {
     width: auto;
+    flex: initial;
   }
   /* Expand */
   .uk-width-expand\@s {
@@ -6711,10 +6718,10 @@ ul.uk-nav-sub {
   }
   /* Thirds */
   .uk-width-1-3\@m {
-    width: calc(100% * 1 / 3.001);
+    width: calc(100% / 3);
   }
   .uk-width-2-3\@m {
-    width: calc(100% * 2 / 3.001);
+    width: calc(200% / 3);
   }
   /* Quarters */
   .uk-width-1-4\@m {
@@ -6738,10 +6745,10 @@ ul.uk-nav-sub {
   }
   /* Sixths */
   .uk-width-1-6\@m {
-    width: calc(100% * 1 / 6.001);
+    width: calc(100% / 6);
   }
   .uk-width-5-6\@m {
-    width: calc(100% * 5 / 6.001);
+    width: calc(500% / 6);
   }
   /* Pixel */
   .uk-width-small\@m {
@@ -6762,6 +6769,7 @@ ul.uk-nav-sub {
   /* Auto */
   .uk-width-auto\@m {
     width: auto;
+    flex: initial;
   }
   /* Expand */
   .uk-width-expand\@m {
@@ -6781,10 +6789,10 @@ ul.uk-nav-sub {
   }
   /* Thirds */
   .uk-width-1-3\@l {
-    width: calc(100% * 1 / 3.001);
+    width: calc(100% / 3);
   }
   .uk-width-2-3\@l {
-    width: calc(100% * 2 / 3.001);
+    width: calc(200% / 3);
   }
   /* Quarters */
   .uk-width-1-4\@l {
@@ -6808,10 +6816,10 @@ ul.uk-nav-sub {
   }
   /* Sixths */
   .uk-width-1-6\@l {
-    width: calc(100% * 1 / 6.001);
+    width: calc(100% / 6);
   }
   .uk-width-5-6\@l {
-    width: calc(100% * 5 / 6.001);
+    width: calc(500% / 6);
   }
   /* Pixel */
   .uk-width-small\@l {
@@ -6832,6 +6840,7 @@ ul.uk-nav-sub {
   /* Auto */
   .uk-width-auto\@l {
     width: auto;
+    flex: initial;
   }
   /* Expand */
   .uk-width-expand\@l {
@@ -6851,10 +6860,10 @@ ul.uk-nav-sub {
   }
   /* Thirds */
   .uk-width-1-3\@xl {
-    width: calc(100% * 1 / 3.001);
+    width: calc(100% / 3);
   }
   .uk-width-2-3\@xl {
-    width: calc(100% * 2 / 3.001);
+    width: calc(200% / 3);
   }
   /* Quarters */
   .uk-width-1-4\@xl {
@@ -6878,10 +6887,10 @@ ul.uk-nav-sub {
   }
   /* Sixths */
   .uk-width-1-6\@xl {
-    width: calc(100% * 1 / 6.001);
+    width: calc(100% / 6);
   }
   .uk-width-5-6\@xl {
-    width: calc(100% * 5 / 6.001);
+    width: calc(500% / 6);
   }
   /* Pixel */
   .uk-width-small\@xl {
@@ -6902,6 +6911,7 @@ ul.uk-nav-sub {
   /* Auto */
   .uk-width-auto\@xl {
     width: auto;
+    flex: initial;
   }
   /* Expand */
   .uk-width-expand\@xl {
@@ -8237,6 +8247,66 @@ iframe[data-uk-cover] {
 .uk-flex-bottom {
   align-items: flex-end;
 }
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-flex-stretch\@s {
+    align-items: stretch;
+  }
+  .uk-flex-top\@s {
+    align-items: flex-start;
+  }
+  .uk-flex-middle\@s {
+    align-items: center;
+  }
+  .uk-flex-bottom\@s {
+    align-items: flex-end;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-flex-stretch\@m {
+    align-items: stretch;
+  }
+  .uk-flex-top\@m {
+    align-items: flex-start;
+  }
+  .uk-flex-middle\@m {
+    align-items: center;
+  }
+  .uk-flex-bottom\@m {
+    align-items: flex-end;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-flex-stretch\@l {
+    align-items: stretch;
+  }
+  .uk-flex-top\@l {
+    align-items: flex-start;
+  }
+  .uk-flex-middle\@l {
+    align-items: center;
+  }
+  .uk-flex-bottom\@l {
+    align-items: flex-end;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-flex-stretch\@xl {
+    align-items: stretch;
+  }
+  .uk-flex-top\@xl {
+    align-items: flex-start;
+  }
+  .uk-flex-middle\@xl {
+    align-items: center;
+  }
+  .uk-flex-bottom\@xl {
+    align-items: flex-end;
+  }
+}
 /* Direction
  ========================================================================== */
 .uk-flex-row {
@@ -8251,6 +8321,42 @@ iframe[data-uk-cover] {
 .uk-flex-column-reverse {
   flex-direction: column-reverse;
 }
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-flex-row\@s {
+    flex-direction: row;
+  }
+  .uk-flex-column\@s {
+    flex-direction: column;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-flex-row\@m {
+    flex-direction: row;
+  }
+  .uk-flex-column\@m {
+    flex-direction: column;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-flex-row\@l {
+    flex-direction: row;
+  }
+  .uk-flex-column\@l {
+    flex-direction: column;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-flex-row\@xl {
+    flex-direction: row;
+  }
+  .uk-flex-column\@xl {
+    flex-direction: column;
+  }
+}
 /* Wrap
  ========================================================================== */
 .uk-flex-nowrap {
@@ -8337,6 +8443,9 @@ iframe[data-uk-cover] {
  * Initial: 0 1 auto
  * Content dimensions, but shrinks
  */
+.uk-flex-initial {
+  flex: initial;
+}
 /*
  * No Flex: 0 0 auto
  * Content dimensions
@@ -8358,6 +8467,54 @@ iframe[data-uk-cover] {
 .uk-flex-1 {
   flex: 1;
 }
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-flex-initial\@s {
+    flex: initial;
+  }
+  .uk-flex-none\@s {
+    flex: none;
+  }
+  .uk-flex-1\@s {
+    flex: 1;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-flex-initial\@m {
+    flex: initial;
+  }
+  .uk-flex-none\@m {
+    flex: none;
+  }
+  .uk-flex-1\@m {
+    flex: 1;
+  }
+}
+/* Desktop and bigger */
+@media (min-width: 1200px) {
+  .uk-flex-initial\@l {
+    flex: initial;
+  }
+  .uk-flex-none\@l {
+    flex: none;
+  }
+  .uk-flex-1\@l {
+    flex: 1;
+  }
+}
+/* Large screen and bigger */
+@media (min-width: 1600px) {
+  .uk-flex-initial\@xl {
+    flex: initial;
+  }
+  .uk-flex-none\@xl {
+    flex: none;
+  }
+  .uk-flex-1\@xl {
+    flex: 1;
+  }
+}
 /* ========================================================================
    Component: Margin
  ========================================================================== */