uikit 3.18.4-dev.379fa2bf1 → 3.18.4-dev.4d31fe360

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.18.4-dev.379fa2bf1",
+  "version": "3.18.4-dev.4d31fe360",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/components/internal/slider-transitioner.js

@@ -147,8 +147,8 @@ export function getMax(list) {
     return Math.max(0, getWidth(list) - dimensions(list).width);
 }
 
-export function getWidth(list) {
-    return sumBy(children(list), (el) => dimensions(el).width);
+export function getWidth(list, index) {
+    return sumBy(children(list).slice(0, index), (el) => dimensions(el).width);
 }
 
 function centerEl(el, list) {

package/src/js/components/slider.js

@@ -33,6 +33,7 @@ export default {
     props: {
         center: Boolean,
         sets: Boolean,
+        active: String,
     },
 
     data: {
@@ -42,6 +43,7 @@ export default {
         selList: '.uk-slider-items',
         selNav: '.uk-slider-nav',
         clsContainer: 'uk-slider-container',
+        active: 'all',
         Transitioner,
     },
 
@@ -235,7 +237,15 @@ export default {
         },
 
         updateActiveClasses(currentIndex = this.index) {
-            const actives = this._getTransitioner(currentIndex).getActives();
+            let actives = this._getTransitioner(currentIndex).getActives();
+
+            if (this.active !== 'all') {
+                let index = currentIndex;
+                if (this.active === 'center' && !this.center) {
+                    index += Math.ceil(actives.length / 2) - 1;
+                }
+                actives = [this.slides[this.getValidIndex(index)]];
+            }
 
             const activeClasses = [
                 this.clsActive,
@@ -296,15 +306,10 @@ export default {
 
         getIndexAt(percent) {
             let index = -1;
-            const firstSlideWidth = dimensions(this.slides[0]).width;
-            const lastSlideWidth = dimensions(last(this.slides)).width;
-            const scrollDist =
-                getWidth(this.list) -
-                (this.center
-                    ? firstSlideWidth / 2 + lastSlideWidth / 2
-                    : this.finite
-                      ? dimensions(this.list).width
-                      : lastSlideWidth);
+            const scrollDist = this.center
+                ? getWidth(this.list) -
+                  (dimensions(this.slides[0]).width / 2 + dimensions(last(this.slides)).width / 2)
+                : getWidth(this.list, this.maxIndex);
 
             let dist = percent * scrollDist;
             let slidePercent = 0;

package/src/js/components/tooltip.js

@@ -136,7 +136,7 @@ export default {
         // Clicking a button does not give it focus on all browsers and platforms
         // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus
         [`focus ${pointerEnter} ${pointerDown}`](e) {
-            if (!isTouch(e)) {
+            if (!isTouch(e) || e.type === pointerDown) {
                 this.show();
             }
         },

package/src/less/components/flex.less

@@ -29,7 +29,6 @@
 .uk-flex-between { justify-content: space-between; }
 .uk-flex-around { justify-content: space-around; }
 
-
 /* Phone landscape and bigger */
 @media (min-width: @breakpoint-small) {
 
@@ -85,6 +84,46 @@
 .uk-flex-middle { align-items: center; }
 .uk-flex-bottom { align-items: flex-end; }
 
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .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: @breakpoint-medium) {
+
+    .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: @breakpoint-large) {
+
+    .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: @breakpoint-xlarge) {
+
+    .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
  ========================================================================== */
@@ -95,6 +134,38 @@
 .uk-flex-column { flex-direction: column; }
 .uk-flex-column-reverse { flex-direction: column-reverse; }
 
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-flex-row\@s { flex-direction: row; }
+    .uk-flex-column\@s { flex-direction: column; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-flex-row\@m { flex-direction: row; }
+    .uk-flex-column\@m { flex-direction: column; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-flex-row\@l { flex-direction: row; }
+    .uk-flex-column\@l { flex-direction: column; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: @breakpoint-xlarge) {
+
+    .uk-flex-row\@xl { flex-direction: row; }
+    .uk-flex-column\@xl { flex-direction: column; }
+
+}
+
 
 /* Wrap
  ========================================================================== */
@@ -128,7 +199,6 @@
 .uk-flex-first { order: -1;}
 .uk-flex-last { order: 99;}
 
-
 /* Phone landscape and bigger */
 @media (min-width: @breakpoint-small) {
 
@@ -170,6 +240,8 @@
  * Content dimensions, but shrinks
  */
 
+.uk-flex-initial { flex: initial; }
+
 /*
  * No Flex: 0 0 auto
  * Content dimensions
@@ -191,6 +263,42 @@
 
 .uk-flex-1 { flex: 1; }
 
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .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: @breakpoint-medium) {
+
+    .uk-flex-initial\@m { flex: initial; }
+    .uk-flex-none\@m { flex: none; }
+    .uk-flex-1\@m { flex: 1; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .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: @breakpoint-xlarge) {
+
+    .uk-flex-initial\@xl { flex: initial; }
+    .uk-flex-none\@xl { flex: none; }
+    .uk-flex-1\@xl { flex: 1; }
+
+}
+
 
 // Hooks
 // ========================================================================

package/src/less/components/width.less

@@ -43,6 +43,7 @@
  *    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"]) {
@@ -61,7 +62,11 @@
     .uk-child-width-1-5\@s > * { width: 20%; }
     .uk-child-width-1-6\@s > * { width: ~'calc(100% * 1 / 6.001)'; }
 
-    .uk-child-width-auto\@s > * { width: auto; }
+    .uk-child-width-auto\@s > * {
+        width: auto;
+        /* 2 */
+        flex: initial;
+    }
     .uk-child-width-expand\@s > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
@@ -79,7 +84,10 @@
     .uk-child-width-1-5\@m > * { width: 20%; }
     .uk-child-width-1-6\@m > * { width: ~'calc(100% * 1 / 6.001)'; }
 
-    .uk-child-width-auto\@m > * { width: auto; }
+    .uk-child-width-auto\@m > * {
+        width: auto;
+        flex: initial;
+    }
     .uk-child-width-expand\@m > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
@@ -97,7 +105,10 @@
     .uk-child-width-1-5\@l > * { width: 20%; }
     .uk-child-width-1-6\@l > * { width: ~'calc(100% * 1 / 6.001)'; }
 
-    .uk-child-width-auto\@l > * { width: auto; }
+    .uk-child-width-auto\@l > * {
+        width: auto;
+        flex: initial;
+    }
     .uk-child-width-expand\@l > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
@@ -115,7 +126,10 @@
     .uk-child-width-1-5\@xl > * { width: 20%; }
     .uk-child-width-1-6\@xl > * { width: ~'calc(100% * 1 / 6.001)'; }
 
-    .uk-child-width-auto\@xl > * { width: auto; }
+    .uk-child-width-auto\@xl > * {
+        width: auto;
+        flex: initial;
+    }
     .uk-child-width-expand\@xl > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
@@ -212,7 +226,10 @@
     .uk-width-xxlarge\@s when (@deprecated = true) { width: @width-2xlarge-width; }
 
     /* Auto */
-    .uk-width-auto\@s { width: auto; }
+    .uk-width-auto\@s {
+        width: auto;
+        flex: initial;
+    }
 
     /* Expand */
     .uk-width-expand\@s {
@@ -258,7 +275,10 @@
     .uk-width-xxlarge\@m when (@deprecated = true) { width: @width-2xlarge-width; }
 
      /* Auto */
-    .uk-width-auto\@m { width: auto; }
+    .uk-width-auto\@m {
+        width: auto;
+        flex: initial;
+    }
 
     /* Expand */
     .uk-width-expand\@m {
@@ -304,7 +324,10 @@
     .uk-width-xxlarge\@l when (@deprecated = true) { width: @width-2xlarge-width; }
 
     /* Auto */
-    .uk-width-auto\@l { width: auto; }
+    .uk-width-auto\@l {
+        width: auto;
+        flex: initial;
+    }
 
     /* Expand */
     .uk-width-expand\@l {
@@ -350,7 +373,10 @@
     .uk-width-xxlarge\@xl when (@deprecated = true) { width: @width-2xlarge-width; }
 
     /* Auto */
-    .uk-width-auto\@xl { width: auto; }
+    .uk-width-auto\@xl {
+        width: auto;
+        flex: initial;
+    }
 
     /* Expand */
     .uk-width-expand\@xl {

package/src/less/theme/text.less

@@ -14,7 +14,7 @@
 @text-meta-link-color:                          @text-meta-color;
 @text-meta-link-hover-color:                    @global-color;
 
-@internal-text-background-color-gradient:         linear-gradient(90deg, @text-background-color 0%, spin(@text-background-color, 40%) 100%);
+@internal-text-background-color-gradient:         linear-gradient(90deg, @text-background-color 0%, spin(@text-background-color, 40) 100%);
 
 
 // Style modifiers

package/src/scss/components/flex.scss

@@ -29,7 +29,6 @@
 .uk-flex-between { justify-content: space-between; }
 .uk-flex-around { justify-content: space-around; }
 
-
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
 
@@ -85,6 +84,46 @@
 .uk-flex-middle { align-items: center; }
 .uk-flex-bottom { align-items: flex-end; }
 
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .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: $breakpoint-medium) {
+
+    .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: $breakpoint-large) {
+
+    .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: $breakpoint-xlarge) {
+
+    .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
  ========================================================================== */
@@ -95,6 +134,38 @@
 .uk-flex-column { flex-direction: column; }
 .uk-flex-column-reverse { flex-direction: column-reverse; }
 
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-flex-row\@s { flex-direction: row; }
+    .uk-flex-column\@s { flex-direction: column; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-flex-row\@m { flex-direction: row; }
+    .uk-flex-column\@m { flex-direction: column; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-flex-row\@l { flex-direction: row; }
+    .uk-flex-column\@l { flex-direction: column; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-flex-row\@xl { flex-direction: row; }
+    .uk-flex-column\@xl { flex-direction: column; }
+
+}
+
 
 /* Wrap
  ========================================================================== */
@@ -128,7 +199,6 @@
 .uk-flex-first { order: -1;}
 .uk-flex-last { order: 99;}
 
-
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
 
@@ -170,6 +240,8 @@
  * Content dimensions, but shrinks
  */
 
+.uk-flex-initial { flex: initial; }
+
 /*
  * No Flex: 0 0 auto
  * Content dimensions
@@ -191,6 +263,42 @@
 
 .uk-flex-1 { flex: 1; }
 
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .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: $breakpoint-medium) {
+
+    .uk-flex-initial\@m { flex: initial; }
+    .uk-flex-none\@m { flex: none; }
+    .uk-flex-1\@m { flex: 1; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .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: $breakpoint-xlarge) {
+
+    .uk-flex-initial\@xl { flex: initial; }
+    .uk-flex-none\@xl { flex: none; }
+    .uk-flex-1\@xl { flex: 1; }
+
+}
+
 
 // Hooks
 // ========================================================================

package/src/scss/components/width.scss

@@ -38,6 +38,7 @@
  *    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"]) {
@@ -56,7 +57,11 @@
     .uk-child-width-1-5\@s > * { width: 20%; }
     .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); }
 
-    .uk-child-width-auto\@s > * { width: auto; }
+    .uk-child-width-auto\@s > * {
+        width: auto;
+        /* 2 */
+        flex: initial;
+    }
     .uk-child-width-expand\@s > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
@@ -74,7 +79,10 @@
     .uk-child-width-1-5\@m > * { width: 20%; }
     .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); }
 
-    .uk-child-width-auto\@m > * { width: auto; }
+    .uk-child-width-auto\@m > * {
+        width: auto;
+        flex: initial;
+    }
     .uk-child-width-expand\@m > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
@@ -92,7 +100,10 @@
     .uk-child-width-1-5\@l > * { width: 20%; }
     .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); }
 
-    .uk-child-width-auto\@l > * { width: auto; }
+    .uk-child-width-auto\@l > * {
+        width: auto;
+        flex: initial;
+    }
     .uk-child-width-expand\@l > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
@@ -110,7 +121,10 @@
     .uk-child-width-1-5\@xl > * { width: 20%; }
     .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); }
 
-    .uk-child-width-auto\@xl > * { width: auto; }
+    .uk-child-width-auto\@xl > * {
+        width: auto;
+        flex: initial;
+    }
     .uk-child-width-expand\@xl > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
@@ -211,7 +225,10 @@
 }
 
     /* Auto */
-    .uk-width-auto\@s { width: auto; }
+    .uk-width-auto\@s {
+        width: auto;
+        flex: initial;
+    }
 
     /* Expand */
     .uk-width-expand\@s {
@@ -259,7 +276,10 @@
 }
 
      /* Auto */
-    .uk-width-auto\@m { width: auto; }
+    .uk-width-auto\@m {
+        width: auto;
+        flex: initial;
+    }
 
     /* Expand */
     .uk-width-expand\@m {
@@ -307,7 +327,10 @@
 }
 
     /* Auto */
-    .uk-width-auto\@l { width: auto; }
+    .uk-width-auto\@l {
+        width: auto;
+        flex: initial;
+    }
 
     /* Expand */
     .uk-width-expand\@l {
@@ -355,7 +378,10 @@
 }
 
     /* Auto */
-    .uk-width-auto\@xl { width: auto; }
+    .uk-width-auto\@xl {
+        width: auto;
+        flex: initial;
+    }
 
     /* Expand */
     .uk-width-expand\@xl {

package/src/scss/variables-theme.scss

@@ -1288,7 +1288,7 @@ $table-striped-border-width: $global-border-width !default;
 $table-striped-border: $global-border !default;
 $text-meta-link-color: $text-meta-color !default;
 $text-meta-link-hover-color: $global-color !default;
-$internal-text-background-color-gradient: linear-gradient(90deg, $text-background-color 0%, spin($text-background-color, 40%) 100%) !default;
+$internal-text-background-color-gradient: linear-gradient(90deg, $text-background-color 0%, adjust-hue($text-background-color, 40) 100%) !default;
 $thumbnav-item-gradient: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.4)) !default;
 $thumbnav-item-hover-opacity: 0 !default;
 $thumbnav-item-active-opacity: 0 !default;

package/tests/slider.html

@@ -41,6 +41,11 @@
                     <option value="0">Single</option>
                     <option value="1">Sets</option>
                 </select>
+                <select id="js-active-switcher" class="uk-select uk-form-width-small" aria-label="Active switcher">
+                    <option value="">All</option>
+                    <option value="first">First</option>
+                    <option value="center">Center</option>
+                </select>
             </div>
 
             <h2>Content Widths</h2>
@@ -577,6 +582,12 @@
                             <td>0</td>
                             <td>Slider item to show. 0 based index.</td>
                         </tr>
+                        <tr>
+                            <td><code>active</code></td>
+                            <td>String</td>
+                            <td>all</td>
+                            <td>Slider item/items to apply the transition active class to (all|first|center).</td>
+                        </tr>
                         <tr>
                             <td><code>pause-on-hover</code></td>
                             <td>Boolean</td>
@@ -646,7 +657,7 @@
         <script>
 
             const {attr, $$, on} = UIkit.util;
-            for (const attribute of ['finite', 'center', 'sets']) {
+            for (const attribute of ['finite', 'center', 'sets', 'active']) {
                 on(`#js-${attribute}-switcher`, 'change', e =>
                     attr($$('[uk-slider]'), attribute, e.target.value)
                 );

package/tests/slideshow.html

@@ -105,14 +105,14 @@
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen loading="lazy" uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">YouTube</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen loading="lazy" uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">Vimeo</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>