uikit 3.9.2-dev.836238c9b → 3.9.2-dev.de0c5f523

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.9.2-dev.836238c9b",
+  "version": "3.9.2-dev.de0c5f523",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -47,6 +47,7 @@
     "inquirer": "^8.2.0",
     "less": "^4.1.2",
     "minimist": "^1.2.5",
+    "number-precision": "^1.5.1",
     "postcss": "^8.3.11",
     "rollup": "^2.59.0",
     "rollup-plugin-html": "^0.2.1",

package/src/js/util/style.js

@@ -1,5 +1,5 @@
 import {isIE} from './env';
-import {append, remove} from './dom';
+import {append, fragment, remove} from './dom';
 import {addClass} from './class';
 import {each, hyphenate, isArray, isNumber, isNumeric, isObject, isString, isUndefined, memoize, toNodes, toWindow} from './lang';
 
@@ -68,21 +68,23 @@ function getStyle(element, property, pseudoElt) {
 const parseCssVar = memoize(name => {
     /* usage in css: .uk-name:before { content:"xyz" } */
 
-    const element = append(document.documentElement, document.createElement('div'));
+    const element = append(document.documentElement, fragment('<div>'));
 
     addClass(element, `uk-${name}`);
 
-    name = getStyle(element, 'content', ':before').replace(/^["'](.*)["']$/, '$1');
+    const value = getStyle(element, 'content', ':before');
 
     remove(element);
 
-    return name;
+    return value;
 });
 
+const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
 export function getCssVar(name) {
-    return !isIE
-        ? getStyles(document.documentElement).getPropertyValue(`--uk-${name}`)
-        : parseCssVar(name);
+    return (isIE
+        ? parseCssVar(name)
+        : getStyles(document.documentElement).getPropertyValue(`--uk-${name}`)
+    ).replace(propertyRe, '$2');
 }
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty

package/src/less/components/leader.less

@@ -50,7 +50,7 @@
  */
 
 .uk-leader-fill-content::before { content: '@{leader-fill-content}'; }
-:root { --uk-leader-fill-content: @leader-fill-content; }
+:root { --uk-leader-fill-content: '@{leader-fill-content}'; }
 
 
 // Hooks

package/src/scss/components/card.scss

@@ -32,16 +32,16 @@ $card-body-padding-horizontal-l:                $global-medium-gutter !default;
 $card-body-padding-vertical-l:                  $global-medium-gutter !default;
 
 $card-header-padding-horizontal:                $global-gutter !default;
-$card-header-padding-vertical:                  round(($global-gutter / 2)) !default;
+$card-header-padding-vertical:                  round(($global-gutter * 0.5)) !default;
 
 $card-header-padding-horizontal-l:              $global-medium-gutter !default;
-$card-header-padding-vertical-l:                round(($global-medium-gutter / 2)) !default;
+$card-header-padding-vertical-l:                round(($global-medium-gutter * 0.5)) !default;
 
 $card-footer-padding-horizontal:                $global-gutter !default;
-$card-footer-padding-vertical:                  ($global-gutter / 2) !default;
+$card-footer-padding-vertical:                  ($global-gutter * 0.5) !default;
 
 $card-footer-padding-horizontal-l:              $global-medium-gutter !default;
-$card-footer-padding-vertical-l:                round(($global-medium-gutter / 2)) !default;
+$card-footer-padding-vertical-l:                round(($global-medium-gutter * 0.5)) !default;
 
 $card-title-font-size:                          $global-large-font-size !default;
 $card-title-line-height:                        1.4 !default;
@@ -76,16 +76,16 @@ $card-secondary-color-mode:                     light !default;
 $card-small-body-padding-horizontal:            $global-margin !default;
 $card-small-body-padding-vertical:              $global-margin !default;
 $card-small-header-padding-horizontal:          $global-margin !default;
-$card-small-header-padding-vertical:            round(($global-margin / 1.5)) !default;
+$card-small-header-padding-vertical:            round(($global-margin * 0.66667)) !default;
 $card-small-footer-padding-horizontal:          $global-margin !default;
-$card-small-footer-padding-vertical:            round(($global-margin / 1.5)) !default;
+$card-small-footer-padding-vertical:            round(($global-margin * 0.66667)) !default;
 
 $card-large-body-padding-horizontal-l:          $global-large-gutter !default;
 $card-large-body-padding-vertical-l:            $global-large-gutter !default;
 $card-large-header-padding-horizontal-l:        $global-large-gutter !default;
-$card-large-header-padding-vertical-l:          round(($global-large-gutter / 2)) !default;
+$card-large-header-padding-vertical-l:          round(($global-large-gutter * 0.5)) !default;
 $card-large-footer-padding-horizontal-l:        $global-large-gutter !default;
-$card-large-footer-padding-vertical-l:          round(($global-large-gutter / 2)) !default;
+$card-large-footer-padding-vertical-l:          round(($global-large-gutter * 0.5)) !default;
 
 
 /* ========================================================================

package/src/scss/components/form-range.scss

@@ -83,7 +83,7 @@ $form-range-track-focus-background:              darken($form-range-track-backgr
 .uk-range::-webkit-slider-thumb {
     /* 1 */
     -webkit-appearance: none;
-    margin-top: (floor(($form-range-thumb-height / 2)) * -1);
+    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
     /* 2 */
     height: $form-range-thumb-height;
     width: $form-range-thumb-width;

package/src/scss/components/leader.scss

@@ -50,7 +50,7 @@ $leader-fill-margin-left:                        $global-small-gutter !default;
  */
 
 .uk-leader-fill-content::before { content: '#{$leader-fill-content}'; }
-:root { --uk-leader-fill-content: #{$leader-fill-content}; }
+:root { --uk-leader-fill-content: '#{$leader-fill-content}'; }
 
 
 // Hooks

package/src/scss/components/modal.scss

@@ -44,11 +44,11 @@ $modal-body-padding-horizontal:                  $global-gutter !default;
 $modal-body-padding-vertical:                    $global-gutter !default;
 
 $modal-header-padding-horizontal:                $global-gutter !default;
-$modal-header-padding-vertical:                  ($modal-header-padding-horizontal / 2) !default;
+$modal-header-padding-vertical:                  ($modal-header-padding-horizontal * 0.5) !default;
 $modal-header-background:                        $global-muted-background !default;
 
 $modal-footer-padding-horizontal:                $global-gutter !default;
-$modal-footer-padding-vertical:                  ($modal-footer-padding-horizontal / 2) !default;
+$modal-footer-padding-vertical:                  ($modal-footer-padding-horizontal * 0.5) !default;
 $modal-footer-background:                        $global-muted-background !default;
 
 $modal-title-font-size:                          $global-xlarge-font-size !default;

package/src/scss/components/spinner.scss

@@ -55,7 +55,7 @@ $spinner-duration:                               1.4s !default;
 @keyframes uk-spinner-dash {
     0% { stroke-dashoffset: $spinner-circumference; }
     50% {
-        stroke-dashoffset: ($spinner-circumference / 4);
+        stroke-dashoffset: ($spinner-circumference * 0.25);
         transform:rotate(135deg);
     }
     100% {

package/src/scss/components/table.scss

@@ -261,11 +261,11 @@ $table-expand-min-width:                         150px !default;
 
     .uk-table-responsive th:not(:first-child):not(.uk-table-link),
     .uk-table-responsive td:not(:first-child):not(.uk-table-link),
-    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round(($table-cell-padding-vertical / 3)) !important; }
+    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round(($table-cell-padding-vertical * 0.33333)) !important; }
 
     .uk-table-responsive th:not(:last-child):not(.uk-table-link),
     .uk-table-responsive td:not(:last-child):not(.uk-table-link),
-    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round(($table-cell-padding-vertical / 3)) !important; }
+    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round(($table-cell-padding-vertical * 0.33333)) !important; }
 
     .uk-table-justify.uk-table-responsive th,
     .uk-table-justify.uk-table-responsive td {

package/src/scss/mixins-theme.scss

@@ -1775,7 +1775,7 @@
         position: absolute;
         top: 0;
         bottom: 0;
-        left: ($navbar-dropdown-grid-gutter-horizontal / 2);
+        left: ($navbar-dropdown-grid-gutter-horizontal * 0.5);
         border-left: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border;
     }
 
@@ -1783,7 +1783,7 @@
     .uk-navbar-dropdown-grid.uk-grid-stack > .uk-grid-margin::before {
         content: "";
         position: absolute;
-        top: -($navbar-dropdown-grid-gutter-vertical / 2);
+        top: -($navbar-dropdown-grid-gutter-vertical * 0.5);
         left: $navbar-dropdown-grid-gutter-horizontal;
         right: 0;
         border-top: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border;

package/src/scss/variables-theme.scss

@@ -247,13 +247,13 @@ $card-body-padding-vertical: $global-gutter !default;
 $card-body-padding-horizontal-l: $global-medium-gutter !default;
 $card-body-padding-vertical-l: $global-medium-gutter !default;
 $card-header-padding-horizontal: $global-gutter !default;
-$card-header-padding-vertical: round(($global-gutter / 2)) !default;
+$card-header-padding-vertical: round(($global-gutter * 0.5)) !default;
 $card-header-padding-horizontal-l: $global-medium-gutter !default;
-$card-header-padding-vertical-l: round(($global-medium-gutter / 2)) !default;
+$card-header-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
 $card-footer-padding-horizontal: $global-gutter !default;
-$card-footer-padding-vertical: ($global-gutter / 2) !default;
+$card-footer-padding-vertical: ($global-gutter * 0.5) !default;
 $card-footer-padding-horizontal-l: $global-medium-gutter !default;
-$card-footer-padding-vertical-l: round(($global-medium-gutter / 2)) !default;
+$card-footer-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
 $card-title-font-size: $global-large-font-size !default;
 $card-title-line-height: 1.4 !default;
 $card-badge-top: 15px !default;
@@ -281,16 +281,16 @@ $card-secondary-color-mode: light !default;
 $card-small-body-padding-horizontal: $global-margin !default;
 $card-small-body-padding-vertical: $global-margin !default;
 $card-small-header-padding-horizontal: $global-margin !default;
-$card-small-header-padding-vertical: round(($global-margin / 1.5)) !default;
+$card-small-header-padding-vertical: round(($global-margin * 0.66667)) !default;
 $card-small-footer-padding-horizontal: $global-margin !default;
-$card-small-footer-padding-vertical: round(($global-margin / 1.5)) !default;
+$card-small-footer-padding-vertical: round(($global-margin * 0.66667)) !default;
 $global-large-gutter: 70px !default;
 $card-large-body-padding-horizontal-l: $global-large-gutter !default;
 $card-large-body-padding-vertical-l: $global-large-gutter !default;
 $card-large-header-padding-horizontal-l: $global-large-gutter !default;
-$card-large-header-padding-vertical-l: round(($global-large-gutter / 2)) !default;
+$card-large-header-padding-vertical-l: round(($global-large-gutter * 0.5)) !default;
 $card-large-footer-padding-horizontal-l: $global-large-gutter !default;
-$card-large-footer-padding-vertical-l: round(($global-large-gutter / 2)) !default;
+$card-large-footer-padding-vertical-l: round(($global-large-gutter * 0.5)) !default;
 $inverse-card-badge-background: $inverse-global-primary-background !default;
 $inverse-card-badge-color: $inverse-global-inverse-color !default;
 $close-color: $global-muted-color !default;
@@ -652,10 +652,10 @@ $modal-container-width: 1200px !default;
 $modal-body-padding-horizontal: $global-gutter !default;
 $modal-body-padding-vertical: $global-gutter !default;
 $modal-header-padding-horizontal: $global-gutter !default;
-$modal-header-padding-vertical: ($modal-header-padding-horizontal / 2) !default;
+$modal-header-padding-vertical: ($modal-header-padding-horizontal * 0.5) !default;
 $modal-header-background: $modal-dialog-background !default;
 $modal-footer-padding-horizontal: $global-gutter !default;
-$modal-footer-padding-vertical: ($modal-footer-padding-horizontal / 2) !default;
+$modal-footer-padding-vertical: ($modal-footer-padding-horizontal * 0.5) !default;
 $modal-footer-background: $modal-dialog-background !default;
 $modal-title-font-size: $global-xlarge-font-size !default;
 $modal-title-line-height: 1.3 !default;

package/src/scss/variables.scss

@@ -246,13 +246,13 @@ $card-body-padding-vertical: $global-gutter !default;
 $card-body-padding-horizontal-l: $global-medium-gutter !default;
 $card-body-padding-vertical-l: $global-medium-gutter !default;
 $card-header-padding-horizontal: $global-gutter !default;
-$card-header-padding-vertical: round(($global-gutter / 2)) !default;
+$card-header-padding-vertical: round(($global-gutter * 0.5)) !default;
 $card-header-padding-horizontal-l: $global-medium-gutter !default;
-$card-header-padding-vertical-l: round(($global-medium-gutter / 2)) !default;
+$card-header-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
 $card-footer-padding-horizontal: $global-gutter !default;
-$card-footer-padding-vertical: ($global-gutter / 2) !default;
+$card-footer-padding-vertical: ($global-gutter * 0.5) !default;
 $card-footer-padding-horizontal-l: $global-medium-gutter !default;
-$card-footer-padding-vertical-l: round(($global-medium-gutter / 2)) !default;
+$card-footer-padding-vertical-l: round(($global-medium-gutter * 0.5)) !default;
 $card-title-font-size: $global-large-font-size !default;
 $card-title-line-height: 1.4 !default;
 $card-badge-top: 15px !default;
@@ -280,16 +280,16 @@ $card-secondary-color-mode: light !default;
 $card-small-body-padding-horizontal: $global-margin !default;
 $card-small-body-padding-vertical: $global-margin !default;
 $card-small-header-padding-horizontal: $global-margin !default;
-$card-small-header-padding-vertical: round(($global-margin / 1.5)) !default;
+$card-small-header-padding-vertical: round(($global-margin * 0.66667)) !default;
 $card-small-footer-padding-horizontal: $global-margin !default;
-$card-small-footer-padding-vertical: round(($global-margin / 1.5)) !default;
+$card-small-footer-padding-vertical: round(($global-margin * 0.66667)) !default;
 $global-large-gutter: 70px !default;
 $card-large-body-padding-horizontal-l: $global-large-gutter !default;
 $card-large-body-padding-vertical-l: $global-large-gutter !default;
 $card-large-header-padding-horizontal-l: $global-large-gutter !default;
-$card-large-header-padding-vertical-l: round(($global-large-gutter / 2)) !default;
+$card-large-header-padding-vertical-l: round(($global-large-gutter * 0.5)) !default;
 $card-large-footer-padding-horizontal-l: $global-large-gutter !default;
-$card-large-footer-padding-vertical-l: round(($global-large-gutter / 2)) !default;
+$card-large-footer-padding-vertical-l: round(($global-large-gutter * 0.5)) !default;
 $inverse-card-badge-background: $inverse-global-primary-background !default;
 $inverse-card-badge-color: $inverse-global-inverse-color !default;
 $close-color: $global-muted-color !default;
@@ -650,10 +650,10 @@ $modal-container-width: 1200px !default;
 $modal-body-padding-horizontal: $global-gutter !default;
 $modal-body-padding-vertical: $global-gutter !default;
 $modal-header-padding-horizontal: $global-gutter !default;
-$modal-header-padding-vertical: ($modal-header-padding-horizontal / 2) !default;
+$modal-header-padding-vertical: ($modal-header-padding-horizontal * 0.5) !default;
 $modal-header-background: $global-muted-background !default;
 $modal-footer-padding-horizontal: $global-gutter !default;
-$modal-footer-padding-vertical: ($modal-footer-padding-horizontal / 2) !default;
+$modal-footer-padding-vertical: ($modal-footer-padding-horizontal * 0.5) !default;
 $modal-footer-background: $global-muted-background !default;
 $modal-title-font-size: $global-xlarge-font-size !default;
 $modal-title-line-height: 1.3 !default;

package/tests/js/index.js

@@ -1,4 +1,4 @@
-/* global UIkit */
+/* global UIkit, TESTS */
 import {on} from '../../src/js/util/event';
 import {css} from '../../src/js/util/style';
 import {ucfirst} from '../../src/js/util/lang';
@@ -6,6 +6,7 @@ import {prepend} from '../../src/js/util/dom';
 import {addClass, removeClass} from '../../src/js/util/class';
 import {fastdom} from '../../src/js/util/fastdom';
 
+const tests = TESTS;
 const storage = window.sessionStorage;
 const key = '_uikit_style';
 const keyinverse = '_uikit_inverse';
@@ -61,7 +62,7 @@ on(window, 'load', () => setTimeout(() => fastdom.write(() => {
         <div class="uk-container">
             <select class="uk-select uk-form-width-small" style="margin: 20px 20px 20px 0">
                 <option value="index.html">Overview</option>
-                ${TESTS.map(name => `<option value="${name}.html">${name.split('-').map(ucfirst).join(' ')}</option>`).join('')}
+                ${tests.map(name => `<option value="${name}.html">${name.split('-').map(ucfirst).join(' ')}</option>`).join('')}
             </select>
             <select class="uk-select uk-form-width-small" style="margin: 20px">
                 ${Object.keys(styles).map(style => `<option value="${style}">${ucfirst(style)}</option>`).join('')}