uikit 3.21.14-dev.60ed95dfb → 3.21.14-dev.b1911d7ca

package/src/scss/components/search.scss

@@ -185,10 +185,13 @@
  * Icon
  */
 
-.uk-search-default .uk-search-icon { width: $search-default-icon-width; }
+.uk-search-default .uk-search-icon {
+    padding-left: $search-default-padding-horizontal;
+    padding-right: $search-default-padding-horizontal;
+}
 
-.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); }
+.uk-search-default:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: ($search-default-icon-width + $search-default-padding-horizontal + $search-default-icon-padding); }
+.uk-search-default:has(.uk-search-icon-flip) .uk-search-input { padding-right: ($search-default-icon-width + $search-default-padding-horizontal + $search-default-icon-padding); }
 
 
 /* Navbar modifier
@@ -218,10 +221,13 @@
  * Icon
  */
 
-.uk-search-navbar .uk-search-icon { width: $search-navbar-icon-width; }
+.uk-search-navbar .uk-search-icon {
+    padding-left: $search-navbar-padding-horizontal;
+    padding-right: $search-navbar-padding-horizontal;
+}
 
-.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); }
+.uk-search-navbar:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: ($search-navbar-icon-width + $search-navbar-padding-horizontal + $search-navbar-icon-padding); }
+.uk-search-navbar:has(.uk-search-icon-flip) .uk-search-input { padding-right: ($search-navbar-icon-width + $search-navbar-padding-horizontal + $search-navbar-icon-padding); }
 
 
 /* Medium modifier
@@ -235,6 +241,8 @@
 
 .uk-search-medium .uk-search-input {
     height: $search-medium-height;
+    padding-left: $search-medium-padding-horizontal;
+    padding-right: $search-medium-padding-horizontal;
     background: $search-medium-background;
     font-size: $search-medium-font-size;
     @if(mixin-exists(hook-search-medium-input)) {@include hook-search-medium-input();}
@@ -242,6 +250,7 @@
 
 /* Focus */
 .uk-search-medium .uk-search-input:focus {
+    background-color: $search-medium-focus-background;
     @if(mixin-exists(hook-search-medium-input-focus)) {@include hook-search-medium-input-focus();}
 }
 
@@ -249,10 +258,13 @@
  * Icon
  */
 
-.uk-search-medium .uk-search-icon { width: $search-medium-icon-width; }
+.uk-search-medium .uk-search-icon {
+    padding-left: $search-medium-padding-horizontal;
+    padding-right: $search-medium-padding-horizontal;
+}
 
-.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); }
+.uk-search-medium:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: ($search-medium-icon-width + $search-medium-padding-horizontal + $search-medium-icon-padding); }
+.uk-search-medium:has(.uk-search-icon-flip) .uk-search-input { padding-right: ($search-medium-icon-width + $search-medium-padding-horizontal + $search-medium-icon-padding); }
 
 
 /* Large modifier
@@ -266,6 +278,8 @@
 
 .uk-search-large .uk-search-input {
     height: $search-large-height;
+    padding-left: $search-large-padding-horizontal;
+    padding-right: $search-large-padding-horizontal;
     background: $search-large-background;
     font-size: $search-large-font-size;
     @if(mixin-exists(hook-search-large-input)) {@include hook-search-large-input();}
@@ -273,6 +287,7 @@
 
 /* Focus */
 .uk-search-large .uk-search-input:focus {
+    background-color: $search-medium-focus-background;
     @if(mixin-exists(hook-search-large-input-focus)) {@include hook-search-large-input-focus();}
 }
 
@@ -280,10 +295,13 @@
  * Icon
  */
 
-.uk-search-large .uk-search-icon { width: $search-large-icon-width; }
+.uk-search-large .uk-search-icon {
+    padding-left: $search-large-padding-horizontal;
+    padding-right: $search-large-padding-horizontal;
+}
 
-.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); }
+.uk-search-large:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input { padding-left: ($search-large-icon-width + $search-large-padding-horizontal + $search-large-icon-padding); }
+.uk-search-large:has(.uk-search-icon-flip) .uk-search-input { padding-right: ($search-large-icon-width + $search-large-padding-horizontal + $search-large-icon-padding); }
 
 
 /* Toggle

package/src/scss/components/sticky.scss

@@ -36,16 +36,7 @@
     box-sizing: border-box;
 }
 
-/*
- * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
- */
-
-.uk-sticky-fixed {
-    margin: 0 !important;
-    /* 1 */
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-}
+.uk-sticky-fixed { margin: 0 !important; }
 
 /*
  * Faster animations

package/src/scss/components/totop.scss

@@ -18,7 +18,7 @@
  ========================================================================== */
 
 /*
- * Addopts `uk-icon`
+ * Adopts `uk-icon`
  */
 
 .uk-totop {

package/src/scss/components/transition.scss

@@ -72,7 +72,7 @@
 
 .uk-transition-toggle:hover .uk-transition-fade,
 .uk-transition-toggle:focus .uk-transition-fade,
-.uk-transition-toggle .uk-transition-fade:focus-within,
+.uk-transition-toggle:focus-within .uk-transition-fade,
 .uk-transition-active.uk-active .uk-transition-fade { opacity: 1; }
 
 /*
@@ -95,7 +95,7 @@
 /* Show */
 .uk-transition-toggle:hover .uk-transition-scale-up,
 .uk-transition-toggle:focus .uk-transition-scale-up,
-.uk-transition-toggle .uk-transition-scale-up:focus-within,
+.uk-transition-toggle:focus-within .uk-transition-scale-up,
 .uk-transition-active.uk-active .uk-transition-scale-up {
     --uk-scale-x: #{$transition-scale};
     --uk-scale-y: #{$transition-scale};
@@ -104,7 +104,7 @@
 
 .uk-transition-toggle:hover .uk-transition-scale-down,
 .uk-transition-toggle:focus .uk-transition-scale-down,
-.uk-transition-toggle .uk-transition-scale-down:focus-within,
+.uk-transition-toggle:focus-within .uk-transition-scale-down,
 .uk-transition-active.uk-active .uk-transition-scale-down {
     --uk-scale-x: 1;
     --uk-scale-y: 1;
@@ -133,7 +133,7 @@
 /* Show */
 .uk-transition-toggle:hover [class*="uk-transition-slide"],
 .uk-transition-toggle:focus [class*="uk-transition-slide"],
-.uk-transition-toggle [class*="uk-transition-slide"]:focus-within,
+.uk-transition-toggle:focus-within [class*="uk-transition-slide"],
 .uk-transition-active.uk-active [class*="uk-transition-slide"] {
     --uk-translate-x: 0;
     --uk-translate-y: 0;

package/src/scss/components/visibility.scss

@@ -24,7 +24,8 @@
  */
 
 [hidden],
-.uk-hidden { display: none !important; }
+.uk-hidden,
+.uk-hidden-empty:empty { display: none !important; }
 
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
@@ -114,7 +115,7 @@
  */
 
 .uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
-.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-visible):not(:has(:focus-visible)) {
     /* 1 */
     position: absolute !important;
     /* 2 */

package/src/scss/mixins-theme.scss

@@ -819,6 +819,47 @@
 @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-inverse-form-range-track(){}
+@mixin hook-inverse-form-range-track-focus(){}
+@mixin hook-inverse-form-range-thumb(){ border-color: $inverse-form-range-thumb-border; }
+@mixin hook-inverse-component-form-range(){
+
+    /* Webkit */
+    .uk-range::-webkit-slider-runnable-track {
+        background: $inverse-form-range-track-background;
+        @if(mixin-exists(hook-inverse-form-range-track)) {@include hook-inverse-form-range-track();}
+    }
+
+    .uk-range:focus::-webkit-slider-runnable-track,
+    .uk-range:active::-webkit-slider-runnable-track {
+        background: $inverse-form-range-track-focus-background;
+        @if(mixin-exists(hook-inverse-form-range-track-focus)) {@include hook-inverse-form-range-track-focus();}
+    }
+
+    /* Firefox */
+    .uk-range::-moz-range-track {
+        background: $inverse-form-range-track-background;
+        @if(mixin-exists(hook-inverse-form-range-track)) {@include hook-inverse-form-range-track();}
+    }
+
+    .uk-range:focus::-moz-range-track {
+        background: $inverse-form-range-track-focus-background;
+        @if(mixin-exists(hook-inverse-form-range-track-focus)) {@include hook-inverse-form-range-track-focus();}
+    }
+
+    /* Webkit */
+    .uk-range::-webkit-slider-thumb {
+        background: $inverse-form-range-thumb-background;
+        @if(mixin-exists(hook-inverse-form-range-thumb)) {@include hook-inverse-form-range-thumb();}
+    }
+
+    /* Firefox */
+    .uk-range::-moz-range-thumb {
+        background: $inverse-form-range-thumb-background;
+        @if(mixin-exists(hook-inverse-form-range-thumb)) {@include hook-inverse-form-range-thumb();}
+    }
+
+}
 @mixin hook-form(){
     border: $form-border-width solid $form-border;
     transition: 0.2s ease-in-out;
@@ -1160,12 +1201,7 @@
 }
 @mixin hook-lightbox(){}
 @mixin hook-lightbox-item(){}
-@mixin hook-lightbox-toolbar(){}
-@mixin hook-lightbox-toolbar-icon(){}
-@mixin hook-lightbox-toolbar-icon-hover(){}
-@mixin hook-lightbox-button(){}
-@mixin hook-lightbox-button-hover(){}
-@mixin hook-lightbox-button-active(){}
+@mixin hook-lightbox-caption(){}
 @mixin hook-lightbox-misc(){}
 @mixin hook-link-muted(){}
 @mixin hook-link-muted-hover(){}
@@ -1673,10 +1709,10 @@
 @mixin hook-search-default-input-focus(){ border-color: $search-default-focus-border; }
 @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-medium-input(){ border: $search-medium-border-width solid $search-medium-border; }
+@mixin hook-search-medium-input-focus(){ border-color: $search-medium-focus-border; }
+@mixin hook-search-large-input(){ border: $search-large-border-width solid $search-large-border; }
+@mixin hook-search-large-input-focus(){ border-color: $search-large-focus-border; }
 @mixin hook-search-toggle(){}
 @mixin hook-search-toggle-hover(){}
 @mixin hook-search-misc(){}
@@ -1684,9 +1720,9 @@
 @mixin hook-inverse-search-default-input-focus(){}
 @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(){ border-color: $inverse-global-border; }
 @mixin hook-inverse-search-medium-input-focus(){}
-@mixin hook-inverse-search-large-input(){}
+@mixin hook-inverse-search-large-input(){ border-color: $inverse-global-border; }
 @mixin hook-inverse-search-large-input-focus(){}
 @mixin hook-inverse-search-toggle(){}
 @mixin hook-inverse-search-toggle-hover(){}
@@ -1737,6 +1773,7 @@
     }
 
     .uk-search-medium .uk-search-input:focus {
+        background-color: $inverse-search-medium-focus-background;
         @if(mixin-exists(hook-inverse-search-medium-input-focus)) {@include hook-inverse-search-medium-input-focus();}
     }
 
@@ -1746,6 +1783,7 @@
     }
 
     .uk-search-large .uk-search-input:focus {
+        background-color: $inverse-search-large-focus-background;
         @if(mixin-exists(hook-inverse-search-large-input-focus)) {@include hook-inverse-search-large-input-focus();}
     }
 
@@ -2211,6 +2249,7 @@
     @include hook-inverse-component-countdown();
     @include hook-inverse-component-divider();
     @include hook-inverse-component-dotnav();
+    @include hook-inverse-component-form-range();
     @include hook-inverse-component-form();
     @include hook-inverse-component-grid();
     @include hook-inverse-component-heading();

package/src/scss/mixins.scss

@@ -593,6 +593,47 @@
 @mixin hook-form-range-track-focus(){}
 @mixin hook-form-range-thumb(){}
 @mixin hook-form-range-misc(){}
+@mixin hook-inverse-form-range-track(){}
+@mixin hook-inverse-form-range-track-focus(){}
+@mixin hook-inverse-form-range-thumb(){}
+@mixin hook-inverse-component-form-range(){
+
+    /* Webkit */
+    .uk-range::-webkit-slider-runnable-track {
+        background: $inverse-form-range-track-background;
+        @if(mixin-exists(hook-inverse-form-range-track)) {@include hook-inverse-form-range-track();}
+    }
+
+    .uk-range:focus::-webkit-slider-runnable-track,
+    .uk-range:active::-webkit-slider-runnable-track {
+        background: $inverse-form-range-track-focus-background;
+        @if(mixin-exists(hook-inverse-form-range-track-focus)) {@include hook-inverse-form-range-track-focus();}
+    }
+
+    /* Firefox */
+    .uk-range::-moz-range-track {
+        background: $inverse-form-range-track-background;
+        @if(mixin-exists(hook-inverse-form-range-track)) {@include hook-inverse-form-range-track();}
+    }
+
+    .uk-range:focus::-moz-range-track {
+        background: $inverse-form-range-track-focus-background;
+        @if(mixin-exists(hook-inverse-form-range-track-focus)) {@include hook-inverse-form-range-track-focus();}
+    }
+
+    /* Webkit */
+    .uk-range::-webkit-slider-thumb {
+        background: $inverse-form-range-thumb-background;
+        @if(mixin-exists(hook-inverse-form-range-thumb)) {@include hook-inverse-form-range-thumb();}
+    }
+
+    /* Firefox */
+    .uk-range::-moz-range-thumb {
+        background: $inverse-form-range-thumb-background;
+        @if(mixin-exists(hook-inverse-form-range-thumb)) {@include hook-inverse-form-range-thumb();}
+    }
+
+}
 @mixin hook-form(){}
 @mixin hook-form-single-line(){}
 @mixin hook-form-multi-line(){}
@@ -910,12 +951,7 @@
 }
 @mixin hook-lightbox(){}
 @mixin hook-lightbox-item(){}
-@mixin hook-lightbox-toolbar(){}
-@mixin hook-lightbox-toolbar-icon(){}
-@mixin hook-lightbox-toolbar-icon-hover(){}
-@mixin hook-lightbox-button(){}
-@mixin hook-lightbox-button-hover(){}
-@mixin hook-lightbox-button-active(){}
+@mixin hook-lightbox-caption(){}
 @mixin hook-lightbox-misc(){}
 @mixin hook-link-muted(){}
 @mixin hook-link-muted-hover(){}
@@ -1420,6 +1456,7 @@
     }
 
     .uk-search-medium .uk-search-input:focus {
+        background-color: $inverse-search-medium-focus-background;
         @if(mixin-exists(hook-inverse-search-medium-input-focus)) {@include hook-inverse-search-medium-input-focus();}
     }
 
@@ -1429,6 +1466,7 @@
     }
 
     .uk-search-large .uk-search-input:focus {
+        background-color: $inverse-search-large-focus-background;
         @if(mixin-exists(hook-inverse-search-large-input-focus)) {@include hook-inverse-search-large-input-focus();}
     }
 
@@ -1813,6 +1851,7 @@
     @include hook-inverse-component-countdown();
     @include hook-inverse-component-divider();
     @include hook-inverse-component-dotnav();
+    @include hook-inverse-component-form-range();
     @include hook-inverse-component-form();
     @include hook-inverse-component-grid();
     @include hook-inverse-component-heading();

package/src/scss/theme/form-range.scss

@@ -39,3 +39,13 @@
 // ========================================================================
 
 // @mixin hook-form-range-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+// @mixin hook-inverse-form-range-track(){}
+// @mixin hook-inverse-form-range-track-focus(){}
+

package/src/scss/theme/lightbox.scss

@@ -20,28 +20,10 @@
 // @mixin hook-lightbox-item(){}
 
 
-// Toolbar
+// Caption
 // ========================================================================
 
-// @mixin hook-lightbox-toolbar(){}
-
-
-// Toolbar Icon
-// ========================================================================
-
-// @mixin hook-lightbox-toolbar-icon(){}
-
-// @mixin hook-lightbox-toolbar-icon-hover(){}
-
-
-// Button
-// ========================================================================
-
-// @mixin hook-lightbox-button(){}
-
-// @mixin hook-lightbox-button-hover(){}
-
-// @mixin hook-lightbox-button-active(){}
+// @mixin hook-lightbox-caption(){}
 
 
 // Miscellaneous

package/src/scss/theme/search.scss

@@ -9,6 +9,8 @@
 
 
 
+
+
 //
 // New
 //
@@ -49,17 +51,17 @@
 // Medium modifiers
 // ========================================================================
 
-// @mixin hook-search-medium-input(){}
 
-// @mixin hook-search-medium-input-focus(){}
+
+
 
 
 // Large modifiers
 // ========================================================================
 
-// @mixin hook-search-large-input(){}
 
-// @mixin hook-search-large-input-focus(){}
+
+
 
 
 // Toggle
@@ -82,15 +84,17 @@
 
 
 
+
+
 // @mixin hook-inverse-search-default-input-focus(){}
 
 
 // @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/variables-theme.scss

@@ -415,6 +415,10 @@ $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;
+$inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
+$inverse-form-range-track-background: darken($inverse-global-muted-background; 5%) !default;
+$inverse-form-range-track-focus-background: fade-in($inverse-form-range-track-background, 0.05) !default;
+$inverse-form-range-thumb-background: darken(fade-in($inverse-global-color, 1), 50%) !default;
 $form-height: $global-control-height !default;
 $form-border-width: $global-border-width !default;
 $form-line-height: $form-height - (2* $form-border-width) !default;
@@ -473,7 +477,6 @@ $internal-form-datalist-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%
 $internal-form-radio-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
 $internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
 $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
-$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: fade-in($inverse-form-background, 0.05) !default;
@@ -604,21 +607,17 @@ $leader-fill-content: unquote('.') !default;
 $leader-fill-margin-left: $global-small-gutter !default;
 $lightbox-z-index: $global-z-index + 10 !default;
 $lightbox-background: #000 !default;
+$lightbox-color: rgba(255,255,255,0.7) !default;
+$lightbox-color-mode: light !default;
 $lightbox-focus-outline: rgba(255,255,255,0.7) !default;
-$lightbox-item-color: rgba(255,255,255,0.7) !default;
 $lightbox-item-max-width: 100vw !default;
 $lightbox-item-max-height: 100vh !default;
-$lightbox-toolbar-padding-vertical: 10px !default;
-$lightbox-toolbar-padding-horizontal: 10px !default;
-$lightbox-toolbar-background: rgba(0,0,0,0.3) !default;
-$lightbox-toolbar-color: rgba(255,255,255,0.7) !default;
-$lightbox-toolbar-icon-padding: 5px !default;
-$lightbox-toolbar-icon-color: rgba(255,255,255,0.7) !default;
-$lightbox-toolbar-icon-hover-color: #fff !default;
-$lightbox-button-size: 50px !default;
-$lightbox-button-background: $lightbox-toolbar-background !default;
-$lightbox-button-color: rgba(255,255,255,0.7) !default;
-$lightbox-button-hover-color: #fff !default;
+$lightbox-thumbnav-vertical-width: 100px !default;
+$lightbox-thumbnav-height: 100px !default;
+$lightbox-caption-padding-vertical: 10px !default;
+$lightbox-caption-padding-horizontal: 10px !default;
+$lightbox-caption-background: rgba(0,0,0,0.3) !default;
+$lightbox-caption-color: rgba(255,255,255,0.7) !default;
 $link-muted-color: $global-muted-color !default;
 $link-muted-hover-color: $global-color !default;
 $link-text-hover-color: $global-muted-color !default;
@@ -932,25 +931,29 @@ $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, 2%) !default;
-$search-default-icon-width: $global-control-height !default;
-$search-default-icon-padding: 0 !default;
+$search-default-icon-width: 20px !default;
+$search-default-icon-padding: 10px !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-navbar-icon-width: 20px !default;
+$search-navbar-icon-padding: 10px !default;
 $search-medium-width: 400px !default;
-$search-medium-height: 40px !default;
+$search-medium-height: $global-control-large-height !default;
+$search-medium-padding-horizontal: 12px !default;
 $search-medium-background: transparent !default;
 $search-medium-font-size: $global-large-font-size !default;
+$search-medium-focus-background: darken($search-medium-background, 2%) !default;
 $search-medium-icon-width: 24px !default;
-$search-medium-icon-padding: 10px !default;
+$search-medium-icon-padding: 12px !default;
 $search-large-width: 500px !default;
-$search-large-height: 80px !default;
+$search-large-height: 90px !default;
+$search-large-padding-horizontal: 20px !default;
 $search-large-background: transparent !default;
 $search-large-font-size: $global-2xlarge-font-size !default;
+$search-large-focus-background: darken($search-large-background, 2%) !default;
 $search-large-icon-width: 40px !default;
 $search-large-icon-padding: 20px !default;
 $search-toggle-color: $global-muted-color !default;
@@ -963,7 +966,9 @@ $inverse-search-default-focus-background: fade-in($inverse-search-default-backgr
 $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-medium-focus-background: fade-in($inverse-search-medium-background, 0.05) !default;
 $inverse-search-large-background: transparent !default;
+$inverse-search-large-focus-background: fade-in($inverse-search-large-background, 0.05) !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;
 $inverse-search-toggle-hover-color: $inverse-global-color !default;
 $section-padding-vertical: $global-medium-margin !default;
@@ -1240,6 +1245,7 @@ $dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
 $form-range-thumb-border-width: $global-border-width !default;
 $form-range-thumb-border: darken($global-border, 10%) !default;
 $form-range-track-border-radius: 500px !default;
+$inverse-form-range-thumb-border: darken(fade-in($inverse-global-border, 1), 10%) !default;
 $form-border: $global-border !default;
 $form-focus-border: $global-primary-background !default;
 $form-disabled-border: $global-border !default;
@@ -1288,6 +1294,12 @@ $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;
+$search-medium-border-width: $global-border-width !default;
+$search-medium-border: $global-border !default;
+$search-medium-focus-border: $global-primary-background !default;
+$search-large-border-width: $global-border-width !default;
+$search-large-border: $global-border !default;
+$search-large-focus-border: $global-primary-background !default;
 $subnav-item-text-transform: uppercase !default;
 $tab-border-width: $global-border-width !default;
 $tab-border: $global-border !default;