uikit 3.9.5-dev.4839a0a03 → 3.9.5-dev.4be822584

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.5-dev.4839a0a03",
+  "version": "3.9.5-dev.4be822584",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/img.js

@@ -55,17 +55,11 @@ export default {
 
         read({image}) {
 
-            if (!this.observer) {
+            if (!this.observer || isImg(this.$el)) {
                 return false;
             }
 
-            if (isImg(this.$el)) {
-                return false;
-            }
-
-            if (image && image.currentSrc !== '') {
-                setSrcAttrs(this.$el, currentSrc(image));
-            }
+            setSrcAttrs(this.$el, image && image.currentSrc);
 
         },
 
@@ -101,8 +95,9 @@ export default {
                 return this._data.image;
             }
 
-            this._data.image = isImg(this.$el) ? this.$el : getImageFromElement(this.$el, this.dataSrc);
-            setSrcAttrs(this.$el, currentSrc(this._data.image));
+            const image = isImg(this.$el) ? this.$el : getImageFromElement(this.$el, this.dataSrc);
+            this._data.image = image;
+            setSrcAttrs(this.$el, image.currentSrc || this.dataSrc);
 
             this.observer.disconnect();
         },
@@ -120,10 +115,12 @@ export default {
 function setSrcAttrs(el, src) {
 
     if (isImg(el)) {
+
         const parentNode = parent(el);
         const elements = isPicture(parentNode) ? children(parentNode) : [el];
-        elements.forEach(setSourceProps);
+        elements.forEach(el => setSourceProps(el, el));
         src && attr(el, 'src', src);
+
     } else if (src) {
 
         const change = !includes(el.style.backgroundImage, src);
@@ -141,7 +138,7 @@ function setSourceProps(sourceEl, targetEl) {
     srcProps.forEach(prop => {
         const value = data(sourceEl, prop);
         if (value) {
-            attr(targetEl || sourceEl, prop.replace(/^(data-)+/, ''), value);
+            attr(targetEl, prop.replace(/^(data-)+/, ''), value);
         }
     });
 }
@@ -206,7 +203,3 @@ function isImg(el) {
 function isA(el, tagName) {
     return el && el.tagName === tagName;
 }
-
-function currentSrc(el) {
-    return el.currentSrc || el.src;
-}

package/src/less/components/search.less

@@ -30,6 +30,7 @@
 @search-default-focus-background:                   darken(@search-default-background, 5%);
 
 @search-default-icon-width:                         @global-control-height;
+@search-default-icon-padding:                       0;
 
 @search-navbar-width:                               400px;
 @search-navbar-height:                              40px;
@@ -37,6 +38,7 @@
 @search-navbar-font-size:                           @global-large-font-size;
 
 @search-navbar-icon-width:                          40px;
+@search-navbar-icon-padding:                        0;
 
 @search-large-width:                                500px;
 @search-large-height:                               80px;
@@ -44,6 +46,7 @@
 @search-large-font-size:                            @global-2xlarge-font-size;
 
 @search-large-icon-width:                           80px;
+@search-large-icon-padding:                         0;
 
 @search-toggle-color:                               @global-muted-color;
 @search-toggle-hover-color:                         @global-color;
@@ -205,8 +208,8 @@
 
 .uk-search-default .uk-search-icon { width: @search-default-icon-width; }
 
-.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-default-icon-width); }
-.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-default-icon-width); }
+.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-default-icon-width + @search-default-icon-padding); }
+.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-default-icon-width + @search-default-icon-padding); }
 
 
 /* Navbar modifier
@@ -236,8 +239,8 @@
 
 .uk-search-navbar .uk-search-icon { width: @search-navbar-icon-width; }
 
-.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-navbar-icon-width); }
-.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-navbar-icon-width); }
+.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-navbar-icon-width + @search-navbar-icon-padding); }
+.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-navbar-icon-width + @search-navbar-icon-padding); }
 
 
 /* Large modifier
@@ -267,8 +270,8 @@
 
 .uk-search-large .uk-search-icon { width: @search-large-icon-width; }
 
-.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-large-icon-width); }
-.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-large-icon-width); }
+.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: (@search-large-icon-width + @search-large-icon-padding); }
+.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-large-icon-width + @search-large-icon-padding); }
 
 
 /* Toggle

package/src/scss/components/search.scss

@@ -30,6 +30,7 @@ $search-default-background:                          $global-muted-background !d
 $search-default-focus-background:                    darken($search-default-background, 5%) !default;
 
 $search-default-icon-width:                          $global-control-height !default;
+$search-default-icon-padding:                        0 !default;
 
 $search-navbar-width:                                400px !default;
 $search-navbar-height:                               40px !default;
@@ -37,6 +38,7 @@ $search-navbar-background:                           transparent !default;
 $search-navbar-font-size:                            $global-large-font-size !default;
 
 $search-navbar-icon-width:                           40px !default;
+$search-navbar-icon-padding:                         0 !default;
 
 $search-large-width:                                 500px !default;
 $search-large-height:                                80px !default;
@@ -44,6 +46,7 @@ $search-large-background:                            transparent !default;
 $search-large-font-size:                             $global-2xlarge-font-size !default;
 
 $search-large-icon-width:                            80px !default;
+$search-large-icon-padding:                          0 !default;
 
 $search-toggle-color:                                $global-muted-color !default;
 $search-toggle-hover-color:                          $global-color !default;
@@ -205,8 +208,8 @@ $search-toggle-hover-color:                          $global-color !default;
 
 .uk-search-default .uk-search-icon { width: $search-default-icon-width; }
 
-.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-default-icon-width); }
-.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width); }
+.uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-default-icon-width + $search-default-icon-padding); }
+.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width + $search-default-icon-padding); }
 
 
 /* Navbar modifier
@@ -236,8 +239,8 @@ $search-toggle-hover-color:                          $global-color !default;
 
 .uk-search-navbar .uk-search-icon { width: $search-navbar-icon-width; }
 
-.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-navbar-icon-width); }
-.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width); }
+.uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-navbar-icon-width + $search-navbar-icon-padding); }
+.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width + $search-navbar-icon-padding); }
 
 
 /* Large modifier
@@ -267,8 +270,8 @@ $search-toggle-hover-color:                          $global-color !default;
 
 .uk-search-large .uk-search-icon { width: $search-large-icon-width; }
 
-.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-large-icon-width); }
-.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width); }
+.uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-large-icon-width + $search-large-icon-padding); }
+.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width + $search-large-icon-padding); }
 
 
 /* Toggle

package/src/scss/variables-theme.scss

@@ -836,16 +836,19 @@ $search-default-padding-horizontal: 10px !default;
 $search-default-background: transparent !default;
 $search-default-focus-background: darken($search-default-background, 5%) !default;
 $search-default-icon-width: $global-control-height !default;
+$search-default-icon-padding: 0 !default;
 $search-navbar-width: 400px !default;
 $search-navbar-height: 40px !default;
 $search-navbar-background: transparent !default;
 $search-navbar-font-size: $global-large-font-size !default;
 $search-navbar-icon-width: 40px !default;
+$search-navbar-icon-padding: 0 !default;
 $search-large-width: 500px !default;
 $search-large-height: 80px !default;
 $search-large-background: transparent !default;
 $search-large-font-size: $global-2xlarge-font-size !default;
 $search-large-icon-width: 80px !default;
+$search-large-icon-padding: 0 !default;
 $search-toggle-color: $global-muted-color !default;
 $search-toggle-hover-color: $global-color !default;
 $inverse-search-color: $inverse-global-color !default;

package/src/scss/variables.scss

@@ -834,16 +834,19 @@ $search-default-padding-horizontal: 10px !default;
 $search-default-background: $global-muted-background !default;
 $search-default-focus-background: darken($search-default-background, 5%) !default;
 $search-default-icon-width: $global-control-height !default;
+$search-default-icon-padding: 0 !default;
 $search-navbar-width: 400px !default;
 $search-navbar-height: 40px !default;
 $search-navbar-background: transparent !default;
 $search-navbar-font-size: $global-large-font-size !default;
 $search-navbar-icon-width: 40px !default;
+$search-navbar-icon-padding: 0 !default;
 $search-large-width: 500px !default;
 $search-large-height: 80px !default;
 $search-large-background: transparent !default;
 $search-large-font-size: $global-2xlarge-font-size !default;
 $search-large-icon-width: 80px !default;
+$search-large-icon-padding: 0 !default;
 $search-toggle-color: $global-muted-color !default;
 $search-toggle-hover-color: $global-color !default;
 $inverse-search-color: $inverse-global-color !default;

package/tests/search.html

@@ -18,7 +18,7 @@
 
             <div class="uk-margin">
                 <form class="uk-search uk-search-default">
-                    <input class="uk-search-input" type="search" placeholder="Search">
+                    <input class="uk-search-input" type="search" placeholder="Search" autofocus>
                 </form>
             </div>