uikit 3.25.27-dev.9e97c1f → 3.25.27

package/src/less/components/utility.less

@@ -13,6 +13,9 @@
 //                  `uk-object-*`
 //                  `uk-border-*`
 //                  `uk-box-shadow-*`
+//                  `uk-box-shadow-bottom`
+//                  `uk-dropcap`
+//                  `uk-logo`
 //                  `uk-blend-*`
 //                  `uk-transform-*`
 //                  `uk-transform-origin-*`
@@ -39,6 +42,21 @@
 
 @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);
 
 
@@ -346,6 +364,114 @@
 .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
  ========================================================================== */
 
@@ -423,4 +549,41 @@
 .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, :active, :focus-within),
-.uk-visible-toggle:not(:hover, :focus) .uk-hidden-hover:not(:focus-visible, :has(:focus-visible)),
+.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)),
 // Fallback for Safari 18.3 `:not(:has(...)) invalidation` bug. Remove when fixed.
-.uk-visible-toggle:not(:hover, :focus) .uk-hidden-hover:not(:focus-within) {
+.uk-visible-toggle:not(:hover):not(: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, :focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
+.uk-visible-toggle:not(:hover):not(: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,7 +12,6 @@
 @import "icon.less";
 @import "form-range.less";
 @import "form.less";
-@import "search.less";
 @import "button.less";
 @import "progress.less";
 
@@ -31,11 +30,10 @@
 @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";
@@ -43,7 +41,6 @@
 @import "dropbar.less";
 @import "modal.less";
 @import "slider.less";
-@import "marquee.less";
 @import "sticky.less";
 @import "offcanvas.less";
 @import "leader.less";
@@ -68,7 +65,6 @@
 
 @import "dropdown.less";
 @import "lightbox.less";
-@import "logo.less";
 
 // Utilities
 @import "animation.less";
@@ -79,8 +75,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,4 +68,9 @@
         text-decoration: underline;
     }
 
+    .uk-alert a:not([class]):hover {
+        color: inherit;
+        text-decoration: underline;
+    }
+
 }

package/src/less/theme/thumbnav.less

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

package/src/less/theme/utility.less

@@ -14,7 +14,39 @@
 .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,7 +13,6 @@
 @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";
 
@@ -32,11 +31,10 @@
 @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";
@@ -46,7 +44,6 @@
 @import "modal.scss"; // After: Close
 @import "slideshow.scss";
 @import "slider.scss";
-@import "marquee.scss";
 @import "sticky.scss";
 @import "offcanvas.scss";
 @import "switcher.scss";
@@ -73,10 +70,8 @@
 @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";
@@ -90,9 +85,9 @@
 @import "svg.scss";
 @import "utility.scss";
 @import "flex.scss"; // After: Utility
-@import "position.scss";
-@import "margin.scss"; // After: Position
+@import "margin.scss";
 @import "padding.scss";
+@import "position.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, :focus) [class*="uk-animation-"] { animation-name: none; }
+.uk-animation-toggle:not(:hover):not(: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 :where(p:last-of-type) { margin-bottom: 0; }
+blockquote 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 {
-    /* 10 */
+    /* 9 */
     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: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-body,
+.uk-card-small .uk-card-body { padding: $card-small-body-padding-vertical $card-small-body-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; }
+.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; }
 
 /*
  * Large
@@ -327,11 +327,11 @@
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
 
-    .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-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-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; }
+    .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; }
 
 }
 

package/src/scss/components/form.scss

@@ -211,7 +211,7 @@
  */
 
 .uk-input,
-.uk-select:not([multiple], [size]) {
+.uk-select:not([multiple]):not([size]) {
     height: $form-height;
     vertical-align: middle;
     @if(meta.mixin-exists(hook-form-single-line)) {@include hook-form-single-line();}
@@ -343,7 +343,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  * 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
  */
 
-.uk-select:not([multiple], [size]) {
+.uk-select:not([multiple]):not([size]) {
     /* 1 */
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -355,13 +355,13 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 }
 
 /* 3 */
-.uk-select:not([multiple], [size]) option { color: $form-select-option-color; }
+.uk-select:not([multiple]):not([size]) option { color: $form-select-option-color; }
 
 /*
  * Disabled
  */
 
-.uk-select:not([multiple], [size]):disabled { @include svg-fill($internal-form-select-image, "#000", $form-select-disabled-icon-color); }
+.uk-select:not([multiple]):not([size]):disabled { @include svg-fill($internal-form-select-image, "#000", $form-select-disabled-icon-color); }
 
 
 /* Datalist
@@ -479,7 +479,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .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], [size])) {
+.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;
@@ -489,7 +489,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .uk-form-small:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: $form-small-multi-line-padding-vertical $form-small-multi-line-padding-horizontal; }
 
 /* Any element */
-.uk-form-small:not(select, input, textarea, [type="radio"], [type="checkbox"]) { line-height: $form-small-line-height; }
+.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) {
@@ -504,7 +504,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .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], [size])) {
+.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;
@@ -514,7 +514,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .uk-form-large:is(.uk-select[multiple], .uk-select[size], .uk-textarea) { padding: $form-large-multi-line-padding-vertical $form-large-multi-line-padding-horizontal; }
 
 /* Any element */
-.uk-form-large:not(select, input, textarea, [type="radio"], [type="checkbox"]) { line-height: $form-large-line-height; }
+.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) {
@@ -618,7 +618,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  * Stacked
  */
 
-.uk-form-stacked :where(.uk-form-label) {
+.uk-form-stacked .uk-form-label {
     display: block;
     margin-bottom: $form-stacked-margin-bottom;
     @if(meta.mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
@@ -632,7 +632,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 @media (max-width: $breakpoint-small-max) {
 
     /* Behave like `uk-form-stacked` */
-    .uk-form-horizontal :where(.uk-form-label) {
+    .uk-form-horizontal .uk-form-label {
         display: block;
         margin-bottom: $form-stacked-margin-bottom;
         @if(meta.mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
@@ -643,17 +643,17 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
 
-    .uk-form-horizontal :where(.uk-form-label) {
+    .uk-form-horizontal .uk-form-label {
         width: $form-horizontal-label-width;
         margin-top: $form-horizontal-label-margin-top;
         float: left;
         @if(meta.mixin-exists(hook-form-horizontal-label)) {@include hook-form-horizontal-label();}
     }
 
-    .uk-form-horizontal :where(.uk-form-controls) { margin-left: $form-horizontal-controls-margin-left; }
+    .uk-form-horizontal .uk-form-controls { margin-left: $form-horizontal-controls-margin-left; }
 
     /* Better vertical alignment if controls are checkboxes and radio buttons with text */
-    .uk-form-horizontal :where(.uk-form-controls-text) { padding-top: $form-horizontal-controls-text-padding-top; }
+    .uk-form-horizontal .uk-form-controls-text { padding-top: $form-horizontal-controls-text-padding-top; }
 
 }
 
@@ -695,7 +695,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  * Make `input` element clickable through icon, e.g. if it's a `span`
  */
 
-.uk-form-icon:not(a, button, input) { pointer-events: none; }
+.uk-form-icon:not(a):not(button):not(input) { pointer-events: none; }
 
 /*
  * Input padding