uikit 3.25.17-dev.80dfe87 → 3.25.17-dev.8c70e44

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-*`
@@ -48,15 +45,6 @@
 @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);
 
 
@@ -368,114 +356,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
  ========================================================================== */
 
@@ -553,41 +433,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/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";

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/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";

package/src/scss/components/base.scss

@@ -429,7 +429,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

@@ -96,7 +96,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/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,62 @@
+@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(){}

package/src/scss/components/form.scss

@@ -624,7 +624,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  * Stacked
  */
 
-.uk-form-stacked .uk-form-label {
+.uk-form-stacked :where(.uk-form-label) {
     display: block;
     margin-bottom: $form-stacked-margin-bottom;
     @if(meta.mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
@@ -638,7 +638,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 .uk-form-label {
+    .uk-form-horizontal :where(.uk-form-label) {
         display: block;
         margin-bottom: $form-stacked-margin-bottom;
         @if(meta.mixin-exists(hook-form-stacked-label)) {@include hook-form-stacked-label();}
@@ -649,17 +649,17 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 /* Tablet landscape and bigger */
 @media (min-width: $breakpoint-medium) {
 
-    .uk-form-horizontal .uk-form-label {
+    .uk-form-horizontal :where(.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 .uk-form-controls { margin-left: $form-horizontal-controls-margin-left; }
+    .uk-form-horizontal :where(.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 .uk-form-controls-text { padding-top: $form-horizontal-controls-text-padding-top; }
+    .uk-form-horizontal :where(.uk-form-controls-text) { padding-top: $form-horizontal-controls-text-padding-top; }
 
 }