uikit 3.12.0 → 3.12.3-dev.ebebb4f57

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.12.0",
+    "version": "3.12.3-dev.ebebb4f57",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/scrollspy.js

@@ -110,7 +110,7 @@ export default {
         toggle(el, inview) {
             const state = el[stateKey];
 
-            state.off && state.off();
+            state.off?.();
 
             css(el, 'visibility', !inview && this.hidden ? 'hidden' : '');
 
@@ -118,9 +118,12 @@ export default {
             toggleClass(el, state.cls);
 
             if (/\buk-animation-/.test(state.cls)) {
-                state.off = once(el, 'animationcancel animationend', () =>
-                    removeClasses(el, 'uk-animation-[\\w-]+')
-                );
+                const removeAnimationClasses = () => removeClasses(el, 'uk-animation-[\\w-]+');
+                if (inview) {
+                    state.off = once(el, 'animationcancel animationend', removeAnimationClasses);
+                } else {
+                    removeAnimationClasses();
+                }
             }
 
             trigger(el, inview ? 'inview' : 'outview');

package/src/js/core/sticky.js

@@ -186,7 +186,6 @@ export default {
 
                 const overflow = Math.max(0, height + offset - windowHeight);
                 const topOffset = getOffset(referenceElement).top;
-                const offsetParentTop = getOffset(referenceElement.offsetParent).top;
 
                 const top = parseProp(this.top, this.$el, topOffset);
                 const bottom = parseProp(this.bottom, this.$el, topOffset + height, true);
@@ -202,7 +201,6 @@ export default {
                     offset,
                     overflow,
                     topOffset,
-                    offsetParentTop,
                     height,
                     margin,
                     width: dimensions(isVisible(this.widthElement) ? this.widthElement : this.$el)
@@ -244,6 +242,7 @@ export default {
                     prevDir,
                     scroll,
                     prevScroll,
+                    offsetParentTop: getOffset(this.$el.offsetParent).top,
                     overflowScroll: clamp(
                         overflowScroll + clamp(scroll, start, end) - clamp(prevScroll, start, end),
                         0,

package/src/js/util/style.js

@@ -80,7 +80,7 @@ export function getCssVar(name) {
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
 export const propName = memoize((name) => vendorPropName(name));
 
-const cssPrefixes = ['webkit', 'moz', 'ms'];
+const cssPrefixes = ['webkit', 'moz'];
 
 function vendorPropName(name) {
     name = hyphenate(name);

package/src/less/components/base.less

@@ -504,27 +504,8 @@ pre code { font-family: @base-pre-font-family; }
 /* Focus
  ========================================================================== */
 
-/*
- * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor.
- * 1. Fallback: Remove `:focus` for a negative tabindexes.
- * 2. Fallback: Set `:focus` style but not for negative tabindexes.
- * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
- * 4. Set `:focus-visible` style for browsers which support it.
- */
-
-/* 1 */
 :focus { outline: none; }
 
-/* 2 */
-:focus:not([tabindex^='-']) {
-    outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline;
-    outline-offset: @base-focus-outline-offset;
-}
-
-/* 3 */
-:focus:not(:focus-visible) { outline: none; }
-
-/* 4 */
 :focus-visible { outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline; }
 
 

package/src/less/components/form.less

@@ -310,10 +310,8 @@
  * Placeholder
  */
 
-.uk-input::-ms-input-placeholder { color: @form-placeholder-color !important; }
 .uk-input::placeholder { color: @form-placeholder-color; }
 
-.uk-textarea::-ms-input-placeholder { color: @form-placeholder-color !important; }
 .uk-textarea::placeholder { color: @form-placeholder-color; }
 
 
@@ -423,8 +421,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 /*
  * 1. Remove default style. Also works in Firefox
  * 2. Style
- * 3. Remove default style in IE 10/11
- * 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
+ * 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
  */
 
 .uk-select:not([multiple]):not([size]) {
@@ -439,9 +436,6 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 }
 
 /* 3 */
-.uk-select:not([multiple]):not([size])::-ms-expand { display: none; }
-
-/* 4 */
 .uk-select:not([multiple]):not([size]) option { color: @form-select-option-color; }
 
 /*
@@ -820,10 +814,8 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
     // Placeholder
     //
 
-    .uk-input::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
     .uk-input::placeholder { color: @inverse-form-placeholder-color; }
 
-    .uk-textarea::-ms-input-placeholder { color: @inverse-form-placeholder-color !important; }
     .uk-textarea::placeholder { color: @inverse-form-placeholder-color; }
 
     //

package/src/less/components/icon.less

@@ -107,15 +107,21 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 
 /*
  * Display images in icon dimensions
+ * 1. Required for `span` with background image
+ * 2. Required for `image`
  */
 
 .uk-icon-image {
     width: @icon-image-size;
     height: @icon-image-size;
+    /* 1 */
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     vertical-align: middle;
+    /* 2 */
+    object-fit: scale-down;
+    max-width: none;
 }
 
 

package/src/less/components/list.less

@@ -94,7 +94,11 @@
 .uk-list-decimal { counter-reset: decimal; }
 .uk-list-decimal > * { counter-increment: decimal; }
 
-[class*='uk-list'] > ::before {
+.uk-list-disc > ::before,
+.uk-list-circle > ::before,
+.uk-list-square > ::before,
+.uk-list-decimal > ::before,
+.uk-list-hyphen > ::before {
     content: "";
     position: relative;
     left: -@list-padding-left;
@@ -129,6 +133,7 @@
 
 .uk-list-bullet > ::before {
     content: "";
+    display: list-item;
     position: relative;
     left: -@list-padding-left;
     width: @list-padding-left;

package/src/less/components/search.less

@@ -129,7 +129,6 @@
 .uk-search-input:focus { outline: none; }
 
 /* Placeholder */
-.uk-search-input:-ms-input-placeholder { color: @search-placeholder-color !important; }
 .uk-search-input::placeholder { color: @search-placeholder-color; }
 
 
@@ -334,10 +333,8 @@
 
     .uk-search-input { color: @inverse-search-color; }
 
-    .uk-search-input:-ms-input-placeholder { color: @inverse-search-placeholder-color !important; }
     .uk-search-input::placeholder { color: @inverse-search-placeholder-color; }
 
-
     //
     // Icon
     //

package/src/less/components/slider.less

@@ -59,6 +59,7 @@
 /*
  * 1. Optimize animation
  * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
+ * 3. Disable horizontal panning gestures
  */
 
 .uk-slider-items {
@@ -66,6 +67,8 @@
     will-change: transform;
     /* 2 */
     position: relative;
+    /* 3 */
+    touch-action: pan-y;
 }
 
 /*

package/src/less/components/slideshow.less

@@ -33,6 +33,7 @@
  * 2. Reset list
  * 3. Clip child elements
  * 4. Prevent displaying the callout information on iOS.
+ * 5. Disable horizontal panning gestures
  */
 
 .uk-slideshow-items {
@@ -47,6 +48,8 @@
     overflow: hidden;
     /* 4 */
     -webkit-touch-callout: none;
+    /* 5 */
+    touch-action: pan-y;
 }
 
 

package/src/less/components/utility.less

@@ -358,8 +358,6 @@
  *    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
- * 3. Caused by 1.: Edge creates two nested `::first-letter` containers, one for each selector
- *    This doubles the `font-size` exponential when using the `em` unit.
  */
 
 .uk-dropcap::first-letter,
@@ -381,13 +379,6 @@
 
 }
 
-/* 3 */
-@supports (-ms-ime-align: auto) {
-
-  .uk-dropcap > p:first-of-type::first-letter { font-size: 1em; }
-
-}
-
 
 /* Logo
  ========================================================================== */

package/src/scss/components/base.scss

@@ -504,27 +504,8 @@ pre code { font-family: $base-pre-font-family; }
 /* Focus
  ========================================================================== */
 
-/*
- * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor.
- * 1. Fallback: Remove `:focus` for a negative tabindexes.
- * 2. Fallback: Set `:focus` style but not for negative tabindexes.
- * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
- * 4. Set `:focus-visible` style for browsers which support it.
- */
-
-/* 1 */
 :focus { outline: none; }
 
-/* 2 */
-:focus:not([tabindex^='-']) {
-    outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline;
-    outline-offset: $base-focus-outline-offset;
-}
-
-/* 3 */
-:focus:not(:focus-visible) { outline: none; }
-
-/* 4 */
 :focus-visible { outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline; }
 
 

package/src/scss/components/form.scss

@@ -310,10 +310,8 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
  * Placeholder
  */
 
-.uk-input::-ms-input-placeholder { color: $form-placeholder-color !important; }
 .uk-input::placeholder { color: $form-placeholder-color; }
 
-.uk-textarea::-ms-input-placeholder { color: $form-placeholder-color !important; }
 .uk-textarea::placeholder { color: $form-placeholder-color; }
 
 
@@ -423,8 +421,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 /*
  * 1. Remove default style. Also works in Firefox
  * 2. Style
- * 3. Remove default style in IE 10/11
- * 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
+ * 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
  */
 
 .uk-select:not([multiple]):not([size]) {
@@ -439,9 +436,6 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 }
 
 /* 3 */
-.uk-select:not([multiple]):not([size])::-ms-expand { display: none; }
-
-/* 4 */
 .uk-select:not([multiple]):not([size]) option { color: $form-select-option-color; }
 
 /*

package/src/scss/components/icon.scss

@@ -107,15 +107,21 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 
 /*
  * Display images in icon dimensions
+ * 1. Required for `span` with background image
+ * 2. Required for `image`
  */
 
 .uk-icon-image {
     width: $icon-image-size;
     height: $icon-image-size;
+    /* 1 */
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     vertical-align: middle;
+    /* 2 */
+    object-fit: scale-down;
+    max-width: none;
 }
 
 

package/src/scss/components/list.scss

@@ -94,7 +94,11 @@ $internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D
 .uk-list-decimal { counter-reset: decimal; }
 .uk-list-decimal > * { counter-increment: decimal; }
 
-[class*='uk-list'] > ::before {
+.uk-list-disc > ::before,
+.uk-list-circle > ::before,
+.uk-list-square > ::before,
+.uk-list-decimal > ::before,
+.uk-list-hyphen > ::before {
     content: "";
     position: relative;
     left: (-$list-padding-left);
@@ -129,6 +133,7 @@ $internal-list-bullet-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D
 
 .uk-list-bullet > ::before {
     content: "";
+    display: list-item;
     position: relative;
     left: (-$list-padding-left);
     width: $list-padding-left;

package/src/scss/components/search.scss

@@ -129,7 +129,6 @@ $search-toggle-hover-color:                          $global-color !default;
 .uk-search-input:focus { outline: none; }
 
 /* Placeholder */
-.uk-search-input:-ms-input-placeholder { color: $search-placeholder-color !important; }
 .uk-search-input::placeholder { color: $search-placeholder-color; }
 
 

package/src/scss/components/slider.scss

@@ -59,6 +59,7 @@ $slider-container-margin-right:                      -25px !default;
 /*
  * 1. Optimize animation
  * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
+ * 3. Disable horizontal panning gestures
  */
 
 .uk-slider-items {
@@ -66,6 +67,8 @@ $slider-container-margin-right:                      -25px !default;
     will-change: transform;
     /* 2 */
     position: relative;
+    /* 3 */
+    touch-action: pan-y;
 }
 
 /*

package/src/scss/components/slideshow.scss

@@ -33,6 +33,7 @@
  * 2. Reset list
  * 3. Clip child elements
  * 4. Prevent displaying the callout information on iOS.
+ * 5. Disable horizontal panning gestures
  */
 
 .uk-slideshow-items {
@@ -47,6 +48,8 @@
     overflow: hidden;
     /* 4 */
     -webkit-touch-callout: none;
+    /* 5 */
+    touch-action: pan-y;
 }
 
 

package/src/scss/components/utility.scss

@@ -358,8 +358,6 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
  *    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
- * 3. Caused by 1.: Edge creates two nested `::first-letter` containers, one for each selector
- *    This doubles the `font-size` exponential when using the `em` unit.
  */
 
 .uk-dropcap::first-letter,
@@ -381,13 +379,6 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 
 }
 
-/* 3 */
-@supports (-ms-ime-align: auto) {
-
-  .uk-dropcap > p:first-of-type::first-letter { font-size: 1em; }
-
-}
-
 
 /* Logo
  ========================================================================== */

package/src/scss/mixins-theme.scss

@@ -879,10 +879,8 @@
     // Placeholder
     //
 
-    .uk-input::-ms-input-placeholder { color: $inverse-form-placeholder-color !important; }
     .uk-input::placeholder { color: $inverse-form-placeholder-color; }
 
-    .uk-textarea::-ms-input-placeholder { color: $inverse-form-placeholder-color !important; }
     .uk-textarea::placeholder { color: $inverse-form-placeholder-color; }
 
     //
@@ -1208,10 +1206,8 @@
 
     .uk-search-input { color: $inverse-search-color; }
 
-    .uk-search-input:-ms-input-placeholder { color: $inverse-search-placeholder-color !important; }
     .uk-search-input::placeholder { color: $inverse-search-placeholder-color; }
 
-
     //
     // Icon
     //

package/src/scss/mixins.scss

@@ -640,10 +640,8 @@
     // Placeholder
     //
 
-    .uk-input::-ms-input-placeholder { color: $inverse-form-placeholder-color !important; }
     .uk-input::placeholder { color: $inverse-form-placeholder-color; }
 
-    .uk-textarea::-ms-input-placeholder { color: $inverse-form-placeholder-color !important; }
     .uk-textarea::placeholder { color: $inverse-form-placeholder-color; }
 
     //
@@ -962,10 +960,8 @@
 
     .uk-search-input { color: $inverse-search-color; }
 
-    .uk-search-input:-ms-input-placeholder { color: $inverse-search-placeholder-color !important; }
     .uk-search-input::placeholder { color: $inverse-search-placeholder-color; }
 
-
     //
     // Icon
     //