uikit 3.14.3 → 3.14.4-dev.07daf8fb8

package/src/js/util/style.js

@@ -8,6 +8,7 @@ import {
     isString,
     isUndefined,
     memoize,
+    startsWith,
     toNodes,
 } from './lang';
 
@@ -62,18 +63,11 @@ export function css(element, property, value, priority = '') {
     return elements[0];
 }
 
-const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
-export function getCssVar(name, element = document.documentElement) {
-    return css(element, `--uk-${name}`).replace(propertyRe, '$2');
-}
-
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => vendorPropName(name));
 
-const cssPrefixes = ['webkit', 'moz'];
-
 function vendorPropName(name) {
-    if (name[0] === '-') {
+    if (startsWith(name, '--')) {
         return name;
     }
 
@@ -85,11 +79,8 @@ function vendorPropName(name) {
         return name;
     }
 
-    let i = cssPrefixes.length,
-        prefixedName;
-
-    while (i--) {
-        prefixedName = `-${cssPrefixes[i]}-${name}`;
+    for (const prefix of ['webkit', 'moz']) {
+        const prefixedName = `-${prefix}-${name}`;
         if (prefixedName in style) {
             return prefixedName;
         }

package/src/js/util/viewport.js

@@ -1,18 +1,7 @@
 import { css } from './style';
 import { isVisible, parents } from './filter';
 import { offset, offsetPosition } from './dimensions';
-import {
-    clamp,
-    findIndex,
-    intersectRect,
-    isDocument,
-    isUndefined,
-    isWindow,
-    toFloat,
-    toNode,
-    toWindow,
-    ucfirst,
-} from './lang';
+import { clamp, findIndex, intersectRect, isWindow, toFloat, toWindow, ucfirst } from './lang';
 
 export function isInView(element, offsetTop = 0, offsetLeft = 0) {
     if (!isVisible(element)) {
@@ -35,20 +24,6 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
     );
 }
 
-export function scrollTop(element, top) {
-    if (isWindow(element) || isDocument(element)) {
-        element = scrollingElement(element);
-    } else {
-        element = toNode(element);
-    }
-
-    if (isUndefined(top)) {
-        return element.scrollTop;
-    } else {
-        element.scrollTop = top;
-    }
-}
-
 export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
     const parents = isVisible(element) ? scrollParents(element) : [];
     return parents.reduce(
@@ -90,7 +65,7 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
             (function step() {
                 const percent = ease(clamp((Date.now() - start) / duration));
 
-                scrollTop(element, scroll + top * percent);
+                element.scrollTop = scroll + top * percent;
 
                 // scroll more if we have not reached our destination
                 if (percent === 1) {
@@ -128,7 +103,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
     return clamp((scrollTop - start) / (end - start));
 }
 
-export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scrollable = false) {
+export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, scrollable = false) {
     const scrollEl = scrollingElement(element);
 
     let ancestors = parents(element).reverse();
@@ -151,18 +126,31 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scroll
 }
 
 export function offsetViewport(scrollElement) {
-    let viewportElement = getViewport(scrollElement);
+    const window = toWindow(scrollElement);
+    const {
+        document: { documentElement },
+    } = window;
+    let viewportElement =
+        scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
+
+    const { visualViewport } = window;
+    if (isWindow(viewportElement) && visualViewport) {
+        let { height, width, scale, pageTop: top, pageLeft: left } = visualViewport;
+        height = Math.round(height * scale);
+        width = Math.round(width * scale);
+        return { height, width, top, left, bottom: top + height, right: left + width };
+    }
 
     let rect = offset(viewportElement);
     for (let [prop, dir, start, end] of [
         ['width', 'x', 'left', 'right'],
         ['height', 'y', 'top', 'bottom'],
     ]) {
-        if (!isWindow(viewportElement)) {
-            rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
-        } else {
+        if (isWindow(viewportElement)) {
             // iOS 12 returns <body> as scrollingElement
-            viewportElement = viewportElement.document.documentElement;
+            viewportElement = documentElement;
+        } else {
+            rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         }
         rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
         rect[end] = rect[prop] + rect[start];
@@ -173,7 +161,3 @@ export function offsetViewport(scrollElement) {
 function scrollingElement(element) {
     return toWindow(element).document.scrollingElement;
 }
-
-function getViewport(scrollElement) {
-    return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
-}

package/src/less/components/_import.less

@@ -40,6 +40,7 @@
 @import "accordion.less";
 @import "drop.less"; // After: Card
 @import "dropdown.less"; // After: Card
+@import "dropbar.less";
 @import "modal.less"; // After: Close
 @import "slideshow.less";
 @import "slider.less";

package/src/less/components/drop.less

@@ -3,11 +3,7 @@
 //
 // Component:       `uk-drop`
 //
-// Modifiers:       `uk-drop-top-*`
-//                  `uk-drop-bottom-*`
-//                  `uk-drop-left-*`
-//                  `uk-drop-right-*`
-//                  `uk-drop-stack`
+// Modifiers:       `uk-drop-stack`
 //                  `uk-drop-grid`
 //
 // States:          `uk-open`
@@ -22,6 +18,7 @@
 
 @drop-z-index:                              @global-z-index + 20;
 @drop-margin:                               @global-margin;
+@drop-viewport-margin:                      15px;
 @drop-width:                                300px;
 
 
@@ -42,7 +39,7 @@
     position: absolute;
     z-index: @drop-z-index;
     --uk-position-offset: @drop-margin;
-    --uk-position-viewport-offset: 10;
+    --uk-position-viewport-offset: @drop-viewport-margin;
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;

package/src/less/components/dropbar.less

@@ -0,0 +1,115 @@
+// Name:            Dropbar
+// Description:     Component to create dropbar menus
+//
+// Component:       `uk-dropbar`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@dropbar-margin:                                0;
+@dropbar-z-index:                               @global-z-index + 20;
+@dropbar-padding-top:                           15px;
+@dropbar-padding-bottom:                        @dropbar-padding-top;
+@dropbar-padding-horizontal:                    15px;
+@dropbar-padding-horizontal-s:                  @global-gutter;
+@dropbar-padding-horizontal-m:                  @global-medium-gutter;
+@dropbar-background:                            @global-muted-background;
+@dropbar-color:                                 @global-color;
+@dropbar-color-mode:                            none;
+
+
+/* ========================================================================
+   Component: Dropbar
+ ========================================================================== */
+
+/*
+ * 1. Hide by default
+ * 2. Set position
+ * 3. Style
+ */
+
+.uk-dropbar {
+    --uk-position-offset: @dropbar-margin;
+    --uk-position-shift-offset: 0;
+    --uk-position-viewport-offset: 0;
+    /* 1 */
+    display: none;
+    /* 2 */
+    position: absolute;
+    z-index: @dropbar-z-index;
+    /* 3 */
+    box-sizing: border-box;
+    padding: @dropbar-padding-top @dropbar-padding-horizontal @dropbar-padding-bottom @dropbar-padding-horizontal;
+    background: @dropbar-background;
+    color: @dropbar-color;
+    .hook-dropbar();
+}
+
+/* Show */
+.uk-dropbar.uk-open { display: block; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropbar > :last-child { margin-bottom: 0; }
+
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-dropbar {
+        padding-left: @dropbar-padding-horizontal-s;
+        padding-right: @dropbar-padding-horizontal-s;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: @breakpoint-medium) {
+
+    .uk-dropbar {
+        padding-left: @dropbar-padding-horizontal-m;
+        padding-right: @dropbar-padding-horizontal-m;
+    }
+
+}
+
+// Color Mode
+.uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
+.uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
+
+
+/* Direction modifier
+ ========================================================================== */
+
+.uk-dropbar-top {
+    .hook-dropbar-top();
+}
+
+.uk-dropbar-bottom {
+    .hook-dropbar-bottom();
+}
+
+.uk-dropbar-left {
+    .hook-dropbar-left();
+}
+
+.uk-dropbar-right {
+    .hook-dropbar-right();
+}
+
+
+// Hooks
+// ========================================================================
+
+.hook-dropbar-misc();
+
+.hook-dropbar() {}
+.hook-dropbar-top() {}
+.hook-dropbar-bottom() {}
+.hook-dropbar-left() {}
+.hook-dropbar-right() {}
+.hook-dropbar-misc() {}

package/src/less/components/dropdown.less

@@ -5,10 +5,7 @@
 //
 // Adopted:         `uk-dropdown-nav`
 //
-// Modifiers:       `uk-dropdown-top-*`
-//                  `uk-dropdown-bottom-*`
-//                  `uk-dropdown-left-*`
-//                  `uk-dropdown-right-*`
+// Modifiers:       `uk-dropdown-large`
 //                  `uk-dropdown-stack`
 //                  `uk-dropdown-grid`
 //
@@ -22,10 +19,14 @@
 
 @dropdown-z-index:                              @global-z-index + 20;
 @dropdown-margin:                               @global-small-margin;
+@dropdown-viewport-margin:                      15px;
 @dropdown-min-width:                            200px;
 @dropdown-padding:                              15px;
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
+@dropdown-color-mode:                           none;
+
+@dropdown-large-padding:                        40px;
 
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
@@ -55,11 +56,10 @@
     position: absolute;
     z-index: @dropdown-z-index;
     --uk-position-offset: @dropdown-margin;
-    --uk-position-viewport-offset: 10;
+    --uk-position-viewport-offset: @dropdown-viewport-margin;
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;
-    max-width: 100vw;
     /* 4 */
     padding: @dropdown-padding;
     background: @dropdown-background;
@@ -70,6 +70,22 @@
 /* Show */
 .uk-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropdown > :last-child { margin-bottom: 0; }
+
+// Color Mode
+.uk-dropdown:extend(.uk-light all) when (@dropdown-color-mode = light) {}
+.uk-dropdown:extend(.uk-dark all) when (@dropdown-color-mode = dark) {}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropdown-large { padding: @dropdown-large-padding; }
+
 
 /* Nav
  * Adopts `uk-nav`

package/src/less/components/leader.less

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

package/src/less/components/margin.less

@@ -193,20 +193,20 @@
 /* Remove
  ========================================================================== */
 
- .uk-margin-remove { margin: 0 !important; }
- .uk-margin-remove-top { margin-top: 0 !important; }
- .uk-margin-remove-bottom { margin-bottom: 0 !important; }
- .uk-margin-remove-left { margin-left: 0 !important; }
- .uk-margin-remove-right { margin-right: 0 !important; }
-
- .uk-margin-remove-vertical {
-     margin-top: 0 !important;
-     margin-bottom: 0 !important;
- }
+.uk-margin-remove { margin: 0 !important; }
+.uk-margin-remove-top { margin-top: 0 !important; }
+.uk-margin-remove-bottom { margin-bottom: 0 !important; }
+.uk-margin-remove-left { margin-left: 0 !important; }
+.uk-margin-remove-right { margin-right: 0 !important; }
+
+.uk-margin-remove-vertical {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
 
- .uk-margin-remove-adjacent + *,
- .uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
- .uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
+.uk-margin-remove-adjacent + *,
+.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
+.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
 
 /* Phone landscape and bigger */
 @media (min-width: @breakpoint-small) {
@@ -241,7 +241,6 @@
 }
 
 
-
 // Hooks
 // ========================================================================
 

package/src/less/components/modal.less

@@ -40,15 +40,21 @@
 
 @modal-container-width:                         1200px;
 
-@modal-body-padding-horizontal:                 @global-gutter;
-@modal-body-padding-vertical:                   @global-gutter;
+@modal-body-padding-horizontal:                 20px;
+@modal-body-padding-vertical:                   20px;
+@modal-body-padding-horizontal-s:               @global-gutter;
+@modal-body-padding-vertical-s:                 @global-gutter;
 
-@modal-header-padding-horizontal:               @global-gutter;
+@modal-header-padding-horizontal:               20px;
 @modal-header-padding-vertical:                 (@modal-header-padding-horizontal / 2);
+@modal-header-padding-horizontal-s:             @global-gutter;
+@modal-header-padding-vertical-s:               (@modal-header-padding-horizontal-s / 2);
 @modal-header-background:                       @global-muted-background;
 
-@modal-footer-padding-horizontal:               @global-gutter;
+@modal-footer-padding-horizontal:               20px;
 @modal-footer-padding-vertical:                 (@modal-footer-padding-horizontal / 2);
+@modal-footer-padding-horizontal-s:             @global-gutter;
+@modal-footer-padding-vertical-s:               (@modal-footer-padding-horizontal-s / 2);
 @modal-footer-background:                       @global-muted-background;
 
 @modal-title-font-size:                         @global-xlarge-font-size;
@@ -228,6 +234,15 @@
     .hook-modal-footer();
 }
 
+/* Phone landscape and bigger */
+@media (min-width: @breakpoint-small) {
+
+    .uk-modal-body { padding: @modal-body-padding-vertical-s @modal-body-padding-horizontal-s; }
+    .uk-modal-header { padding: @modal-header-padding-vertical-s @modal-header-padding-horizontal-s; }
+    .uk-modal-footer { padding: @modal-footer-padding-vertical-s @modal-footer-padding-horizontal-s; }
+
+}
+
 /*
  * Remove margin from the last-child
  */