uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.0856bd8a6

package/src/js/util/dom.js

@@ -46,8 +46,8 @@ export function remove(element) {
 export function wrapAll(element, structure) {
     structure = toNode(before(element, structure));
 
-    while (structure.firstChild) {
-        structure = structure.firstChild;
+    while (structure.firstElementChild) {
+        structure = structure.firstElementChild;
     }
 
     append(structure, element);

package/src/js/util/mouse.js

@@ -1,11 +1,8 @@
+import { dimensions } from './dimensions';
 import { getEventPos, on } from './event';
 import { last, pointInRect } from './lang';
 
-export function MouseTracker() {}
-
-MouseTracker.prototype = {
-    positions: [],
-
+export class MouseTracker {
     init() {
         this.positions = [];
 
@@ -22,19 +19,19 @@ MouseTracker.prototype = {
                 this.positions.shift();
             }
         }, 50);
-    },
+    }
 
     cancel() {
         this.unbind?.();
         clearInterval(this.interval);
-    },
+    }
 
     movesTo(target) {
-        if (this.positions.length < 2) {
+        if (!this.positions || this.positions.length < 2) {
             return false;
         }
 
-        const p = target.getBoundingClientRect();
+        const p = dimensions(target);
         const { left, right, top, bottom } = p;
 
         const [prevPosition] = this.positions;
@@ -60,8 +57,8 @@ MouseTracker.prototype = {
             const intersection = intersect(path, diagonal);
             return intersection && pointInRect(intersection, p);
         });
-    },
-};
+    }
+}
 
 // Inspired by http://paulbourke.net/geometry/pointlineplane/
 function intersect([{ x: x1, y: y1 }, { x: x2, y: y2 }], [{ x: x3, y: y3 }, { x: x4, y: y4 }]) {

package/src/js/util/scroll.js

@@ -0,0 +1,58 @@
+import { css, getEventPos, matches, on, once, scrollParents, width } from 'uikit-util';
+
+let prevented;
+export function preventBackgroundScroll(el) {
+    // 'overscroll-behavior: contain' only works consistently if el overflows (Safari)
+    const off = on(el, 'touchstart', (e) => {
+        if (e.targetTouches.length !== 1 || matches(e.target, 'input[type="range"')) {
+            return;
+        }
+
+        let prev = getEventPos(e).y;
+
+        const offMove = on(
+            el,
+            'touchmove',
+            (e) => {
+                const pos = getEventPos(e).y;
+                if (pos === prev) {
+                    return;
+                }
+                prev = pos;
+
+                if (
+                    !scrollParents(e.target).some((scrollParent) => {
+                        if (!el.contains(scrollParent)) {
+                            return false;
+                        }
+
+                        let { scrollHeight, clientHeight } = scrollParent;
+                        return clientHeight < scrollHeight;
+                    })
+                ) {
+                    e.preventDefault();
+                }
+            },
+            { passive: false },
+        );
+
+        once(el, 'scroll touchend touchcanel', offMove, { capture: true });
+    });
+
+    if (prevented) {
+        return off;
+    }
+    prevented = true;
+
+    const { scrollingElement } = document;
+    css(scrollingElement, {
+        overflowY: CSS.supports('overflow', 'clip') ? 'clip' : 'hidden',
+        touchAction: 'none',
+        paddingRight: width(window) - scrollingElement.clientWidth || '',
+    });
+    return () => {
+        prevented = false;
+        off();
+        css(scrollingElement, { overflowY: '', touchAction: '', paddingRight: '' });
+    };
+}

package/src/js/util/selector.js

@@ -64,7 +64,9 @@ function _query(selector, context = document, queryFn) {
             }
         }
 
-        context = document;
+        if (!isDocument(context)) {
+            context = context.ownerDocument;
+        }
     }
 
     try {
@@ -74,7 +76,7 @@ function _query(selector, context = document, queryFn) {
     }
 }
 
-const selectorRe = /.*?[^\\](?:,|$)/g;
+const selectorRe = /.*?[^\\](?![^(]*\))(?:,|$)/g;
 
 const splitSelector = memoize((selector) =>
     selector.match(selectorRe).map((selector) => selector.replace(/,$/, '').trim()),

package/src/js/util/style.js

@@ -1,5 +1,4 @@
 import {
-    each,
     hyphenate,
     isArray,
     isNumber,
@@ -56,8 +55,9 @@ export function css(element, property, value, priority) {
             }
             return props;
         } else if (isObject(property)) {
-            priority = value;
-            each(property, (value, property) => css(element, property, value, priority));
+            for (const prop in property) {
+                css(element, prop, property[prop], value);
+            }
         }
     }
     return elements[0];

package/src/js/util/viewport.js

@@ -1,4 +1,5 @@
-import { offset, offsetPosition } from './dimensions';
+import { hasClass } from './class';
+import { dimensions, offset, offsetPosition } from './dimensions';
 import { isVisible, parent, parents } from './filter';
 import {
     clamp,
@@ -128,7 +129,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
     const start = Math.max(0, elementOffsetTop - viewportHeight + startOffset);
     const end = Math.min(maxScroll, elementOffsetTop + element.offsetHeight - endOffset);
 
-    return clamp((scrollTop - start) / (end - start));
+    return start < end ? clamp((scrollTop - start) / (end - start)) : 1;
 }
 
 export function scrollParents(element, scrollable = false, props = []) {
@@ -186,7 +187,7 @@ export function offsetViewport(scrollElement) {
     ]) {
         if (isWindow(viewportElement)) {
             // iOS 12 returns <body> as scrollingElement
-            viewportElement = window.document.documentElement;
+            viewportElement = scrollElement.ownerDocument;
         } else {
             rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         }
@@ -200,9 +201,12 @@ export function offsetViewport(scrollElement) {
 }
 
 export function getCoveringElement(target) {
-    return target.ownerDocument.elementsFromPoint(offset(target).left, 0).find(
+    const { left, width, top } = dimensions(target);
+    return target.ownerDocument.elementsFromPoint(left + width / 2, top).find(
         (el) =>
             !el.contains(target) &&
+            // If e.g. Offcanvas is not yet closed
+            !hasClass(el, 'uk-togglable-leave') &&
             ((hasPosition(el, 'fixed') &&
                 zIndex(
                     parents(target)

package/src/less/components/align.less

@@ -25,12 +25,12 @@
  * Default
  */
 
-[class*='uk-align'] {
+[class*="uk-align"] {
     display: block;
     margin-bottom: @align-margin-vertical;
 }
 
-* + [class*='uk-align'] { margin-top: @align-margin-vertical; }
+* + [class*="uk-align"] { margin-top: @align-margin-vertical; }
 
 /*
  * Center

package/src/less/components/animation.less

@@ -40,7 +40,7 @@
    Component: Animation
  ========================================================================== */
 
-[class*='uk-animation-'] { animation: @animation-duration ease-out both; }
+[class*="uk-animation-"] { animation: @animation-duration ease-out both; }
 
 
 /* Animations
@@ -138,7 +138,7 @@
 /* Toggle animation based on the State of the Parent Element
  ========================================================================== */
 
-.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] { animation-name: none; }
+.uk-animation-toggle:not(:hover):not(:focus) [class*="uk-animation-"] { animation-name: none; }
 
 
 /* Keyframes used by animation classes

package/src/less/components/article.less

@@ -95,11 +95,11 @@
 
 .hook-inverse() {
 
-    .uk-article-title  {
+    .uk-article-title {
         .hook-inverse-article-title();
     }
 
-    .uk-article-meta  {
+    .uk-article-meta {
         color: @inverse-article-meta-color;
         .hook-inverse-article-meta();
     }

package/src/less/components/base.less

@@ -446,7 +446,7 @@ hr, .uk-hr {
 
 /* Add margin if adjacent element */
 * + hr,
-* + .uk-hr { margin-top: @base-hr-margin-vertical }
+* + .uk-hr { margin-top: @base-hr-margin-vertical; }
 
 
 /* Address
@@ -476,7 +476,7 @@ blockquote {
 blockquote p:last-of-type { margin-bottom: 0; }
 
 blockquote footer {
-    margin-top:  @base-blockquote-footer-margin-top;
+    margin-top: @base-blockquote-footer-margin-top;
     font-size: @base-blockquote-footer-font-size;
     line-height: @base-blockquote-footer-line-height;
     .hook-base-blockquote-footer();
@@ -608,7 +608,7 @@ template { display: none; }
     //
 
     a,
-    .uk-link  {
+    .uk-link {
         color: @inverse-base-link-color;
         .hook-inverse-base-link();
     }

package/src/less/components/card.less

@@ -60,6 +60,7 @@
 @card-default-color:                           @global-color;
 @card-default-title-color:                     @global-emphasis-color;
 @card-default-hover-background:                darken(@card-default-background, 5%);
+@card-default-color-mode:                      dark;
 
 @card-primary-background:                      @global-primary-background;
 @card-primary-color:                           @global-inverse-color;
@@ -148,13 +149,13 @@
  * Implemented by the theme
  */
 
-[class*='uk-card-media'] {
+[class*="uk-card-media"] {
     .hook-card-media();
 }
 
 .uk-card-media-top,
 .uk-grid-stack > .uk-card-media-left,
-.uk-grid-stack > .uk-card-media-right  {
+.uk-grid-stack > .uk-card-media-right {
     .hook-card-media-top();
 }
 
@@ -260,6 +261,12 @@
     .hook-card-default-footer();
 }
 
+// Color Mode
+.uk-card-default.uk-card-body:extend(.uk-light all) when (@card-default-color-mode = light) {}
+.uk-card-default > :not([class*="uk-card-media"]):extend(.uk-light all) when (@card-default-color-mode = light) {}
+.uk-card-default.uk-card-body:extend(.uk-dark all) when (@card-default-color-mode = dark) {}
+.uk-card-default > :not([class*="uk-card-media"]):extend(.uk-dark all) when (@card-default-color-mode = dark) {}
+
 /*
  * Primary
  */
@@ -282,9 +289,9 @@
 
 // Color Mode
 .uk-card-primary.uk-card-body:extend(.uk-light all) when (@card-primary-color-mode = light) {}
-.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-primary-color-mode = light) {}
+.uk-card-primary > :not([class*="uk-card-media"]):extend(.uk-light all) when (@card-primary-color-mode = light) {}
 .uk-card-primary.uk-card-body:extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
-.uk-card-primary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
+.uk-card-primary > :not([class*="uk-card-media"]):extend(.uk-dark all) when (@card-primary-color-mode = dark) {}
 
 /*
  * Secondary
@@ -308,9 +315,9 @@
 
 // Color Mode
 .uk-card-secondary.uk-card-body:extend(.uk-light all) when (@card-secondary-color-mode = light) {}
-.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-light all) when (@card-secondary-color-mode = light) {}
+.uk-card-secondary > :not([class*="uk-card-media"]):extend(.uk-light all) when (@card-secondary-color-mode = light) {}
 .uk-card-secondary.uk-card-body:extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
-.uk-card-secondary > :not([class*='uk-card-media']):extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
+.uk-card-secondary > :not([class*="uk-card-media"]):extend(.uk-dark all) when (@card-secondary-color-mode = dark) {}
 
 
 /* Size modifier

package/src/less/components/column.less

@@ -24,12 +24,12 @@
    Component: Column
  ========================================================================== */
 
-[class*='uk-column-'] { column-gap: @column-gutter; }
+[class*="uk-column-"] { column-gap: @column-gutter; }
 
 /* Desktop and bigger */
 @media (min-width: @breakpoint-large) {
 
-    [class*='uk-column-'] { column-gap: @column-gutter-l; }
+    [class*="uk-column-"] { column-gap: @column-gutter-l; }
 
 }
 
@@ -37,7 +37,7 @@
  * Fix image 1px line wrapping into the next column in Chrome
  */
 
-[class*='uk-column-'] img { transform: translate3d(0,0,0); }
+[class*="uk-column-"] img { transform: translate3d(0, 0, 0); }
 
 
 /* Divider

package/src/less/components/container.less

@@ -149,7 +149,7 @@
  */
 
 .uk-container-item-padding-remove-left,
-.uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal})' }
+.uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal})'; }
 
 .uk-container-item-padding-remove-left { margin-left: -@container-padding-horizontal; }
 .uk-container-item-padding-remove-right { margin-right: -@container-padding-horizontal; }
@@ -158,7 +158,7 @@
 @media (min-width: @breakpoint-small) {
 
     .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal-s})' }
+    .uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal-s})'; }
 
     .uk-container-item-padding-remove-left { margin-left: -@container-padding-horizontal-s; }
     .uk-container-item-padding-remove-right { margin-right: -@container-padding-horizontal-s; }
@@ -169,7 +169,7 @@
 @media (min-width: @breakpoint-medium) {
 
     .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal-m})' }
+    .uk-container-item-padding-remove-right { width: ~'calc(100% + @{container-padding-horizontal-m})'; }
 
     .uk-container-item-padding-remove-left { margin-left: -@container-padding-horizontal-m; }
     .uk-container-item-padding-remove-right { margin-right: -@container-padding-horizontal-m; }

package/src/less/components/divider.less

@@ -41,7 +41,7 @@
  * 2. Set margin if a `div` is used for semantical reason
  */
 
-[class*='uk-divider'] {
+[class*="uk-divider"] {
     /* 1 */
     border: none;
     /* 2 */
@@ -49,7 +49,7 @@
 }
 
 /* Add margin if adjacent element */
-* + [class*='uk-divider'] { margin-top: @divider-margin-vertical; }
+* + [class*="uk-divider"] { margin-top: @divider-margin-vertical; }
 
 
 /* Icon

package/src/less/components/dropbar.less

@@ -23,7 +23,7 @@
 @dropbar-padding-horizontal-m:                  @global-medium-gutter;
 @dropbar-background:                            @global-muted-background;
 @dropbar-color:                                 @global-color;
-@dropbar-color-mode:                            none;
+@dropbar-color-mode:                            dark;
 @dropbar-focus-outline:                         @base-focus-outline;
 
 @dropbar-large-padding-top:                     40px;

package/src/less/components/dropdown.less

@@ -21,7 +21,7 @@
 @dropdown-padding:                              15px;
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
-@dropdown-color-mode:                           none;
+@dropdown-color-mode:                           dark;
 @dropdown-focus-outline:                        @base-focus-outline;
 
 @dropdown-large-padding:                        40px;

package/src/less/components/dropnav.less

@@ -40,4 +40,4 @@
 
 .hook-dropnav-misc();
 
-.hook-dropnav-misc() {}
+.hook-dropnav-misc() {}

package/src/less/components/form.less

@@ -380,7 +380,7 @@ textarea.uk-form-large,
  */
 
 .uk-form-success,
-.uk-form-success:focus  {
+.uk-form-success:focus {
     color: @form-success-color;
     .hook-form-success();
 }

package/src/less/components/grid.less

@@ -118,7 +118,7 @@
 .uk-grid-small,
 .uk-grid-column-small { margin-left: -@grid-small-gutter-horizontal; }
 .uk-grid-small > *,
-.uk-grid-column-small > *  { padding-left: @grid-small-gutter-horizontal; }
+.uk-grid-column-small > * { padding-left: @grid-small-gutter-horizontal; }
 
 /* Vertical */
 .uk-grid + .uk-grid-small,
@@ -376,8 +376,8 @@
     flex-wrap: wrap;
 }
 
-.uk-grid-match > * > :not([class*='uk-width']),
-.uk-grid-item-match > :not([class*='uk-width']) {
+.uk-grid-match > * > :not([class*="uk-width"]),
+.uk-grid-item-match > :not([class*="uk-width"]) {
     /* 2 */
     box-sizing: border-box;
     width: 100%;

package/src/less/components/height.less

@@ -18,7 +18,7 @@
    Component: Height
  ========================================================================== */
 
-[class*='uk-height'] { box-sizing: border-box; }
+[class*="uk-height"] { box-sizing: border-box; }
 
 /*
  * Only works if parent element has a height set

package/src/less/components/icon.less

@@ -92,14 +92,14 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
  * Set the fill and stroke color of all SVG elements to the current text color
  */
 
-.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
-.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
+.uk-icon:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) { fill: currentcolor; }
+.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: currentcolor; }
 
 /*
  * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
  */
 
-.uk-icon > * { transform: translate(0,0); }
+.uk-icon > * { transform: translate(0, 0); }
 
 
 /* Image modifier

package/src/less/components/inverse.less

@@ -45,6 +45,18 @@
 
 }
 
+/*
+ * Pass dropbar behind color to JS
+ */
+
+* { --uk-inverse: initial; }
+
+.uk-light { --uk-inverse: light; }
+.uk-dark { --uk-inverse: dark; }
+
+.uk-inverse-light { --uk-inverse: light !important; }
+.uk-inverse-dark { --uk-inverse: dark !important; }
+
 
 // Hooks
 // ========================================================================

package/src/less/components/link.less

@@ -140,7 +140,7 @@ a.uk-link-reset,
 
     a.uk-link-muted:hover,
     .uk-link-muted a:hover,
-    .uk-link-toggle:hover .uk-link-muted  {
+    .uk-link-toggle:hover .uk-link-muted {
         color: @inverse-link-muted-hover-color;
         .hook-inverse-link-muted-hover();
     }

package/src/less/components/modal.less

@@ -265,7 +265,7 @@
  * Adopts `uk-close`
  ========================================================================== */
 
-[class*='uk-modal-close-'] {
+[class*="uk-modal-close-"] {
     position: absolute;
     z-index: @modal-z-index;
     top: @modal-close-position;
@@ -278,13 +278,13 @@
  * Remove margin from adjacent element
  */
 
-[class*='uk-modal-close-']:first-child + * { margin-top: 0; }
+[class*="uk-modal-close-"]:first-child + * { margin-top: 0; }
 
 /*
  * Hover
  */
 
-[class*='uk-modal-close-']:hover {
+[class*="uk-modal-close-"]:hover {
     .hook-modal-close-hover();
 }
 

package/src/less/components/nav.less

@@ -11,6 +11,10 @@
 //
 // Modifiers:       `uk-nav-default`
 //                  `uk-nav-primary`
+//                  `uk-nav-secondary`
+//                  `uk-nav-medium`
+//                  `uk-nav-large`
+//                  `uk-nav-xlarge`
 //                  `uk-nav-center`,
 //                  `uk-nav-divider`
 //
@@ -92,6 +96,21 @@
 @nav-secondary-sublist-item-hover-color:        @global-color;
 @nav-secondary-sublist-item-active-color:       @global-emphasis-color;
 
+@nav-medium-line-height:                        1;
+@nav-medium-font-size:                          @nav-medium-font-size-m * 0.825;    // 40px 0.714
+@nav-medium-font-size-m:                        @nav-medium-font-size-l * 0.875;    // 3.5rem / 56px
+@nav-medium-font-size-l:                        4rem; // 64px
+
+@nav-large-line-height:                         1;
+@nav-large-font-size:                           @nav-large-font-size-m * 0.85;      // 50px 0.78
+@nav-large-font-size-m:                         4rem; // 64px
+@nav-large-font-size-l:                         6rem; // 96px
+
+@nav-xlarge-line-height:                        1;
+@nav-xlarge-font-size:                          4rem; // 64px
+@nav-xlarge-font-size-m:                        6rem; // 96px
+@nav-xlarge-font-size-l:                        8rem; // 128px
+
 @nav-dividers-margin-top:                       5px;
 @nav-dividers-border-width:                     @global-border-width;
 @nav-dividers-border:                           @global-border;
@@ -428,6 +447,50 @@ ul.uk-nav-sub {
 .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: @nav-secondary-sublist-item-active-color; }
 
 
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Medium
+ */
+
+.uk-nav-medium {
+    font-size: @nav-medium-font-size;
+    line-height: @nav-medium-line-height;
+    .hook-nav-medium();
+}
+
+.uk-nav-large {
+    font-size: @nav-large-font-size;
+    line-height: @nav-large-line-height;
+    .hook-nav-large();
+}
+
+.uk-nav-xlarge {
+    font-size: @nav-xlarge-font-size;
+    line-height: @nav-xlarge-line-height;
+    .hook-nav-xlarge();
+}
+
+/* Tablet Landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-nav-medium { font-size: @nav-medium-font-size-m; }
+    .uk-nav-large { font-size: @nav-large-font-size-m; }
+    .uk-nav-xlarge { font-size: @nav-xlarge-font-size-m; }
+
+}
+
+/* Laptop and bigger */
+@media (min-width: @breakpoint-large) {
+
+    .uk-nav-medium { font-size: @nav-medium-font-size-l; }
+    .uk-nav-large { font-size: @nav-large-font-size-l; }
+    .uk-nav-xlarge { font-size: @nav-xlarge-font-size-l; }
+
+}
+
+
 /* Alignment modifier
  ========================================================================== */
 
@@ -496,6 +559,9 @@ ul.uk-nav-sub {
 .hook-nav-secondary-subtitle-active() {}
 .hook-nav-secondary-header() {}
 .hook-nav-secondary-divider() {}
+.hook-nav-medium() {}
+.hook-nav-large() {}
+.hook-nav-xlarge() {}
 .hook-nav-dividers() {}
 .hook-nav-misc() {}