uikit 3.20.8 → 3.20.9-dev.50e5c71c4

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.20.8",
+  "version": "3.20.9-dev.50e5c71c4",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/height-placeholder.js

@@ -23,7 +23,7 @@ export default {
 
     update: {
         read() {
-            return { height: this.target.offsetHeight };
+            return this.target ? { height: this.target.offsetHeight } : false;
         },
 
         write({ height }) {

package/src/js/core/modal.js

@@ -126,7 +126,7 @@ function install({ modal }) {
             ({ i18n }) => `<form class="uk-form-stacked">
                 <div class="uk-modal-body">
                     <label>${isString(message) ? message : html(message)}</label>
-                    <input class="uk-input" value="${value || ''}" autofocus>
+                    <input class="uk-input" value="" autofocus>
                 </div>
                 <div class="uk-modal-footer uk-text-right">
                     <button class="uk-button uk-button-default uk-modal-close" type="button">${
@@ -142,6 +142,7 @@ function install({ modal }) {
 
         const { $el } = promise.dialog;
         const input = $('input', $el);
+        input.value = value || '';
         on($el, 'show', () => input.select());
 
         return promise;

package/src/js/core/sticky.js

@@ -105,11 +105,7 @@ export default {
             },
         }),
         scroll({ target: () => document.scrollingElement }),
-        resize({
-            target: () => document.scrollingElement,
-            options: { box: 'content-box' },
-        }),
-        resize(),
+        resize({ target: ({ $el }) => [$el, document.scrollingElement] }),
     ],
 
     events: [
@@ -490,7 +486,10 @@ function reset(el) {
     css(el, { position: '', top: '', marginTop: '', width: '' });
 }
 
-function preventTransition(el) {
-    addClass(el, 'uk-transition-disable');
-    requestAnimationFrame(() => removeClass(el, 'uk-transition-disable'));
+const clsTransitionDisable = 'uk-transition-disable';
+function preventTransition(element) {
+    if (!hasClass(element, clsTransitionDisable)) {
+        addClass(element, clsTransitionDisable);
+        requestAnimationFrame(() => removeClass(element, clsTransitionDisable));
+    }
 }

package/src/js/mixin/internal/animate-slide.js

@@ -38,7 +38,7 @@ export default async function (action, target, duration) {
     // Wait for update to propagate
     await Promise.resolve();
 
-    // Possibly reset the forced transition property
+    // Reset the forced transition property
     css(targets, 'transitionProperty', '');
 
     // Get new state

package/src/js/mixin/slider.js

@@ -153,7 +153,9 @@ export default {
                 stack.shift();
                 this._transitioner = null;
 
-                requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
+                if (stack.length) {
+                    requestAnimationFrame(() => stack.length && this.show(stack.shift(), true));
+                }
             });
 
             prev && trigger(prev, 'itemhide', [this]);

package/src/less/components/card.less

@@ -238,6 +238,7 @@
  */
 
 .uk-card-default {
+    --uk-inverse: @card-default-color-mode;
     background-color: @card-default-background;
     color: @card-default-color;
     .hook-card-default();
@@ -272,6 +273,7 @@
  */
 
 .uk-card-primary {
+    --uk-inverse: @card-primary-color-mode;
     background-color: @card-primary-background;
     color: @card-primary-color;
     .hook-card-primary();
@@ -298,6 +300,7 @@
  */
 
 .uk-card-secondary {
+    --uk-inverse: @card-secondary-color-mode;
     background-color: @card-secondary-background;
     color: @card-secondary-color;
     .hook-card-secondary();

package/src/less/components/dropbar.less

@@ -44,6 +44,7 @@
     --uk-position-offset: @dropbar-margin;
     --uk-position-shift-offset: 0;
     --uk-position-viewport-offset: 0;
+    --uk-inverse: @dropbar-color-mode;
     /* 1 */
     width: auto;
     /* 2 */

package/src/less/components/dropdown.less

@@ -59,6 +59,7 @@
 .uk-dropdown {
     --uk-position-offset: @dropdown-margin;
     --uk-position-viewport-offset: @dropdown-viewport-margin;
+    --uk-inverse: @dropdown-color-mode;
     /* 1 */
     width: auto;
     /* 2 */

package/src/less/components/navbar.less

@@ -383,6 +383,7 @@
     --uk-position-offset: @navbar-dropdown-margin;
     --uk-position-shift-offset: @navbar-dropdown-shift-margin;
     --uk-position-viewport-offset: @navbar-dropdown-viewport-margin;
+    --uk-inverse: @navbar-dropdown-color-mode;
     /* 1 */
     width: @navbar-dropdown-width;
     /* 2 */

package/src/less/components/offcanvas.less

@@ -83,6 +83,7 @@
  */
 
 .uk-offcanvas-bar {
+    --uk-inverse: @offcanvas-bar-color-mode;
     /* 1 */
     position: absolute;
     top: 0;

package/src/less/components/overlay.less

@@ -56,6 +56,7 @@
  */
 
 .uk-overlay-default {
+    --uk-inverse: @overlay-default-color-mode;
     background: @overlay-default-background;
     .hook-overlay-default();
 }
@@ -69,6 +70,7 @@
  */
 
 .uk-overlay-primary {
+    --uk-inverse: @overlay-primary-color-mode;
     background: @overlay-primary-background;
     .hook-overlay-primary();
 }

package/src/less/components/section.less

@@ -148,6 +148,7 @@
  */
 
 .uk-section-default {
+    --uk-inverse: @section-default-color-mode;
     background: @section-default-background;
     .hook-section-default();
 }
@@ -160,6 +161,7 @@
  */
 
 .uk-section-muted {
+    --uk-inverse: @section-muted-color-mode;
     background: @section-muted-background;
     .hook-section-muted();
 }
@@ -167,11 +169,13 @@
 .uk-section-muted:not(.uk-preserve-color):extend(.uk-light all) when (@section-muted-color-mode = light) {}
 .uk-section-muted:not(.uk-preserve-color):extend(.uk-dark all) when (@section-muted-color-mode = dark) {}
 
+
 /*
  * Primary
  */
 
 .uk-section-primary {
+    --uk-inverse: @section-primary-color-mode;
     background: @section-primary-background;
     .hook-section-primary();
 }
@@ -184,6 +188,7 @@
  */
 
 .uk-section-secondary {
+    --uk-inverse: @section-secondary-color-mode;
     background: @section-secondary-background;
     .hook-section-secondary();
 }

package/src/less/components/tile.less

@@ -162,6 +162,7 @@
  */
 
 .uk-tile-default {
+    --uk-inverse: @tile-default-color-mode;
     background-color: @tile-default-background;
     .hook-tile-default();
 }
@@ -179,6 +180,7 @@
  */
 
 .uk-tile-muted {
+    --uk-inverse: @tile-muted-color-mode;
     background-color: @tile-muted-background;
     .hook-tile-muted();
 }
@@ -196,6 +198,7 @@
  */
 
 .uk-tile-primary {
+    --uk-inverse: @tile-primary-color-mode;
     background-color: @tile-primary-background;
     .hook-tile-primary();
 }
@@ -213,6 +216,7 @@
  */
 
 .uk-tile-secondary {
+    --uk-inverse: @tile-secondary-color-mode;
     background-color: @tile-secondary-background;
     .hook-tile-secondary();
 }

package/src/scss/components/card.scss

@@ -189,6 +189,7 @@
  */
 
 .uk-card-default {
+    --uk-inverse: #{$card-default-color-mode};
     background-color: $card-default-background;
     color: $card-default-color;
     @if(mixin-exists(hook-card-default)) {@include hook-card-default();}
@@ -223,6 +224,7 @@
  */
 
 .uk-card-primary {
+    --uk-inverse: #{$card-primary-color-mode};
     background-color: $card-primary-background;
     color: $card-primary-color;
     @if(mixin-exists(hook-card-primary)) {@include hook-card-primary();}
@@ -249,6 +251,7 @@
  */
 
 .uk-card-secondary {
+    --uk-inverse: #{$card-secondary-color-mode};
     background-color: $card-secondary-background;
     color: $card-secondary-color;
     @if(mixin-exists(hook-card-secondary)) {@include hook-card-secondary();}

package/src/scss/components/dropbar.scss

@@ -32,6 +32,7 @@
     --uk-position-offset: #{$dropbar-margin};
     --uk-position-shift-offset: 0;
     --uk-position-viewport-offset: 0;
+    --uk-inverse: #{$dropbar-color-mode};
     /* 1 */
     width: auto;
     /* 2 */

package/src/scss/components/dropdown.scss

@@ -35,6 +35,7 @@
 .uk-dropdown {
     --uk-position-offset: #{$dropdown-margin};
     --uk-position-viewport-offset: #{$dropdown-viewport-margin};
+    --uk-inverse: #{$dropdown-color-mode};
     /* 1 */
     width: auto;
     /* 2 */

package/src/scss/components/navbar.scss

@@ -334,6 +334,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     --uk-position-offset: #{$navbar-dropdown-margin};
     --uk-position-shift-offset: #{$navbar-dropdown-shift-margin};
     --uk-position-viewport-offset: #{$navbar-dropdown-viewport-margin};
+    --uk-inverse: #{$navbar-dropdown-color-mode};
     /* 1 */
     width: $navbar-dropdown-width;
     /* 2 */

package/src/scss/components/offcanvas.scss

@@ -70,6 +70,7 @@
  */
 
 .uk-offcanvas-bar {
+    --uk-inverse: #{$offcanvas-bar-color-mode};
     /* 1 */
     position: absolute;
     top: 0;

package/src/scss/components/overlay.scss

@@ -50,6 +50,7 @@
  */
 
 .uk-overlay-default {
+    --uk-inverse: #{$overlay-default-color-mode};
     background: $overlay-default-background;
     @if(mixin-exists(hook-overlay-default)) {@include hook-overlay-default();}
 }
@@ -63,6 +64,7 @@
  */
 
 .uk-overlay-primary {
+    --uk-inverse: #{$overlay-primary-color-mode};
     background: $overlay-primary-background;
     @if(mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();}
 }

package/src/scss/components/section.scss

@@ -132,6 +132,7 @@
  */
 
 .uk-section-default {
+    --uk-inverse: #{$section-default-color-mode};
     background: $section-default-background;
     @if(mixin-exists(hook-section-default)) {@include hook-section-default();}
 }
@@ -144,6 +145,7 @@
  */
 
 .uk-section-muted {
+    --uk-inverse: #{$section-muted-color-mode};
     background: $section-muted-background;
     @if(mixin-exists(hook-section-muted)) {@include hook-section-muted();}
 }
@@ -151,11 +153,13 @@
 @if ( $section-muted-color-mode == light ) { .uk-section-muted:not(.uk-preserve-color) { @extend .uk-light !optional;} }
 @if ( $section-muted-color-mode == dark ) { .uk-section-muted:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
 
+
 /*
  * Primary
  */
 
 .uk-section-primary {
+    --uk-inverse: #{$section-primary-color-mode};
     background: $section-primary-background;
     @if(mixin-exists(hook-section-primary)) {@include hook-section-primary();}
 }
@@ -168,6 +172,7 @@
  */
 
 .uk-section-secondary {
+    --uk-inverse: #{$section-secondary-color-mode};
     background: $section-secondary-background;
     @if(mixin-exists(hook-section-secondary)) {@include hook-section-secondary();}
 }

package/src/scss/components/tile.scss

@@ -143,6 +143,7 @@
  */
 
 .uk-tile-default {
+    --uk-inverse: #{$tile-default-color-mode};
     background-color: $tile-default-background;
     @if(mixin-exists(hook-tile-default)) {@include hook-tile-default();}
 }
@@ -160,6 +161,7 @@
  */
 
 .uk-tile-muted {
+    --uk-inverse: #{$tile-muted-color-mode};
     background-color: $tile-muted-background;
     @if(mixin-exists(hook-tile-muted)) {@include hook-tile-muted();}
 }
@@ -177,6 +179,7 @@
  */
 
 .uk-tile-primary {
+    --uk-inverse: #{$tile-primary-color-mode};
     background-color: $tile-primary-background;
     @if(mixin-exists(hook-tile-primary)) {@include hook-tile-primary();}
 }
@@ -194,6 +197,7 @@
  */
 
 .uk-tile-secondary {
+    --uk-inverse: #{$tile-secondary-color-mode};
     background-color: $tile-secondary-background;
     @if(mixin-exists(hook-tile-secondary)) {@include hook-tile-secondary();}
 }

package/tests/modal.html

@@ -487,7 +487,7 @@
             on('#js-modal-prompt', 'click', async e => {
                 e.preventDefault();
                 e.target.blur();
-                const name = await modal.prompt('Name:', 'Your name');
+                const name = await modal.prompt('Name:', 'Your "name"');
                 console.log('Prompted:', name);
             });