uikit 3.18.4-dev.a1e58d323 → 3.18.4-dev.b116fc18d

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.a1e58d323",
+  "version": "3.18.4-dev.b116fc18d",
   "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

@@ -11,6 +11,7 @@ import {
     getIndex,
     hasOwn,
     includes,
+    isNumeric,
     isVisible,
     last,
     selFocusable,
@@ -33,6 +34,7 @@ export default {
     props: {
         center: Boolean,
         sets: Boolean,
+        focus: String,
     },
 
     data: {
@@ -42,6 +44,7 @@ export default {
         selList: '.uk-slider-items',
         selNav: '.uk-slider-nav',
         clsContainer: 'uk-slider-container',
+        focus: 'all',
         Transitioner,
     },
 
@@ -235,7 +238,12 @@ export default {
         },
 
         updateActiveClasses(currentIndex = this.index) {
-            const actives = this._getTransitioner(currentIndex).getActives();
+            let actives = this._getTransitioner().getActives();
+
+            if (isNumeric(this.focus)) {
+                const focus = Math.min(actives.length - 1, Number(this.focus));
+                actives = [this.slides[this.getValidIndex(currentIndex + focus)]];
+            }
 
             const activeClasses = [
                 this.clsActive,
@@ -296,11 +304,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 : 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/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
  ========================================================================== */

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
  ========================================================================== */

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

@@ -577,6 +577,12 @@
                             <td>0</td>
                             <td>Slider item to show. 0 based index.</td>
                         </tr>
+                        <tr>
+                            <td><code>focus</code></td>
+                            <td>String, Number</td>
+                            <td>'all'</td>
+                            <td>Slider item (0 based index) or all visible items (all) to apply the activated class to.</td>
+                        </tr>
                         <tr>
                             <td><code>pause-on-hover</code></td>
                             <td>Boolean</td>