uikit 3.9.3 → 3.9.5-dev.3bc3deb62

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.3",
+  "version": "3.9.5-dev.3bc3deb62",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -20,7 +20,7 @@
     "prefix": "node build/prefix",
     "scope": "node build/scope",
     "release": "node build/release",
-    "watch-less": "watch-run -i -p 'src/less/**/*.less' yarn compile-less",
+    "watch": "watch-run -i -p 'src/less/**/*.less' yarn compile-less",
     "eslint": "eslint src/js",
     "eslint-fix": "eslint --fix src/js"
   },

package/src/js/core/cover.js

@@ -1,10 +1,9 @@
 import Video from './video';
-import Class from '../mixin/class';
 import {css, Dimensions, parent} from 'uikit-util';
 
 export default {
 
-    mixins: [Class, Video],
+    mixins: [Video],
 
     props: {
         width: Number,

package/src/js/core/drop.js

@@ -1,7 +1,7 @@
 import Container from '../mixin/container';
 import Position from '../mixin/position';
 import Togglable from '../mixin/togglable';
-import {addClass, append, apply, css, hasClass, includes, isTouch, matches, MouseTracker, offset, on, once, parent, pointerCancel, pointerDown, pointerEnter, pointerLeave, pointerUp, query, removeClass, toggleClass, within} from 'uikit-util';
+import {addClass, append, apply, attr, css, hasClass, includes, isTouch, matches, MouseTracker, offset, on, once, parent, pointerCancel, pointerDown, pointerEnter, pointerLeave, pointerUp, query, removeClass, toggleClass, within} from 'uikit-util';
 
 export let active;
 
@@ -62,7 +62,8 @@ export default {
             this.target = this.$create('toggle', query(this.toggle, this.$el), {
                 target: this.$el,
                 mode: this.mode
-            });
+            }).$el;
+            attr(this.target, 'aria-haspopup', true);
         }
 
     },

package/src/js/core/sticky.js

@@ -1,6 +1,6 @@
 import Class from '../mixin/class';
 import Media from '../mixin/media';
-import {$, addClass, after, Animation, assign, css, dimensions, fastdom, hasClass, isNumeric, isString, isVisible, noop, offset, offsetPosition, parent, query, remove, removeClass, replaceClass, scrollTop, toFloat, toggleClass, toPx, trigger, within} from 'uikit-util';
+import {$, addClass, after, Animation, assign, css, dimensions, fastdom, height as getHeight, hasClass, isNumeric, isString, isVisible, noop, offset, offsetPosition, parent, query, remove, removeClass, replaceClass, scrollTop, toFloat, toggleClass, toPx, trigger, within} from 'uikit-util';
 
 export default {
 
@@ -146,9 +146,15 @@ export default {
 
                 height = !this.isActive ? this.$el.offsetHeight : height;
 
-                this.topOffset = offset(this.isFixed ? this.placeholder : this.$el).top;
+                if (height + this.offset > getHeight(window)) {
+                    this.inactive = true;
+                    return false;
+                }
+
+                const referenceElement = this.isFixed ? this.placeholder : this.$el;
+                this.topOffset = offset(referenceElement).top;
                 this.bottomOffset = this.topOffset + height;
-                this.offsetParentTop = offset(this.$el.offsetParent).top;
+                this.offsetParentTop = offset(referenceElement.offsetParent).top;
 
                 const bottom = parseProp('bottom', this);
 

package/src/js/util/dom.js

@@ -1,4 +1,4 @@
-import {on} from './event';
+import {once} from './event';
 import {parent} from './filter';
 import {find, findAll} from './selector';
 import {isElement, isString, isUndefined, toNode, toNodes} from './lang';
@@ -10,10 +10,7 @@ export function ready(fn) {
         return;
     }
 
-    const unbind = on(document, 'DOMContentLoaded', function () {
-        unbind();
-        fn();
-    });
+    once(document, 'DOMContentLoaded', fn);
 }
 
 export function empty(element) {

package/src/less/components/cover.less

@@ -14,14 +14,13 @@
 
 /*
  * Works with iframes and embedded content
- * 1. Apply transform instantly. Needed if transform is transitioned.
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
  * 2. Reset responsiveness for embedded content
  * 3. Center object
  * Note: Percent values on the `top` property only works if this element
  *       is absolute positioned or if the container has a height
  */
 
-.uk-cover,
 /* 1 */
 [uk-cover] {
     /* 2 */

package/src/less/components/link.less

@@ -32,7 +32,8 @@
  ========================================================================== */
 
 a.uk-link-muted,
-.uk-link-muted a {
+.uk-link-muted a,
+.uk-link-toggle .uk-link-muted {
     color: @link-muted-color;
     .hook-link-muted();
 }
@@ -49,7 +50,8 @@ a.uk-link-muted:hover,
  ========================================================================== */
 
 a.uk-link-text,
-.uk-link-text a {
+.uk-link-text a,
+.uk-link-toggle .uk-link-text {
     color: inherit;
     .hook-link-text();
 }
@@ -66,7 +68,8 @@ a.uk-link-text:hover,
  ========================================================================== */
 
 a.uk-link-heading,
-.uk-link-heading a {
+.uk-link-heading a,
+.uk-link-toggle .uk-link-heading {
     color: inherit;
     .hook-link-heading();
 }

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
@@ -225,14 +228,19 @@
     .hook-search-navbar-input();
 }
 
+/* Focus */
+.uk-search-navbar .uk-search-input:focus {
+    .hook-search-navbar-input-focus();
+}
+
 /*
  * Icon
  */
 
 .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
@@ -251,14 +259,19 @@
     .hook-search-large-input();
 }
 
+/* Focus */
+.uk-search-large .uk-search-input:focus {
+    .hook-search-large-input-focus();
+}
+
 /*
  * Icon
  */
 
 .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
@@ -285,7 +298,9 @@
 .hook-search-default-input() {}
 .hook-search-default-input-focus() {}
 .hook-search-navbar-input() {}
+.hook-search-navbar-input-focus() {}
 .hook-search-large-input() {}
+.hook-search-large-input-focus() {}
 
 .hook-search-toggle() {}
 .hook-search-toggle-hover() {}
@@ -349,11 +364,19 @@
         .hook-inverse-search-navbar-input();
     }
 
+    .uk-search-navbar .uk-search-input:focus {
+        .hook-inverse-search-navbar-input-focus();
+    }
+
     .uk-search-large .uk-search-input {
         background-color: @inverse-search-large-background;
         .hook-inverse-search-large-input();
     }
 
+    .uk-search-large .uk-search-input:focus {
+        .hook-inverse-search-large-input-focus();
+    }
+
     //
     // Toggle
     //
@@ -373,6 +396,8 @@
 .hook-inverse-search-default-input() {}
 .hook-inverse-search-default-input-focus() {}
 .hook-inverse-search-navbar-input() {}
+.hook-inverse-search-navbar-input-focus() {}
 .hook-inverse-search-large-input() {}
+.hook-inverse-search-large-input-focus() {}
 .hook-inverse-search-toggle() {}
 .hook-inverse-search-toggle-hover() {}

package/src/less/components/utility.less

@@ -242,6 +242,12 @@
     max-width: none;
 }
 
+/*
+ * Fix initial iframe width. Without the viewport is expanded on iOS devices
+ */
+
+[uk-responsive] { max-width: 100%; }
+
 
 /* Border
  ========================================================================== */

package/src/less/theme/search.less

@@ -38,12 +38,16 @@
 
 .hook-search-navbar-input() {}
 
+.hook-search-navbar-input-focus() {}
+
 
 // Large modifiers
 // ========================================================================
 
 .hook-search-large-input() {}
 
+.hook-search-large-input-focus() {}
+
 
 // Toggle
 // ========================================================================
@@ -68,8 +72,10 @@
 .hook-inverse-search-default-input-focus() {}
 
 .hook-inverse-search-navbar-input() {}
+.hook-inverse-search-navbar-input-focus() {}
 
 .hook-inverse-search-large-input() {}
+.hook-inverse-search-large-input-focus() {}
 
 .hook-inverse-search-toggle() {}
 .hook-inverse-search-toggle-hover() {}

package/src/scss/components/cover.scss

@@ -14,14 +14,13 @@
 
 /*
  * Works with iframes and embedded content
- * 1. Apply transform instantly. Needed if transform is transitioned.
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
  * 2. Reset responsiveness for embedded content
  * 3. Center object
  * Note: Percent values on the `top` property only works if this element
  *       is absolute positioned or if the container has a height
  */
 
-.uk-cover,
 /* 1 */
 [uk-cover] {
     /* 2 */

package/src/scss/components/link.scss

@@ -32,7 +32,8 @@ $link-heading-hover-text-decoration:             none !default;
  ========================================================================== */
 
 a.uk-link-muted,
-.uk-link-muted a {
+.uk-link-muted a,
+.uk-link-toggle .uk-link-muted {
     color: $link-muted-color;
     @if(mixin-exists(hook-link-muted)) {@include hook-link-muted();}
 }
@@ -49,7 +50,8 @@ a.uk-link-muted:hover,
  ========================================================================== */
 
 a.uk-link-text,
-.uk-link-text a {
+.uk-link-text a,
+.uk-link-toggle .uk-link-text {
     color: inherit;
     @if(mixin-exists(hook-link-text)) {@include hook-link-text();}
 }
@@ -66,7 +68,8 @@ a.uk-link-text:hover,
  ========================================================================== */
 
 a.uk-link-heading,
-.uk-link-heading a {
+.uk-link-heading a,
+.uk-link-toggle .uk-link-heading {
     color: inherit;
     @if(mixin-exists(hook-link-heading)) {@include hook-link-heading();}
 }

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
@@ -225,14 +228,19 @@ $search-toggle-hover-color:                          $global-color !default;
     @if(mixin-exists(hook-search-navbar-input)) {@include hook-search-navbar-input();}
 }
 
+/* Focus */
+.uk-search-navbar .uk-search-input:focus {
+    @if(mixin-exists(hook-search-navbar-input-focus)) {@include hook-search-navbar-input-focus();}
+}
+
 /*
  * Icon
  */
 
 .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
@@ -251,14 +259,19 @@ $search-toggle-hover-color:                          $global-color !default;
     @if(mixin-exists(hook-search-large-input)) {@include hook-search-large-input();}
 }
 
+/* Focus */
+.uk-search-large .uk-search-input:focus {
+    @if(mixin-exists(hook-search-large-input-focus)) {@include hook-search-large-input-focus();}
+}
+
 /*
  * Icon
  */
 
 .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
@@ -285,7 +298,9 @@ $search-toggle-hover-color:                          $global-color !default;
 // @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(){}
@@ -316,6 +331,8 @@ $inverse-search-toggle-hover-color:             $inverse-global-color !default;
 // @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(){}

package/src/scss/components/utility.scss

@@ -242,6 +242,12 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     max-width: none;
 }
 
+/*
+ * Fix initial iframe width. Without the viewport is expanded on iOS devices
+ */
+
+[uk-responsive] { max-width: 100%; }
+
 
 /* Border
  ========================================================================== */

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/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>