uikit 3.16.27 → 3.17.1-dev.7c0766a6f

package/src/js/util/viewport.js

@@ -60,26 +60,40 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
                 top = 0;
             }
 
-            return () => scrollTo(scrollElement, top - scrollTop).then(fn);
+            return () => scrollTo(scrollElement, top - scrollTop, element, maxScroll).then(fn);
         },
         () => Promise.resolve(),
     )();
 
-    function scrollTo(element, top) {
+    function scrollTo(element, top, targetEl, maxScroll) {
         return new Promise((resolve) => {
             const scroll = element.scrollTop;
             const duration = getDuration(Math.abs(top));
             const start = Date.now();
+            const targetTop = offset(targetEl).top;
+            let prev = 0;
+            let frames = 15;
 
             (function step() {
                 const percent = ease(clamp((Date.now() - start) / duration));
+                let diff = 0;
+                if (parents[0] === element && scroll + top < maxScroll) {
+                    diff = offset(targetEl).top - targetTop;
+                    const fixedEl = findFixedElement(targetEl);
+                    diff -= fixedEl ? offset(fixedEl).height : 0;
+                }
 
-                element.scrollTop = scroll + top * percent;
+                element.scrollTop = Math[top + diff > 0 ? 'max' : 'min'](
+                    element.scrollTop,
+                    scroll + (top + diff) * percent,
+                );
 
                 // scroll more if we have not reached our destination
-                if (percent === 1) {
+                // if element changes position during scroll try another step
+                if (percent === 1 && (prev === diff || !frames--)) {
                     resolve();
                 } else {
+                    prev = diff;
                     requestAnimationFrame(step);
                 }
             })();
@@ -93,6 +107,14 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
     function ease(k) {
         return 0.5 * (1 - Math.cos(Math.PI * k));
     }
+
+    function findFixedElement(target) {
+        return target.ownerDocument
+            .elementsFromPoint(0, 0)
+            .find(
+                (el) => ['fixed', 'sticky'].includes(css(el, 'position')) && !el.contains(target),
+            );
+    }
 }
 
 export function scrolledOver(element, startOffset = 0, endOffset = 0) {

package/src/less/components/base.less

@@ -327,7 +327,8 @@ h6, .uk-h6,
 .uk-heading-medium,
 .uk-heading-large,
 .uk-heading-xlarge,
-.uk-heading-2xlarge {
+.uk-heading-2xlarge,
+.uk-heading-3xlarge {
     margin: 0 0 @base-margin-vertical 0;
     font-family: @base-heading-font-family;
     font-weight: @base-heading-font-weight;
@@ -347,7 +348,8 @@ h6, .uk-h6,
 * + .uk-heading-medium,
 * + .uk-heading-large,
 * + .uk-heading-xlarge,
-* + .uk-heading-2xlarge { margin-top: @base-heading-margin-top; }
+* + .uk-heading-2xlarge,
+* + .uk-heading-3xlarge { margin-top: @base-heading-margin-top; }
 
 /*
  * Sizes
@@ -649,7 +651,8 @@ template { display: none; }
     .uk-heading-medium,
     .uk-heading-large,
     .uk-heading-xlarge,
-    .uk-heading-2xlarge {
+    .uk-heading-2xlarge,
+    .uk-heading-3xlarge {
         color: @inverse-base-heading-color;
         .hook-inverse-base-heading();
     }

package/src/less/components/form.less

@@ -206,12 +206,15 @@
 
 /*
  * Define consistent border, margin, and padding.
+ * 1. Reset `min-width`
  */
 
 .uk-fieldset {
     border: none;
     margin: 0;
     padding: 0;
+    /* 1 */
+    min-width: 0;
 }
 
 

package/src/less/components/heading.less

@@ -18,23 +18,27 @@
 @heading-large-font-size:                       @heading-large-font-size-m * 0.85;      // 50px 0.78
 @heading-xlarge-font-size:                      @heading-large-font-size-m;             // 4rem / 64px
 @heading-2xlarge-font-size:                     @heading-xlarge-font-size-m;            // 6rem / 96px
+@heading-3xlarge-font-size:                     @heading-2xlarge-font-size-m;           // 8rem / 128px
 
 @heading-small-font-size-m:                     @heading-medium-font-size-l * 0.8125;   // 3.25rem / 52px
 @heading-medium-font-size-m:                    @heading-medium-font-size-l * 0.875;    // 3.5rem / 56px
 @heading-large-font-size-m:                     @heading-medium-font-size-l;            // 4rem / 64px
 @heading-xlarge-font-size-m:                    @heading-large-font-size-l;             // 6rem / 96px
 @heading-2xlarge-font-size-m:                   @heading-xlarge-font-size-l;            // 8rem / 128px
+@heading-3xlarge-font-size-m:                   @heading-2xlarge-font-size-l;           // 11rem / 176px
 
 @heading-medium-font-size-l:                    4rem;                                   // 64px
 @heading-large-font-size-l:                     6rem;                                   // 96px
 @heading-xlarge-font-size-l:                    8rem;                                   // 128px
 @heading-2xlarge-font-size-l:                   11rem;                                  // 176px
+@heading-3xlarge-font-size-l:                   15rem;                                  // 240px
 
 @heading-small-line-height:                     1.2;
 @heading-medium-line-height:                    1.1;
 @heading-large-line-height:                     1.1;
 @heading-xlarge-line-height:                    1;
 @heading-2xlarge-line-height:                   1;
+@heading-3xlarge-line-height:                   1;
 
 @heading-divider-padding-bottom:                ~'calc(5px + 0.1em)';
 @heading-divider-border-width:                  ~'calc(0.2px + 0.05em)';
@@ -88,6 +92,12 @@
     .hook-heading-2xlarge();
 }
 
+.uk-heading-3xlarge {
+    font-size: @heading-3xlarge-font-size;
+    line-height: @heading-3xlarge-line-height;
+    .hook-heading-3xlarge();
+}
+
 /* Tablet Landscape and bigger */
 @media (min-width: @breakpoint-medium) {
 
@@ -96,6 +106,7 @@
     .uk-heading-large { font-size: @heading-large-font-size-m; }
     .uk-heading-xlarge { font-size: @heading-xlarge-font-size-m; }
     .uk-heading-2xlarge { font-size: @heading-2xlarge-font-size-m; }
+    .uk-heading-3xlarge { font-size: @heading-3xlarge-font-size-m; }
 
 }
 
@@ -106,6 +117,7 @@
     .uk-heading-large { font-size: @heading-large-font-size-l; }
     .uk-heading-xlarge { font-size: @heading-xlarge-font-size-l; }
     .uk-heading-2xlarge { font-size: @heading-2xlarge-font-size-l; }
+    .uk-heading-3xlarge { font-size: @heading-3xlarge-font-size-l; }
 
 }
 
@@ -280,6 +292,7 @@
 .hook-heading-large() {}
 .hook-heading-xlarge() {}
 .hook-heading-2xlarge() {}
+.hook-heading-3xlarge() {}
 .hook-heading-primary() {}
 .hook-heading-hero() {}
 .hook-heading-divider() {}
@@ -317,6 +330,10 @@
         .hook-inverse-heading-2xlarge();
     }
 
+    .uk-heading-3xlarge {
+        .hook-inverse-heading-3xlarge();
+    }
+
     .uk-heading-primary when (@deprecated = true) {
         .hook-inverse-heading-primary();
     }
@@ -348,6 +365,7 @@
 .hook-inverse-heading-large() {}
 .hook-inverse-heading-xlarge() {}
 .hook-inverse-heading-2xlarge() {}
+.hook-inverse-heading-3xlarge() {}
 .hook-inverse-heading-primary() {}
 .hook-inverse-heading-hero() {}
 .hook-inverse-heading-divider() {}

package/src/less/components/navbar.less

@@ -97,6 +97,8 @@
 @navbar-dropdown-nav-sublist-item-hover-color:  @global-color;
 @navbar-dropdown-nav-sublist-item-active-color: @global-emphasis-color;
 
+@navbar-dropbar-behind-color-mode:              dark;
+
 
 /* ========================================================================
    Component: Navbar
@@ -104,16 +106,18 @@
 
 /*
  * 1. Create position context to center navbar group
+ * 2. Pass dropbar behind color to JS
  */
 
 .uk-navbar {
     display: flex;
     /* 1 */
     position: relative;
+    /* 2 */
+    --uk-navbar-dropbar-behind-color: @navbar-dropbar-behind-color-mode;
     .hook-navbar();
 }
 
-
 /* Container
  ========================================================================== */
 
@@ -396,7 +400,7 @@
  * Remove margin from the last-child
  */
 
- .uk-navbar-dropdown > :last-child { margin-bottom: 0; }
+.uk-navbar-dropdown > :last-child { margin-bottom: 0; }
 
 // Color Mode
 .uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
@@ -557,16 +561,6 @@
     .hook-navbar-dropbar();
 }
 
-/*
- * Create navbar placeholder space if dropbar is behind navbar
- */
-
-.uk-navbar-dropbar-behind::before {
-    content: "";
-    display: block;
-    height: @navbar-nav-item-height;
-}
-
 
 // Hooks
 // ========================================================================

package/src/less/components/pagination.less

@@ -32,8 +32,9 @@
 
 /*
  * 1. Allow items to wrap into the next line
- * 2. Gutter
- * 3. Reset list
+ * 2. Center items vertically if they have a different height
+ * 3. Gutter
+ * 4. Reset list
  */
 
 .uk-pagination {
@@ -41,8 +42,10 @@
     /* 1 */
     flex-wrap: wrap;
     /* 2 */
-    margin-left: -@pagination-margin-horizontal;
+    align-items: center;
     /* 3 */
+    margin-left: -@pagination-margin-horizontal;
+    /* 4 */
     padding: 0;
     list-style: none;
     .hook-pagination();
@@ -68,14 +71,18 @@
  ========================================================================== */
 
 /*
- * 1. Prevent gap if child element is `inline-block`, e.g. an icon
- * 2. Style
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Style
  */
 
 .uk-pagination > * > * {
     /* 1 */
-    display: block;
+    display: flex;
+    align-items: center;
     /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
     padding: @pagination-item-padding-vertical @pagination-item-padding-horizontal;
     color: @pagination-item-color;
     .hook-pagination-item();

package/src/less/components/position.less

@@ -220,6 +220,7 @@
 .uk-position-z-index { z-index: 1; }
 .uk-position-z-index-zero { z-index: 0; }
 .uk-position-z-index-negative { z-index: -1; }
+.uk-position-z-index-high { z-index: @global-z-index - 10; }
 
 
 // Hooks

package/src/less/components/section.less

@@ -35,8 +35,10 @@
 @section-xlarge-padding-vertical-m:               (@global-large-margin + @global-xlarge-margin);
 
 @section-default-background:                      @global-background;
+@section-default-color-mode:                      dark;
 
 @section-muted-background:                        @global-muted-background;
+@section-muted-color-mode:                        dark;
 
 @section-primary-background:                      @global-primary-background;
 @section-primary-color-mode:                      light;
@@ -148,6 +150,7 @@
 
 .uk-section-default {
     background: @section-default-background;
+    --uk-navbar-color: @section-default-color-mode;
     .hook-section-default();
 }
 
@@ -157,6 +160,7 @@
 
 .uk-section-muted {
     background: @section-muted-background;
+    --uk-navbar-color: @section-muted-color-mode;
     .hook-section-muted();
 }
 
@@ -166,6 +170,7 @@
 
 .uk-section-primary {
     background: @section-primary-background;
+    --uk-navbar-color: @section-primary-color-mode;
     .hook-section-primary();
 }
 
@@ -178,6 +183,7 @@
 
 .uk-section-secondary {
     background: @section-secondary-background;
+    --uk-navbar-color: @section-secondary-color-mode;
     .hook-section-secondary();
 }
 

package/src/less/theme/heading.less

@@ -21,6 +21,8 @@
 
 .hook-heading-2xlarge() {}
 
+.hook-heading-3xlarge() {}
+
 
 // Divider
 // ========================================================================
@@ -60,6 +62,8 @@
 
 .hook-inverse-heading-2xlarge() {}
 
+.hook-inverse-heading-3xlarge() {}
+
 .hook-inverse-heading-divider() {}
 
 .hook-inverse-heading-bullet() {}

package/src/less/theme/navbar.less

@@ -138,6 +138,11 @@
 
 .hook-navbar-misc() {
 
+    .uk-navbar-container {
+        transition: 0.1s ease-in-out;
+        transition-property: background-color;
+    }
+
     /* Tablet landscape and bigger */
     @media (min-width: @breakpoint-medium) {
 

package/src/scss/components/base.scss

@@ -265,7 +265,8 @@ h6, .uk-h6,
 .uk-heading-medium,
 .uk-heading-large,
 .uk-heading-xlarge,
-.uk-heading-2xlarge {
+.uk-heading-2xlarge,
+.uk-heading-3xlarge {
     margin: 0 0 $base-margin-vertical 0;
     font-family: $base-heading-font-family;
     font-weight: $base-heading-font-weight;
@@ -285,7 +286,8 @@ h6, .uk-h6,
 * + .uk-heading-medium,
 * + .uk-heading-large,
 * + .uk-heading-xlarge,
-* + .uk-heading-2xlarge { margin-top: $base-heading-margin-top; }
+* + .uk-heading-2xlarge,
+* + .uk-heading-3xlarge { margin-top: $base-heading-margin-top; }
 
 /*
  * Sizes

package/src/scss/components/form.scss

@@ -149,12 +149,15 @@
 
 /*
  * Define consistent border, margin, and padding.
+ * 1. Reset `min-width`
  */
 
 .uk-fieldset {
     border: none;
     margin: 0;
     padding: 0;
+    /* 1 */
+    min-width: 0;
 }
 
 

package/src/scss/components/heading.scss

@@ -18,17 +18,20 @@ $heading-medium-font-size:                       $heading-medium-font-size-m * 0
 $heading-large-font-size:                        $heading-large-font-size-m * 0.85 !default;      // 50px 0.78
 $heading-xlarge-font-size:                       $heading-large-font-size-m !default;             // 4rem / 64px
 $heading-2xlarge-font-size:                      $heading-xlarge-font-size-m !default;            // 6rem / 96px
+$heading-3xlarge-font-size:                      $heading-2xlarge-font-size-m !default;           // 8rem / 128px
 
 $heading-small-font-size-m:                      $heading-medium-font-size-l * 0.8125 !default;   // 3.25rem / 52px
 $heading-medium-font-size-m:                     $heading-medium-font-size-l * 0.875 !default;    // 3.5rem / 56px
 $heading-large-font-size-m:                      $heading-medium-font-size-l !default;            // 4rem / 64px
 $heading-xlarge-font-size-m:                     $heading-large-font-size-l !default;             // 6rem / 96px
 $heading-2xlarge-font-size-m:                    $heading-xlarge-font-size-l !default;            // 8rem / 128px
+$heading-3xlarge-font-size-m:                    $heading-2xlarge-font-size-l !default;           // 11rem / 176px
 
 $heading-medium-font-size-l:                     4rem !default;                                   // 64px
 $heading-large-font-size-l:                      6rem !default;                                   // 96px
 $heading-xlarge-font-size-l:                     8rem !default;                                   // 128px
 $heading-2xlarge-font-size-l:                    11rem !default;                                  // 176px
+$heading-3xlarge-font-size-l:                    15rem !default;                                  // 240px
 
 
 
@@ -69,6 +72,12 @@ $heading-2xlarge-font-size-l:                    11rem !default;
     @if(mixin-exists(hook-heading-2xlarge)) {@include hook-heading-2xlarge();}
 }
 
+.uk-heading-3xlarge {
+    font-size: $heading-3xlarge-font-size;
+    line-height: $heading-3xlarge-line-height;
+    @if(mixin-exists(hook-heading-3xlarge)) {@include hook-heading-3xlarge();}
+}
+
 /* Tablet Landscape and bigger */
 @media (min-width: $breakpoint-medium) {
 
@@ -77,6 +86,7 @@ $heading-2xlarge-font-size-l:                    11rem !default;
     .uk-heading-large { font-size: $heading-large-font-size-m; }
     .uk-heading-xlarge { font-size: $heading-xlarge-font-size-m; }
     .uk-heading-2xlarge { font-size: $heading-2xlarge-font-size-m; }
+    .uk-heading-3xlarge { font-size: $heading-3xlarge-font-size-m; }
 
 }
 
@@ -87,6 +97,7 @@ $heading-2xlarge-font-size-l:                    11rem !default;
     .uk-heading-large { font-size: $heading-large-font-size-l; }
     .uk-heading-xlarge { font-size: $heading-xlarge-font-size-l; }
     .uk-heading-2xlarge { font-size: $heading-2xlarge-font-size-l; }
+    .uk-heading-3xlarge { font-size: $heading-3xlarge-font-size-l; }
 
 }
 
@@ -268,6 +279,7 @@ $heading-hero-font-size:                         $heading-hero-font-size-l * 0.5
 // @mixin hook-heading-large(){}
 // @mixin hook-heading-xlarge(){}
 // @mixin hook-heading-2xlarge(){}
+// @mixin hook-heading-3xlarge(){}
 // @mixin hook-heading-primary(){}
 // @mixin hook-heading-hero(){}
 // @mixin hook-heading-divider(){}
@@ -287,6 +299,7 @@ $heading-hero-font-size:                         $heading-hero-font-size-l * 0.5
 // @mixin hook-inverse-heading-large(){}
 // @mixin hook-inverse-heading-xlarge(){}
 // @mixin hook-inverse-heading-2xlarge(){}
+// @mixin hook-inverse-heading-3xlarge(){}
 // @mixin hook-inverse-heading-primary(){}
 // @mixin hook-inverse-heading-hero(){}
 // @mixin hook-inverse-heading-divider(){}

package/src/scss/components/navbar.scss

@@ -49,22 +49,25 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 
 
+
 /* ========================================================================
    Component: Navbar
  ========================================================================== */
 
 /*
  * 1. Create position context to center navbar group
+ * 2. Pass dropbar behind color to JS
  */
 
 .uk-navbar {
     display: flex;
     /* 1 */
     position: relative;
+    /* 2 */
+    --uk-navbar-dropbar-behind-color: #{$navbar-dropbar-behind-color-mode};
     @if(mixin-exists(hook-navbar)) {@include hook-navbar();}
 }
 
-
 /* Container
  ========================================================================== */
 
@@ -347,7 +350,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
  * Remove margin from the last-child
  */
 
- .uk-navbar-dropdown > :last-child { margin-bottom: 0; }
+.uk-navbar-dropdown > :last-child { margin-bottom: 0; }
 
 // Color Mode
 @if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
@@ -510,16 +513,6 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
 }
 
-/*
- * Create navbar placeholder space if dropbar is behind navbar
- */
-
-.uk-navbar-dropbar-behind::before {
-    content: "";
-    display: block;
-    height: $navbar-nav-item-height;
-}
-
 
 // Hooks
 // ========================================================================

package/src/scss/components/pagination.scss

@@ -24,8 +24,9 @@
 
 /*
  * 1. Allow items to wrap into the next line
- * 2. Gutter
- * 3. Reset list
+ * 2. Center items vertically if they have a different height
+ * 3. Gutter
+ * 4. Reset list
  */
 
 .uk-pagination {
@@ -33,8 +34,10 @@
     /* 1 */
     flex-wrap: wrap;
     /* 2 */
-    margin-left: (-$pagination-margin-horizontal);
+    align-items: center;
     /* 3 */
+    margin-left: (-$pagination-margin-horizontal);
+    /* 4 */
     padding: 0;
     list-style: none;
     @if(mixin-exists(hook-pagination)) {@include hook-pagination();}
@@ -60,14 +63,18 @@
  ========================================================================== */
 
 /*
- * 1. Prevent gap if child element is `inline-block`, e.g. an icon
- * 2. Style
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Style
  */
 
 .uk-pagination > * > * {
     /* 1 */
-    display: block;
+    display: flex;
+    align-items: center;
     /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
     padding: $pagination-item-padding-vertical $pagination-item-padding-horizontal;
     color: $pagination-item-color;
     @if(mixin-exists(hook-pagination-item)) {@include hook-pagination-item();}

package/src/scss/components/position.scss

@@ -216,6 +216,7 @@
 .uk-position-z-index { z-index: 1; }
 .uk-position-z-index-zero { z-index: 0; }
 .uk-position-z-index-negative { z-index: -1; }
+.uk-position-z-index-high { z-index: $global-z-index - 10; }
 
 
 // Hooks

package/src/scss/components/section.scss

@@ -134,6 +134,7 @@
 
 .uk-section-default {
     background: $section-default-background;
+    --uk-navbar-color: #{$section-default-color-mode};
     @if(mixin-exists(hook-section-default)) {@include hook-section-default();}
 }
 
@@ -143,6 +144,7 @@
 
 .uk-section-muted {
     background: $section-muted-background;
+    --uk-navbar-color: #{$section-muted-color-mode};
     @if(mixin-exists(hook-section-muted)) {@include hook-section-muted();}
 }
 
@@ -152,6 +154,7 @@
 
 .uk-section-primary {
     background: $section-primary-background;
+    --uk-navbar-color: #{$section-primary-color-mode};
     @if(mixin-exists(hook-section-primary)) {@include hook-section-primary();}
 }
 
@@ -164,6 +167,7 @@
 
 .uk-section-secondary {
     background: $section-secondary-background;
+    --uk-navbar-color: #{$section-secondary-color-mode};
     @if(mixin-exists(hook-section-secondary)) {@include hook-section-secondary();}
 }
 

package/src/scss/mixins-theme.scss

@@ -219,7 +219,8 @@
     .uk-heading-medium,
     .uk-heading-large,
     .uk-heading-xlarge,
-    .uk-heading-2xlarge {
+    .uk-heading-2xlarge,
+    .uk-heading-3xlarge {
         color: $inverse-base-heading-color;
         @if(mixin-exists(hook-inverse-base-heading)) {@include hook-inverse-base-heading();}
     }
@@ -972,6 +973,7 @@
 @mixin hook-heading-large(){}
 @mixin hook-heading-xlarge(){}
 @mixin hook-heading-2xlarge(){}
+@mixin hook-heading-3xlarge(){}
 @mixin hook-heading-primary(){}
 @mixin hook-heading-hero(){}
 @mixin hook-heading-divider(){}
@@ -983,6 +985,7 @@
 @mixin hook-inverse-heading-large(){}
 @mixin hook-inverse-heading-xlarge(){}
 @mixin hook-inverse-heading-2xlarge(){}
+@mixin hook-inverse-heading-3xlarge(){}
 @mixin hook-inverse-heading-primary(){}
 @mixin hook-inverse-heading-hero(){}
 @mixin hook-inverse-heading-divider(){}
@@ -1010,6 +1013,10 @@
         @if(mixin-exists(hook-inverse-heading-2xlarge)) {@include hook-inverse-heading-2xlarge();}
     }
 
+    .uk-heading-3xlarge {
+        @if(mixin-exists(hook-inverse-heading-3xlarge)) {@include hook-inverse-heading-3xlarge();}
+    }
+
     @if ($deprecated == true) { .uk-heading-primary { @if (mixin-exists(hook-inverse-heading-primary)) {@include hook-inverse-heading-primary();}}}
 
     @if ($deprecated == true) { .uk-heading-hero { @if (mixin-exists(hook-inverse-heading-hero)) {@include hook-inverse-heading-hero();}}}
@@ -1512,6 +1519,11 @@
 @mixin hook-navbar-dropbar(){}
 @mixin hook-navbar-misc(){
 
+    .uk-navbar-container {
+        transition: 0.1s ease-in-out;
+        transition-property: background-color;
+    }
+
     /* Tablet landscape and bigger */
     @media (min-width: $breakpoint-medium) {