uikit 3.11.2-dev.fb043abc2 → 3.12.2

package/src/less/components/progress.less

@@ -21,28 +21,24 @@
  ========================================================================== */
 
 /*
- * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- * 2. Remove default style
- * 3. Behave like a block element
- * 4. Remove borders in Firefox and Edge
- * 5. Set background color for progress container in Firefox, IE11 and Edge
- * 6. Style
+ * 1. Add the correct vertical alignment in all browsers.
+ * 2. Behave like a block element.
+ * 3. Remove borders in Firefox.
+ * 4. Remove default style in Chrome, Safari and Edge.
+ * 5. Style
  */
 
 .uk-progress {
     /* 1 */
     vertical-align: baseline;
     /* 2 */
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    /* 3 */
     display: block;
     width: 100%;
-    /* 4 */
+    /* 3 */
     border: 0;
-    /* 5 */
+    /* 4 */
     background-color: @progress-background;
-    /* 6 */
+    /* 5 */
     margin-bottom: @progress-margin-vertical;
     height: @progress-height;
     .hook-progress();
@@ -52,27 +48,15 @@
 * + .uk-progress { margin-top: @progress-margin-vertical; }
 
 /*
- * Remove animated circles for indeterminate state in IE11 and Edge
+ * Show background color set on `uk-progress` in Chrome, Safari and Edge.
  */
 
-.uk-progress:indeterminate { color: transparent; }
+ .uk-progress::-webkit-progress-bar { background-color: transparent; }
 
 /*
- * Progress container
- * 2. Remove progress bar for indeterminate state in Firefox
- */
-
-.uk-progress::-webkit-progress-bar {
-  background-color: @progress-background;
-  .hook-progress();
-}
-
-/* 2 */
-.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
-
-/*
- * Progress bar
- * 1. Remove right border in IE11 and Edge
+ * Progress Bar
+ * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=662351
  */
 
 .uk-progress::-webkit-progress-value {
@@ -83,14 +67,8 @@
 
 .uk-progress::-moz-progress-bar {
     background-color: @progress-bar-background;
-    .hook-progress-bar();
-}
-
-.uk-progress::-ms-fill {
-    background-color: @progress-bar-background;
-    transition: width 0.6s ease;
     /* 1 */
-    border: 0;
+    transition: width 0.6s ease;
     .hook-progress-bar();
 }
 

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;
 }
 
 /*
@@ -93,7 +96,6 @@
  * 1. Let items take content dimensions (0 0 auto)
  *    `max-width` needed to keep image responsiveness and prevent content overflow
  * 3. Create position context
- * 4. Disable horizontal panning gestures in IE11 and Edge
  */
 
 .uk-slider-items > * {
@@ -102,8 +104,6 @@
     max-width: 100%;
     /* 3 */
     position: relative;
-    /* 4 */
-    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;
 }
 
 
@@ -58,7 +61,6 @@
  * 2. Take the full width
  * 3. Clip child elements, e.g. for `uk-cover`
  * 4. Optimize animation
- * 5. Disable horizontal panning gestures in IE11 and Edge
  */
 
 .uk-slideshow-items > * {
@@ -73,8 +75,6 @@
     overflow: hidden;
     /* 4 */
     will-change: transform, opacity;
-    /* 5 */
-    touch-action: pan-y;
 }
 
 /*

package/src/less/components/text.less

@@ -125,29 +125,22 @@
  ========================================================================== */
 
 /*
- * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
- *    Default color is set to transparent
- * 2. Container fits the text
- * 3. Fallback color for IE11
+ * 1. The background clips to the foreground text. Works in all browsers.
+ * 2. Default color is set to transparent.
+ * 3. Container fits the text
+ * 4. Style
  */
 
 .uk-text-background {
     /* 1 */
     -webkit-background-clip: text;
     /* 2 */
-    display: inline-block;
+    color: transparent !important;
     /* 3 */
-    color: @text-background-color !important;
-}
-
-@supports (-webkit-background-clip: text) {
-
-    .uk-text-background {
-        background-color: @text-background-color;
-        color: transparent !important;
-        .hook-text-background();
-    }
-
+    display: inline-block;
+    /* 4 */
+    background-color: @text-background-color;
+    .hook-text-background();
 }
 
 
@@ -233,26 +226,17 @@
 th.uk-text-truncate,
 td.uk-text-truncate { max-width: 0; }
 
-
 /*
- * 1. Wrap long words onto the next line and break them if they are too long to fit
- * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
- * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
- *    Must use `break-all` to support IE11 and Edge
- * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed
+ * Wrap long words onto the next line and break them if they are too long to fit.
+ * 1. Make it work with table cells in all browsers.
+ * Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
  */
 
-.uk-text-break {
-    /* 1 */
-    overflow-wrap: break-word;
-    /* 2 */
-    word-wrap: break-word;
-}
-
-/* 3 */
-th.uk-text-break,
-td.uk-text-break { word-break: break-all; }
+ .uk-text-break { overflow-wrap: break-word; }
 
+ /* 1 */
+ th.uk-text-break,
+ td.uk-text-break { word-break: break-word; }
 
 
 // Hooks

package/src/less/components/utility.less

@@ -10,6 +10,7 @@
 //                  `uk-inline-*`
 //                  `uk-responsive-*`
 //                  `uk-preserve-width`
+//                  `uk-object-*`
 //                  `uk-border-*`
 //                  `uk-box-shadow-*`
 //                  `uk-box-shadow-bottom`
@@ -251,6 +252,30 @@
 [data-uk-responsive] { max-width: 100%; }
 
 
+/* Object
+ ========================================================================== */
+
+.uk-object-cover { object-fit: cover; }
+.uk-object-contain { object-fit: contain; }
+.uk-object-fill { object-fit: fill; }
+.uk-object-none { object-fit: none; }
+.uk-object-scale-down { object-fit: scale-down; }
+
+/* 
+ * Position
+ */
+
+.uk-object-top-left { object-position: 0 0; }
+.uk-object-top-center { object-position: 50% 0; }
+.uk-object-top-right { object-position: 100% 0; }
+.uk-object-center-left { object-position: 0 50%; }
+.uk-object-center-center { object-position: 50% 50%; }
+.uk-object-center-right { object-position: 100% 50%; }
+.uk-object-bottom-left { object-position: 0 100%; }
+.uk-object-bottom-center { object-position: 50% 100%; }
+.uk-object-bottom-right { object-position: 100% 100%; }
+
+
 /* Border
  ========================================================================== */
 

package/src/scss/components/base.scss

@@ -91,7 +91,6 @@ $base-selection-color:                           $global-inverse-color !default;
 
 /*
  * 1. Set `font-size` to support `rem` units
- *    Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  * 3. Style
  */
@@ -239,7 +238,7 @@ sub { bottom: -0.25em; }
  ========================================================================== */
 
 /*
- * Remove the gap between embedded content and the bottom of their containers.
+ * Remove the gap between the element and the bottom of its parent container.
  */
 
 audio,
@@ -250,14 +249,14 @@ svg,
 video { vertical-align: middle; }
 
 /*
- * 1. Add responsiveness.
- * 2. Auto-scale the height. Only needed if `height` attribute is present.
- * 3. Corrects responsive `max-width` behavior if padding and border are used.
- * 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio.
+ * 1. Constrain the element to its parent width.
+ * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
+ * 3. Take border and padding into account.
  */
 
 canvas,
 img,
+svg,
 video {
     /* 1 */
     max-width: 100%;
@@ -267,34 +266,17 @@ video {
     box-sizing: border-box;
 }
 
-/* 4 */
-@supports (display: block) {
-
-   svg {
-        max-width: 100%;
-        height: auto;
-        box-sizing: border-box;
-    }
-
-}
-
 /*
- * Hide the overflow in IE.
- */
-
-svg:not(:root) { overflow: hidden; }
-
-/*
- * 1. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
- * 2. Hide `alt` text for lazy loading images.
- * Note: Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; }
+ * Deprecated: only needed for `img` elements with `uk-img`
+ * 1. Hide `alt` text for lazy load images.
+ * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
  */
 
 img:not([src]) {
     /* 1 */
-    min-width: 1px;
-    /* 2 */
     visibility: hidden;
+    /* 2 */
+    min-width: 1px;
 }
 
 /*
@@ -589,11 +571,6 @@ template { display: none; }
  * Breakpoints
  */
 
-.uk-breakpoint-s::before  { content: '#{$breakpoint-small}'; }
-.uk-breakpoint-m::before  { content: '#{$breakpoint-medium}'; }
-.uk-breakpoint-l::before  { content: '#{$breakpoint-large}'; }
-.uk-breakpoint-xl::before { content: '#{$breakpoint-xlarge}'; }
-
 :root {
     --uk-breakpoint-s: #{$breakpoint-small};
     --uk-breakpoint-m: #{$breakpoint-medium};

package/src/scss/components/flex.scss

@@ -13,15 +13,6 @@
 .uk-flex { display: flex; }
 .uk-flex-inline { display: inline-flex; }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution
- */
-
-.uk-flex::before,
-.uk-flex::after,
-.uk-flex-inline::before,
-.uk-flex-inline::after { display: none; }
-
 
 /* Alignment
  ========================================================================== */

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

@@ -9,44 +9,45 @@
 // Variables
 // ========================================================================
 
+$form-range-track-height:                        3px !default;
+$form-range-track-background:                    darken($global-muted-background, 5%) !default;
+$form-range-track-focus-background:              darken($form-range-track-background, 5%) !default;
+
 $form-range-thumb-height:                        15px !default;
 $form-range-thumb-width:                         $form-range-thumb-height !default;
 $form-range-thumb-border-radius:                 500px !default;
 $form-range-thumb-background:                    $global-color !default;
 
-$form-range-track-height:                        3px !default;
-$form-range-track-background:                    darken($global-muted-background, 5%) !default;
-$form-range-track-focus-background:              darken($form-range-track-background, 5%) !default;
-
 
 /* ========================================================================
    Component: Form Range
  ========================================================================== */
 
 /*
- * 1. Normalize and defaults
- * 2. Prevent content overflow if a fixed width is used
- * 3. Take the full width
- * 4. Remove default style
- * 5. Remove white background in Chrome
- * 6. Remove padding in IE11
+ * 1. Remove default style.
+ * 2. Define consistent box sizing.
+ * 3. Remove `margin` in all browsers.
+ * 4. Align to the center of the line box.
+ * 5. Prevent content overflow if a fixed width is used.
+ * 6. Take the full width.
+ * 7. Remove white background in Chrome.
  */
 
 .uk-range {
     /* 1 */
+    -webkit-appearance: none;
+    /* 2 */
     box-sizing: border-box;
+    /* 3 */
     margin: 0;
+    /* 4 */
     vertical-align: middle;
-    /* 2 */
+    /* 5 */
     max-width: 100%;
-    /* 3 */
+    /* 6 */
     width: 100%;
-    /* 4 */
-    -webkit-appearance: none;
-    /* 5 */
+    /* 7 */
     background: transparent;
-    /* 6 */
-    padding: 0;
     @if(mixin-exists(hook-form-range)) {@include hook-form-range();}
 }
 
@@ -54,82 +55,16 @@ $form-range-track-focus-background:              darken($form-range-track-backgr
 .uk-range:focus { outline: none; }
 .uk-range::-moz-focus-outer { border: none; }
 
-/* IE11 Reset */
-.uk-range::-ms-track {
-    height: $form-range-thumb-height;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-}
-
 /*
  * Improves consistency of cursor style for clickable elements
  */
 
 .uk-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; }
 .uk-range:not(:disabled)::-moz-range-thumb { cursor: pointer; }
-.uk-range:not(:disabled)::-ms-thumb { cursor: pointer; }
 
 
-/* Thumb
- ========================================================================== */
-
-/*
- * 1. Reset
- * 2. Style
- */
-
-/* Webkit */
-.uk-range::-webkit-slider-thumb {
-    /* 1 */
-    -webkit-appearance: none;
-    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
-    /* 2 */
-    height: $form-range-thumb-height;
-    width: $form-range-thumb-width;
-    border-radius: $form-range-thumb-border-radius;
-    background: $form-range-thumb-background;
-    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
-}
-
-/* Firefox */
-.uk-range::-moz-range-thumb {
-    /* 1 */
-    border: none;
-    /* 2 */
-    height: $form-range-thumb-height;
-    width: $form-range-thumb-width;
-    border-radius: $form-range-thumb-border-radius;
-    background: $form-range-thumb-background;
-    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
-}
-
-/* Edge */
-.uk-range::-ms-thumb {
-    /* 1 */
-    margin-top: 0;
-}
-
-/* IE11 */
-.uk-range::-ms-thumb {
-    /* 1 */
-    border: none;
-    /* 2 */
-    height: $form-range-thumb-height;
-    width: $form-range-thumb-width;
-    border-radius: $form-range-thumb-border-radius;
-    background: $form-range-thumb-background;
-    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
-}
-
-/* Edge + IE11 */
-.uk-range::-ms-tooltip { display: none; }
-
-
-/* Track
- ========================================================================== */
-
 /*
+ * Track
  * 1. Safari doesn't have a focus state. Using active instead.
  */
 
@@ -159,18 +94,36 @@ $form-range-track-focus-background:              darken($form-range-track-backgr
     @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
 }
 
-/* Edge */
-.uk-range::-ms-fill-lower,
-.uk-range::-ms-fill-upper {
-    height: $form-range-track-height;
-    background: $form-range-track-background;
-    @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
+/*
+ * Thumb
+ * 1. Reset
+ * 2. Style
+ */
+
+/* Webkit */
+.uk-range::-webkit-slider-thumb {
+    /* 1 */
+    -webkit-appearance: none;
+    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
+    /* 2 */
+    height: $form-range-thumb-height;
+    width: $form-range-thumb-width;
+    border-radius: $form-range-thumb-border-radius;
+    background: $form-range-thumb-background;
+    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
 }
 
-.uk-range:focus::-ms-fill-lower,
-.uk-range:focus::-ms-fill-upper {
-    background: $form-range-track-focus-background;
-    @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
+/* Firefox */
+.uk-range::-moz-range-thumb {
+    /* 1 */
+    border: none;
+    /* 2 */
+    height: $form-range-thumb-height;
+    width: $form-range-thumb-width;
+    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
+    border-radius: $form-range-thumb-border-radius;
+    background: $form-range-thumb-background;
+    @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}
 }
 
 
@@ -180,7 +133,7 @@ $form-range-track-focus-background:              darken($form-range-track-backgr
 @if(mixin-exists(hook-form-range-misc)) {@include hook-form-range-misc();}
 
 // @mixin hook-form-range(){}
-// @mixin hook-form-range-thumb(){}
 // @mixin hook-form-range-track(){}
 // @mixin hook-form-range-track-focus(){}
+// @mixin hook-form-range-thumb(){}
 // @mixin hook-form-range-misc(){}

package/src/scss/components/form.scss

@@ -472,7 +472,6 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 
 
 /* Radio and checkbox
- * Note: Does not work in IE11
  ========================================================================== */
 
 /*
@@ -780,7 +779,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 
 $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;
 
@@ -790,12 +789,12 @@ $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;

package/src/scss/components/height.scss

@@ -31,6 +31,9 @@ $height-large-height:                            450px !default;
  */
 
 .uk-height-viewport { min-height: 100vh; }
+.uk-height-viewport-2 { min-height: 200vh; }
+.uk-height-viewport-3 { min-height: 300vh; }
+.uk-height-viewport-4 { min-height: 400vh; }
 
 /*
  * Pixel

package/src/scss/components/icon.scss

@@ -201,9 +201,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;
 
 

package/src/scss/components/leader.scss

@@ -49,7 +49,6 @@ $leader-fill-margin-left:                        $global-small-gutter !default;
  * Pass fill character to JS
  */
 
-.uk-leader-fill-content::before { content: '#{$leader-fill-content}'; }
 :root { --uk-leader-fill-content: '#{$leader-fill-content}'; }
 
 

package/src/scss/components/lightbox.scss

@@ -119,7 +119,6 @@ $lightbox-button-hover-color:                    #fff !default;
  * 4. Optimize animation
  * 5. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
- *    Using `vh` and `vw` to make responsive image work in IE11
  */
 
 .uk-lightbox-items > * {

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);