uikit 3.11.2-dev.fb043abc2 → 3.12.2

package/src/scss/components/modal.scss

@@ -139,10 +139,8 @@ $modal-close-outside-hover-color:                $global-inverse-color !default;
 /*
  * 1. Create position context for spinner and close button
  * 2. Dimensions
- * 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11
- *    `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
- * 4. Style
- * 5. Slide-in transition
+ * 3. Style
+ * 4. Slide-in transition
  */
 
 .uk-modal-dialog {
@@ -153,10 +151,8 @@ $modal-close-outside-hover-color:                $global-inverse-color !default;
     margin: 0 auto;
     width: $modal-dialog-width;
     /* 3 */
-    max-width: unquote('calc(100% - 0.01px)') !important;
-    /* 4 */
     background: $modal-dialog-background;
-    /* 5 */
+    /* 4 */
     opacity: 0;
     transform: translateY(-100px);
     transition: 0.3s linear;

package/src/scss/components/navbar.scss

@@ -109,13 +109,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 @if ( $navbar-color-mode == light ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-light !optional;} }
 @if ( $navbar-color-mode == dark ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-dark !optional;} }
 
-/*
- * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
- */
-
-.uk-navbar-container > ::before,
-.uk-navbar-container > ::after { display: none !important; }
-
 
 /* Groups
  ========================================================================== */

package/src/scss/components/progress.scss

@@ -21,28 +21,24 @@ $progress-bar-background:                        $global-primary-background !def
  ========================================================================== */
 
 /*
- * 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;
     @if(mixin-exists(hook-progress)) {@include hook-progress();}
@@ -52,27 +48,15 @@ $progress-bar-background:                        $global-primary-background !def
 * + .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;
-  @if(mixin-exists(hook-progress)) {@include 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 @@ $progress-bar-background:                        $global-primary-background !def
 
 .uk-progress::-moz-progress-bar {
     background-color: $progress-bar-background;
-    @if(mixin-exists(hook-progress-bar)) {@include 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;
     @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();}
 }
 

package/src/scss/components/search.scss

@@ -317,7 +317,7 @@ $inverse-search-placeholder-color:              $inverse-global-muted-color !def
 $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;
 

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;
 }
 
 /*
@@ -93,7 +96,6 @@ $slider-container-margin-right:                      -25px !default;
  * 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 @@ $slider-container-margin-right:                      -25px !default;
     max-width: 100%;
     /* 3 */
     position: relative;
-    /* 4 */
-    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;
 }
 
 
@@ -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/scss/components/text.scss

@@ -125,29 +125,22 @@ $text-background-color:                          $global-primary-background !def
  ========================================================================== */
 
 /*
- * 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;
-        @if(mixin-exists(hook-text-background)) {@include hook-text-background();}
-    }
-
+    display: inline-block;
+    /* 4 */
+    background-color: $text-background-color;
+    @if(mixin-exists(hook-text-background)) {@include hook-text-background();}
 }
 
 
@@ -233,26 +226,17 @@ $text-background-color:                          $global-primary-background !def
 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/scss/components/utility.scss

@@ -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 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 [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/mixins-theme.scss

@@ -814,9 +814,9 @@
 @mixin hook-dropdown-misc(){}
 @mixin hook-flex-misc(){}
 @mixin hook-form-range(){}
-@mixin hook-form-range-thumb(){ border: $form-range-thumb-border-width solid $form-range-thumb-border; }
 @mixin hook-form-range-track(){ border-radius: $form-range-track-border-radius; }
 @mixin hook-form-range-track-focus(){}
+@mixin hook-form-range-thumb(){ border: $form-range-thumb-border-width solid $form-range-thumb-border; }
 @mixin hook-form-range-misc(){}
 @mixin hook-form(){
     border: $form-border-width solid $form-border;

package/src/scss/mixins.scss

@@ -589,9 +589,9 @@
 @mixin hook-dropdown-misc(){}
 @mixin hook-flex-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(){}
 @mixin hook-form(){}
 @mixin hook-form-single-line(){}

package/src/scss/variables-theme.scss

@@ -381,13 +381,13 @@ $dropdown-nav-divider-border-width: $global-border-width !default;
 $dropdown-nav-divider-border: $global-border !default;
 $dropdown-nav-sublist-item-color: $global-muted-color !default;
 $dropdown-nav-sublist-item-hover-color: $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;
 $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-background !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;
 $form-height: $global-control-height !default;
 $form-border-width: $global-border-width !default;
 $form-line-height: $form-height - (2* $form-border-width) !default;
@@ -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

@@ -380,13 +380,13 @@ $dropdown-nav-divider-border-width: $global-border-width !default;
 $dropdown-nav-divider-border: $global-border !default;
 $dropdown-nav-sublist-item-color: $global-muted-color !default;
 $dropdown-nav-sublist-item-hover-color: $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;
 $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;
 $form-height: $global-control-height !default;
 $form-line-height: $form-height !default;
 $form-padding-horizontal: 10px !default;
@@ -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/align.html

@@ -17,7 +17,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-right uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-right uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -26,7 +26,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-left uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-left uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -40,7 +40,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-center uk-align-right@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-right@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -49,7 +49,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-center uk-align-left@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-left@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -63,7 +63,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-center uk-align-right@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-right@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -72,7 +72,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-center uk-align-left@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-left@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -86,7 +86,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-center uk-align-right@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-right@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -95,7 +95,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-center uk-align-left@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-left@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -109,7 +109,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-center uk-align-right@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-right@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -118,7 +118,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-center uk-align-left@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-left@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 

package/tests/animation.html

@@ -220,14 +220,14 @@
                 <div>
 
                     <div class="uk-overflow-hidden">
-                        <img class="uk-animation-kenburns uk-transform-origin-center-right" src="images/dark.jpg" alt="">
+                        <img class="uk-animation-kenburns uk-transform-origin-center-right" src="images/dark.jpg" width="1800" height="1200" alt="">
                     </div>
 
                 </div>
                 <div>
 
                     <div class="uk-overflow-hidden">
-                        <img class="uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-center" src="images/dark.jpg" alt="">
+                        <img class="uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-center" src="images/dark.jpg" width="1800" height="1200" alt="">
                     </div>
 
                 </div>

package/tests/article.html

@@ -60,7 +60,7 @@
 
                 <article class="uk-article">
 
-                    <img class="uk-margin-medium-bottom" src="images/photo.jpg" alt="">
+                    <img class="uk-margin-medium-bottom" src="images/photo.jpg" width="1800" height="1200" alt="">
 
                     <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
 
@@ -83,7 +83,7 @@
 
                 <article class="uk-article">
 
-                    <img class="uk-margin-medium-bottom" src="images/dark.jpg" alt="">
+                    <img class="uk-margin-medium-bottom" src="images/dark.jpg" width="1800" height="1200" alt="">
 
                     <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
 

package/tests/base.html

@@ -137,7 +137,7 @@
                     <h3>Figure</h3>
 
                     <figure>
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         <figcaption>Figcaption content</figcaption>
                     </figure>
 
@@ -203,7 +203,7 @@
                     <div class="uk-grid-small uk-child-width-1-4" uk-grid>
                         <figure>
 
-                            <img width="1800" height="1200" src="images/photo.jpg" alt="">
+                            <img src="images/photo.jpg" width="1800" height="1200" alt="">
                             <figcaption>Image</figcaption>
 
                         </figure>
@@ -225,7 +225,7 @@
                         </figure>
                         <figure>
 
-                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4"></video>
+                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080"></video>
                             <figcaption>Video</figcaption>
 
                         </figure>