uikit 3.23.13 → 3.23.14-dev.be820cd99

package/src/less/components/heading.less

@@ -122,82 +122,6 @@
 }
 
 
-/* Primary
-   Deprecated: Use `uk-heading-medium` instead
- ========================================================================== */
-
-@heading-primary-font-size-l:                   3.75rem;  // 60px
-@heading-primary-line-height-l:                 1.1;
-
-@heading-primary-font-size-m:                   @heading-primary-font-size-l * 0.9; // 54px
-
-@heading-primary-font-size:                     @heading-primary-font-size-l * 0.8; // 48px
-@heading-primary-line-height:                   1.2;
-
-.uk-heading-primary when (@deprecated = true) {
-    font-size: @heading-primary-font-size;
-    line-height: @heading-primary-line-height;
-    .hook-heading-primary();
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: @breakpoint-medium) {
-
-    .uk-heading-primary when (@deprecated = true) { font-size: @heading-primary-font-size-m; }
-
-}
-
-/* Desktop and bigger */
-@media (min-width: @breakpoint-large) {
-
-    .uk-heading-primary when (@deprecated = true) {
-        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; // 128px
-@heading-hero-line-height-l:                    1;
-
-@heading-hero-font-size-m:                      @heading-hero-font-size-l * 0.75; // 96px
-@heading-hero-line-height-m:                    1;
-
-@heading-hero-font-size:                        @heading-hero-font-size-l * 0.5; // 64px
-@heading-hero-line-height:                      1.1;
-
-.uk-heading-hero when (@deprecated = true) {
-    font-size: @heading-hero-font-size;
-    line-height: @heading-hero-line-height;
-    .hook-heading-hero();
-}
-
-/* Tablet landscape and bigger */
-@media (min-width: @breakpoint-medium) {
-
-    .uk-heading-hero when (@deprecated = true) {
-        font-size: @heading-hero-font-size-m;
-        line-height: @heading-hero-line-height-m;
-    }
-
-}
-
-/* Desktop and bigger */
-@media (min-width: @breakpoint-large) {
-
-    .uk-heading-hero when (@deprecated = true) {
-        font-size: @heading-hero-font-size-l;
-        line-height: @heading-hero-line-height-l;
-    }
-
-}
-
-
 /* Divider
  ========================================================================== */
 
@@ -334,14 +258,6 @@
         .hook-inverse-heading-3xlarge();
     }
 
-    .uk-heading-primary when (@deprecated = true) {
-        .hook-inverse-heading-primary();
-    }
-
-    .uk-heading-hero when (@deprecated = true) {
-        .hook-inverse-heading-hero();
-    }
-
     .uk-heading-divider {
         border-bottom-color: @inverse-heading-divider-border;
         .hook-inverse-heading-divider();

package/src/less/components/icon.less

@@ -6,6 +6,7 @@
 // Modifiers:       `uk-icon-image`
 //                  `uk-icon-link`
 //                  `uk-icon-button`
+//                  `uk-icon-overlay`
 //
 // States:          `uk-preserve`
 //
@@ -32,6 +33,9 @@
 @icon-button-active-background:                 darken(@icon-button-background, 10%);
 @icon-button-active-color:                      @global-color;
 
+@icon-overlay-color:                            fade(@global-emphasis-color, 60%);
+@icon-overlay-hover-color:                      @global-emphasis-color;
+
 
 /* ========================================================================
    Component: Icon
@@ -187,6 +191,22 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
     .hook-icon-button-active();
 }
 
+/*
+ * Overlay
+ */
+
+.uk-icon-overlay,
+a .uk-icon-overlay {
+    color: @icon-overlay-color;
+    .hook-icon-overlay();
+}
+
+.uk-icon-overlay:hover,
+a:hover .uk-icon-overlay {
+    color: @icon-overlay-hover-color;
+    .hook-icon-overlay-hover();
+}
+
 
 // Hooks
 // ========================================================================
@@ -199,6 +219,8 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 .hook-icon-button() {}
 .hook-icon-button-hover() {}
 .hook-icon-button-active() {}
+.hook-icon-overlay() {}
+.hook-icon-overlay-hover() {}
 .hook-icon-misc() {}
 
 
@@ -214,6 +236,8 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 @inverse-icon-button-hover-color:              @inverse-global-color;
 @inverse-icon-button-active-background:        fadein(@inverse-icon-button-background, 10%);
 @inverse-icon-button-active-color:             @inverse-global-color;
+@inverse-icon-overlay-color:                   fade(@inverse-global-emphasis-color, 60%);
+@inverse-icon-overlay-hover-color:             @inverse-global-emphasis-color;
 
 .hook-inverse() {
 
@@ -259,6 +283,24 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
         .hook-inverse-icon-button-active();
     }
 
+    //
+    // Overlay
+    //
+
+    .uk-icon-overlay,
+    a .uk-icon-overlay
+    a& .uk-icon-overlay {
+        color: @inverse-icon-overlay-color;
+        .hook-inverse-icon-overlay();
+    }
+
+    .uk-icon-overlay:hover,
+    a:hover .uk-icon-overlay,
+    a&:hover .uk-icon-overlay {
+        color: @inverse-icon-overlay-hover-color;
+        .hook-inverse-icon-overlay-hover();
+    }
+
 }
 
 .hook-inverse-icon-link() {}
@@ -267,3 +309,5 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
 .hook-inverse-icon-button() {}
 .hook-inverse-icon-button-hover() {}
 .hook-inverse-icon-button-active() {}
+.hook-inverse-icon-overlay() {}
+.hook-inverse-icon-overlay-hover() {}

package/src/less/components/navbar.less

@@ -131,7 +131,7 @@
  ========================================================================== */
 
 /*
- * 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,
@@ -140,7 +140,7 @@
     display: flex;
     gap: @navbar-gap;
     /* 1 */
-    align-items: center;
+    align-items: stretch;
 }
 
 /*
@@ -149,7 +149,8 @@
  * 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; }
@@ -171,13 +172,18 @@
     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: ~'calc(100% + @{navbar-gap})'; }
@@ -193,13 +199,16 @@
  ========================================================================== */
 
 /*
- * 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;
@@ -244,9 +253,14 @@
 
 /*
  * 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;
     .hook-navbar-nav-item();
@@ -400,8 +414,8 @@
 .uk-navbar-dropdown > :last-child { margin-bottom: 0; }
 
 // Color Mode
-.uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
-.uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
+.uk-navbar-dropdown:not(.uk-preserve-color):extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
+.uk-navbar-dropdown:not(.uk-preserve-color):extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
 
 .uk-navbar-dropdown :focus-visible when not (@navbar-dropdown-color-mode = @inverse-global-color-mode) {
     outline-color: @navbar-dropdown-focus-outline !important;

package/src/less/components/position.less

@@ -231,7 +231,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/less/components/section.less

@@ -92,6 +92,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
  */
@@ -101,6 +104,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
  */
@@ -110,6 +131,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) {
 
@@ -118,6 +142,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; }
+
 }
 
 /*
@@ -129,6 +156,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) {
 
@@ -137,6 +167,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/less/components/subnav.less

@@ -200,7 +200,7 @@
  * The same for all style modifiers
  ========================================================================== */
 
-.uk-subnav > .uk-disabled > a {
+.uk-subnav > .uk-disabled > :first-child {
     color: @subnav-item-disabled-color;
     .hook-subnav-item-disabled();
 }

package/src/less/components/utility.less

@@ -36,6 +36,8 @@
 @panel-scrollable-border-width:                 @global-border-width;
 @panel-scrollable-border:                       @global-border;
 
+@overflow-fade-size:                            100px;
+
 @border-rounded-border-radius:                  5px;
 
 @box-shadow-duration:                           0.1s;
@@ -143,6 +145,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 ~'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/less/components/visibility.less

@@ -124,7 +124,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/less/components/width.less

@@ -201,7 +201,6 @@
 .uk-width-large { width: @width-large-width; }
 .uk-width-xlarge { width: @width-xlarge-width; }
 .uk-width-2xlarge { width: @width-2xlarge-width; }
-.uk-width-xxlarge when (@deprecated = true) { width: @width-2xlarge-width; }
 
 /* Auto */
 .uk-width-auto { width: auto; }
@@ -245,7 +244,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; }
-    .uk-width-xxlarge\@s when (@deprecated = true) { width: @width-2xlarge-width; }
 
     /* Auto */
     .uk-width-auto\@s { width: auto; }
@@ -311,7 +309,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; }
-    .uk-width-xxlarge\@m when (@deprecated = true) { width: @width-2xlarge-width; }
 
      /* Auto */
     .uk-width-auto\@m { width: auto; }
@@ -377,7 +374,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; }
-    .uk-width-xxlarge\@l when (@deprecated = true) { width: @width-2xlarge-width; }
 
     /* Auto */
     .uk-width-auto\@l { width: auto; }
@@ -443,7 +439,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; }
-    .uk-width-xxlarge\@xl when (@deprecated = true) { width: @width-2xlarge-width; }
 
     /* Auto */
     .uk-width-auto\@xl { width: auto; }

package/src/less/theme/card.less

@@ -40,6 +40,9 @@
 @card-secondary-box-shadow:                    @global-medium-box-shadow;
 @card-secondary-hover-box-shadow:              @global-large-box-shadow;
 
+@card-overlay-box-shadow:                      @global-medium-box-shadow;
+@card-overlay-hover-box-shadow:                @global-large-box-shadow;
+
 
 // Component
 // ========================================================================
@@ -125,6 +128,16 @@
 
 .hook-card-secondary-hover() { box-shadow: @card-secondary-hover-box-shadow; }
 
+//
+// Overlay
+//
+
+.hook-card-overlay() { box-shadow: @card-overlay-box-shadow; }
+
+.hook-card-overlay-title() {}
+
+.hook-card-overlay-hover() { box-shadow: @card-overlay-hover-box-shadow; }
+
 
 // Miscellaneous
 // ========================================================================

package/src/less/theme/icon.less

@@ -34,6 +34,17 @@
 
 .hook-icon-button-active() {}
 
+//
+// Overlay
+//
+
+.hook-icon-overlay() {
+    transition: 0.1s ease-in-out;
+    transition-property: color;
+}
+
+.hook-icon-overlay-hover() {}
+
 
 // Miscellaneous
 // ========================================================================
@@ -51,3 +62,6 @@
 .hook-inverse-icon-button() {}
 .hook-inverse-icon-button-hover() {}
 .hook-inverse-icon-button-active() {}
+
+.hook-inverse-icon-overlay() {}
+.hook-inverse-icon-overlay-hover() {}

package/src/scss/components/base.scss

@@ -80,6 +80,14 @@ a:hover,
     @if(meta.mixin-exists(hook-base-link-hover)) {@include hook-base-link-hover();}
 }
 
+/*
+ * Fix text underline offset if `vertical-align`is set to `middle`
+ */
+
+a:has(.uk-text-middle),
+.uk-link:has(.uk-text-middle),
+.uk-link-toggle:hover .uk-link:has(.uk-text-middle) { text-underline-offset: 0.1875em; }
+
 
 /* Text-level semantics
  ========================================================================== */
@@ -191,8 +199,11 @@ video { vertical-align: middle; }
 
 /*
  * 1. Constrain the element to its parent width.
- * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
- * 3. Take border and padding into account.
+ * 2. Take border and padding into account.
+ * 3. Reset `height` attribute if present to scale the height based on the intrinsic aspect ratio.
+ * 4. Scale height based on the extrinsic aspect ratio. Works only in Chrome yet.
+ * 5. Size image to fill the element's content box.
+ * Note: Add `iframe` as soon as `attr` is supported in all browsers and remove `uk-responsive`.
  */
 
 canvas,
@@ -202,9 +213,13 @@ video {
     /* 1 */
     max-width: 100%;
     /* 2 */
-    height: auto;
-    /* 3 */
     box-sizing: border-box;
+    /* 3 */
+    height: auto;
+    /* 4 */
+    aspect-ratio: string.unquote('attr(width type(<number>)) / attr(height type(<number>))');
+    /* 5 */
+    object-fit: cover;
 }
 
 /*

package/src/scss/components/card.scss

@@ -16,6 +16,7 @@
 //                  `uk-card-default`
 //                  `uk-card-primary`
 //                  `uk-card-secondary`
+//                  `uk-card-overlay`
 //                  `uk-card-small`
 //                  `uk-card-large`
 //
@@ -42,6 +43,7 @@
 
 
 
+
 /* ========================================================================
    Component: Card
  ========================================================================== */
@@ -176,7 +178,7 @@
 /* Hover modifier
  ========================================================================== */
 
-.uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary):hover {
+.uk-card-hover:not(.uk-card-default, .uk-card-primary, .uk-card-secondary, .uk-card-overlay):hover {
     background-color: $card-hover-background;
     @if(meta.mixin-exists(hook-card-hover)) {@include hook-card-hover();}
 }
@@ -276,6 +278,35 @@
 @if ( $card-secondary-color-mode == dark ) { .uk-card-secondary > :not([class*="uk-card-media"]) { @extend .uk-dark !optional;} }
 
 
+/*
+ * Overlay
+ */
+
+.uk-card-overlay {
+    --uk-inverse: #{$card-overlay-color-mode};
+    background-color: $card-overlay-background;
+    color: $card-overlay-color;
+    @if(meta.mixin-exists(hook-card-overlay)) {@include hook-card-overlay();}
+}
+
+.uk-card-overlay .uk-card-title {
+    color: $card-overlay-title-color;
+    @if(meta.mixin-exists(hook-card-overlay-title)) {@include hook-card-overlay-title();}
+}
+
+.uk-card-overlay.uk-card-hover:hover {
+    background-color: $card-overlay-hover-background;
+    @if(meta.mixin-exists(hook-card-overlay-hover)) {@include hook-card-overlay-hover();}
+}
+
+
+// Color Mode
+@if ( $card-overlay-color-mode == light ) { .uk-card-overlay.uk-card-body { @extend .uk-light !optional;} }
+@if ( $card-overlay-color-mode == light ) { .uk-card-overlay > :not([class*="uk-card-media"]) { @extend .uk-light !optional;} }
+@if ( $card-overlay-color-mode == dark ) { .uk-card-overlay.uk-card-body { @extend .uk-dark !optional;} }
+@if ( $card-overlay-color-mode == dark ) { .uk-card-overlay > :not([class*="uk-card-media"]) { @extend .uk-dark !optional;} }
+
+
 /* Size modifier
  ========================================================================== */
 
@@ -333,6 +364,9 @@
 // @mixin hook-card-secondary(){}
 // @mixin hook-card-secondary-title(){}
 // @mixin hook-card-secondary-hover(){}
+// @mixin hook-card-overlay(){}
+// @mixin hook-card-overlay-title(){}
+// @mixin hook-card-overlay-hover(){}
 // @mixin hook-card-misc(){}