uikit 3.25.26 → 3.25.27-dev.9e97c1f

package/src/less/components/text.less

@@ -234,11 +234,17 @@ td.uk-text-truncate { max-width: 0; }
  * Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
  */
 
- .uk-text-break { overflow-wrap: break-word; }
+.uk-text-break { overflow-wrap: break-word; }
 
- /* 1 */
- th.uk-text-break,
- td.uk-text-break { word-break: break-word; }
+/* 1 */
+th.uk-text-break,
+td.uk-text-break { word-break: break-word; }
+
+/*
+ * Balance text when wrapping onto multiple lines
+ */
+
+.uk-text-balance { text-wrap: balance; }
 
 
 /* Stroke modifiers

package/src/less/components/utility.less

@@ -13,9 +13,6 @@
 //                  `uk-object-*`
 //                  `uk-border-*`
 //                  `uk-box-shadow-*`
-//                  `uk-box-shadow-bottom`
-//                  `uk-dropcap`
-//                  `uk-logo`
 //                  `uk-blend-*`
 //                  `uk-transform-*`
 //                  `uk-transform-origin-*`
@@ -42,21 +39,6 @@
 
 @box-shadow-duration:                           0.1s;
 
-@box-shadow-bottom-height:                      30px;
-@box-shadow-bottom-bottom:                      -@box-shadow-bottom-height;
-@box-shadow-bottom-border-radius:               100%;
-@box-shadow-bottom-background:                  #444;
-@box-shadow-bottom-blur:                        20px;
-
-@dropcap-margin-right:                          10px;
-@dropcap-font-size:                             ((@global-line-height * 3) * 1em);
-@dropcap-line-height:                           1;
-
-@logo-font-size:                                @global-large-font-size;
-@logo-font-family:                              @global-font-family;
-@logo-color:                                    @global-emphasis-color;
-@logo-hover-color:                              @global-emphasis-color;
-
 @dragover-box-shadow:                           0 0 20px rgba(100,100,100,0.3);
 
 
@@ -364,114 +346,6 @@
 .uk-box-shadow-hover-xlarge:hover { box-shadow: @global-xlarge-box-shadow; }
 
 
-/* Box-shadow bottom
- ========================================================================== */
-
-/*
- * 1. Set position.
- * 2. Set style
- * 3. Fix shadow being clipped in Safari if container is animated
- */
-
-@supports (filter: blur(0)) {
-
-    .uk-box-shadow-bottom {
-        display: inline-block;
-        position: relative;
-        z-index: 0;
-        max-width: 100%;
-        vertical-align: middle;
-    }
-
-    .uk-box-shadow-bottom::after {
-        content: "";
-        /* 1 */
-        position: absolute;
-        bottom: @box-shadow-bottom-bottom;
-        left: 0;
-        right: 0;
-        z-index: -1;
-        /* 2 */
-        height: @box-shadow-bottom-height;
-        border-radius: @box-shadow-bottom-border-radius;
-        background: @box-shadow-bottom-background;
-        filter: blur(@box-shadow-bottom-blur);
-        /* 3 */
-        will-change: filter;
-        .hook-box-shadow-bottom();
-    }
-
-}
-
-
-/* Drop cap
- ========================================================================== */
-
-/*
- * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
- *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
- * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
- *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
- */
-
-.uk-dropcap::first-letter,
-/* 1 */
-.uk-dropcap > p:first-of-type::first-letter {
-    display: block;
-    margin-right: @dropcap-margin-right;
-    float: left;
-    font-size: @dropcap-font-size;
-    line-height: @dropcap-line-height;
-    .hook-dropcap();
-}
-
-/* 2 */
-@-moz-document url-prefix() {
-
-  .uk-dropcap::first-letter,
-  .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }
-
-}
-
-
-/* Logo
- ========================================================================== */
-
-/*
- * 1. Style
- * 2. Required for `a`
- * 3. Behave like image but can be overridden through flex utility classes
- */
-
-.uk-logo {
-    /* 1 */
-    font-size: @logo-font-size;
-    font-family: @logo-font-family;
-    color: @logo-color;
-    /* 2 */
-    text-decoration: none;
-    .hook-logo();
-}
-
-/* 3 */
-:where(.uk-logo) {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* Hover */
-.uk-logo:hover {
-    color: @logo-hover-color;
-    /* 1 */
-    text-decoration: none;
-    .hook-logo-hover();
-}
-
-.uk-logo :where(img, svg, video) { display: block; }
-
-.uk-logo-inverse { display: none; }
-
-
 /* Disabled State
  ========================================================================== */
 
@@ -549,41 +423,4 @@
 .hook-utility-misc();
 
 .hook-panel-scrollable() {}
-.hook-box-shadow-bottom() {}
-.hook-dropcap() {}
-.hook-logo() {}
-.hook-logo-hover() {}
 .hook-utility-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@inverse-logo-color:                           @inverse-global-emphasis-color;
-@inverse-logo-hover-color:                     @inverse-global-emphasis-color;
-
-.hook-inverse() {
-
-    .uk-dropcap::first-letter,
-    .uk-dropcap p:first-of-type::first-letter {
-        .hook-inverse-dropcap();
-    }
-
-    .uk-logo {
-        color: @inverse-logo-color;
-        .hook-inverse-logo();
-    }
-
-    .uk-logo:hover {
-        color: @inverse-logo-hover-color;
-        .hook-inverse-logo-hover();
-    }
-
-    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse)):not(.uk-logo-inverse) { display: none; }
-    .uk-logo-inverse { display: block; }
-
-}
-
-.hook-inverse-dropcap() {}
-.hook-inverse-logo() {}
-.hook-inverse-logo-hover() {}

package/src/less/components/visibility.less

@@ -114,10 +114,10 @@
  *    Note: `clip-path` doesn't work with `tabindex` on touch devices.
  */
 
-.uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
-.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-visible):not(:has(:focus-visible)),
+.uk-hidden-visually:not(:focus, :active, :focus-within),
+.uk-visible-toggle:not(:hover, :focus) .uk-hidden-hover:not(:focus-visible, :has(:focus-visible)),
 // Fallback for Safari 18.3 `:not(:has(...)) invalidation` bug. Remove when fixed.
-.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+.uk-visible-toggle:not(:hover, :focus) .uk-hidden-hover:not(:focus-within) {
     /* 1 */
     position: absolute !important;
     /* 2 */
@@ -135,7 +135,7 @@
  * Note: `clip-path` doesn't work with hover for elements outside of the toggle box.
  */
 
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
+.uk-visible-toggle:not(:hover, :focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
 
 
 /* Based on Hover Capability of the Pointing Device

package/src/less/theme/_import.less

@@ -12,6 +12,7 @@
 @import "icon.less";
 @import "form-range.less";
 @import "form.less";
+@import "search.less";
 @import "button.less";
 @import "progress.less";
 
@@ -30,10 +31,11 @@
 @import "placeholder.less";
 @import "badge.less";
 @import "label.less";
+@import "dropcap.less";
+@import "floating-shadow.less";
 @import "overlay.less";
 @import "article.less";
 @import "comment.less";
-@import "search.less";
 
 // JavaScript
 @import "accordion.less";
@@ -41,6 +43,7 @@
 @import "dropbar.less";
 @import "modal.less";
 @import "slider.less";
+@import "marquee.less";
 @import "sticky.less";
 @import "offcanvas.less";
 @import "leader.less";
@@ -65,6 +68,7 @@
 
 @import "dropdown.less";
 @import "lightbox.less";
+@import "logo.less";
 
 // Utilities
 @import "animation.less";
@@ -75,8 +79,8 @@
 @import "background.less";
 @import "align.less";
 @import "utility.less";
+@import "position.less";
 @import "margin.less";
 @import "padding.less";
-@import "position.less";
 @import "transition.less";
 @import "inverse.less";

package/src/less/theme/alert.less

@@ -68,9 +68,4 @@
         text-decoration: underline;
     }
 
-    .uk-alert a:not([class]):hover {
-        color: inherit;
-        text-decoration: underline;
-    }
-
 }

package/src/less/theme/dropcap.less

@@ -0,0 +1,29 @@
+//
+// Component: Dropcap
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+// Component
+// ========================================================================
+
+.hook-dropcap() {
+    // Prevent line wrap
+    margin-bottom: -2px;
+}
+
+
+// Miscellaneous
+// ========================================================================
+
+.hook-dropcap-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse-dropcap() {}

package/src/less/theme/floating-shadow.less

@@ -0,0 +1,20 @@
+//
+// Component: Floating Shadow
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+// Component
+// ========================================================================
+
+.hook-floating-shadow() {}
+
+
+// Miscellaneous
+// ========================================================================
+
+.hook-floating-shadow-misc() {}

package/src/less/theme/logo.less

@@ -0,0 +1,29 @@
+//
+// Component: Logo
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+// Component
+// ========================================================================
+
+.hook-logo() {}
+
+.hook-logo-hover() {}
+
+
+// Miscellaneous
+// ========================================================================
+
+.hook-logo-misc() {}
+
+
+// Inverse
+// ========================================================================
+
+.hook-inverse-logo() {}
+.hook-inverse-logo-hover() {}

package/src/less/theme/marquee.less

@@ -0,0 +1,14 @@
+//
+// Component: Marquee
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+// Miscellaneous
+// ========================================================================
+
+.hook-marquee-misc() {}

package/src/less/theme/thumbnav.less

@@ -28,10 +28,7 @@
     &::after {
         content: "";
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset: 0;
         background-image: @thumbnav-item-gradient;
         transition: opacity 0.1s ease-in-out;
     }

package/src/less/theme/utility.less

@@ -14,39 +14,7 @@
 .hook-panel-scrollable() {}
 
 
-// Box-shadow bottom
-// ========================================================================
-
-.hook-box-shadow-bottom() {}
-
-
-// Drop cap
-// ========================================================================
-
-.hook-dropcap() {
-    // Prevent line wrap
-    margin-bottom: -2px;
-}
-
-
-// Logo
-// ========================================================================
-
-.hook-logo() {}
-
-.hook-logo-hover() {}
-
-
 // Miscellaneous
 // ========================================================================
 
 .hook-utility-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse-dropcap() {}
-
-.hook-inverse-logo() {}
-.hook-inverse-logo-hover() {}

package/src/scss/components/_import.scss

@@ -13,6 +13,7 @@
 @import "icon.scss";
 @import "form-range.scss";
 @import "form.scss"; // After: Icon, Form Range
+@import "search.scss"; // After: Icon
 @import "button.scss";
 @import "progress.scss";
 
@@ -31,10 +32,11 @@
 @import "placeholder.scss";
 @import "badge.scss";
 @import "label.scss";
+@import "dropcap.scss";
+@import "floating-shadow.scss";
 @import "overlay.scss"; // After: Icon
 @import "article.scss";
 @import "comment.scss";
-@import "search.scss"; // After: Icon
 
 // JavaScript
 @import "accordion.scss";
@@ -44,6 +46,7 @@
 @import "modal.scss"; // After: Close
 @import "slideshow.scss";
 @import "slider.scss";
+@import "marquee.scss";
 @import "sticky.scss";
 @import "offcanvas.scss";
 @import "switcher.scss";
@@ -70,8 +73,10 @@
 @import "tab.scss";
 @import "slidenav.scss"; // After: Icon
 @import "dotnav.scss";
+
 @import "dropdown.scss"; // After: Card, Nav
 @import "lightbox.scss"; // After: Close, Slidenav
+@import "logo.scss"; // After: Navbar
 
 // Utilities
 @import "animation.scss";
@@ -85,9 +90,9 @@
 @import "svg.scss";
 @import "utility.scss";
 @import "flex.scss"; // After: Utility
-@import "margin.scss";
-@import "padding.scss";
 @import "position.scss";
+@import "margin.scss"; // After: Position
+@import "padding.scss";
 @import "transition.scss";
 @import "visibility.scss";
 @import "inverse.scss";

package/src/scss/components/animation.scss

@@ -133,7 +133,7 @@
 /* Toggle animation based on the State of the Parent Element
  ========================================================================== */
 
-.uk-animation-toggle:not(:hover):not(:focus) [class*="uk-animation-"] { animation-name: none; }
+.uk-animation-toggle:not(:hover, :focus) [class*="uk-animation-"] { animation-name: none; }
 
 
 /* Keyframes used by animation classes

package/src/scss/components/base.scss

@@ -423,7 +423,7 @@ blockquote {
  * Content
  */
 
-blockquote p:last-of-type { margin-bottom: 0; }
+blockquote :where(p:last-of-type) { margin-bottom: 0; }
 
 blockquote footer {
     margin-top: $base-blockquote-footer-margin-top;

package/src/scss/components/button.scss

@@ -88,7 +88,7 @@
 
 /* Hover */
 .uk-button:hover {
-    /* 9 */
+    /* 10 */
     text-decoration: none;
     @if(meta.mixin-exists(hook-button-hover)) {@include hook-button-hover();}
 }

package/src/scss/components/card.scss

@@ -314,11 +314,11 @@
  * Small
  */
 
-.uk-card-small.uk-card-body,
-.uk-card-small .uk-card-body { padding: $card-small-body-padding-vertical $card-small-body-padding-horizontal; }
+.uk-card-small:where(.uk-card-body),
+.uk-card-small :where(.uk-card-body) { padding: $card-small-body-padding-vertical $card-small-body-padding-horizontal; }
 
-.uk-card-small .uk-card-header { padding: $card-small-header-padding-vertical $card-small-header-padding-horizontal; }
-.uk-card-small .uk-card-footer { padding: $card-small-footer-padding-vertical $card-small-footer-padding-horizontal; }
+.uk-card-small :where(.uk-card-header) { padding: $card-small-header-padding-vertical $card-small-header-padding-horizontal; }
+.uk-card-small :where(.uk-card-footer) { padding: $card-small-footer-padding-vertical $card-small-footer-padding-horizontal; }
 
 /*
  * Large
@@ -327,11 +327,11 @@
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
 
-    .uk-card-large.uk-card-body,
-    .uk-card-large .uk-card-body { padding: $card-large-body-padding-vertical-l $card-large-body-padding-horizontal-l; }
+    .uk-card-large:where(.uk-card-body),
+    .uk-card-large :where(.uk-card-body) { padding: $card-large-body-padding-vertical-l $card-large-body-padding-horizontal-l; }
 
-    .uk-card-large .uk-card-header { padding: $card-large-header-padding-vertical-l $card-large-header-padding-horizontal-l; }
-    .uk-card-large .uk-card-footer { padding: $card-large-footer-padding-vertical-l $card-large-footer-padding-horizontal-l; }
+    .uk-card-large :where(.uk-card-header) { padding: $card-large-header-padding-vertical-l $card-large-header-padding-horizontal-l; }
+    .uk-card-large :where(.uk-card-footer) { padding: $card-large-footer-padding-vertical-l $card-large-footer-padding-horizontal-l; }
 
 }
 

package/src/scss/components/dropcap.scss

@@ -0,0 +1,63 @@
+@use "sass:meta";
+
+// Name:            Dropcap
+// Description:     Style for the drop cap
+//
+// Component:       `uk-dropcap`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+/* ========================================================================
+   Component: Dropcap
+ ========================================================================== */
+
+/*
+ * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
+ * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
+ */
+
+.uk-dropcap::first-letter,
+/* 1 */
+.uk-dropcap > p:first-of-type::first-letter {
+    display: block;
+    margin-right: $dropcap-margin-right;
+    float: left;
+    font-size: $dropcap-font-size;
+    line-height: $dropcap-line-height;
+    @if(meta.mixin-exists(hook-dropcap)) {@include hook-dropcap();}
+}
+
+/* 2 */
+@-moz-document url-prefix() {
+
+  .uk-dropcap::first-letter,
+  .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }
+
+}
+
+
+// Misc
+// ========================================================================
+
+@if(meta.mixin-exists(hook-dropcap-misc)) {@include hook-dropcap-misc();}
+
+
+// Hooks
+// ========================================================================
+
+// @mixin hook-dropcap(){}
+// @mixin hook-dropcap-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+
+
+// @mixin hook-inverse-dropcap(){}

package/src/scss/components/floating-shadow.scss

@@ -0,0 +1,63 @@
+@use "sass:meta";
+
+// Name:            Floating Shadow
+// Description:     Component to create floating shadows
+//
+// Component:       `uk-floating-shadow`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+
+
+/* ========================================================================
+   Component: Floating Shadow
+ ========================================================================== */
+
+/*
+ * 1. Set position.
+ * 2. Set style
+ * 3. Fix shadow being clipped in Safari if container is animated
+ */
+
+.uk-floating-shadow {
+    display: inline-block;
+    position: relative;
+    z-index: 0;
+    max-width: 100%;
+    vertical-align: middle;
+}
+
+.uk-floating-shadow::after {
+    content: "";
+    /* 1 */
+    position: absolute;
+    bottom: $floating-shadow-bottom;
+    left: 0;
+    right: 0;
+    z-index: -1;
+    /* 2 */
+    height: $floating-shadow-height;
+    border-radius: $floating-shadow-border-radius;
+    background: $floating-shadow-background;
+    filter: blur($floating-shadow-blur);
+    /* 3 */
+    will-change: filter;
+    @if(meta.mixin-exists(hook-floating-shadow)) {@include hook-floating-shadow();}
+}
+
+
+// Misc
+// ========================================================================
+
+@if(meta.mixin-exists(hook-floating-shadow-misc)) {@include hook-floating-shadow-misc();}
+
+
+// Hooks
+// ========================================================================
+
+// @mixin hook-floating-shadow(){}
+// @mixin hook-floating-shadow-misc(){}