uikit 3.23.13 → 3.23.14-dev.be820cd99

package/src/scss/components/countdown.scss

@@ -15,13 +15,6 @@
 // Variables
 // ========================================================================
 
-$countdown-number-font-size:                     2rem !default; // 32px
-$countdown-number-font-size-s:                   4rem !default; // 64px
-$countdown-number-font-size-m:                   6rem !default; // 96px
-
-$countdown-separator-font-size:                  1rem !default; // 16px
-$countdown-separator-font-size-s:                2rem !default; // 32px
-$countdown-separator-font-size-m:                3rem !default; // 48px
 
 
 /* ========================================================================
@@ -29,6 +22,7 @@ $countdown-separator-font-size-m:                3rem !default; // 48px
  ========================================================================== */
 
 .uk-countdown {
+    margin: 0;
     @if(meta.mixin-exists(hook-countdown)) {@include hook-countdown();}
 }
 
@@ -45,35 +39,17 @@ $countdown-separator-font-size-m:                3rem !default; // 48px
 /* Number
  ========================================================================== */
 
-
 /*
  * 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
- * 2. Style
  */
 
 .uk-countdown-number {
+    margin: 0;
     /* 1 */
     font-variant-numeric: tabular-nums;
-    /* 2 */
-    font-size: $countdown-number-font-size;
-    line-height: $countdown-number-line-height;
     @if(meta.mixin-exists(hook-countdown-number)) {@include hook-countdown-number();}
 }
 
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-
-    .uk-countdown-number { font-size: $countdown-number-font-size-s; }
-
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-
-    .uk-countdown-number { font-size: $countdown-number-font-size-m; }
-
-}
-
 
 /* Separator
  ========================================================================== */
@@ -84,20 +60,6 @@ $countdown-separator-font-size-m:                3rem !default; // 48px
     @if(meta.mixin-exists(hook-countdown-separator)) {@include hook-countdown-separator();}
 }
 
-/* Phone landscape and bigger */
-@media (min-width: $breakpoint-small) {
-
-    .uk-countdown-separator { font-size: $countdown-separator-font-size-s; }
-
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-
-    .uk-countdown-separator { font-size: $countdown-separator-font-size-m; }
-
-}
-
 
 /* Label
  ========================================================================== */

package/src/scss/components/form.scss

@@ -213,23 +213,32 @@
 
 /*
  * Single-line
- * 1. Allow any element to look like an `input` or `select` element
- * 2. Make sure line-height is not larger than height
- *    Also needed to center the text vertically
  */
 
 .uk-input,
 .uk-select:not([multiple]):not([size]) {
     height: $form-height;
     vertical-align: middle;
-    /* 1 */
-    display: inline-block;
     @if(meta.mixin-exists(hook-form-single-line)) {@include hook-form-single-line();}
 }
 
-/* 2 */
-.uk-input:not(input),
-.uk-select:not(select) { line-height: $form-line-height; }
+/*
+ * 1. Allow any element to look like an `input` or `select` element
+ * 2. Make sure line-height is not larger than height. Also needed to center the text vertically
+ * 3. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+ */
+
+.uk-input:where(:not(input)),
+.uk-select:where(:not(select)) {
+    /* 1 */
+    display: inline-block;
+    /* 2 */
+    line-height: $form-line-height;
+    /* 3 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 
 /*
  * Multi-line
@@ -275,50 +284,6 @@
 .uk-textarea::placeholder { color: $form-placeholder-color; }
 
 
-/* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
- ========================================================================== */
-
-/*
- * Small
- */
-
-.uk-form-small { font-size: $form-small-font-size; }
-
-/* Single-line */
-.uk-form-small:not(textarea):not([multiple]):not([size]) {
-    height: $form-small-height;
-    padding-left: $form-small-padding-horizontal;
-    padding-right: $form-small-padding-horizontal;
-}
-
-/* Multi-line */
-textarea.uk-form-small,
-[multiple].uk-form-small,
-[size].uk-form-small { padding: $form-small-padding-vertical $form-small-padding-horizontal; }
-
-.uk-form-small:not(select):not(input):not(textarea) { line-height: $form-small-line-height; }
-
-/*
- * Large
- */
-
-.uk-form-large { font-size: $form-large-font-size; }
-
-/* Single-line */
-.uk-form-large:not(textarea):not([multiple]):not([size]) {
-    height: $form-large-height;
-    padding-left: $form-large-padding-horizontal;
-    padding-right: $form-large-padding-horizontal;
-}
-
-/* Multi-line */
-textarea.uk-form-large,
-[multiple].uk-form-large,
-[size].uk-form-large { padding: $form-large-padding-vertical $form-large-padding-horizontal; }
-
-.uk-form-large:not(select):not(input):not(textarea) { line-height: $form-large-line-height; }
-
-
 /* Style modifier (`uk-input`, `uk-select` and `uk-textarea`)
  ========================================================================== */
 
@@ -434,7 +399,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  * 3. Vertical alignment
  * 4. Remove default style
  * 5. Fix black background on iOS
- * 6. Center icons
+ * 6. Cover icons
  */
 
 .uk-radio,
@@ -454,8 +419,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
     /* 5 */
     background-color: $form-radio-background;
     /* 6 */
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
+    background-size: cover;
     @if(meta.mixin-exists(hook-form-radio)) {@include hook-form-radio();}
 }
 
@@ -511,6 +475,60 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .uk-checkbox:disabled:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $form-radio-disabled-icon-color); }
 
 
+/* Style modifier (`uk-input`, `uk-select`, `uk-textarea`, `uk-radio`, `uk-checkbox`)
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-form-small:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) { font-size: $form-small-font-size; }
+
+/* Single-line */
+.uk-form-small:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
+    height: $form-small-height;
+    padding-left: $form-small-padding-horizontal;
+    padding-right: $form-small-padding-horizontal;
+}
+
+/* Multi-line */
+.uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: $form-small-padding-vertical $form-small-padding-horizontal; }
+
+/* Any element */
+.uk-form-small:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) { line-height: $form-small-line-height; }
+
+/* Radio + Checkbox */
+.uk-form-small:is(.uk-radio, .uk-checkbox) {
+    height: $form-small-radio-size;
+    width: $form-small-radio-size;
+}
+
+/*
+ * Large
+ */
+
+.uk-form-large:is(.uk-input, .uk-search-input, .uk-select, .uk-textarea) { font-size: $form-large-font-size; }
+
+/* Single-line */
+.uk-form-large:is(.uk-input, .uk-search-input, .uk-select:not([multiple]):not([size])) {
+    height: $form-large-height;
+    padding-left: $form-large-padding-horizontal;
+    padding-right: $form-large-padding-horizontal;
+}
+
+/* Multi-line */
+.uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: $form-large-padding-vertical $form-large-padding-horizontal; }
+
+/* Any element */
+.uk-form-large:not(select):not(input):not(textarea):not([type="radio"]):not([type="checkbox"]) { line-height: $form-large-line-height; }
+
+/* Radio + Checkbox */
+.uk-form-large:is(.uk-radio, .uk-checkbox) {
+    height: $form-large-radio-size;
+    width: $form-large-radio-size;
+}
+
+
 /* Legend
  ========================================================================== */
 

package/src/scss/components/heading.scss

@@ -105,89 +105,6 @@ $heading-3xlarge-font-size-l:                    15rem !default;
 }
 
 
-/* Primary
-   Deprecated: Use `uk-heading-medium` instead
- ========================================================================== */
-
-$heading-primary-font-size-l:                    3.75rem !default;  // 60px
-
-$heading-primary-font-size-m:                    $heading-primary-font-size-l * 0.9 !default; // 54px
-
-$heading-primary-font-size:                      $heading-primary-font-size-l * 0.8 !default; // 48px
-
-@if ($deprecated == true) {
-.uk-heading-primary {
-    font-size: $heading-primary-font-size;
-    line-height: $heading-primary-line-height;
-    @if(meta.mixin-exists(hook-heading-primary)) {@include hook-heading-primary();}
-}
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-
-    @if ($deprecated == true) {
-.uk-heading-primary { font-size: $heading-primary-font-size-m; }
-}
-
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-
-    @if ($deprecated == true) {
-.uk-heading-primary {
-        font-size: $heading-primary-font-size-l;
-        line-height: $heading-primary-line-height-l;
-    }
-}
-
-}
-
-
-/* Hero
-   Deprecated: Use `uk-heading-xlarge` instead
- ========================================================================== */
-
-$heading-hero-font-size-l:                       8rem !default; // 128px
-
-$heading-hero-font-size-m:                       $heading-hero-font-size-l * 0.75 !default; // 96px
-
-$heading-hero-font-size:                         $heading-hero-font-size-l * 0.5 !default; // 64px
-
-@if ($deprecated == true) {
-.uk-heading-hero {
-    font-size: $heading-hero-font-size;
-    line-height: $heading-hero-line-height;
-    @if(meta.mixin-exists(hook-heading-hero)) {@include hook-heading-hero();}
-}
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: $breakpoint-medium) {
-
-    @if ($deprecated == true) {
-.uk-heading-hero {
-        font-size: $heading-hero-font-size-m;
-        line-height: $heading-hero-line-height-m;
-    }
-}
-
-}
-
-/* Desktop and bigger */
-@media (min-width: $breakpoint-large) {
-
-    @if ($deprecated == true) {
-.uk-heading-hero {
-        font-size: $heading-hero-font-size-l;
-        line-height: $heading-hero-line-height-l;
-    }
-}
-
-}
-
-
 /* Divider
  ========================================================================== */
 

package/src/scss/components/icon.scss

@@ -8,6 +8,7 @@
 // Modifiers:       `uk-icon-image`
 //                  `uk-icon-link`
 //                  `uk-icon-button`
+//                  `uk-icon-overlay`
 //
 // States:          `uk-preserve`
 //
@@ -23,6 +24,7 @@
 
 
 
+
 /* ========================================================================
    Component: Icon
  ========================================================================== */
@@ -177,6 +179,22 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
     @if(meta.mixin-exists(hook-icon-button-active)) {@include hook-icon-button-active();}
 }
 
+/*
+ * Overlay
+ */
+
+.uk-icon-overlay,
+a .uk-icon-overlay {
+    color: $icon-overlay-color;
+    @if(meta.mixin-exists(hook-icon-overlay)) {@include hook-icon-overlay();}
+}
+
+.uk-icon-overlay:hover,
+a:hover .uk-icon-overlay {
+    color: $icon-overlay-hover-color;
+    @if(meta.mixin-exists(hook-icon-overlay-hover)) {@include hook-icon-overlay-hover();}
+}
+
 
 // Hooks
 // ========================================================================
@@ -189,6 +207,8 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 // @mixin hook-icon-button(){}
 // @mixin hook-icon-button-hover(){}
 // @mixin hook-icon-button-active(){}
+// @mixin hook-icon-overlay(){}
+// @mixin hook-icon-overlay-hover(){}
 // @mixin hook-icon-misc(){}
 
 
@@ -204,3 +224,5 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 // @mixin hook-inverse-icon-button(){}
 // @mixin hook-inverse-icon-button-hover(){}
 // @mixin hook-inverse-icon-button-active(){}
+// @mixin hook-inverse-icon-overlay(){}
+// @mixin hook-inverse-icon-overlay-hover(){}

package/src/scss/components/navbar.scss

@@ -85,7 +85,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
  ========================================================================== */
 
 /*
- * 1. Align navs and items vertically if they have a different height
+ * 1. Stretch height if a sibling's height is expanded by its content
  */
 
 .uk-navbar-left,
@@ -94,7 +94,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     display: flex;
     gap: $navbar-gap;
     /* 1 */
-    align-items: center;
+    align-items: stretch;
 }
 
 /*
@@ -103,7 +103,8 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
  * 2. Fix text wrapping if content is larger than 50% of the container.
  * 3. Needed for dropdowns because a new position context is created
  *    `z-index` must be smaller than off-canvas
- * 4. Align sub groups for centered navbar
+ * 4. Stretch height if a sibling's height is expanded by its content
+ * 5. Align sub groups for centered navbar
  */
 
 .uk-navbar-right { margin-left: auto; }
@@ -125,13 +126,18 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     box-sizing: border-box;
     /* 3 */
     z-index: $global-z-index - 10;
+    /* 4 */
+    height: 100%;
+    align-items: stretch;
 }
 
-/* 4 */
 .uk-navbar-center-left,
 .uk-navbar-center-right {
-   position: absolute;
-   top: 0;
+    /* 4 */
+    height: 100%;
+    /* 5 */
+    position: absolute;
+    top: 0;
 }
 
 .uk-navbar-center-left { right: string.unquote('calc(100% + #{$navbar-gap})'); }
@@ -147,13 +153,16 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
  ========================================================================== */
 
 /*
- * 1. Reset list
+ * 1. Stretch height if a sibling's height is expanded by its content
+ * 2. Reset list
  */
 
 .uk-navbar-nav {
     display: flex;
     gap: $navbar-nav-gap;
     /* 1 */
+    align-items: stretch;
+    /* 2 */
     margin: 0;
     padding: 0;
     list-style: none;
@@ -198,9 +207,14 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 /*
  * Nav items
+ * 1. Stretch height if a sibling's height is expanded by its content
+ * 2. Reset list
  */
 
 .uk-navbar-nav > li > a {
+    /* 1 */
+    height: 100%;
+    /* 2 */
     padding: 0 $navbar-nav-item-padding-horizontal;
     color: $navbar-nav-item-color;
     @if(meta.mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();}
@@ -354,8 +368,8 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 .uk-navbar-dropdown > :last-child { margin-bottom: 0; }
 
 // Color Mode
-@if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
-@if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} }
+@if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown:not(.uk-preserve-color) { @extend .uk-light !optional;} }
+@if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
 
 @if ($navbar-dropdown-color-mode != $inverse-global-color-mode) {
 .uk-navbar-dropdown :focus-visible {

package/src/scss/components/position.scss

@@ -230,7 +230,7 @@
 .uk-position-z-index-zero { z-index: 0; }
 .uk-position-z-index-negative { z-index: -1; }
 .uk-position-z-index-high { z-index: $global-z-index - 10; } // Higher than dropbar so it is behind
-
+.uk-position-z-index-highest { z-index: $global-z-index + 60; }
 
 // Hooks
 // ========================================================================

package/src/scss/components/section.scss

@@ -78,6 +78,9 @@
     padding-bottom: $section-xsmall-padding-vertical;
 }
 
+.uk-section-xsmall-top { padding-top: $section-xsmall-padding-vertical; }
+.uk-section-xsmall-bottom { padding-bottom: $section-xsmall-padding-vertical; }
+
 /*
  * Small
  */
@@ -87,6 +90,24 @@
     padding-bottom: $section-small-padding-vertical;
 }
 
+.uk-section-small-top { padding-top: $section-small-padding-vertical; }
+.uk-section-small-bottom { padding-bottom: $section-small-padding-vertical; }
+
+/*
+ * Medium
+ */
+
+.uk-section-medium-top { padding-top: $section-padding-vertical; }
+.uk-section-medium-bottom { padding-bottom: $section-padding-vertical; }
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-section-medium-top { padding-top: $section-padding-vertical-m; }
+    .uk-section-medium-bottom { padding-bottom: $section-padding-vertical-m; }
+
+}
+
 /*
  * Large
  */
@@ -96,6 +117,9 @@
     padding-bottom: $section-large-padding-vertical;
 }
 
+.uk-section-large-top { padding-top: $section-large-padding-vertical; }
+.uk-section-large-bottom { padding-bottom: $section-large-padding-vertical; }
+
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
 
@@ -104,6 +128,9 @@
         padding-bottom: $section-large-padding-vertical-m;
     }
 
+    .uk-section-large-top { padding-top: $section-large-padding-vertical-m; }
+    .uk-section-large-bottom { padding-bottom: $section-large-padding-vertical-m; }
+
 }
 
 /*
@@ -115,6 +142,9 @@
     padding-bottom: $section-xlarge-padding-vertical;
 }
 
+.uk-section-xlarge-top { padding-top: $section-xlarge-padding-vertical; }
+.uk-section-xlarge-bottom { padding-bottom: $section-xlarge-padding-vertical; }
+
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
 
@@ -123,6 +153,9 @@
         padding-bottom: $section-xlarge-padding-vertical-m;
     }
 
+    .uk-section-xlarge-top { padding-top: $section-xlarge-padding-vertical-m; }
+    .uk-section-xlarge-bottom { padding-bottom: $section-xlarge-padding-vertical-m; }
+
 }
 
 

package/src/scss/components/subnav.scss

@@ -181,7 +181,7 @@
  * The same for all style modifiers
  ========================================================================== */
 
-.uk-subnav > .uk-disabled > a {
+.uk-subnav > .uk-disabled > :first-child {
     color: $subnav-item-disabled-color;
     @if(meta.mixin-exists(hook-subnav-item-disabled)) {@include hook-subnav-item-disabled();}
 }

package/src/scss/components/utility.scss

@@ -1,4 +1,5 @@
 @use "sass:meta";
+@use "sass:string";
 
 // Name:            Utility
 // Description:     Utilities collection
@@ -41,6 +42,7 @@
 
 
 
+
 /* ========================================================================
    Component: Utility
  ========================================================================== */
@@ -126,6 +128,49 @@
 
 .uk-overflow-auto > :last-child { margin-bottom: 0; }
 
+/*
+ * Overflow fade
+ * 1. Overflow
+ * 2. Mask
+ */
+
+$property --uk-overflow-fade-start-opacity {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}
+
+$property --uk-overflow-fade-end-opacity {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 0;
+}
+
+.uk-overflow-fade-horizontal {
+    overflow-x: auto;
+    --uk-overflow-fade-direction: right;
+}
+
+.uk-overflow-fade-vertical {
+    overflow-y: auto;
+    --uk-overflow-fade-direction: bottom;
+}
+
+.uk-overflow-fade-horizontal,
+.uk-overflow-fade-vertical {
+    /* 1 */
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    /* 2 */
+    mask-image: linear-gradient(to var(--uk-overflow-fade-direction), rgba(0,0,0,var(--uk-overflow-fade-start-opacity)), #000 $overflow-fade-size, #000 string.unquote('calc(100% - #{$overflow-fade-size})'), rgba(0,0,0,var(--uk-overflow-fade-end-opacity)));
+}
+
+.uk-overflow-fade-horizontal > *,
+.uk-overflow-fade-vertical > * { min-width: max-content; }
+
+.uk-overflow-fade-horizontal::-webkit-scrollbar,
+.uk-overflow-fade-vertical::-webkit-scrollbar { display: none; }
+
 
 /* Box Sizing
  ========================================================================== */

package/src/scss/components/visibility.scss

@@ -126,7 +126,7 @@
     width: 0 !important;
     height: 0 !important;
     padding: 0 !important;
-    border: 0 !important;
+    border-width: 0 !important;
     margin: 0 !important;
     overflow: hidden !important;
 }

package/src/scss/components/width.scss

@@ -199,9 +199,6 @@
 .uk-width-large { width: $width-large-width; }
 .uk-width-xlarge { width: $width-xlarge-width; }
 .uk-width-2xlarge { width: $width-2xlarge-width; }
-@if ($deprecated == true) {
-.uk-width-xxlarge { width: $width-2xlarge-width; }
-}
 
 /* Auto */
 .uk-width-auto { width: auto; }
@@ -245,9 +242,6 @@
     .uk-width-large\@s { width: $width-large-width; }
     .uk-width-xlarge\@s { width: $width-xlarge-width; }
     .uk-width-2xlarge\@s { width: $width-2xlarge-width; }
-    @if ($deprecated == true) {
-.uk-width-xxlarge\@s { width: $width-2xlarge-width; }
-}
 
     /* Auto */
     .uk-width-auto\@s { width: auto; }
@@ -313,9 +307,6 @@
     .uk-width-large\@m { width: $width-large-width; }
     .uk-width-xlarge\@m { width: $width-xlarge-width; }
     .uk-width-2xlarge\@m { width: $width-2xlarge-width; }
-    @if ($deprecated == true) {
-.uk-width-xxlarge\@m { width: $width-2xlarge-width; }
-}
 
      /* Auto */
     .uk-width-auto\@m { width: auto; }
@@ -381,9 +372,6 @@
     .uk-width-large\@l { width: $width-large-width; }
     .uk-width-xlarge\@l { width: $width-xlarge-width; }
     .uk-width-2xlarge\@l { width: $width-2xlarge-width; }
-    @if ($deprecated == true) {
-.uk-width-xxlarge\@l { width: $width-2xlarge-width; }
-}
 
     /* Auto */
     .uk-width-auto\@l { width: auto; }
@@ -449,9 +437,6 @@
     .uk-width-large\@xl { width: $width-large-width; }
     .uk-width-xlarge\@xl { width: $width-xlarge-width; }
     .uk-width-2xlarge\@xl { width: $width-2xlarge-width; }
-    @if ($deprecated == true) {
-.uk-width-xxlarge\@xl { width: $width-2xlarge-width; }
-}
 
     /* Auto */
     .uk-width-auto\@xl { width: auto; }