uikit 3.20.11 → 3.21.1-dev.3aa4cb62f

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.20.11",
+  "version": "3.21.1-dev.3aa4cb62f",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/api/observer.js

@@ -28,7 +28,10 @@ function registerObservable(instance, observable) {
 
     const key = `_observe${instance._observers.length}`;
     if (isFunction(target) && !hasOwn(instance, key)) {
-        registerComputed(instance, key, () => toNodes(target.call(instance, instance)));
+        registerComputed(instance, key, () => {
+            const targets = target.call(instance, instance);
+            return isArray(targets) ? toNodes(targets) : targets;
+        });
     }
 
     handler = isString(handler) ? instance[handler] : handler.bind(instance);

package/src/js/core/icon.js

@@ -25,8 +25,8 @@ import overlayIcon from '../../images/components/overlay-icon.svg';
 import paginationNext from '../../images/components/pagination-next.svg';
 import paginationPrevious from '../../images/components/pagination-previous.svg';
 import searchIcon from '../../images/components/search-icon.svg';
+import searchMedium from '../../images/components/search-medium.svg';
 import searchLarge from '../../images/components/search-large.svg';
-import searchNavbar from '../../images/components/search-navbar.svg';
 import slidenavNextLarge from '../../images/components/slidenav-next-large.svg';
 import slidenavNext from '../../images/components/slidenav-next.svg';
 import slidenavPreviousLarge from '../../images/components/slidenav-previous-large.svg';
@@ -52,8 +52,8 @@ const icons = {
     'pagination-next': paginationNext,
     'pagination-previous': paginationPrevious,
     'search-icon': searchIcon,
+    'search-medium': searchMedium,
     'search-large': searchLarge,
-    'search-navbar': searchNavbar,
     'search-toggle-icon': searchIcon,
     'slidenav-next': slidenavNext,
     'slidenav-next-large': slidenavNextLarge,
@@ -128,8 +128,8 @@ export const Search = {
             ? 'search-toggle-icon'
             : hasClass(this.$el, 'uk-search-icon') && this.$el.closest('.uk-search-large')
               ? 'search-large'
-              : this.$el.closest('.uk-search-navbar')
-                ? 'search-navbar'
+              : this.$el.closest('.uk-search-medium')
+                ? 'search-medium'
                 : this.$props.icon;
 
         if (hasAttr(this.$el, 'aria-label')) {

package/src/less/components/search.less

@@ -10,6 +10,7 @@
 //
 // Modifier:        `uk-search-default`
 //                  `uk-search-navbar`
+//                  `uk-search-medium`
 //                  `uk-search-large`
 //
 // ========================================================================
@@ -27,19 +28,28 @@
 @search-default-height:                             @global-control-height;
 @search-default-padding-horizontal:                 10px;
 @search-default-background:                         @global-muted-background;
-@search-default-focus-background:                   darken(@search-default-background, 5%);
+@search-default-focus-background:                   darken(@search-default-background, 2%);
 
 @search-default-icon-width:                         @global-control-height;
 @search-default-icon-padding:                       0;
 
-@search-navbar-width:                               400px;
-@search-navbar-height:                              40px;
-@search-navbar-background:                          transparent;
-@search-navbar-font-size:                           @global-large-font-size;
+@search-navbar-width:                               240px;
+@search-navbar-height:                              @global-control-height;
+@search-navbar-padding-horizontal:                  10px;
+@search-navbar-background:                          @global-background;
+@search-navbar-focus-background:                    darken(@search-navbar-background, 1%);
 
-@search-navbar-icon-width:                          40px;
+@search-navbar-icon-width:                          @global-control-height;
 @search-navbar-icon-padding:                        0;
 
+@search-medium-width:                               400px;
+@search-medium-height:                              40px;
+@search-medium-background:                          transparent;
+@search-medium-font-size:                           @global-large-font-size;
+
+@search-medium-icon-width:                          40px;
+@search-medium-icon-padding:                        0;
+
 @search-large-width:                                500px;
 @search-large-height:                               80px;
 @search-large-background:                           transparent;
@@ -208,8 +218,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 + @search-default-icon-padding); }
-.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-default-icon-width + @search-default-icon-padding); }
+.uk-search-default:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: (@search-default-icon-width + @search-default-icon-padding); }
+.uk-search-default:has(.uk-search-icon-flip) .uk-search-input { padding-right: (@search-default-icon-width + @search-default-icon-padding); }
 
 
 /* Navbar modifier
@@ -223,13 +233,15 @@
 
 .uk-search-navbar .uk-search-input {
     height: @search-navbar-height;
+    padding-left: @search-navbar-padding-horizontal;
+    padding-right: @search-navbar-padding-horizontal;
     background: @search-navbar-background;
-    font-size: @search-navbar-font-size;
     .hook-search-navbar-input();
 }
 
 /* Focus */
 .uk-search-navbar .uk-search-input:focus {
+    background-color: @search-navbar-focus-background;
     .hook-search-navbar-input-focus();
 }
 
@@ -239,8 +251,39 @@
 
 .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 + @search-navbar-icon-padding); }
-.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-navbar-icon-width + @search-navbar-icon-padding); }
+.uk-search-navbar:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: (@search-navbar-icon-width + @search-navbar-icon-padding); }
+.uk-search-navbar:has(.uk-search-icon-flip) .uk-search-input { padding-right: (@search-navbar-icon-width + @search-navbar-icon-padding); }
+
+
+/* Medium modifier
+ ========================================================================== */
+
+.uk-search-medium { width: @search-medium-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-medium .uk-search-input {
+    height: @search-medium-height;
+    background: @search-medium-background;
+    font-size: @search-medium-font-size;
+    .hook-search-medium-input();
+}
+
+/* Focus */
+.uk-search-medium .uk-search-input:focus {
+    .hook-search-medium-input-focus();
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-medium .uk-search-icon { width: @search-medium-icon-width; }
+
+.uk-search-medium:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: (@search-medium-icon-width + @search-medium-icon-padding); }
+.uk-search-medium:has(.uk-search-icon-flip) .uk-search-input { padding-right: (@search-medium-icon-width + @search-medium-icon-padding); }
 
 
 /* Large modifier
@@ -270,8 +313,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 + @search-large-icon-padding); }
-.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: (@search-large-icon-width + @search-large-icon-padding); }
+.uk-search-large:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: (@search-large-icon-width + @search-large-icon-padding); }
+.uk-search-large:has(.uk-search-icon-flip) .uk-search-input { padding-right: (@search-large-icon-width + @search-large-icon-padding); }
 
 
 /* Toggle
@@ -300,6 +343,8 @@
 .hook-search-default-input-focus() {}
 .hook-search-navbar-input() {}
 .hook-search-navbar-input-focus() {}
+.hook-search-medium-input() {}
+.hook-search-medium-input-focus() {}
 .hook-search-large-input() {}
 .hook-search-large-input-focus() {}
 
@@ -320,7 +365,10 @@
 @inverse-search-default-background:            @inverse-global-muted-background;
 @inverse-search-default-focus-background:      fadein(@inverse-search-default-background, 5%);
 
-@inverse-search-navbar-background:             transparent;
+@inverse-search-navbar-background:             @inverse-global-muted-background;
+@inverse-search-navbar-focus-background:       fadein(@inverse-search-navbar-background, 5%);
+
+@inverse-search-medium-background:             transparent;
 
 @inverse-search-large-background:              transparent;
 
@@ -364,9 +412,19 @@
     }
 
     .uk-search-navbar .uk-search-input:focus {
+        background-color: @inverse-search-navbar-focus-background;
         .hook-inverse-search-navbar-input-focus();
     }
 
+    .uk-search-medium .uk-search-input {
+        background-color: @inverse-search-medium-background;
+        .hook-inverse-search-medium-input();
+    }
+
+    .uk-search-medium .uk-search-input:focus {
+        .hook-inverse-search-medium-input-focus();
+    }
+
     .uk-search-large .uk-search-input {
         background-color: @inverse-search-large-background;
         .hook-inverse-search-large-input();
@@ -396,6 +454,8 @@
 .hook-inverse-search-default-input-focus() {}
 .hook-inverse-search-navbar-input() {}
 .hook-inverse-search-navbar-input-focus() {}
+.hook-inverse-search-medium-input() {}
+.hook-inverse-search-medium-input-focus() {}
 .hook-inverse-search-large-input() {}
 .hook-inverse-search-large-input-focus() {}
 .hook-inverse-search-toggle() {}

package/src/less/theme/search.less

@@ -9,6 +9,8 @@
 
 @search-default-background:                         transparent;
 
+@search-navbar-focus-background:                    @search-navbar-background;
+
 //
 // New
 //
@@ -18,6 +20,11 @@
 
 @search-default-focus-border:                       @global-primary-background;
 
+@search-navbar-border-width:                        @global-border-width;
+@search-navbar-border:                              @global-border;
+
+@search-navbar-focus-border:                        @global-primary-background;
+
 
 // Component
 // ========================================================================
@@ -42,9 +49,17 @@
 // Navbar modifiers
 // ========================================================================
 
-.hook-search-navbar-input() {}
+.hook-search-navbar-input() { border: @search-navbar-border-width solid @search-navbar-border; }
+
+.hook-search-navbar-input-focus() { border-color: @search-navbar-focus-border; }
+
+
+// Medium modifiers
+// ========================================================================
+
+.hook-search-medium-input() {}
 
-.hook-search-navbar-input-focus() {}
+.hook-search-medium-input-focus() {}
 
 
 // Large modifiers
@@ -74,12 +89,17 @@
 
 @inverse-search-default-background:            transparent;
 
+@inverse-search-navbar-background:             transparent;
+
 .hook-inverse-search-default-input() { border-color: @inverse-global-border; }
 .hook-inverse-search-default-input-focus() {}
 
-.hook-inverse-search-navbar-input() {}
+.hook-inverse-search-navbar-input() { border-color: @inverse-global-border; }
 .hook-inverse-search-navbar-input-focus() {}
 
+.hook-inverse-search-medium-input() {}
+.hook-inverse-search-medium-input-focus() {}
+
 .hook-inverse-search-large-input() {}
 .hook-inverse-search-large-input-focus() {}
 

package/src/scss/components/search.scss

@@ -10,6 +10,7 @@
 //
 // Modifier:        `uk-search-default`
 //                  `uk-search-navbar`
+//                  `uk-search-medium`
 //                  `uk-search-large`
 //
 // ========================================================================
@@ -28,6 +29,8 @@
 
 
 
+
+
 /* ========================================================================
    Component: Search
  ========================================================================== */
@@ -184,8 +187,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 + $search-default-icon-padding); }
-.uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width + $search-default-icon-padding); }
+.uk-search-default:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: ($search-default-icon-width + $search-default-icon-padding); }
+.uk-search-default:has(.uk-search-icon-flip) .uk-search-input { padding-right: ($search-default-icon-width + $search-default-icon-padding); }
 
 
 /* Navbar modifier
@@ -199,13 +202,15 @@
 
 .uk-search-navbar .uk-search-input {
     height: $search-navbar-height;
+    padding-left: $search-navbar-padding-horizontal;
+    padding-right: $search-navbar-padding-horizontal;
     background: $search-navbar-background;
-    font-size: $search-navbar-font-size;
     @if(mixin-exists(hook-search-navbar-input)) {@include hook-search-navbar-input();}
 }
 
 /* Focus */
 .uk-search-navbar .uk-search-input:focus {
+    background-color: $search-navbar-focus-background;
     @if(mixin-exists(hook-search-navbar-input-focus)) {@include hook-search-navbar-input-focus();}
 }
 
@@ -215,8 +220,39 @@
 
 .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 + $search-navbar-icon-padding); }
-.uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width + $search-navbar-icon-padding); }
+.uk-search-navbar:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: ($search-navbar-icon-width + $search-navbar-icon-padding); }
+.uk-search-navbar:has(.uk-search-icon-flip) .uk-search-input { padding-right: ($search-navbar-icon-width + $search-navbar-icon-padding); }
+
+
+/* Medium modifier
+ ========================================================================== */
+
+.uk-search-medium { width: $search-medium-width; }
+
+/*
+ * Input
+ */
+
+.uk-search-medium .uk-search-input {
+    height: $search-medium-height;
+    background: $search-medium-background;
+    font-size: $search-medium-font-size;
+    @if(mixin-exists(hook-search-medium-input)) {@include hook-search-medium-input();}
+}
+
+/* Focus */
+.uk-search-medium .uk-search-input:focus {
+    @if(mixin-exists(hook-search-medium-input-focus)) {@include hook-search-medium-input-focus();}
+}
+
+/*
+ * Icon
+ */
+
+.uk-search-medium .uk-search-icon { width: $search-medium-icon-width; }
+
+.uk-search-medium:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: ($search-medium-icon-width + $search-medium-icon-padding); }
+.uk-search-medium:has(.uk-search-icon-flip) .uk-search-input { padding-right: ($search-medium-icon-width + $search-medium-icon-padding); }
 
 
 /* Large modifier
@@ -246,8 +282,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 + $search-large-icon-padding); }
-.uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width + $search-large-icon-padding); }
+.uk-search-large:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: ($search-large-icon-width + $search-large-icon-padding); }
+.uk-search-large:has(.uk-search-icon-flip) .uk-search-input { padding-right: ($search-large-icon-width + $search-large-icon-padding); }
 
 
 /* Toggle
@@ -276,6 +312,8 @@
 // @mixin hook-search-default-input-focus(){}
 // @mixin hook-search-navbar-input(){}
 // @mixin hook-search-navbar-input-focus(){}
+// @mixin hook-search-medium-input(){}
+// @mixin hook-search-medium-input-focus(){}
 // @mixin hook-search-large-input(){}
 // @mixin hook-search-large-input-focus(){}
 
@@ -296,10 +334,13 @@
 
 
 
+
 // @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-medium-input(){}
+// @mixin hook-inverse-search-medium-input-focus(){}
 // @mixin hook-inverse-search-large-input(){}
 // @mixin hook-inverse-search-large-input-focus(){}
 // @mixin hook-inverse-search-toggle(){}

package/src/scss/mixins-theme.scss

@@ -1671,8 +1671,10 @@
 @mixin hook-search-icon(){}
 @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-navbar-input(){ border: $search-navbar-border-width solid $search-navbar-border; }
+@mixin hook-search-navbar-input-focus(){ border-color: $search-navbar-focus-border; }
+@mixin hook-search-medium-input(){}
+@mixin hook-search-medium-input-focus(){}
 @mixin hook-search-large-input(){}
 @mixin hook-search-large-input-focus(){}
 @mixin hook-search-toggle(){}
@@ -1680,8 +1682,10 @@
 @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(){ border-color: $inverse-global-border; }
 @mixin hook-inverse-search-navbar-input-focus(){}
+@mixin hook-inverse-search-medium-input(){}
+@mixin hook-inverse-search-medium-input-focus(){}
 @mixin hook-inverse-search-large-input(){}
 @mixin hook-inverse-search-large-input-focus(){}
 @mixin hook-inverse-search-toggle(){}
@@ -1723,9 +1727,19 @@
     }
 
     .uk-search-navbar .uk-search-input:focus {
+        background-color: $inverse-search-navbar-focus-background;
         @if(mixin-exists(hook-inverse-search-navbar-input-focus)) {@include hook-inverse-search-navbar-input-focus();}
     }
 
+    .uk-search-medium .uk-search-input {
+        background-color: $inverse-search-medium-background;
+        @if(mixin-exists(hook-inverse-search-medium-input)) {@include hook-inverse-search-medium-input();}
+    }
+
+    .uk-search-medium .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-medium-input-focus)) {@include hook-inverse-search-medium-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();}

package/src/scss/mixins.scss

@@ -1356,6 +1356,8 @@
 @mixin hook-search-default-input-focus(){}
 @mixin hook-search-navbar-input(){}
 @mixin hook-search-navbar-input-focus(){}
+@mixin hook-search-medium-input(){}
+@mixin hook-search-medium-input-focus(){}
 @mixin hook-search-large-input(){}
 @mixin hook-search-large-input-focus(){}
 @mixin hook-search-toggle(){}
@@ -1365,6 +1367,8 @@
 @mixin hook-inverse-search-default-input-focus(){}
 @mixin hook-inverse-search-navbar-input(){}
 @mixin hook-inverse-search-navbar-input-focus(){}
+@mixin hook-inverse-search-medium-input(){}
+@mixin hook-inverse-search-medium-input-focus(){}
 @mixin hook-inverse-search-large-input(){}
 @mixin hook-inverse-search-large-input-focus(){}
 @mixin hook-inverse-search-toggle(){}
@@ -1406,9 +1410,19 @@
     }
 
     .uk-search-navbar .uk-search-input:focus {
+        background-color: $inverse-search-navbar-focus-background;
         @if(mixin-exists(hook-inverse-search-navbar-input-focus)) {@include hook-inverse-search-navbar-input-focus();}
     }
 
+    .uk-search-medium .uk-search-input {
+        background-color: $inverse-search-medium-background;
+        @if(mixin-exists(hook-inverse-search-medium-input)) {@include hook-inverse-search-medium-input();}
+    }
+
+    .uk-search-medium .uk-search-input:focus {
+        @if(mixin-exists(hook-inverse-search-medium-input-focus)) {@include hook-inverse-search-medium-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();}

package/src/scss/theme/search.scss

@@ -8,6 +8,7 @@
 // ========================================================================
 
 
+
 //
 // New
 //
@@ -15,6 +16,8 @@
 
 
 
+
+
 // Component
 // ========================================================================
 
@@ -38,9 +41,17 @@
 // Navbar modifiers
 // ========================================================================
 
-// @mixin hook-search-navbar-input(){}
 
-// @mixin hook-search-navbar-input-focus(){}
+
+
+
+
+// Medium modifiers
+// ========================================================================
+
+// @mixin hook-search-medium-input(){}
+
+// @mixin hook-search-medium-input-focus(){}
 
 
 // Large modifiers
@@ -70,11 +81,15 @@
 
 
 
+
 // @mixin hook-inverse-search-default-input-focus(){}
 
-// @mixin hook-inverse-search-navbar-input(){}
+
 // @mixin hook-inverse-search-navbar-input-focus(){}
 
+// @mixin hook-inverse-search-medium-input(){}
+// @mixin hook-inverse-search-medium-input-focus(){}
+
 // @mixin hook-inverse-search-large-input(){}
 // @mixin hook-inverse-search-large-input-focus(){}
 

package/src/scss/variables-theme.scss

@@ -931,15 +931,22 @@ $search-default-width: 240px !default;
 $search-default-height: $global-control-height !default;
 $search-default-padding-horizontal: 10px !default;
 $search-default-background: transparent !default;
-$search-default-focus-background: darken($search-default-background, 5%) !default;
+$search-default-focus-background: darken($search-default-background, 2%) !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-width: 240px !default;
+$search-navbar-height: $global-control-height !default;
+$search-navbar-padding-horizontal: 10px !default;
+$search-navbar-background: $global-background !default;
+$search-navbar-focus-background: $search-navbar-background !default;
+$search-navbar-icon-width: $global-control-height !default;
 $search-navbar-icon-padding: 0 !default;
+$search-medium-width: 400px !default;
+$search-medium-height: 40px !default;
+$search-medium-background: transparent !default;
+$search-medium-font-size: $global-large-font-size !default;
+$search-medium-icon-width: 40px !default;
+$search-medium-icon-padding: 0 !default;
 $search-large-width: 500px !default;
 $search-large-height: 80px !default;
 $search-large-background: transparent !default;
@@ -954,6 +961,8 @@ $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: transparent !default;
 $inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
 $inverse-search-navbar-background: transparent !default;
+$inverse-search-navbar-focus-background: fade-in($inverse-search-navbar-background, 0.05) !default;
+$inverse-search-medium-background: transparent !default;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;
 $inverse-search-toggle-hover-color: $inverse-global-color !default;
@@ -1276,6 +1285,9 @@ $progress-border-radius: 500px !default;
 $search-default-border-width: $global-border-width !default;
 $search-default-border: $global-border !default;
 $search-default-focus-border: $global-primary-background !default;
+$search-navbar-border-width: $global-border-width !default;
+$search-navbar-border: $global-border !default;
+$search-navbar-focus-border: $global-primary-background !default;
 $subnav-item-text-transform: uppercase !default;
 $tab-border-width: $global-border-width !default;
 $tab-border: $global-border !default;

package/src/scss/variables.scss

@@ -929,15 +929,22 @@ $search-default-width: 240px !default;
 $search-default-height: $global-control-height !default;
 $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-focus-background: darken($search-default-background, 2%) !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-width: 240px !default;
+$search-navbar-height: $global-control-height !default;
+$search-navbar-padding-horizontal: 10px !default;
+$search-navbar-background: $global-background !default;
+$search-navbar-focus-background: darken($search-navbar-background, 1%) !default;
+$search-navbar-icon-width: $global-control-height !default;
 $search-navbar-icon-padding: 0 !default;
+$search-medium-width: 400px !default;
+$search-medium-height: 40px !default;
+$search-medium-background: transparent !default;
+$search-medium-font-size: $global-large-font-size !default;
+$search-medium-icon-width: 40px !default;
+$search-medium-icon-padding: 0 !default;
 $search-large-width: 500px !default;
 $search-large-height: 80px !default;
 $search-large-background: transparent !default;
@@ -951,7 +958,9 @@ $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: fade-in($inverse-search-default-background, 0.05) !default;
-$inverse-search-navbar-background: transparent !default;
+$inverse-search-navbar-background: $inverse-global-muted-background !default;
+$inverse-search-navbar-focus-background: fade-in($inverse-search-navbar-background, 0.05) !default;
+$inverse-search-medium-background: transparent !default;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;
 $inverse-search-toggle-hover-color: $inverse-global-color !default;

package/tests/index.html

@@ -65,6 +65,13 @@
 
                     </div>
                     <div class="uk-navbar-right">
+
+                        <div class="uk-navbar-item">
+                            <form class="uk-search uk-search-navbar uk-width-1-1">
+                                <span uk-search-icon></span>
+                                <input class="uk-search-input" type="search" placeholder="Search" aria-label="Search">
+                            </form>
+                        </div>
                         <a class="uk-navbar-toggle" href="#modal" uk-icon="icon: more-vertical" uk-toggle></a>
                         <a class="uk-navbar-toggle" href="#modal-search" uk-search-icon uk-toggle></a>
                         <a class="uk-navbar-toggle" href="#offcanvas" uk-navbar-toggle-icon uk-toggle></a>