uikit 3.25.17-dev.80dfe87 → 3.25.17-dev.8c70e44

package/src/js/util/style.js

@@ -37,23 +37,18 @@ export function css(element, property, value, priority) {
 
             if (isUndefined(value)) {
                 return getComputedStyle(element).getPropertyValue(property);
-            } else {
-                element.style.setProperty(
-                    property,
-                    isNumeric(value) && !cssNumber[property] && !isCustomProperty(property)
-                        ? `${value}px`
-                        : value || isNumber(value)
-                          ? value
-                          : '',
-                    priority,
-                );
             }
+            element.style.setProperty(
+                property,
+                isNumeric(value) && !cssNumber[property] && !isCustomProperty(property)
+                    ? `${value}px`
+                    : value || isNumber(value)
+                      ? value
+                      : '',
+                priority,
+            );
         } else if (isArray(property)) {
-            const props = {};
-            for (const prop of property) {
-                props[prop] = css(element, prop);
-            }
-            return props;
+            return Object.fromEntries(property.map((prop) => [prop, css(element, prop)]));
         } else if (isObject(property)) {
             for (const prop in property) {
                 css(element, prop, property[prop], value);

package/src/js/util/viewport.js

@@ -18,20 +18,18 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
         return false;
     }
 
-    return intersectRect(
-        ...overflowParents(element)
-            .map((parent) => {
-                const { top, left, bottom, right } = offsetViewport(parent);
-
-                return {
-                    top: top - offsetTop,
-                    left: left - offsetLeft,
-                    bottom: bottom + offsetTop,
-                    right: right + offsetLeft,
-                };
-            })
-            .concat(offset(element)),
-    );
+    const rects = overflowParents(element).map((parent) => {
+        const { top, left, bottom, right } = offsetViewport(parent);
+
+        return {
+            top: top - offsetTop,
+            left: left - offsetLeft,
+            bottom: bottom + offsetTop,
+            right: right + offsetLeft,
+        };
+    });
+
+    return intersectRect(...rects, offset(element));
 }
 
 export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
@@ -145,17 +143,16 @@ export function scrollParents(element, scrollable = false, props = []) {
         ancestors = ancestors.slice(fixedIndex);
     }
 
-    return [scrollEl]
-        .concat(
-            ancestors.filter(
-                (parent) =>
-                    css(parent, 'overflow')
-                        .split(' ')
-                        .some((prop) => includes(['auto', 'scroll', ...props], prop)) &&
-                    (!scrollable || parent.scrollHeight > offsetViewport(parent).height),
-            ),
-        )
-        .reverse();
+    return [
+        scrollEl,
+        ...ancestors.filter(
+            (parent) =>
+                css(parent, 'overflow')
+                    .split(' ')
+                    .some((prop) => includes(['auto', 'scroll', ...props], prop)) &&
+                (!scrollable || parent.scrollHeight > offsetViewport(parent).height),
+        ),
+    ].reverse();
 }
 
 export function scrollParent(...args) {

package/src/less/components/_import.less

@@ -13,6 +13,7 @@
 @import "icon.less";
 @import "form-range.less";
 @import "form.less"; // After: Icon, Form Range
+@import "search.less"; // After: Icon
 @import "button.less";
 @import "progress.less";
 
@@ -31,10 +32,11 @@
 @import "placeholder.less";
 @import "badge.less";
 @import "label.less";
+@import "dropcap.less";
+@import "floating-shadow.less";
 @import "overlay.less"; // After: Icon
 @import "article.less";
 @import "comment.less";
-@import "search.less"; // After: Icon
 
 // JavaScript
 @import "accordion.less";
@@ -44,6 +46,7 @@
 @import "modal.less"; // After: Close
 @import "slideshow.less";
 @import "slider.less";
+@import "marquee.less";
 @import "sticky.less";
 @import "offcanvas.less";
 @import "switcher.less";
@@ -70,8 +73,10 @@
 @import "tab.less";
 @import "slidenav.less"; // After: Icon
 @import "dotnav.less";
+
 @import "dropdown.less"; // After: Card, Nav
 @import "lightbox.less"; // After: Close, Slidenav
+@import "logo.less"; // After: Navbar
 
 // Utilities
 @import "animation.less";

package/src/less/components/base.less

@@ -488,7 +488,7 @@ blockquote {
  * Content
  */
 
-blockquote p:last-of-type { margin-bottom: 0; }
+blockquote :where(p:last-of-type) { margin-bottom: 0; }
 
 blockquote footer {
     margin-top: @base-blockquote-footer-margin-top;

package/src/less/components/button.less

@@ -138,7 +138,7 @@
 
 /* Hover */
 .uk-button:hover {
-    /* 9 */
+    /* 10 */
     text-decoration: none;
     .hook-button-hover();
 }

package/src/less/components/dropcap.less

@@ -0,0 +1,71 @@
+// Name:            Dropcap
+// Description:     Style for the drop cap
+//
+// Component:       `uk-dropcap`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+@dropcap-margin-right:                          10px;
+@dropcap-font-size:                             ((@global-line-height * 3) * 1em);
+@dropcap-line-height:                           1;
+
+/* ========================================================================
+   Component: Dropcap
+ ========================================================================== */
+
+/*
+ * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
+ * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
+ */
+
+.uk-dropcap::first-letter,
+/* 1 */
+.uk-dropcap > p:first-of-type::first-letter {
+    display: block;
+    margin-right: @dropcap-margin-right;
+    float: left;
+    font-size: @dropcap-font-size;
+    line-height: @dropcap-line-height;
+    .hook-dropcap();
+}
+
+/* 2 */
+@-moz-document url-prefix() {
+
+  .uk-dropcap::first-letter,
+  .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }
+
+}
+
+
+// Misc
+// ========================================================================
+
+.hook-dropcap-misc();
+
+
+// Hooks
+// ========================================================================
+
+.hook-dropcap() {}
+.hook-dropcap-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse () {
+
+    .uk-dropcap::first-letter,
+    .uk-dropcap p:first-of-type::first-letter {
+        .hook-inverse-dropcap();
+    }
+
+}
+
+.hook-inverse-dropcap() {}

package/src/less/components/floating-shadow.less

@@ -0,0 +1,65 @@
+// Name:            Floating Shadow
+// Description:     Component to create floating shadows
+//
+// Component:       `uk-floating-shadow`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@floating-shadow-height:                       30px;
+@floating-shadow-bottom:                       -@floating-shadow-height;
+@floating-shadow-border-radius:                100%;
+@floating-shadow-background:                   #444;
+@floating-shadow-blur:                         20px;
+
+/* ========================================================================
+   Component: Floating Shadow
+ ========================================================================== */
+
+/*
+ * 1. Set position.
+ * 2. Set style
+ * 3. Fix shadow being clipped in Safari if container is animated
+ */
+
+.uk-floating-shadow {
+    display: inline-block;
+    position: relative;
+    z-index: 0;
+    max-width: 100%;
+    vertical-align: middle;
+}
+
+.uk-floating-shadow::after {
+    content: "";
+    /* 1 */
+    position: absolute;
+    bottom: @floating-shadow-bottom;
+    left: 0;
+    right: 0;
+    z-index: -1;
+    /* 2 */
+    height: @floating-shadow-height;
+    border-radius: @floating-shadow-border-radius;
+    background: @floating-shadow-background;
+    filter: blur(@floating-shadow-blur);
+    /* 3 */
+    will-change: filter;
+    .hook-floating-shadow();
+}
+
+
+// Misc
+// ========================================================================
+
+.hook-floating-shadow-misc();
+
+
+// Hooks
+// ========================================================================
+
+.hook-floating-shadow() {}
+.hook-floating-shadow-misc() {}

package/src/less/components/form.less

@@ -684,7 +684,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
  * Stacked
  */
 
-.uk-form-stacked .uk-form-label {
+.uk-form-stacked :where(.uk-form-label) {
     display: block;
     margin-bottom: @form-stacked-margin-bottom;
     .hook-form-stacked-label();
@@ -698,7 +698,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 @media (max-width: @breakpoint-small-max) {
 
     /* Behave like `uk-form-stacked` */
-    .uk-form-horizontal .uk-form-label {
+    .uk-form-horizontal :where(.uk-form-label) {
         display: block;
         margin-bottom: @form-stacked-margin-bottom;
         .hook-form-stacked-label();
@@ -709,17 +709,17 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 /* Tablet landscape and bigger */
 @media (min-width: @breakpoint-medium) {
 
-    .uk-form-horizontal .uk-form-label {
+    .uk-form-horizontal :where(.uk-form-label) {
         width: @form-horizontal-label-width;
         margin-top: @form-horizontal-label-margin-top;
         float: left;
         .hook-form-horizontal-label();
     }
 
-    .uk-form-horizontal .uk-form-controls { margin-left: @form-horizontal-controls-margin-left; }
+    .uk-form-horizontal :where(.uk-form-controls) { margin-left: @form-horizontal-controls-margin-left; }
 
     /* Better vertical alignment if controls are checkboxes and radio buttons with text */
-    .uk-form-horizontal .uk-form-controls-text { padding-top: @form-horizontal-controls-text-padding-top; }
+    .uk-form-horizontal :where(.uk-form-controls-text) { padding-top: @form-horizontal-controls-text-padding-top; }
 
 }
 

package/src/less/components/grid.less

@@ -19,6 +19,7 @@
 // Sub-modifier:    `uk-grid-item-match`
 //
 // States:          `uk-first-column`
+//                  `uk-first-row`
 //
 // ========================================================================
 
@@ -80,32 +81,32 @@
 .uk-grid > * > :last-child { margin-bottom: 0; }
 
 
-/* Gutter
+/* Gap
  ========================================================================== */
 
 /*
  * Default
  */
 
-/* Horizontal */
 .uk-grid { margin-left: -@grid-gutter-horizontal; }
 .uk-grid > * { padding-left: @grid-gutter-horizontal; }
 
-/* Vertical */
-.uk-grid + .uk-grid,
-.uk-grid > .uk-grid-margin,
+.uk-grid { row-gap: @grid-gutter-vertical; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid),
 * + .uk-grid-margin { margin-top: @grid-gutter-vertical; }
 
 /* Desktop and bigger */
 @media (min-width: @breakpoint-large) {
 
-    /* Horizontal */
     .uk-grid { margin-left: -@grid-gutter-horizontal-l; }
     .uk-grid > * { padding-left: @grid-gutter-horizontal-l; }
 
-    /* Vertical */
-    .uk-grid + .uk-grid,
-    .uk-grid > .uk-grid-margin,
+    .uk-grid { row-gap: @grid-gutter-vertical-l; }
+
+    /* Margin */
+    .uk-grid + :where(.uk-grid),
     * + .uk-grid-margin { margin-top: @grid-gutter-vertical-l; }
 
 }
@@ -114,67 +115,63 @@
  * Small
  */
 
-/* Horizontal */
 .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; }
 
-/* Vertical */
-.uk-grid + .uk-grid-small,
-.uk-grid + .uk-grid-row-small,
-.uk-grid-small > .uk-grid-margin,
-.uk-grid-row-small > .uk-grid-margin,
+.uk-grid-small,
+.uk-grid-row-small { row-gap: @grid-small-gutter-vertical; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid-small, .uk-grid-row-small),
 * + .uk-grid-margin-small { margin-top: @grid-small-gutter-vertical; }
 
 /*
  * Medium
  */
 
-/* Horizontal */
 .uk-grid-medium,
 .uk-grid-column-medium { margin-left: -@grid-medium-gutter-horizontal; }
 .uk-grid-medium > *,
 .uk-grid-column-medium > * { padding-left: @grid-medium-gutter-horizontal; }
 
-/* Vertical */
-.uk-grid + .uk-grid-medium,
-.uk-grid + .uk-grid-row-medium,
-.uk-grid-medium > .uk-grid-margin,
-.uk-grid-row-medium > .uk-grid-margin,
+.uk-grid-medium,
+.uk-grid-row-medium { row-gap: @grid-medium-gutter-vertical; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid-medium, .uk-grid-row-medium),
 * + .uk-grid-margin-medium { margin-top: @grid-medium-gutter-vertical; }
 
 /*
  * Large
  */
 
-/* Horizontal */
 .uk-grid-large,
 .uk-grid-column-large { margin-left: -@grid-large-gutter-horizontal; }
 .uk-grid-large > *,
 .uk-grid-column-large > * { padding-left: @grid-large-gutter-horizontal; }
 
-/* Vertical */
-.uk-grid + .uk-grid-large,
-.uk-grid + .uk-grid-row-large,
-.uk-grid-large > .uk-grid-margin,
-.uk-grid-row-large > .uk-grid-margin,
+.uk-grid-large,
+.uk-grid-row-large { row-gap: @grid-large-gutter-vertical; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid-large, .uk-grid-row-large),
 * + .uk-grid-margin-large { margin-top: @grid-large-gutter-vertical; }
 
 /* Desktop and bigger */
 @media (min-width: @breakpoint-large) {
 
-    /* Horizontal */
     .uk-grid-large,
     .uk-grid-column-large { margin-left: -@grid-large-gutter-horizontal-l; }
     .uk-grid-large > *,
     .uk-grid-column-large > * { padding-left: @grid-large-gutter-horizontal-l; }
 
-    /* Vertical */
-    .uk-grid + .uk-grid-large,
-    .uk-grid + .uk-grid-row-large,
-    .uk-grid-large > .uk-grid-margin,
-    .uk-grid-row-large > .uk-grid-margin,
+    .uk-grid-large,
+    .uk-grid-row-large { row-gap: @grid-large-gutter-vertical-l; }
+
+    /* Margin */
+    .uk-grid + :where(.uk-grid-large, .uk-grid-row-large),
     * + .uk-grid-margin-large { margin-top: @grid-large-gutter-vertical-l; }
 
 }
@@ -183,17 +180,16 @@
  * Collapse
  */
 
-/* Horizontal */
 .uk-grid-collapse,
 .uk-grid-column-collapse { margin-left: 0; }
 .uk-grid-collapse > *,
 .uk-grid-column-collapse > * { padding-left: 0; }
 
-/* Vertical */
-.uk-grid + .uk-grid-collapse,
-.uk-grid + .uk-grid-row-collapse,
-.uk-grid-collapse > .uk-grid-margin,
-.uk-grid-row-collapse > .uk-grid-margin { margin-top: 0; }
+.uk-grid-collapse,
+.uk-grid-row-collapse { row-gap: 0; }
+
+/* Margin */
+.uk-grid + :where(.uk-grid-collapse, .uk-grid-row-collapse) { margin-top: 0; }
 
 
 /* Divider
@@ -201,6 +197,7 @@
 
 .uk-grid-divider > * { position: relative; }
 
+/* Horizontal */
 .uk-grid-divider > :not(.uk-first-column)::before {
     content: "";
     position: absolute;
@@ -211,7 +208,7 @@
 }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
     content: "";
     position: absolute;
     left: 0;
@@ -231,9 +228,9 @@
 .uk-grid-divider > :not(.uk-first-column)::before { left: @grid-gutter-horizontal; }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-gutter-vertical * 2); }
+.uk-grid-divider.uk-grid-stack { row-gap: (@grid-gutter-vertical * 2); }
 
-.uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
     top: -@grid-gutter-vertical;
     left: (@grid-gutter-horizontal * 2);
 }
@@ -248,9 +245,9 @@
     .uk-grid-divider > :not(.uk-first-column)::before { left: @grid-gutter-horizontal-l; }
 
     /* Vertical */
-    .uk-grid-divider.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-gutter-vertical-l * 2); }
+    .uk-grid-divider.uk-grid-stack { row-gap: (@grid-gutter-vertical-l * 2); }
 
-    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before {
+    .uk-grid-divider.uk-grid-stack > :not(.uk-first-row)::before {
         top: -@grid-gutter-vertical-l;
         left: (@grid-gutter-horizontal-l * 2);
     }
@@ -271,16 +268,15 @@
 .uk-grid-divider.uk-grid-column-small > :not(.uk-first-column)::before { left: @grid-small-gutter-horizontal; }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-small-gutter-vertical * 2); }
+.uk-grid-divider.uk-grid-stack:where(.uk-grid-small, .uk-grid-row-small) { row-gap: (@grid-small-gutter-vertical * 2); }
 
-.uk-grid-divider.uk-grid-small.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack.uk-grid-small > :not(.uk-first-row)::before {
     top: -@grid-small-gutter-vertical;
     left: (@grid-small-gutter-horizontal * 2);
 }
 
-.uk-grid-divider.uk-grid-row-small.uk-grid-stack > .uk-grid-margin::before { top: -@grid-small-gutter-vertical; }
-.uk-grid-divider.uk-grid-column-small.uk-grid-stack > .uk-grid-margin::before { left: (@grid-small-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-stack.uk-grid-row-small > :not(.uk-first-row)::before { top: -@grid-small-gutter-vertical; }
+.uk-grid-divider.uk-grid-stack.uk-grid-column-small > :not(.uk-first-row)::before { left: (@grid-small-gutter-horizontal * 2); }
 
 /*
  * Medium
@@ -296,16 +292,15 @@
 .uk-grid-divider.uk-grid-column-medium > :not(.uk-first-column)::before { left: @grid-medium-gutter-horizontal; }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-medium-gutter-vertical * 2); }
+.uk-grid-divider.uk-grid-stack:where(.uk-grid-medium, .uk-grid-row-medium) { row-gap: (@grid-medium-gutter-vertical * 2); }
 
-.uk-grid-divider.uk-grid-medium.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack.uk-grid-medium > :not(.uk-first-row)::before {
     top: -@grid-medium-gutter-vertical;
     left: (@grid-medium-gutter-horizontal * 2);
 }
 
-.uk-grid-divider.uk-grid-row-medium.uk-grid-stack > .uk-grid-margin::before { top: -@grid-medium-gutter-vertical; }
-.uk-grid-divider.uk-grid-column-medium.uk-grid-stack > .uk-grid-margin::before { left: (@grid-medium-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-stack.uk-grid-row-medium > :not(.uk-first-row)::before { top: -@grid-medium-gutter-vertical; }
+.uk-grid-divider.uk-grid-stack.uk-grid-column-medium > :not(.uk-first-row)::before { left: (@grid-medium-gutter-horizontal * 2); }
 
 /*
  * Large
@@ -321,16 +316,15 @@
 .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { left: @grid-large-gutter-horizontal; }
 
 /* Vertical */
-.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
-.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-large-gutter-vertical * 2); }
+.uk-grid-divider.uk-grid-stack:where(.uk-grid-large, .uk-grid-row-large) { row-gap: (@grid-large-gutter-vertical * 2); }
 
-.uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+.uk-grid-divider.uk-grid-stack.uk-grid-large > :not(.uk-first-row)::before {
     top: -@grid-large-gutter-vertical;
     left: (@grid-large-gutter-horizontal * 2);
 }
 
-.uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: -@grid-large-gutter-vertical; }
-.uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { left: (@grid-large-gutter-horizontal * 2); }
+.uk-grid-divider.uk-grid-stack.uk-grid-row-large > :not(.uk-first-row)::before { top: -@grid-large-gutter-vertical; }
+.uk-grid-divider.uk-grid-stack.uk-grid-column-large > :not(.uk-first-row)::before { left: (@grid-large-gutter-horizontal * 2); }
 
 /* Desktop and bigger */
 @media (min-width: @breakpoint-large) {
@@ -345,16 +339,15 @@
     .uk-grid-divider.uk-grid-column-large > :not(.uk-first-column)::before { left: @grid-large-gutter-horizontal-l; }
 
     /* Vertical */
-    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin,
-    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin { margin-top: (@grid-large-gutter-vertical-l * 2); }
+    .uk-grid-divider.uk-grid-stack:where(.uk-grid-large, .uk-grid-row-large) { row-gap: (@grid-large-gutter-vertical-l * 2); }
 
-    .uk-grid-divider.uk-grid-large.uk-grid-stack > .uk-grid-margin::before {
+    .uk-grid-divider.uk-grid-stack.uk-grid-large > :not(.uk-first-row)::before {
         top: -@grid-large-gutter-vertical-l;
         left: (@grid-large-gutter-horizontal-l * 2);
     }
 
-    .uk-grid-divider.uk-grid-row-large.uk-grid-stack > .uk-grid-margin::before { top: -@grid-large-gutter-vertical-l; }
-    .uk-grid-divider.uk-grid-column-large.uk-grid-stack > .uk-grid-margin::before { left: (@grid-large-gutter-horizontal-l * 2); }
+    .uk-grid-divider.uk-grid-stack.uk-grid-row-large > :not(.uk-first-row)::before { top: -@grid-large-gutter-vertical-l; }
+    .uk-grid-divider.uk-grid-stack.uk-grid-column-large > :not(.uk-first-row)::before { left: (@grid-large-gutter-horizontal-l * 2); }
 
 }