uikit 3.21.14-dev.60ed95dfb → 3.21.14-dev.8b3dfa6cd

package/src/scss/components/breadcrumb.scss

@@ -19,12 +19,16 @@
  ========================================================================== */
 
 /*
- * Reset list
+ * 1. Reset list
+ * 2. Remove space between elements
  */
 
 .uk-breadcrumb {
+    /* 1 */
     padding: 0;
     list-style: none;
+    /* 2 */
+    font-size: 0;
     @if(mixin-exists(hook-breadcrumb)) {@include hook-breadcrumb();}
 }
 
@@ -74,7 +78,7 @@
     content: $breadcrumb-divider;
     display: inline-block;
     /* 1 */
-    margin: 0 $breadcrumb-divider-margin-horizontal 0 unquote('calc(#{$breadcrumb-divider-margin-horizontal} - 4px)');
+    margin: 0 $breadcrumb-divider-margin-horizontal;
     /* 2 */
     font-size: $breadcrumb-divider-font-size;
     color: $breadcrumb-divider-color;

package/src/scss/components/button.scss

@@ -306,7 +306,7 @@
  ========================================================================== */
 
 /*
- * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
+ * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
  * 2. Behave like button
  * 3. Create position context
  */

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

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

package/src/scss/components/form.scss

@@ -547,7 +547,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  * 1. Position and resize the form control to always cover its container
  * 2. Required for Firefox for positioning to the left
  * 3. Required for Webkit to make `height` work
- * 4. Hide controle and show cursor
+ * 4. Hide controls and show cursor
  * 5. Needed for the cursor
  * 6. Clip height caused by 5. Needed for Webkit only
  */

package/src/scss/components/lightbox.scss

@@ -5,11 +5,14 @@
 //
 // Sub-objects:     `uk-lightbox-page`
 //                  `uk-lightbox-items`
-//                  `uk-lightbox-toolbar`
-//                  `uk-lightbox-toolbar-icon`
-//                  `uk-lightbox-button`
+//                  `uk-lightbox-items-fit`
+//                  `uk-lightbox-thumbnav`
+//                  `uk-lightbox-thumbnav-vertical`
+//                  `uk-lightbox-dotnav`
 //                  `uk-lightbox-caption`
+//                  `uk-lightbox-counter`
 //                  `uk-lightbox-iframe`
+//                  `uk-lightbox-zoom`
 //
 // States:          `uk-open`
 //
@@ -25,9 +28,6 @@
 
 
 
-
-
-
 /* ========================================================================
    Component: Lightbox
  ========================================================================== */
@@ -43,6 +43,7 @@
  */
 
 .uk-lightbox {
+    --uk-inverse: #{$lightbox-color-mode};
     /* 1 */
     display: none;
     /* 2 */
@@ -91,15 +92,24 @@
 .uk-lightbox-page { overflow: hidden; }
 
 
-/* Item
+/* Items
  ========================================================================== */
 
+/*
+ * Reset list
+ */
+
+.uk-lightbox-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
 /*
  * 1. Center child within the viewport
  * 2. Not visible by default
- * 3. Color needed for spinner icon
- * 4. Optimize animation
- * 5. Responsiveness
+ * 3. Optimize animation
+ * 4. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
  */
 
@@ -113,96 +123,64 @@
     /* 2 */
     display: none;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
     /* 3 */
-    color: $lightbox-item-color;
-    /* 4 */
     will-change: transform, opacity;
+    /* 4 */
+    overflow: auto;
     @if(mixin-exists(hook-lightbox-item)) {@include hook-lightbox-item();}
 }
 
-/* 5 */
-.uk-lightbox-items > * > * {
+/* 2 */
+.uk-lightbox-items > .uk-active { display: flex; }
+
+.uk-lightbox-items-fit > * { align-items: center; }
+
+/* 4 */
+.uk-lightbox-items-fit > * > * {
     max-width: $lightbox-item-max-width;
     max-height: $lightbox-item-max-height;
 }
 
-.uk-lightbox-items > * > :not(iframe) {
+.uk-lightbox-items-fit > * > :not(iframe) {
     width: auto;
     height: auto;
 }
 
-.uk-lightbox-items > .uk-active { display: flex; }
-
-/* Toolbar
- ========================================================================== */
-
-.uk-lightbox-toolbar {
-    padding: $lightbox-toolbar-padding-vertical $lightbox-toolbar-padding-horizontal;
-    background: $lightbox-toolbar-background;
-    color: $lightbox-toolbar-color;
-    @if(mixin-exists(hook-lightbox-toolbar)) {@include hook-lightbox-toolbar();}
-}
-
-.uk-lightbox-toolbar > * { color: $lightbox-toolbar-color; }
+/* Zoom Cursor */
+.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover { cursor: zoom-in; }
+.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover { cursor: zoom-out; }
 
 
-/* Toolbar Icon (Close)
+/* Navs
  ========================================================================== */
 
-.uk-lightbox-toolbar-icon {
-    padding: $lightbox-toolbar-icon-padding;
-    color: $lightbox-toolbar-icon-color;
-    @if(mixin-exists(hook-lightbox-toolbar-icon)) {@include hook-lightbox-toolbar-icon();}
-}
+.uk-lightbox-thumbnav-vertical :where(img, video) { max-width: $lightbox-thumbnav-vertical-width; }
+.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video) { max-height: $lightbox-thumbnav-height; }
 
-/*
- * Hover
- */
+.uk-lightbox-thumbnav:empty,
+.uk-lightbox-dotnav:empty { display: none; }
 
-.uk-lightbox-toolbar-icon:hover {
-    color: $lightbox-toolbar-icon-hover-color;
-    @if(mixin-exists(hook-lightbox-toolbar-icon-hover)) {@include hook-lightbox-toolbar-icon-hover();}
-}
 
-
-
-/* Button (Slidenav)
+/* Caption
  ========================================================================== */
 
-/*
- * 1. Center icon vertically and horizontally
- */
-
-.uk-lightbox-button {
-    box-sizing: border-box;
-    width: $lightbox-button-size;
-    height: $lightbox-button-size;
-    background: $lightbox-button-background;
-    color: $lightbox-button-color;
-    /* 1 */
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    @if(mixin-exists(hook-lightbox-button)) {@include hook-lightbox-button();}
-}
+.uk-lightbox-caption:empty { display: none; }
 
-/* Hover */
-.uk-lightbox-button:hover {
-    color: $lightbox-button-hover-color;
-    @if(mixin-exists(hook-lightbox-button-hover)) {@include hook-lightbox-button-hover();}
+.uk-lightbox-caption {
+    padding: $lightbox-caption-padding-vertical $lightbox-caption-padding-horizontal;
+    background: $lightbox-caption-background;
+    color: $lightbox-caption-color;
+    @if(mixin-exists(hook-lightbox-caption)) {@include hook-lightbox-caption();}
 }
 
-/* OnClick */
-.uk-lightbox-button:active {
-    @if(mixin-exists(hook-lightbox-button-active)) {@include hook-lightbox-button-active();}
-}
+.uk-lightbox-caption > * { color: $lightbox-caption-color; }
 
 
-/* Caption
+/* Counter
  ========================================================================== */
 
-.uk-lightbox-caption:empty { display: none; }
+.uk-lightbox-counter:empty { display: none; }
 
 
 /* Iframe
@@ -221,10 +199,5 @@
 
 // @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(){}

package/src/scss/components/margin.scss

@@ -21,6 +21,7 @@
 
 
 
+
 /* ========================================================================
    Component: Margin
  ========================================================================== */
@@ -38,6 +39,18 @@
 .uk-margin-right { margin-right: $margin-margin !important; }
 
 
+/* XSmall
+ ========================================================================== */
+
+.uk-margin-xsmall { margin-bottom: $margin-xsmall-margin; }
+* + .uk-margin-xsmall { margin-top: $margin-xsmall-margin !important; }
+
+.uk-margin-xsmall-top { margin-top: $margin-xsmall-margin !important; }
+.uk-margin-xsmall-bottom { margin-bottom: $margin-xsmall-margin !important; }
+.uk-margin-xsmall-left { margin-left: $margin-xsmall-margin !important; }
+.uk-margin-xsmall-right { margin-right: $margin-xsmall-margin !important; }
+
+
 /* Small
  ========================================================================== */
 

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();