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

package/src/less/components/lightbox.less

@@ -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`
 //
@@ -21,28 +24,20 @@
 
 @lightbox-z-index:                              @global-z-index + 10;
 @lightbox-background:                           #000;
+@lightbox-color-mode:                           light;
 
 @lightbox-focus-outline:                        rgba(255,255,255,0.7);
 
-@lightbox-item-color:                           rgba(255,255,255,0.7);
 @lightbox-item-max-width:                       100vw;
 @lightbox-item-max-height:                      100vh;
 
-@lightbox-toolbar-padding-vertical:             10px;
-@lightbox-toolbar-padding-horizontal:           10px;
-@lightbox-toolbar-background:                   rgba(0,0,0,0.3);
-@lightbox-toolbar-color:                        rgba(255,255,255,0.7);
+@lightbox-thumbnav-vertical-width:              100px;
+@lightbox-thumbnav-height:                      100px;
 
-@lightbox-toolbar-icon-padding:                 5px;
-@lightbox-toolbar-icon-color:                   rgba(255,255,255,0.7);
-
-@lightbox-toolbar-icon-hover-color:             #fff;
-
-@lightbox-button-size:                          50px;
-@lightbox-button-background:                    @lightbox-toolbar-background;
-@lightbox-button-color:                         rgba(255,255,255,0.7);
-
-@lightbox-button-hover-color:                   #fff;
+@lightbox-caption-padding-vertical:             10px;
+@lightbox-caption-padding-horizontal:           10px;
+@lightbox-caption-background:                   rgba(0,0,0,0.3);
+@lightbox-caption-color:                        rgba(255,255,255,0.7);
 
 
 /* ========================================================================
@@ -60,6 +55,7 @@
  */
 
 .uk-lightbox {
+    --uk-inverse: @lightbox-color-mode;
     /* 1 */
     display: none;
     /* 2 */
@@ -108,15 +104,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
  */
 
@@ -130,96 +135,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;
     .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;
-    .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;
-    .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;
-    .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;
-    .hook-lightbox-button();
-}
+.uk-lightbox-caption:empty { display: none; }
 
-/* Hover */
-.uk-lightbox-button:hover {
-    color: @lightbox-button-hover-color;
-    .hook-lightbox-button-hover();
+.uk-lightbox-caption {
+    padding: @lightbox-caption-padding-vertical @lightbox-caption-padding-horizontal;
+    background: @lightbox-caption-background;
+    color: @lightbox-caption-color;
+    .hook-lightbox-caption();
 }
 
-/* OnClick */
-.uk-lightbox-button:active {
-    .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
@@ -238,10 +211,5 @@
 
 .hook-lightbox() {}
 .hook-lightbox-item() {}
-.hook-lightbox-toolbar() {}
-.hook-lightbox-toolbar-icon() {}
-.hook-lightbox-toolbar-icon-hover() {}
-.hook-lightbox-button() {}
-.hook-lightbox-button-hover() {}
-.hook-lightbox-button-active() {}
+.hook-lightbox-caption() {}
 .hook-lightbox-misc() {}

package/src/less/components/margin.less

@@ -17,6 +17,8 @@
 
 @margin-margin:                                        @global-margin;
 
+@margin-xsmall-margin:                                 5px;
+
 @margin-small-margin:                                  @global-small-margin;
 
 @margin-medium-margin:                                 @global-medium-margin;
@@ -45,6 +47,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/less/components/search.less

@@ -30,8 +30,8 @@
 @search-default-background:                         @global-muted-background;
 @search-default-focus-background:                   darken(@search-default-background, 2%);
 
-@search-default-icon-width:                         @global-control-height;
-@search-default-icon-padding:                       0;
+@search-default-icon-width:                         20px;
+@search-default-icon-padding:                       10px;
 
 @search-navbar-width:                               240px;
 @search-navbar-height:                              @global-control-height;
@@ -39,21 +39,25 @@
 @search-navbar-background:                          @global-background;
 @search-navbar-focus-background:                    darken(@search-navbar-background, 1%);
 
-@search-navbar-icon-width:                          @global-control-height;
-@search-navbar-icon-padding:                        0;
+@search-navbar-icon-width:                          20px;
+@search-navbar-icon-padding:                        10px;
 
 @search-medium-width:                               400px;
-@search-medium-height:                              40px;
-@search-medium-background:                          transparent;
+@search-medium-height:                              @global-control-large-height;
+@search-medium-padding-horizontal:                  12px;
+@search-medium-background:                          @search-default-background;
 @search-medium-font-size:                           @global-large-font-size;
+@search-medium-focus-background:                    darken(@search-medium-background, 2%);
 
 @search-medium-icon-width:                          24px;
-@search-medium-icon-padding:                        10px;
+@search-medium-icon-padding:                        12px;
 
 @search-large-width:                                500px;
-@search-large-height:                               80px;
-@search-large-background:                           transparent;
+@search-large-height:                               90px;
+@search-large-padding-horizontal:                   20px;
+@search-large-background:                           @search-default-background;
 @search-large-font-size:                            @global-2xlarge-font-size;
+@search-large-focus-background:                     darken(@search-large-background, 2%);
 
 @search-large-icon-width:                           40px;
 @search-large-icon-padding:                         20px;
@@ -216,10 +220,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
@@ -249,10 +256,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
@@ -266,6 +276,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;
     .hook-search-medium-input();
@@ -273,6 +285,7 @@
 
 /* Focus */
 .uk-search-medium .uk-search-input:focus {
+    background-color: @search-medium-focus-background;
     .hook-search-medium-input-focus();
 }
 
@@ -280,10 +293,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
@@ -297,6 +313,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;
     .hook-search-large-input();
@@ -304,6 +322,7 @@
 
 /* Focus */
 .uk-search-large .uk-search-input:focus {
+    background-color: @search-medium-focus-background;
     .hook-search-large-input-focus();
 }
 
@@ -311,10 +330,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
@@ -368,9 +390,11 @@
 @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-medium-background:             @inverse-search-default-background;
+@inverse-search-medium-focus-background:       fadein(@inverse-search-medium-background, 5%);
 
-@inverse-search-large-background:              transparent;
+@inverse-search-large-background:              @inverse-search-default-background;
+@inverse-search-large-focus-background:        fadein(@inverse-search-large-background, 5%);
 
 @inverse-search-toggle-color:                  @inverse-global-muted-color;
 @inverse-search-toggle-hover-color:            @inverse-global-color;
@@ -422,6 +446,7 @@
     }
 
     .uk-search-medium .uk-search-input:focus {
+        background-color: @inverse-search-medium-focus-background;
         .hook-inverse-search-medium-input-focus();
     }
 
@@ -431,6 +456,7 @@
     }
 
     .uk-search-large .uk-search-input:focus {
+        background-color: @inverse-search-large-focus-background;
         .hook-inverse-search-large-input-focus();
     }
 

package/src/less/components/sticky.less

@@ -39,16 +39,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/less/components/totop.less

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

package/src/less/components/transition.less

@@ -77,7 +77,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; }
 
 /*
@@ -100,7 +100,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;
@@ -109,7 +109,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;
@@ -138,7 +138,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/less/components/visibility.less

@@ -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/less/theme/form-range.less

@@ -43,3 +43,15 @@
 // ========================================================================
 
 .hook-form-range-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+@inverse-form-range-thumb-background:           darken(fadein(@inverse-global-color, 100%), 50%);
+
+@inverse-form-range-thumb-border:               darken(fadein(@inverse-global-border, 100%), 10%);
+
+.hook-inverse-form-range-track() {}
+.hook-inverse-form-range-track-focus() {}
+.hook-inverse-form-range-thumb() { border-color: @inverse-form-range-thumb-border; }

package/src/less/theme/lightbox.less

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

package/src/less/theme/search.less

@@ -11,20 +11,30 @@
 
 @search-navbar-focus-background:                    @search-navbar-background;
 
+@search-medium-background:                          transparent;
+
+@search-large-background:                           transparent;
+
 //
 // New
 //
 
 @search-default-border-width:                       @global-border-width;
 @search-default-border:                             @global-border;
-
 @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;
 
+@search-medium-border-width:                        @global-border-width;
+@search-medium-border:                              @global-border;
+@search-medium-focus-border:                        @global-primary-background;
+
+@search-large-border-width:                         @global-border-width;
+@search-large-border:                               @global-border;
+@search-large-focus-border:                         @global-primary-background;
+
 
 // Component
 // ========================================================================
@@ -57,17 +67,17 @@
 // Medium modifiers
 // ========================================================================
 
-.hook-search-medium-input() {}
+.hook-search-medium-input() { border: @search-medium-border-width solid @search-medium-border; }
 
-.hook-search-medium-input-focus() {}
+.hook-search-medium-input-focus() { border-color: @search-medium-focus-border; }
 
 
 // Large modifiers
 // ========================================================================
 
-.hook-search-large-input() {}
+.hook-search-large-input() { border: @search-large-border-width solid @search-large-border; }
 
-.hook-search-large-input-focus() {}
+.hook-search-large-input-focus() { border-color: @search-large-focus-border; }
 
 
 // Toggle
@@ -87,9 +97,13 @@
 // Inverse
 // ========================================================================
 
-@inverse-search-default-background:            transparent;
+@inverse-search-default-background:             transparent;
+
+@inverse-search-navbar-background:              transparent;
+
+@inverse-search-medium-background:              transparent;
 
-@inverse-search-navbar-background:             transparent;
+@inverse-search-large-background:               transparent;
 
 .hook-inverse-search-default-input() { border-color: @inverse-global-border; }
 .hook-inverse-search-default-input-focus() {}
@@ -97,10 +111,10 @@
 .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() { border-color: @inverse-global-border; }
 .hook-inverse-search-medium-input-focus() {}
 
-.hook-inverse-search-large-input() {}
+.hook-inverse-search-large-input() { border-color: @inverse-global-border; }
 .hook-inverse-search-large-input-focus() {}
 
 .hook-inverse-search-toggle() {}

package/src/scss/components/background.scss

@@ -65,15 +65,7 @@
 /* Attachment
  ========================================================================== */
 
-/*
- * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
- */
-
-.uk-background-fixed {
-    background-attachment: fixed;
-    /* 1 */
-    backface-visibility: hidden;
-}
+.uk-background-fixed { background-attachment: fixed; }
 
 /*
  * Exclude touch devices because `fixed` doesn't work on iOS and Android