uikit 3.9.5-dev.13c625552 → 3.9.5-dev.4be822584

package/src/scss/mixins-theme.scss

@@ -1238,11 +1238,19 @@
         @if(mixin-exists(hook-inverse-search-navbar-input)) {@include hook-inverse-search-navbar-input();}
     }
 
+    .uk-search-navbar .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-navbar-input-focus)) {@include hook-inverse-search-navbar-input-focus();}
+    }
+
     .uk-search-large .uk-search-input {
         background-color: $inverse-search-large-background;
         @if(mixin-exists(hook-inverse-search-large-input)) {@include hook-inverse-search-large-input();}
     }
 
+    .uk-search-large .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-large-input-focus)) {@include hook-inverse-search-large-input-focus();}
+    }
+
     //
     // Toggle
     //
@@ -1839,14 +1847,18 @@
 @mixin hook-search-default-input(){ border: $search-default-border-width solid $search-default-border; }
 @mixin hook-search-default-input-focus(){ border-color: $search-default-focus-border; }
 @mixin hook-search-navbar-input(){}
+@mixin hook-search-navbar-input-focus(){}
 @mixin hook-search-large-input(){}
+@mixin hook-search-large-input-focus(){}
 @mixin hook-search-toggle(){}
 @mixin hook-search-toggle-hover(){}
 @mixin hook-search-misc(){}
 @mixin hook-inverse-search-default-input(){ border-color: $inverse-global-border; }
 @mixin hook-inverse-search-default-input-focus(){}
 @mixin hook-inverse-search-navbar-input(){}
+@mixin hook-inverse-search-navbar-input-focus(){}
 @mixin hook-inverse-search-large-input(){}
+@mixin hook-inverse-search-large-input-focus(){}
 @mixin hook-inverse-search-toggle(){}
 @mixin hook-inverse-search-toggle-hover(){}
 @mixin hook-section(){}

package/src/scss/mixins.scss

@@ -992,11 +992,19 @@
         @if(mixin-exists(hook-inverse-search-navbar-input)) {@include hook-inverse-search-navbar-input();}
     }
 
+    .uk-search-navbar .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-navbar-input-focus)) {@include hook-inverse-search-navbar-input-focus();}
+    }
+
     .uk-search-large .uk-search-input {
         background-color: $inverse-search-large-background;
         @if(mixin-exists(hook-inverse-search-large-input)) {@include hook-inverse-search-large-input();}
     }
 
+    .uk-search-large .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-large-input-focus)) {@include hook-inverse-search-large-input-focus();}
+    }
+
     //
     // Toggle
     //
@@ -1525,14 +1533,18 @@
 @mixin hook-search-default-input(){}
 @mixin hook-search-default-input-focus(){}
 @mixin hook-search-navbar-input(){}
+@mixin hook-search-navbar-input-focus(){}
 @mixin hook-search-large-input(){}
+@mixin hook-search-large-input-focus(){}
 @mixin hook-search-toggle(){}
 @mixin hook-search-toggle-hover(){}
 @mixin hook-search-misc(){}
 @mixin hook-inverse-search-default-input(){}
 @mixin hook-inverse-search-default-input-focus(){}
 @mixin hook-inverse-search-navbar-input(){}
+@mixin hook-inverse-search-navbar-input-focus(){}
 @mixin hook-inverse-search-large-input(){}
+@mixin hook-inverse-search-large-input-focus(){}
 @mixin hook-inverse-search-toggle(){}
 @mixin hook-inverse-search-toggle-hover(){}
 @mixin hook-section(){}

package/src/scss/theme/search.scss

@@ -38,12 +38,16 @@ $search-default-focus-border:                        $global-primary-background
 
 // @mixin hook-search-navbar-input(){}
 
+// @mixin hook-search-navbar-input-focus(){}
+
 
 // Large modifiers
 // ========================================================================
 
 // @mixin hook-search-large-input(){}
 
+// @mixin hook-search-large-input-focus(){}
+
 
 // Toggle
 // ========================================================================
@@ -68,8 +72,10 @@ $inverse-search-default-background:             transparent !default;
 // @mixin hook-inverse-search-default-input-focus(){}
 
 // @mixin hook-inverse-search-navbar-input(){}
+// @mixin hook-inverse-search-navbar-input-focus(){}
 
 // @mixin hook-inverse-search-large-input(){}
+// @mixin hook-inverse-search-large-input-focus(){}
 
 // @mixin hook-inverse-search-toggle(){}
 // @mixin hook-inverse-search-toggle-hover(){}

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/image.html

@@ -14,8 +14,6 @@
 
             <h1>Image</h1>
 
-            <p><button class="uk-button uk-button-default" onclick="sessionStorage.clear()">Clear Session Storage</button></p>
-
             <div class="uk-child-width-1-2@m" uk-grid>
                 <div>
                     <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
@@ -255,28 +253,28 @@
 
                         <ul class="uk-slideshow-items">
                             <li>
-                                <img data-src="images/photo.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
+                                <img data-src="images/photo.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                                     <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                 </div>
                             </li>
                             <li>
-                                <img data-src="images/dark.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/dark.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
                                     <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                 </div>
                             </li>
                             <li>
-                                <img data-src="images/light.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
+                                <img data-src="images/light.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
                                     <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
                                 </div>
                             </li>
                             <li>
-                                <img data-src="images/photo2.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
+                                <img data-src="images/photo2.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
                                 <div class="uk-position-center uk-position-small uk-text-center">
                                     <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
                                     <p uk-slideshow-parallax="x: 0,0,-200">Lorem ipsum dolor sit amet.</p>
@@ -296,43 +294,43 @@
 
                         <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m">
                             <li>
-                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
                             </li>
                             <li>
-                                <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
+                                <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
                                 <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
                             </li>
                         </ul>
@@ -364,30 +362,6 @@
                             <td>''</td>
                             <td>The image's `src` attribute.</td>
                         </tr>
-                        <tr>
-                            <td><code>dataSrcset</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `srcset` attribute.</td>
-                        </tr>
-                        <tr>
-                            <td><code>sizes</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `sizes` attribute.</td>
-                        </tr>
-                        <tr>
-                            <td><code>width</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `width` attribute. It will be used to determine the placeholder's width and the images position in the document.</td>
-                        </tr>
-                        <tr>
-                            <td><code>height</code></td>
-                            <td>String</td>
-                            <td>false</td>
-                            <td>The image's `height` attribute. It will be used to determine the placeholder's height and the images position in the document.</td>
-                        </tr>
                         <tr>
                             <td><code>offsetTop</code></td>
                             <td>String</td>

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>