uikit 3.21.14-dev.028df7be8 → 3.21.14-dev.2e8a07c7e

package/src/js/mixin/slider-drag.js

@@ -17,7 +17,7 @@ const pointerUpOptions = { passive: true, capture: true };
 const pointerDown = 'touchstart mousedown';
 const pointerMove = 'touchmove mousemove';
 const pointerUp = 'touchend touchcancel mouseup click input scroll';
-const preventClick = (e) => e.preventDefault();
+
 export default {
     props: {
         draggable: Boolean,
@@ -120,10 +120,6 @@ export default {
                 return;
             }
 
-            if (!this.dragging) {
-                on(this.list, 'click', preventClick, pointerOptions);
-            }
-
             e.cancelable && e.preventDefault();
 
             this.dragging = true;
@@ -188,6 +184,8 @@ export default {
             off(document, pointerUp, this.end, pointerUpOptions);
 
             if (this.dragging) {
+                setTimeout(on(this.list, 'click', (e) => e.preventDefault(), pointerOptions));
+
                 this.dragging = null;
 
                 if (this.index === this.prevIndex) {
@@ -202,6 +200,8 @@ export default {
                     this.index = dirChange ? this.index : this.prevIndex;
 
                     if (dirChange) {
+                        trigger(this.slides[this.prevIndex], 'itemhidden', [this]);
+                        trigger(this.slides[this.index], 'itemshown', [this]);
                         this.percent = 1 - this.percent;
                     }
 
@@ -214,7 +214,6 @@ export default {
                 }
             }
 
-            setTimeout(() => off(this.list, 'click', preventClick, pointerOptions));
             css(this.list, { userSelect: '' });
 
             this.drag = this.percent = null;

package/src/js/mixin/slider-nav.js

@@ -211,7 +211,7 @@ export default {
                     const active = item === index;
 
                     toggleClass(el, this.clsActive, active);
-                    toggleClass(button, 'uk-disabled', this.parallax);
+                    toggleClass(button, 'uk-disabled', !!this.parallax);
 
                     attr(button, {
                         'aria-selected': active,

package/src/js/mixin/slider.js

@@ -101,7 +101,7 @@ export default {
     },
 
     methods: {
-        show(index, force = false) {
+        async show(index, force = false) {
             if (this.dragging || !this.length || this.parallax) {
                 return;
             }
@@ -149,22 +149,20 @@ export default {
                 return;
             }
 
-            const promise = this._show(prev, next, force).then(() => {
-                prev && trigger(prev, 'itemhidden', [this]);
-                trigger(next, 'itemshown', [this]);
+            prev && trigger(prev, 'itemhide', [this]);
+            trigger(next, 'itemshow', [this]);
 
-                stack.shift();
-                this._transitioner = null;
+            await this._show(prev, next, force);
 
-                if (stack.length) {
-                    requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
-                }
-            });
+            prev && trigger(prev, 'itemhidden', [this]);
+            trigger(next, 'itemshown', [this]);
 
-            prev && trigger(prev, 'itemhide', [this]);
-            trigger(next, 'itemshow', [this]);
+            stack.shift();
+            this._transitioner = null;
 
-            return promise;
+            if (stack.length) {
+                requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
+            }
         },
 
         getIndex(index = this.index, prev = this.index) {

package/src/js/mixin/slideshow.js

@@ -31,7 +31,7 @@ export default {
     observe: resize(),
 
     events: {
-        beforeitemshow({ target }) {
+        itemshow({ target }) {
             addClass(target, this.clsActive);
         },
 

package/src/js/mixin/togglable.js

@@ -20,6 +20,7 @@ import {
     unwrap,
     wrapInner,
 } from 'uikit-util';
+import { storeScrollPosition } from './position';
 
 export default {
     props: {
@@ -79,6 +80,12 @@ export default {
                         const done = () => {
                             removeClass(el, cls);
                             trigger(el, show ? 'shown' : 'hidden', [this]);
+
+                            if (show) {
+                                const restoreScrollPosition = storeScrollPosition(el);
+                                $$('[autofocus]', el).find(isVisible)?.focus();
+                                restoreScrollPosition();
+                            }
                         };
 
                         return promise
@@ -125,8 +132,6 @@ export default {
             if (changed) {
                 trigger(el, 'toggled', [toggled, this]);
             }
-
-            $$('[autofocus]', el).some((el) => (isVisible(el) ? el.focus() || true : el.blur()));
         },
     },
 };

package/src/js/util/dom.js

@@ -18,7 +18,9 @@ export function isTag(element, ...tagNames) {
 
 export function empty(element) {
     element = $(element);
-    element.innerHTML = '';
+    if (element) {
+        element.innerHTML = '';
+    }
     return element;
 }
 

package/src/js/util/filter.js

@@ -84,6 +84,8 @@ export function getTargetedElement(el) {
     if (isSameSiteAnchor(el)) {
         const { hash, ownerDocument } = toNode(el);
         const id = decodeURIComponent(hash).slice(1);
-        return ownerDocument.getElementById(id) || ownerDocument.getElementsByName(id)[0];
+        return id
+            ? ownerDocument.getElementById(id) || ownerDocument.getElementsByName(id)[0]
+            : ownerDocument;
     }
 }

package/src/js/util/player.js

@@ -32,10 +32,6 @@ export function mute(el) {
     }
 }
 
-export function isVideo(el) {
-    return isHTML5(el) || isIFrame(el);
-}
-
 function isHTML5(el) {
     return isTag(el, 'video');
 }

package/src/less/components/background.less

@@ -69,15 +69,7 @@
 /* Attachment
  ========================================================================== */
 
-/*
- * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
- */
-
-.uk-background-fixed {
-    background-attachment: fixed;
-    /* 1 */
-    backface-visibility: hidden;
-}
+.uk-background-fixed { background-attachment: fixed; }
 
 /*
  * Exclude touch devices because `fixed` doesn't work on iOS and Android

package/src/less/components/breadcrumb.less

@@ -28,12 +28,16 @@
  ========================================================================== */
 
 /*
- * Reset list
+ * 1. Reset list
+ * 2. Remove space between elements
  */
 
 .uk-breadcrumb {
+    /* 1 */
     padding: 0;
     list-style: none;
+    /* 2 */
+    font-size: 0;
     .hook-breadcrumb();
 }
 
@@ -83,7 +87,7 @@
     content: @breadcrumb-divider;
     display: inline-block;
     /* 1 */
-    margin: 0 @breadcrumb-divider-margin-horizontal 0 ~'calc(@{breadcrumb-divider-margin-horizontal} - 4px)';
+    margin: 0 @breadcrumb-divider-margin-horizontal;
     /* 2 */
     font-size: @breadcrumb-divider-font-size;
     color: @breadcrumb-divider-color;

package/src/less/components/button.less

@@ -350,7 +350,7 @@
  ========================================================================== */
 
 /*
- * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
+ * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
  * 2. Behave like button
  * 3. Create position context
  */

package/src/less/components/form-range.less

@@ -137,3 +137,55 @@
 .hook-form-range-track-focus() {}
 .hook-form-range-thumb() {}
 .hook-form-range-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-form-range-track-background:          darken(@inverse-global-muted-background; 5%);
+@inverse-form-range-track-focus-background:    fadein(@inverse-form-range-track-background, 5%);
+
+@inverse-form-range-thumb-background:          fadein(@inverse-global-color, 100%);
+
+.hook-inverse() {
+
+    /* Webkit */
+    .uk-range::-webkit-slider-runnable-track {
+        background: @inverse-form-range-track-background;
+        .hook-inverse-form-range-track();
+    }
+
+    .uk-range:focus::-webkit-slider-runnable-track,
+    .uk-range:active::-webkit-slider-runnable-track {
+        background: @inverse-form-range-track-focus-background;
+        .hook-inverse-form-range-track-focus();
+    }
+
+    /* Firefox */
+    .uk-range::-moz-range-track {
+        background: @inverse-form-range-track-background;
+        .hook-inverse-form-range-track();
+    }
+
+    .uk-range:focus::-moz-range-track {
+        background: @inverse-form-range-track-focus-background;
+        .hook-inverse-form-range-track-focus();
+    }
+
+    /* Webkit */
+    .uk-range::-webkit-slider-thumb {
+        background: @inverse-form-range-thumb-background;
+        .hook-inverse-form-range-thumb();
+    }
+
+    /* Firefox */
+    .uk-range::-moz-range-thumb {
+        background: @inverse-form-range-thumb-background;
+        .hook-inverse-form-range-thumb();
+    }
+
+}
+
+.hook-inverse-form-range-track() {}
+.hook-inverse-form-range-track-focus() {}
+.hook-inverse-form-range-thumb() {}

package/src/less/components/form.less

@@ -604,7 +604,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
  * 1. Position and resize the form control to always cover its container
  * 2. Required for Firefox for positioning to the left
  * 3. Required for Webkit to make `height` work
- * 4. Hide controle and show cursor
+ * 4. Hide controls and show cursor
  * 5. Needed for the cursor
  * 6. Clip height caused by 5. Needed for Webkit only
  */

package/src/less/components/lightbox.less

@@ -5,11 +5,14 @@
 //
 // Sub-objects:     `uk-lightbox-page`
 //                  `uk-lightbox-items`
-//                  `uk-lightbox-toolbar`
-//                  `uk-lightbox-toolbar-icon`
-//                  `uk-lightbox-button`
+//                  `uk-lightbox-items-fit`
+//                  `uk-lightbox-thumbnav`
+//                  `uk-lightbox-thumbnav-vertical`
+//                  `uk-lightbox-dotnav`
 //                  `uk-lightbox-caption`
+//                  `uk-lightbox-counter`
 //                  `uk-lightbox-iframe`
+//                  `uk-lightbox-zoom`
 //
 // States:          `uk-open`
 //
@@ -21,28 +24,20 @@
 
 @lightbox-z-index:                              @global-z-index + 10;
 @lightbox-background:                           #000;
+@lightbox-color-mode:                           light;
 
 @lightbox-focus-outline:                        rgba(255,255,255,0.7);
 
-@lightbox-item-color:                           rgba(255,255,255,0.7);
 @lightbox-item-max-width:                       100vw;
 @lightbox-item-max-height:                      100vh;
 
-@lightbox-toolbar-padding-vertical:             10px;
-@lightbox-toolbar-padding-horizontal:           10px;
-@lightbox-toolbar-background:                   rgba(0,0,0,0.3);
-@lightbox-toolbar-color:                        rgba(255,255,255,0.7);
+@lightbox-thumbnav-vertical-width:              100px;
+@lightbox-thumbnav-height:                      100px;
 
-@lightbox-toolbar-icon-padding:                 5px;
-@lightbox-toolbar-icon-color:                   rgba(255,255,255,0.7);
-
-@lightbox-toolbar-icon-hover-color:             #fff;
-
-@lightbox-button-size:                          50px;
-@lightbox-button-background:                    @lightbox-toolbar-background;
-@lightbox-button-color:                         rgba(255,255,255,0.7);
-
-@lightbox-button-hover-color:                   #fff;
+@lightbox-caption-padding-vertical:             10px;
+@lightbox-caption-padding-horizontal:           10px;
+@lightbox-caption-background:                   rgba(0,0,0,0.3);
+@lightbox-caption-color:                        rgba(255,255,255,0.7);
 
 
 /* ========================================================================
@@ -60,6 +55,7 @@
  */
 
 .uk-lightbox {
+    --uk-inverse: @lightbox-color-mode;
     /* 1 */
     display: none;
     /* 2 */
@@ -108,15 +104,24 @@
 .uk-lightbox-page { overflow: hidden; }
 
 
-/* Item
+/* Items
  ========================================================================== */
 
+/*
+ * Reset list
+ */
+
+.uk-lightbox-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
 /*
  * 1. Center child within the viewport
  * 2. Not visible by default
- * 3. Color needed for spinner icon
- * 4. Optimize animation
- * 5. Responsiveness
+ * 3. Optimize animation
+ * 4. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
  */
 
@@ -130,96 +135,64 @@
     /* 2 */
     display: none;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
     /* 3 */
-    color: @lightbox-item-color;
-    /* 4 */
     will-change: transform, opacity;
+    /* 4 */
+    overflow: auto;
     .hook-lightbox-item();
 }
 
-/* 5 */
-.uk-lightbox-items > * > * {
+/* 2 */
+.uk-lightbox-items > .uk-active { display: flex; }
+
+.uk-lightbox-items-fit > * { align-items: center; }
+
+/* 4 */
+.uk-lightbox-items-fit > * > * {
     max-width: @lightbox-item-max-width;
     max-height: @lightbox-item-max-height;
 }
 
-.uk-lightbox-items > * > :not(iframe) {
+.uk-lightbox-items-fit > * > :not(iframe) {
     width: auto;
     height: auto;
 }
 
-.uk-lightbox-items > .uk-active { display: flex; }
-
-/* Toolbar
- ========================================================================== */
-
-.uk-lightbox-toolbar {
-    padding: @lightbox-toolbar-padding-vertical @lightbox-toolbar-padding-horizontal;
-    background: @lightbox-toolbar-background;
-    color: @lightbox-toolbar-color;
-    .hook-lightbox-toolbar();
-}
-
-.uk-lightbox-toolbar > * { color: @lightbox-toolbar-color; }
+/* Zoom Cursor */
+.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover { cursor: zoom-in; }
+.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover { cursor: zoom-out; }
 
 
-/* Toolbar Icon (Close)
+/* Navs
  ========================================================================== */
 
-.uk-lightbox-toolbar-icon {
-    padding: @lightbox-toolbar-icon-padding;
-    color: @lightbox-toolbar-icon-color;
-    .hook-lightbox-toolbar-icon();
-}
+.uk-lightbox-thumbnav-vertical :where(img, video) { max-width: @lightbox-thumbnav-vertical-width; }
+.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video) { max-height: @lightbox-thumbnav-height; }
 
-/*
- * Hover
- */
+.uk-lightbox-thumbnav:empty,
+.uk-lightbox-dotnav:empty { display: none; }
 
-.uk-lightbox-toolbar-icon:hover {
-    color: @lightbox-toolbar-icon-hover-color;
-    .hook-lightbox-toolbar-icon-hover();
-}
 
-
-
-/* Button (Slidenav)
+/* Caption
  ========================================================================== */
 
-/*
- * 1. Center icon vertically and horizontally
- */
-
-.uk-lightbox-button {
-    box-sizing: border-box;
-    width: @lightbox-button-size;
-    height: @lightbox-button-size;
-    background: @lightbox-button-background;
-    color: @lightbox-button-color;
-    /* 1 */
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    .hook-lightbox-button();
-}
+.uk-lightbox-caption:empty { display: none; }
 
-/* Hover */
-.uk-lightbox-button:hover {
-    color: @lightbox-button-hover-color;
-    .hook-lightbox-button-hover();
+.uk-lightbox-caption {
+    padding: @lightbox-caption-padding-vertical @lightbox-caption-padding-horizontal;
+    background: @lightbox-caption-background;
+    color: @lightbox-caption-color;
+    .hook-lightbox-caption();
 }
 
-/* OnClick */
-.uk-lightbox-button:active {
-    .hook-lightbox-button-active();
-}
+.uk-lightbox-caption > * { color: @lightbox-caption-color; }
 
 
-/* Caption
+/* Counter
  ========================================================================== */
 
-.uk-lightbox-caption:empty { display: none; }
+.uk-lightbox-counter:empty { display: none; }
 
 
 /* Iframe
@@ -238,10 +211,5 @@
 
 .hook-lightbox() {}
 .hook-lightbox-item() {}
-.hook-lightbox-toolbar() {}
-.hook-lightbox-toolbar-icon() {}
-.hook-lightbox-toolbar-icon-hover() {}
-.hook-lightbox-button() {}
-.hook-lightbox-button-hover() {}
-.hook-lightbox-button-active() {}
+.hook-lightbox-caption() {}
 .hook-lightbox-misc() {}

package/src/less/components/margin.less

@@ -17,6 +17,8 @@
 
 @margin-margin:                                        @global-margin;
 
+@margin-xsmall-margin:                                 5px;
+
 @margin-small-margin:                                  @global-small-margin;
 
 @margin-medium-margin:                                 @global-medium-margin;
@@ -45,6 +47,18 @@
 .uk-margin-right { margin-right: @margin-margin !important; }
 
 
+/* XSmall
+ ========================================================================== */
+
+.uk-margin-xsmall { margin-bottom: @margin-xsmall-margin; }
+* + .uk-margin-xsmall { margin-top: @margin-xsmall-margin !important; }
+
+.uk-margin-xsmall-top { margin-top: @margin-xsmall-margin !important; }
+.uk-margin-xsmall-bottom { margin-bottom: @margin-xsmall-margin !important; }
+.uk-margin-xsmall-left { margin-left: @margin-xsmall-margin !important; }
+.uk-margin-xsmall-right { margin-right: @margin-xsmall-margin !important; }
+
+
 /* Small
  ========================================================================== */