uikit 3.11.2-dev.f2970ffaa → 3.12.0

package/src/js/util/viewport.js

@@ -1,30 +1,39 @@
-import {css} from './style';
-import {Promise} from './promise';
-import {isVisible, parents} from './filter';
-import {offset, offsetPosition} from './dimensions';
-import {clamp, findIndex, intersectRect, isDocument, isUndefined, 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 {
@@ -38,49 +47,44 @@ export function scrollTop(element, 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);
@@ -91,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];
@@ -130,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) {
@@ -146,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;
 }
 
 export function getScrollingElement(element) {
-    const {document} = toWindow(element);
+    const { document } = toWindow(element);
     return document.scrollingElement || document.documentElement;
 }

package/src/less/components/base.less

@@ -91,7 +91,6 @@
 
 /*
  * 1. Set `font-size` to support `rem` units
- *    Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  * 3. Style
  */
@@ -239,7 +238,7 @@ sub { bottom: -0.25em; }
  ========================================================================== */
 
 /*
- * Remove the gap between embedded content and the bottom of their containers.
+ * Remove the gap between the element and the bottom of its parent container.
  */
 
 audio,
@@ -250,14 +249,14 @@ svg,
 video { vertical-align: middle; }
 
 /*
- * 1. Add responsiveness.
- * 2. Auto-scale the height. Only needed if `height` attribute is present.
- * 3. Corrects responsive `max-width` behavior if padding and border are used.
- * 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio.
+ * 1. Constrain the element to its parent width.
+ * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
+ * 3. Take border and padding into account.
  */
 
 canvas,
 img,
+svg,
 video {
     /* 1 */
     max-width: 100%;
@@ -267,34 +266,17 @@ video {
     box-sizing: border-box;
 }
 
-/* 4 */
-@supports (display: block) {
-
-   svg {
-        max-width: 100%;
-        height: auto;
-        box-sizing: border-box;
-    }
-
-}
-
-/*
- * Hide the overflow in IE.
- */
-
-svg:not(:root) { overflow: hidden; }
-
 /*
- * 1. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
- * 2. Hide `alt` text for lazy loading images.
- * Note: Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; }
+ * Deprecated: only needed for `img` elements with `uk-img`
+ * 1. Hide `alt` text for lazy load images.
+ * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
  */
 
 img:not([src]) {
     /* 1 */
-    min-width: 1px;
-    /* 2 */
     visibility: hidden;
+    /* 2 */
+    min-width: 1px;
 }
 
 /*
@@ -589,11 +571,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/form-range.less

@@ -9,44 +9,45 @@
 // Variables
 // ========================================================================
 
+@form-range-track-height:                       3px;
+@form-range-track-background:                   darken(@global-muted-background, 5%);
+@form-range-track-focus-background:             darken(@form-range-track-background, 5%);
+
 @form-range-thumb-height:                       15px;
 @form-range-thumb-width:                        @form-range-thumb-height;
 @form-range-thumb-border-radius:                500px;
 @form-range-thumb-background:                   @global-color;
 
-@form-range-track-height:                       3px;
-@form-range-track-background:                   darken(@global-muted-background, 5%);
-@form-range-track-focus-background:             darken(@form-range-track-background, 5%);
-
 
 /* ========================================================================
    Component: Form Range
  ========================================================================== */
 
 /*
- * 1. Normalize and defaults
- * 2. Prevent content overflow if a fixed width is used
- * 3. Take the full width
- * 4. Remove default style
- * 5. Remove white background in Chrome
- * 6. Remove padding in IE11
+ * 1. Remove default style.
+ * 2. Define consistent box sizing.
+ * 3. Remove `margin` in all browsers.
+ * 4. Align to the center of the line box.
+ * 5. Prevent content overflow if a fixed width is used.
+ * 6. Take the full width.
+ * 7. Remove white background in Chrome.
  */
 
 .uk-range {
     /* 1 */
+    -webkit-appearance: none;
+    /* 2 */
     box-sizing: border-box;
+    /* 3 */
     margin: 0;
+    /* 4 */
     vertical-align: middle;
-    /* 2 */
+    /* 5 */
     max-width: 100%;
-    /* 3 */
+    /* 6 */
     width: 100%;
-    /* 4 */
-    -webkit-appearance: none;
-    /* 5 */
+    /* 7 */
     background: transparent;
-    /* 6 */
-    padding: 0;
     .hook-form-range();
 }
 
@@ -54,82 +55,16 @@
 .uk-range:focus { outline: none; }
 .uk-range::-moz-focus-outer { border: none; }
 
-/* IE11 Reset */
-.uk-range::-ms-track {
-    height: @form-range-thumb-height;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-}
-
 /*
  * Improves consistency of cursor style for clickable elements
  */
 
 .uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; }
 .uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; }
-.uk-range:not(:disabled)::-ms-thumb { cursor: pointer; }
 
 
-/* Thumb
- ========================================================================== */
-
-/*
- * 1. Reset
- * 2. Style
- */
-
-/* Webkit */
-.uk-range::-webkit-slider-thumb {
-    /* 1 */
-    -webkit-appearance: none;
-    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
-    /* 2 */
-    height: @form-range-thumb-height;
-    width: @form-range-thumb-width;
-    border-radius: @form-range-thumb-border-radius;
-    background: @form-range-thumb-background;
-    .hook-form-range-thumb();
-}
-
-/* Firefox */
-.uk-range::-moz-range-thumb {
-    /* 1 */
-    border: none;
-    /* 2 */
-    height: @form-range-thumb-height;
-    width: @form-range-thumb-width;
-    border-radius: @form-range-thumb-border-radius;
-    background: @form-range-thumb-background;
-    .hook-form-range-thumb();
-}
-
-/* Edge */
-.uk-range::-ms-thumb {
-    /* 1 */
-    margin-top: 0;
-}
-
-/* IE11 */
-.uk-range::-ms-thumb {
-    /* 1 */
-    border: none;
-    /* 2 */
-    height: @form-range-thumb-height;
-    width: @form-range-thumb-width;
-    border-radius: @form-range-thumb-border-radius;
-    background: @form-range-thumb-background;
-    .hook-form-range-thumb();
-}
-
-/* Edge + IE11 */
-.uk-range::-ms-tooltip { display: none; }
-
-
-/* Track
- ========================================================================== */
-
 /*
+ * Track
  * 1. Safari doesn't have a focus state. Using active instead.
  */
 
@@ -159,18 +94,36 @@
     .hook-form-range-track-focus();
 }
 
-/* Edge */
-.uk-range::-ms-fill-lower,
-.uk-range::-ms-fill-upper {
-    height: @form-range-track-height;
-    background: @form-range-track-background;
-    .hook-form-range-track();
+/*
+ * Thumb
+ * 1. Reset
+ * 2. Style
+ */
+
+/* Webkit */
+.uk-range::-webkit-slider-thumb {
+    /* 1 */
+    -webkit-appearance: none;
+    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
+    /* 2 */
+    height: @form-range-thumb-height;
+    width: @form-range-thumb-width;
+    border-radius: @form-range-thumb-border-radius;
+    background: @form-range-thumb-background;
+    .hook-form-range-thumb();
 }
 
-.uk-range:focus::-ms-fill-lower,
-.uk-range:focus::-ms-fill-upper {
-    background: @form-range-track-focus-background;
-    .hook-form-range-track-focus();
+/* Firefox */
+.uk-range::-moz-range-thumb {
+    /* 1 */
+    border: none;
+    /* 2 */
+    height: @form-range-thumb-height;
+    width: @form-range-thumb-width;
+    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
+    border-radius: @form-range-thumb-border-radius;
+    background: @form-range-thumb-background;
+    .hook-form-range-thumb();
 }
 
 
@@ -180,7 +133,7 @@
 .hook-form-range-misc();
 
 .hook-form-range() {}
-.hook-form-range-thumb() {}
 .hook-form-range-track() {}
 .hook-form-range-track-focus() {}
+.hook-form-range-thumb() {}
 .hook-form-range-misc() {}

package/src/less/components/form.less

@@ -472,7 +472,6 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 
 
 /* Radio and checkbox
- * Note: Does not work in IE11
  ========================================================================== */
 
 /*

package/src/less/components/height.less

@@ -31,6 +31,9 @@
  */
 
 .uk-height-viewport { min-height: 100vh; }
+.uk-height-viewport-2 { min-height: 200vh; }
+.uk-height-viewport-3 { min-height: 300vh; }
+.uk-height-viewport-4 { min-height: 400vh; }
 
 /*
  * Pixel

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/lightbox.less

@@ -119,7 +119,6 @@
  * 4. Optimize animation
  * 5. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
- *    Using `vh` and `vw` to make responsive image work in IE11
  */
 
 .uk-lightbox-items > * {

package/src/less/components/modal.less

@@ -139,10 +139,8 @@
 /*
  * 1. Create position context for spinner and close button
  * 2. Dimensions
- * 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11
- *    `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
- * 4. Style
- * 5. Slide-in transition
+ * 3. Style
+ * 4. Slide-in transition
  */
 
 .uk-modal-dialog {
@@ -153,10 +151,8 @@
     margin: 0 auto;
     width: @modal-dialog-width;
     /* 3 */
-    max-width: ~'calc(100% - 0.01px)' !important;
-    /* 4 */
     background: @modal-dialog-background;
-    /* 5 */
+    /* 4 */
     opacity: 0;
     transform: translateY(-100px);
     transition: 0.3s linear;

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/progress.less

@@ -21,28 +21,24 @@
  ========================================================================== */
 
 /*
- * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- * 2. Remove default style
- * 3. Behave like a block element
- * 4. Remove borders in Firefox and Edge
- * 5. Set background color for progress container in Firefox, IE11 and Edge
- * 6. Style
+ * 1. Add the correct vertical alignment in all browsers.
+ * 2. Behave like a block element.
+ * 3. Remove borders in Firefox.
+ * 4. Remove default style in Chrome, Safari and Edge.
+ * 5. Style
  */
 
 .uk-progress {
     /* 1 */
     vertical-align: baseline;
     /* 2 */
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    /* 3 */
     display: block;
     width: 100%;
-    /* 4 */
+    /* 3 */
     border: 0;
-    /* 5 */
+    /* 4 */
     background-color: @progress-background;
-    /* 6 */
+    /* 5 */
     margin-bottom: @progress-margin-vertical;
     height: @progress-height;
     .hook-progress();
@@ -52,27 +48,15 @@
 * + .uk-progress { margin-top: @progress-margin-vertical; }
 
 /*
- * Remove animated circles for indeterminate state in IE11 and Edge
+ * Show background color set on `uk-progress` in Chrome, Safari and Edge.
  */
 
-.uk-progress:indeterminate { color: transparent; }
+ .uk-progress::-webkit-progress-bar { background-color: transparent; }
 
 /*
- * Progress container
- * 2. Remove progress bar for indeterminate state in Firefox
- */
-
-.uk-progress::-webkit-progress-bar {
-  background-color: @progress-background;
-  .hook-progress();
-}
-
-/* 2 */
-.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
-
-/*
- * Progress bar
- * 1. Remove right border in IE11 and Edge
+ * Progress Bar
+ * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=662351
  */
 
 .uk-progress::-webkit-progress-value {
@@ -83,14 +67,8 @@
 
 .uk-progress::-moz-progress-bar {
     background-color: @progress-bar-background;
-    .hook-progress-bar();
-}
-
-.uk-progress::-ms-fill {
-    background-color: @progress-bar-background;
-    transition: width 0.6s ease;
     /* 1 */
-    border: 0;
+    transition: width 0.6s ease;
     .hook-progress-bar();
 }