uikit 3.11.2-dev.57792c7e7 → 3.11.2-dev.72dbb9a19

package/src/js/util/selector.js

@@ -1,7 +1,6 @@
-import {attr} from './attr';
-import {inBrowser} from './env';
-import {closest, index, matches, parent} from './filter';
-import {isDocument, isString, memoize, toNode, toNodes} from './lang';
+import { attr } from './attr';
+import { closest, index, matches, parent } from './filter';
+import { isDocument, isString, memoize, toNode, toNodes } from './lang';
 
 export function query(selector, context) {
     return find(selector, getContext(selector, context));
@@ -11,12 +10,6 @@ export function queryAll(selector, context) {
     return findAll(selector, getContext(selector, context));
 }
 
-function getContext(selector, context = document) {
-    return isString(selector) && isContextSelector(selector) || isDocument(context)
-        ? context
-        : context.ownerDocument;
-}
-
 export function find(selector, context) {
     return toNode(_query(selector, context, 'querySelector'));
 }
@@ -25,8 +18,18 @@ export function findAll(selector, context) {
     return toNodes(_query(selector, context, 'querySelectorAll'));
 }
 
-function _query(selector, context = document, queryFn) {
+const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
+const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
+
+function getContext(selector, context = document) {
+    return (isString(selector) && isContextSelector(selector)) || isDocument(context)
+        ? context
+        : context.ownerDocument;
+}
 
+const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+
+function _query(selector, context = document, queryFn) {
     if (!selector || !isString(selector)) {
         return selector;
     }
@@ -34,63 +37,46 @@ function _query(selector, context = document, queryFn) {
     selector = selector.replace(contextSanitizeRe, '$1 *');
 
     if (isContextSelector(selector)) {
-
-        selector = splitSelector(selector).map(selector => {
-
-            let ctx = context;
-
-            if (selector[0] === '!') {
-
-                const selectors = selector.substr(1).trim().split(' ');
-                ctx = closest(parent(context), selectors[0]);
-                selector = selectors.slice(1).join(' ').trim();
-
-            }
-
-            if (selector[0] === '-') {
-
-                const selectors = selector.substr(1).trim().split(' ');
-                const prev = (ctx || context).previousElementSibling;
-                ctx = matches(prev, selector.substr(1)) ? prev : null;
-                selector = selectors.slice(1).join(' ');
-
-            }
-
-            if (!ctx) {
-                return null;
-            }
-
-            return `${domPath(ctx)} ${selector}`;
-
-        }).filter(Boolean).join(',');
+        selector = splitSelector(selector)
+            .map((selector) => {
+                let ctx = context;
+
+                if (selector[0] === '!') {
+                    const selectors = selector.substr(1).trim().split(' ');
+                    ctx = closest(parent(context), selectors[0]);
+                    selector = selectors.slice(1).join(' ').trim();
+                }
+
+                if (selector[0] === '-') {
+                    const selectors = selector.substr(1).trim().split(' ');
+                    const prev = (ctx || context).previousElementSibling;
+                    ctx = matches(prev, selector.substr(1)) ? prev : null;
+                    selector = selectors.slice(1).join(' ');
+                }
+
+                if (!ctx) {
+                    return null;
+                }
+
+                return `${domPath(ctx)} ${selector}`;
+            })
+            .filter(Boolean)
+            .join(',');
 
         context = document;
-
     }
 
     try {
-
         return context[queryFn](selector);
-
     } catch (e) {
-
         return null;
-
     }
-
 }
 
-const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
-const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
-
-const isContextSelector = memoize(selector => selector.match(contextSelectorRe));
-
 const selectorRe = /.*?[^\\](?:,|$)/g;
 
-const splitSelector = memoize(selector =>
-    selector.match(selectorRe).map(selector =>
-        selector.replace(/,$/, '').trim()
-    )
+const splitSelector = memoize((selector) =>
+    selector.match(selectorRe).map((selector) => selector.replace(/,$/, '').trim())
 );
 
 function domPath(element) {
@@ -101,7 +87,7 @@ function domPath(element) {
             names.unshift(`#${escape(id)}`);
             break;
         } else {
-            let {tagName} = element;
+            let { tagName } = element;
             if (tagName !== 'HTML') {
                 tagName += `:nth-child(${index(element) + 1})`;
             }
@@ -112,7 +98,6 @@ function domPath(element) {
     return names.join(' > ');
 }
 
-const escapeFn = inBrowser && window.CSS && CSS.escape || function (css) { return css.replace(/([^\x7f-\uFFFF\w-])/g, match => `\\${match}`); };
 export function escape(css) {
-    return isString(css) ? escapeFn.call(null, css) : '';
+    return isString(css) ? CSS.escape(css) : '';
 }

package/src/js/util/style.js

@@ -1,7 +1,16 @@
-import {isIE} from './env';
-import {append, fragment, remove} from './dom';
-import {addClass} from './class';
-import {each, hyphenate, isArray, isNumber, isNumeric, isObject, isString, isUndefined, memoize, toNodes, toWindow} from './lang';
+import {
+    each,
+    hyphenate,
+    isArray,
+    isNumber,
+    isNumeric,
+    isObject,
+    isString,
+    isUndefined,
+    memoize,
+    toNodes,
+    toWindow,
+} from './lang';
 
 const cssNumber = {
     'animation-iteration-count': true,
@@ -11,22 +20,19 @@ const cssNumber = {
     'flex-shrink': true,
     'font-weight': true,
     'line-height': true,
-    'opacity': true,
-    'order': true,
-    'orphans': true,
+    opacity: true,
+    order: true,
+    orphans: true,
     'stroke-dasharray': true,
     'stroke-dashoffset': true,
-    'widows': true,
+    widows: true,
     'z-index': true,
-    'zoom': true
+    zoom: true,
 };
 
 export function css(element, property, value, priority = '') {
-
-    return toNodes(element).map(element => {
-
+    return toNodes(element).map((element) => {
         if (isString(property)) {
-
             property = propName(property);
 
             if (isUndefined(value)) {
@@ -34,27 +40,26 @@ export function css(element, property, value, priority = '') {
             } else if (!value && !isNumber(value)) {
                 element.style.removeProperty(property);
             } else {
-                element.style.setProperty(property, isNumeric(value) && !cssNumber[property] ? `${value}px` : value, priority);
+                element.style.setProperty(
+                    property,
+                    isNumeric(value) && !cssNumber[property] ? `${value}px` : value,
+                    priority
+                );
             }
-
         } else if (isArray(property)) {
-
             const styles = getStyles(element);
-
-            return property.reduce((props, property) => {
-                props[property] = styles[propName(property)];
-                return props;
-            }, {});
-
+            const props = {};
+            for (const prop of property) {
+                props[prop] = styles[propName(prop)];
+            }
+            return props;
         } else if (isObject(property)) {
             priority = value;
             each(property, (value, property) => css(element, property, value, priority));
         }
 
         return element;
-
     })[0];
-
 }
 
 function getStyles(element, pseudoElt) {
@@ -65,44 +70,29 @@ function getStyle(element, property, pseudoElt) {
     return getStyles(element, pseudoElt)[property];
 }
 
-const parseCssVar = memoize(name => {
-    /* usage in css: .uk-name:before { content:"xyz" } */
-
-    const element = append(document.documentElement, fragment('<div>'));
-
-    addClass(element, `uk-${name}`);
-
-    const value = getStyle(element, 'content', ':before');
-
-    remove(element);
-
-    return value;
-});
-
 const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
 export function getCssVar(name) {
-    return (isIE
-        ? parseCssVar(name)
-        : getStyles(document.documentElement).getPropertyValue(`--uk-${name}`)
-    ).replace(propertyRe, '$2');
+    return getStyles(document.documentElement)
+        .getPropertyValue(`--uk-${name}`)
+        .replace(propertyRe, '$2');
 }
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
-export const propName = memoize(name => vendorPropName(name));
+export const propName = memoize((name) => vendorPropName(name));
 
 const cssPrefixes = ['webkit', 'moz', 'ms'];
 
 function vendorPropName(name) {
-
     name = hyphenate(name);
 
-    const {style} = document.documentElement;
+    const { style } = document.documentElement;
 
     if (name in style) {
         return name;
     }
 
-    let i = cssPrefixes.length, prefixedName;
+    let i = cssPrefixes.length,
+        prefixedName;
 
     while (i--) {
         prefixedName = `-${cssPrefixes[i]}-${name}`;

package/src/js/util/viewport.js

@@ -1,82 +1,90 @@
-import {css} from './style';
-import {Promise} from './promise';
-import {isVisible, parents} from './filter';
-import {offset, offsetPosition} from './dimensions';
-import {clamp, findIndex, intersectRect, isDocument, isWindow, toNode, toWindow} from './lang';
+import { css } from './style';
+import { isVisible, parents } from './filter';
+import { offset, offsetPosition } from './dimensions';
+import {
+    clamp,
+    findIndex,
+    intersectRect,
+    isDocument,
+    isUndefined,
+    isWindow,
+    toNode,
+    toWindow,
+} from './lang';
 
 export function isInView(element, offsetTop = 0, offsetLeft = 0) {
-
     if (!isVisible(element)) {
         return false;
     }
 
-    return intersectRect(...scrollParents(element).map(parent => {
-
-        const {top, left, bottom, right} = offset(getViewport(parent));
-
-        return {
-            top: top - offsetTop,
-            left: left - offsetLeft,
-            bottom: bottom + offsetTop,
-            right: right + offsetLeft
-        };
-    }).concat(offset(element)));
+    return intersectRect(
+        ...scrollParents(element)
+            .map((parent) => {
+                const { top, left, bottom, right } = offset(getViewport(parent));
+
+                return {
+                    top: top - offsetTop,
+                    left: left - offsetLeft,
+                    bottom: bottom + offsetTop,
+                    right: right + offsetLeft,
+                };
+            })
+            .concat(offset(element))
+    );
 }
 
 export function scrollTop(element, top) {
-
     if (isWindow(element) || isDocument(element)) {
         element = getScrollingElement(element);
     } else {
         element = toNode(element);
     }
 
-    element.scrollTop = top;
+    if (isUndefined(top)) {
+        return element.scrollTop;
+    } else {
+        element.scrollTop = top;
+    }
 }
 
-export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
-
+export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
     const parents = isVisible(element) ? scrollParents(element) : [];
-    return parents.reduce((fn, scrollElement, i) => {
-
-        const {scrollTop, scrollHeight, offsetHeight} = scrollElement;
-        const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
-        const {height: elHeight, top: elTop} = offset(parents[i - 1] || element);
-
-        let top = Math.ceil(
-            elTop
-            - offset(getViewport(scrollElement)).top
-            - offsetBy
-            + scrollTop
-        );
-
-        if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
-            top += offsetBy;
-        } else {
-            offsetBy = 0;
-        }
-
-        if (top > maxScroll) {
-            offsetBy -= top - maxScroll;
-            top = maxScroll;
-        } else if (top < 0) {
-            offsetBy -= top;
-            top = 0;
-        }
-
-        return () => scrollTo(scrollElement, top - scrollTop).then(fn);
-
-    }, () => Promise.resolve())();
+    return parents.reduce(
+        (fn, scrollElement, i) => {
+            const { scrollTop, scrollHeight, offsetHeight } = scrollElement;
+            const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
+            const { height: elHeight, top: elTop } = offset(parents[i - 1] || element);
+
+            let top = Math.ceil(
+                elTop - offset(getViewport(scrollElement)).top - offsetBy + scrollTop
+            );
+
+            if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
+                top += offsetBy;
+            } else {
+                offsetBy = 0;
+            }
+
+            if (top > maxScroll) {
+                offsetBy -= top - maxScroll;
+                top = maxScroll;
+            } else if (top < 0) {
+                offsetBy -= top;
+                top = 0;
+            }
+
+            return () => scrollTo(scrollElement, top - scrollTop).then(fn);
+        },
+        () => Promise.resolve()
+    )();
 
     function scrollTo(element, top) {
-        return new Promise(resolve => {
-
+        return new Promise((resolve) => {
             const scroll = element.scrollTop;
             const duration = getDuration(Math.abs(top));
             const start = Date.now();
 
             (function step() {
-
                 const percent = ease(clamp((Date.now() - start) / duration));
 
                 scrollTop(element, scroll + top * percent);
@@ -87,29 +95,26 @@ export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
                 } else {
                     requestAnimationFrame(step);
                 }
-
             })();
         });
     }
 
     function getDuration(dist) {
-        return 40 * Math.pow(dist, .375);
+        return 40 * Math.pow(dist, 0.375);
     }
 
     function ease(k) {
         return 0.5 * (1 - Math.cos(Math.PI * k));
     }
-
 }
 
 export function scrolledOver(element, startOffset = 0, endOffset = 0) {
-
     if (!isVisible(element)) {
         return 0;
     }
 
     const [scrollElement] = scrollParents(element, /auto|scroll/, true);
-    const {scrollHeight, scrollTop} = scrollElement;
+    const { scrollHeight, scrollTop } = scrollElement;
     const viewportHeight = getViewportClientHeight(scrollElement);
     const maxScroll = scrollHeight - viewportHeight;
     const elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
@@ -126,14 +131,20 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scroll
     let ancestors = parents(element).reverse();
     ancestors = ancestors.slice(ancestors.indexOf(scrollEl) + 1);
 
-    const fixedIndex = findIndex(ancestors, el => css(el, 'position') === 'fixed');
+    const fixedIndex = findIndex(ancestors, (el) => css(el, 'position') === 'fixed');
     if (~fixedIndex) {
         ancestors = ancestors.slice(fixedIndex);
     }
 
-    return [scrollEl].concat(ancestors.filter(parent =>
-        overflowRe.test(css(parent, 'overflow')) && (!scrollable || parent.scrollHeight > getViewportClientHeight(parent)))
-    ).reverse();
+    return [scrollEl]
+        .concat(
+            ancestors.filter(
+                (parent) =>
+                    overflowRe.test(css(parent, 'overflow')) &&
+                    (!scrollable || parent.scrollHeight > getViewportClientHeight(parent))
+            )
+        )
+        .reverse();
 }
 
 export function getViewport(scrollElement) {
@@ -142,10 +153,14 @@ export function getViewport(scrollElement) {
 
 // iOS 12 returns <body> as scrollingElement
 export function getViewportClientHeight(scrollElement) {
-    return (scrollElement === getScrollingElement(scrollElement) ? document.documentElement : scrollElement).clientHeight;
+    return (
+        scrollElement === getScrollingElement(scrollElement)
+            ? document.documentElement
+            : scrollElement
+    ).clientHeight;
 }
 
-function getScrollingElement(element) {
-    const {document} = toWindow(element);
+export function getScrollingElement(element) {
+    const { document } = toWindow(element);
     return document.scrollingElement || document.documentElement;
 }

package/src/less/components/base.less

@@ -589,11 +589,6 @@ template { display: none; }
  * Breakpoints
  */
 
-.uk-breakpoint-s::before  { content: '@{breakpoint-small}'; }
-.uk-breakpoint-m::before  { content: '@{breakpoint-medium}'; }
-.uk-breakpoint-l::before  { content: '@{breakpoint-large}'; }
-.uk-breakpoint-xl::before { content: '@{breakpoint-xlarge}'; }
-
 :root {
     --uk-breakpoint-s: @breakpoint-small;
     --uk-breakpoint-m: @breakpoint-medium;

package/src/less/components/flex.less

@@ -13,15 +13,6 @@
 .uk-flex { display: flex; }
 .uk-flex-inline { display: inline-flex; }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution
- */
-
-.uk-flex::before,
-.uk-flex::after,
-.uk-flex-inline::before,
-.uk-flex-inline::after { display: none; }
-
 
 /* Alignment
  ========================================================================== */

package/src/less/components/leader.less

@@ -49,7 +49,6 @@
  * Pass fill character to JS
  */
 
-.uk-leader-fill-content::before { content: '@{leader-fill-content}'; }
 :root { --uk-leader-fill-content: '@{leader-fill-content}'; }
 
 

package/src/less/components/navbar.less

@@ -109,13 +109,6 @@
 .uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) when (@navbar-color-mode = light) {}
 .uk-navbar-container:not(.uk-navbar-transparent):extend(.uk-dark all) when (@navbar-color-mode = dark) {}
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
- */
-
-.uk-navbar-container > ::before,
-.uk-navbar-container > ::after { display: none !important; }
-
 
 /* Groups
  ========================================================================== */

package/src/less/components/utility.less

@@ -251,6 +251,28 @@
 [data-uk-responsive] { max-width: 100%; }
 
 
+/* Object
+ ========================================================================== */
+
+.uk-object-fit-none { object-fit: none; }
+.uk-object-fit-cover { object-fit: cover; }
+.uk-object-fit-contain { object-fit: contain; }
+
+/* 
+ * Position
+ */
+
+.uk-object-top-left { object-position: 0 0; }
+.uk-object-top-center { object-position: 50% 0; }
+.uk-object-top-right { object-position: 100% 0; }
+.uk-object-center-left { object-position: 0 50%; }
+.uk-object-center-center { object-position: 50% 50%; }
+.uk-object-center-right { object-position: 100% 50%; }
+.uk-object-bottom-left { object-position: 0 100%; }
+.uk-object-bottom-center { object-position: 50% 100%; }
+.uk-object-bottom-right { object-position: 100% 100%; }
+
+
 /* Border
  ========================================================================== */
 

package/src/scss/components/base.scss

@@ -589,11 +589,6 @@ template { display: none; }
  * Breakpoints
  */
 
-.uk-breakpoint-s::before  { content: '#{$breakpoint-small}'; }
-.uk-breakpoint-m::before  { content: '#{$breakpoint-medium}'; }
-.uk-breakpoint-l::before  { content: '#{$breakpoint-large}'; }
-.uk-breakpoint-xl::before { content: '#{$breakpoint-xlarge}'; }
-
 :root {
     --uk-breakpoint-s: #{$breakpoint-small};
     --uk-breakpoint-m: #{$breakpoint-medium};

package/src/scss/components/flex.scss

@@ -13,15 +13,6 @@
 .uk-flex { display: flex; }
 .uk-flex-inline { display: inline-flex; }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution
- */
-
-.uk-flex::before,
-.uk-flex::after,
-.uk-flex-inline::before,
-.uk-flex-inline::after { display: none; }
-
 
 /* Alignment
  ========================================================================== */

package/src/scss/components/form.scss

@@ -780,7 +780,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 
 $inverse-form-background:                       $inverse-global-muted-background !default;
 $inverse-form-color:                            $inverse-global-color !default;
-$inverse-form-focus-background:                 fadein($inverse-form-background, 5%) !default;
+$inverse-form-focus-background:                 fade-in($inverse-form-background, 0.05) !default;
 $inverse-form-focus-color:                      $inverse-global-color !default;
 $inverse-form-placeholder-color:                $inverse-global-muted-color !default;
 
@@ -790,12 +790,12 @@ $inverse-form-datalist-icon-color:              $inverse-global-color !default;
 
 $inverse-form-radio-background:                 $inverse-global-muted-background !default;
 
-$inverse-form-radio-focus-background:           fadein($inverse-form-radio-background, 5%) !default;
+$inverse-form-radio-focus-background:           fade-in($inverse-form-radio-background, 0.05) !default;
 
 $inverse-form-radio-checked-background:         $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color:         $inverse-global-inverse-color !default;
 
-$inverse-form-radio-checked-focus-background:   fadein($inverse-global-primary-background, 10%) !default;
+$inverse-form-radio-checked-focus-background:   fade-in($inverse-global-primary-background, 0.1) !default;
 
 $inverse-form-icon-color:                       $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color:                 $inverse-global-color !default;

package/src/scss/components/icon.scss

@@ -201,9 +201,9 @@ $inverse-icon-link-hover-color:                 $inverse-global-color !default;
 $inverse-icon-link-active-color:                $inverse-global-color !default;
 $inverse-icon-button-background:                $inverse-global-muted-background !default;
 $inverse-icon-button-color:                     $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background:          fadein($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background:          fade-in($inverse-icon-button-background, 0.05) !default;
 $inverse-icon-button-hover-color:               $inverse-global-color !default;
-$inverse-icon-button-active-background:         fadein($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background:         fade-in($inverse-icon-button-background, 0.1) !default;
 $inverse-icon-button-active-color:              $inverse-global-color !default;
 
 

package/src/scss/components/leader.scss

@@ -49,7 +49,6 @@ $leader-fill-margin-left:                        $global-small-gutter !default;
  * Pass fill character to JS
  */
 
-.uk-leader-fill-content::before { content: '#{$leader-fill-content}'; }
 :root { --uk-leader-fill-content: '#{$leader-fill-content}'; }