uikit 3.11.2-dev.244aa5c8c → 3.11.2-dev.3dfa2c50b

package/src/scss/variables-theme.scss

@@ -449,16 +449,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
 $inverse-form-background: $inverse-global-muted-background !default;
 $inverse-form-color: $inverse-global-color !default;
-$inverse-form-focus-background: fadein($inverse-form-background, 5%) !default;
+$inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
 $inverse-form-focus-color: $inverse-global-color !default;
 $inverse-form-placeholder-color: $inverse-global-muted-color !default;
 $inverse-form-select-icon-color: $inverse-global-color !default;
 $inverse-form-datalist-icon-color: $inverse-global-color !default;
 $inverse-form-radio-background: $inverse-global-muted-background !default;
-$inverse-form-radio-focus-background: fadein($inverse-form-radio-background, 5%) !default;
+$inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
 $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
-$inverse-form-radio-checked-focus-background: fadein($inverse-global-primary-background, 10%) !default;
+$inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
 $inverse-form-icon-color: $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color: $inverse-global-color !default;
 $grid-gutter-horizontal: $global-gutter !default;
@@ -543,9 +543,9 @@ $inverse-icon-link-hover-color: $inverse-global-color !default;
 $inverse-icon-link-active-color: $inverse-global-color !default;
 $inverse-icon-button-background: $inverse-global-muted-background !default;
 $inverse-icon-button-color: $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background: fadein($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
 $inverse-icon-button-hover-color: $inverse-global-color !default;
-$inverse-icon-button-active-background: fadein($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
 $inverse-icon-button-active-color: $inverse-global-color !default;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -855,7 +855,7 @@ $inverse-search-color: $inverse-global-color !default;
 $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: transparent !default;
-$inverse-search-default-focus-background: fadein($inverse-search-default-background, 5%) !default;
+$inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
 $inverse-search-navbar-background: transparent !default;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;

package/src/scss/variables.scss

@@ -447,16 +447,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
 $inverse-form-background: $inverse-global-muted-background !default;
 $inverse-form-color: $inverse-global-color !default;
-$inverse-form-focus-background: fadein($inverse-form-background, 5%) !default;
+$inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
 $inverse-form-focus-color: $inverse-global-color !default;
 $inverse-form-placeholder-color: $inverse-global-muted-color !default;
 $inverse-form-select-icon-color: $inverse-global-color !default;
 $inverse-form-datalist-icon-color: $inverse-global-color !default;
 $inverse-form-radio-background: $inverse-global-muted-background !default;
-$inverse-form-radio-focus-background: fadein($inverse-form-radio-background, 5%) !default;
+$inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
 $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
-$inverse-form-radio-checked-focus-background: fadein($inverse-global-primary-background, 10%) !default;
+$inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
 $inverse-form-icon-color: $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color: $inverse-global-color !default;
 $grid-gutter-horizontal: $global-gutter !default;
@@ -541,9 +541,9 @@ $inverse-icon-link-hover-color: $inverse-global-color !default;
 $inverse-icon-link-active-color: $inverse-global-color !default;
 $inverse-icon-button-background: $inverse-global-muted-background !default;
 $inverse-icon-button-color: $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background: fadein($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
 $inverse-icon-button-hover-color: $inverse-global-color !default;
-$inverse-icon-button-active-background: fadein($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
 $inverse-icon-button-active-color: $inverse-global-color !default;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -853,7 +853,7 @@ $inverse-search-color: $inverse-global-color !default;
 $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: $inverse-global-muted-background !default;
-$inverse-search-default-focus-background: fadein($inverse-search-default-background, 5%) !default;
+$inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
 $inverse-search-navbar-background: transparent !default;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;

package/tests/js/index.js

@@ -1,5 +1,5 @@
 /* global UIkit, TESTS */
-import {addClass, css, fastdom, on, prepend, removeClass, ucfirst} from 'uikit-util';
+import { addClass, css, fastdom, on, prepend, removeClass, ucfirst } from 'uikit-util';
 
 const tests = TESTS;
 const storage = window.sessionStorage;
@@ -14,10 +14,13 @@ request.send(null);
 
 const themes = request.status === 200 ? JSON.parse(request.responseText) : {};
 const styles = {
-    core: {css: '../dist/css/uikit-core.css'},
-    theme: {css: '../dist/css/uikit.css'}
+    core: { css: '../dist/css/uikit-core.css' },
+    theme: { css: '../dist/css/uikit.css' },
 };
-const component = location.pathname.split('/').pop().replace(/.html$/, '');
+const component = location.pathname
+    .split('/')
+    .pop()
+    .replace(/.html$/, '');
 
 for (const theme in themes) {
     styles[theme] = themes[theme];
@@ -26,7 +29,7 @@ for (const theme in themes) {
 const variations = {
     '': 'Default',
     light: 'Dark',
-    dark: 'Light'
+    dark: 'Light',
 };
 
 if (getParam('style') && getParam('style').match(/\.(json|css)$/)) {
@@ -44,102 +47,128 @@ docEl.dir = dir;
 const style = styles[storage[key]] || styles.theme;
 
 // add style
-document.writeln(`<link rel="stylesheet" href="${dir !== 'rtl' ? style.css : style.css.replace('.css', '-rtl.css')}">`);
+document.writeln(
+    `<link rel="stylesheet" href="${
+        dir !== 'rtl' ? style.css : style.css.replace('.css', '-rtl.css')
+    }">`
+);
 
 // add javascript
 document.writeln('<script src="../dist/js/uikit.js"></script>');
-document.writeln(`<script src="${style.icons ? style.icons : '../dist/js/uikit-icons.js'}"></script>`);
-
-on(window, 'load', () => setTimeout(() => fastdom.write(() => {
-
-    const $body = document.body;
-    const $container = prepend($body, `
+document.writeln(
+    `<script src="${style.icons ? style.icons : '../dist/js/uikit-icons.js'}"></script>`
+);
+
+on(window, 'load', () =>
+    setTimeout(
+        () =>
+            fastdom.write(() => {
+                const $body = document.body;
+                const $container = prepend(
+                    $body,
+                    `
         <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('')}
+                ${Object.keys(styles)
+                    .map((style) => `<option value="${style}">${ucfirst(style)}</option>`)
+                    .join('')}
             </select>
             <select class="uk-select uk-form-width-small" style="margin: 20px">
-                ${Object.keys(variations).map(name => `<option value="${name}">${variations[name]}</option>`).join('')}
+                ${Object.keys(variations)
+                    .map((name) => `<option value="${name}">${variations[name]}</option>`)
+                    .join('')}
             </select>
             <label style="margin: 20px">
                 <input type="checkbox" class="uk-checkbox"/>
                 <span style="margin: 5px">RTL</span>
             </label>
         </div>
-    `);
-
-    const [$tests, $styles, $inverse, $rtl] = $container.children;
-
-    // Tests
-    // ------------------------------
-
-    on($tests, 'change', () => {
-        if ($tests.value) {
-            location.href = `${$tests.value}${styles.custom ? `?style=${getParam('style')}` : ''}`;
-        }
-    });
-    $tests.value = `${component || 'index'}.html`;
-
-    // Styles
-    // ------------------------------
-
-    on($styles, 'change', () => {
-        storage[key] = $styles.value;
-        location.reload();
-    });
-    $styles.value = storage[key];
-
-    // Variations
-    // ------------------------------
-
-    $inverse.value = storage[keyinverse];
-
-    if ($inverse.value) {
-
-        removeClass(document.querySelectorAll('*'),
-            'uk-navbar-container',
-            'uk-card-default',
-            'uk-card-muted',
-            'uk-card-primary',
-            'uk-card-secondary',
-            'uk-tile-default',
-            'uk-tile-muted',
-            'uk-tile-primary',
-            'uk-tile-secondary',
-            'uk-section-default',
-            'uk-section-muted',
-            'uk-section-primary',
-            'uk-section-secondary',
-            'uk-overlay-default',
-            'uk-overlay-primary'
-        );
-
-        css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
-        addClass($body, `uk-${$inverse.value}`);
-
-    }
-
-    on($inverse, 'change', () => {
-        storage[keyinverse] = $inverse.value;
-        location.reload();
-    });
-
-    // RTL
-    // ------------------------------
-
-    on($rtl, 'change', ({target}) => {
-        storage._uikit_dir = target.checked ? 'rtl' : 'ltr';
-        location.reload();
-    });
-    $rtl.firstElementChild.checked = dir === 'rtl';
-
-    css(docEl, 'paddingTop', '');
-
-}), 100));
+    `
+                );
+
+                const [$tests, $styles, $inverse, $rtl] = $container.children;
+
+                // Tests
+                // ------------------------------
+
+                on($tests, 'change', () => {
+                    if ($tests.value) {
+                        location.href = `${$tests.value}${
+                            styles.custom ? `?style=${getParam('style')}` : ''
+                        }`;
+                    }
+                });
+                $tests.value = `${component || 'index'}.html`;
+
+                // Styles
+                // ------------------------------
+
+                on($styles, 'change', () => {
+                    storage[key] = $styles.value;
+                    location.reload();
+                });
+                $styles.value = storage[key];
+
+                // Variations
+                // ------------------------------
+
+                $inverse.value = storage[keyinverse];
+
+                if ($inverse.value) {
+                    removeClass(
+                        document.querySelectorAll('*'),
+                        'uk-navbar-container',
+                        'uk-card-default',
+                        'uk-card-muted',
+                        'uk-card-primary',
+                        'uk-card-secondary',
+                        'uk-tile-default',
+                        'uk-tile-muted',
+                        'uk-tile-primary',
+                        'uk-tile-secondary',
+                        'uk-section-default',
+                        'uk-section-muted',
+                        'uk-section-primary',
+                        'uk-section-secondary',
+                        'uk-overlay-default',
+                        'uk-overlay-primary'
+                    );
+
+                    css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
+                    addClass($body, `uk-${$inverse.value}`);
+                }
+
+                on($inverse, 'change', () => {
+                    storage[keyinverse] = $inverse.value;
+                    location.reload();
+                });
+
+                // RTL
+                // ------------------------------
+
+                on($rtl, 'change', ({ target }) => {
+                    storage._uikit_dir = target.checked ? 'rtl' : 'ltr';
+                    location.reload();
+                });
+                $rtl.firstElementChild.checked = dir === 'rtl';
+
+                css(docEl, 'paddingTop', '');
+            }),
+        100
+    )
+);
 
 css(docEl, 'paddingTop', '80px');
 

package/src/js/mixin/flex-bug.js

@@ -1,56 +0,0 @@
-import {$$, boxModelAdjust, css, isIE, toFloat} from 'uikit-util';
-
-// IE 11 fix (min-height on a flex container won't apply to its flex items)
-export default isIE ? {
-
-    props: {
-        selMinHeight: String
-    },
-
-    data: {
-        selMinHeight: false,
-        forceHeight: false
-    },
-
-    computed: {
-
-        elements({selMinHeight}, $el) {
-            return selMinHeight ? $$(selMinHeight, $el) : [$el];
-        }
-
-    },
-
-    update: [
-
-        {
-
-            read() {
-                css(this.elements, 'height', '');
-            },
-
-            order: -5,
-
-            events: ['resize']
-
-        },
-
-        {
-
-            write() {
-                this.elements.forEach(el => {
-                    const height = toFloat(css(el, 'minHeight'));
-                    if (height && (this.forceHeight || Math.round(height + boxModelAdjust(el, 'height', 'content-box')) >= el.offsetHeight)) {
-                        css(el, 'height', height);
-                    }
-                });
-            },
-
-            order: 5,
-
-            events: ['resize']
-
-        }
-
-    ]
-
-} : {};