uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.0856bd8a6

package/src/scss/components/svg.scss

@@ -18,14 +18,14 @@
 /* 1 */
 .uk-svg,
 /* 2 */
-.uk-svg:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
-.uk-svg:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
+.uk-svg:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) { fill: currentcolor; }
+.uk-svg:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: currentcolor; }
 
 /*
  * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
  */
 
-.uk-svg { transform: translate(0,0); }
+.uk-svg { transform: translate(0, 0); }
 
 
 // Hooks

package/src/scss/components/tile.scss

@@ -151,6 +151,10 @@
     @if(mixin-exists(hook-tile-default-hover)) {@include hook-tile-default-hover();}
 }
 
+// Color Mode
+@if ( $tile-default-color-mode == light ) { .uk-tile-default:not(.uk-preserve-color) { @extend .uk-light !optional;} }
+@if ( $tile-default-color-mode == dark ) { .uk-tile-default:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
+
 /*
  * Muted
  */
@@ -164,6 +168,10 @@
     @if(mixin-exists(hook-tile-muted-hover)) {@include hook-tile-muted-hover();}
 }
 
+// Color Mode
+@if ( $tile-muted-color-mode == light ) { .uk-tile-muted:not(.uk-preserve-color) { @extend .uk-light !optional;} }
+@if ( $tile-muted-color-mode == dark ) { .uk-tile-muted:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
+
 /*
  * Primary
  */

package/src/scss/components/transition.scss

@@ -45,15 +45,15 @@
  */
 
 :where(.uk-transition-fade),
-:where([class*='uk-transition-scale']),
-:where([class*='uk-transition-slide']) {
+:where([class*="uk-transition-scale"]),
+:where([class*="uk-transition-slide"]) {
     --uk-position-translate-x: 0;
     --uk-position-translate-y: 0;
 }
 
 .uk-transition-fade,
-[class*='uk-transition-scale'],
-[class*='uk-transition-slide'] {
+[class*="uk-transition-scale"],
+[class*="uk-transition-slide"] {
     --uk-translate-x: 0;
     --uk-translate-y: 0;
     --uk-scale-x: 1;
@@ -81,7 +81,7 @@
  */
 
 /* 1 */
-[class*='uk-transition-scale'] { -webkit-backface-visibility: hidden; }
+[class*="uk-transition-scale"] { -webkit-backface-visibility: hidden; }
 
 .uk-transition-scale-up {
     --uk-scale-x: 1;
@@ -131,10 +131,10 @@
 .uk-transition-slide-right-medium { --uk-translate-x: #{$transition-slide-medium-translate}; }
 
 /* Show */
-.uk-transition-toggle:hover [class*='uk-transition-slide'],
-.uk-transition-toggle:focus [class*='uk-transition-slide'],
-.uk-transition-toggle [class*='uk-transition-slide']:focus-within,
-.uk-transition-active.uk-active [class*='uk-transition-slide'] {
+.uk-transition-toggle:hover [class*="uk-transition-slide"],
+.uk-transition-toggle:focus [class*="uk-transition-slide"],
+.uk-transition-toggle [class*="uk-transition-slide"]:focus-within,
+.uk-transition-active.uk-active [class*="uk-transition-slide"] {
     --uk-translate-x: 0;
     --uk-translate-y: 0;
     opacity: 1;

package/src/scss/components/utility.scss

@@ -108,7 +108,7 @@
 .uk-float-right { float: right; }
 
 /* 1 */
-[class*='uk-float-'] { max-width: 100%; }
+[class*="uk-float-"] { max-width: 100%; }
 
 
 /* Overfow
@@ -161,7 +161,7 @@
  * 6. Clip child elements
  */
 
-[class*='uk-inline'] {
+[class*="uk-inline"] {
     /* 1 */
     display: inline-block;
     /* 2 */
@@ -272,7 +272,7 @@
  * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
  */
 
-.uk-inline-clip[class*='uk-border-'] { -webkit-transform: translateZ(0); }
+.uk-inline-clip[class*="uk-border-"] { -webkit-transform: translateZ(0); }
 
 
 /* Box-shadow
@@ -287,7 +287,7 @@
  * Hover
  */
 
-[class*='uk-box-shadow-hover'] { transition: box-shadow $box-shadow-duration ease-in-out; }
+[class*="uk-box-shadow-hover"] { transition: box-shadow $box-shadow-duration ease-in-out; }
 
 .uk-box-shadow-hover-small:hover { box-shadow: $global-small-box-shadow; }
 .uk-box-shadow-hover-medium:hover { box-shadow: $global-medium-box-shadow; }

package/src/scss/components/width.scss

@@ -20,7 +20,7 @@
 /* Equal child widths
  ========================================================================== */
 
-[class*='uk-child-width'] > * {
+[class*="uk-child-width"] > * {
     box-sizing: border-box;
     width: 100%;
 }
@@ -40,7 +40,7 @@
  *    if they have zero width and padding and the predecessor is 100% wide.
  */
 
-.uk-child-width-expand > :not([class*='uk-width']) {
+.uk-child-width-expand > :not([class*="uk-width"]) {
     flex: 1;
     /* 1 */
     min-width: 1px;
@@ -57,7 +57,7 @@
     .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); }
 
     .uk-child-width-auto\@s > * { width: auto; }
-    .uk-child-width-expand\@s > :not([class*='uk-width']) {
+    .uk-child-width-expand\@s > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
@@ -75,7 +75,7 @@
     .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); }
 
     .uk-child-width-auto\@m > * { width: auto; }
-    .uk-child-width-expand\@m > :not([class*='uk-width']) {
+    .uk-child-width-expand\@m > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
@@ -93,7 +93,7 @@
     .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); }
 
     .uk-child-width-auto\@l > * { width: auto; }
-    .uk-child-width-expand\@l > :not([class*='uk-width']) {
+    .uk-child-width-expand\@l > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
@@ -111,7 +111,7 @@
     .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); }
 
     .uk-child-width-auto\@xl > * { width: auto; }
-    .uk-child-width-expand\@xl > :not([class*='uk-width']) {
+    .uk-child-width-expand\@xl > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
@@ -126,7 +126,7 @@
  * 1. `max-width` is needed for the pixel-based classes
  */
 
-[class*='uk-width'] {
+[class*="uk-width"] {
     box-sizing: border-box;
     width: 100%;
     /* 1 */

package/src/scss/mixins-theme.scss

@@ -88,11 +88,11 @@
 @mixin hook-inverse-article-meta(){}
 @mixin hook-inverse-component-article(){
 
-    .uk-article-title  {
+    .uk-article-title {
         @if(mixin-exists(hook-inverse-article-title)) {@include hook-inverse-article-title();}
     }
 
-    .uk-article-meta  {
+    .uk-article-meta {
         color: $inverse-article-meta-color;
         @if(mixin-exists(hook-inverse-article-meta)) {@include hook-inverse-article-meta();}
     }
@@ -176,7 +176,7 @@
     //
 
     a,
-    .uk-link  {
+    .uk-link {
         color: $inverse-base-link-color;
         @if(mixin-exists(hook-inverse-base-link)) {@include hook-inverse-base-link();}
     }
@@ -1189,7 +1189,7 @@
 
     a.uk-link-muted:hover,
     .uk-link-muted a:hover,
-    .uk-link-toggle:hover .uk-link-muted  {
+    .uk-link-toggle:hover .uk-link-muted {
         color: $inverse-link-muted-hover-color;
         @if(mixin-exists(hook-inverse-link-muted-hover)) {@include hook-inverse-link-muted-hover();}
     }
@@ -1333,6 +1333,9 @@
 @mixin hook-nav-secondary-subtitle-active(){}
 @mixin hook-nav-secondary-header(){}
 @mixin hook-nav-secondary-divider(){}
+@mixin hook-nav-medium(){}
+@mixin hook-nav-large(){}
+@mixin hook-nav-xlarge(){}
 @mixin hook-nav-dividers(){}
 @mixin hook-nav-misc(){}
 @mixin hook-inverse-nav-default-item(){}
@@ -1529,9 +1532,9 @@
 
         .uk-navbar-left,
         .uk-navbar-right,
-        [class*='uk-navbar-center'] { gap: $navbar-gap-m; }
+        [class*="uk-navbar-center"] { gap: $navbar-gap-m; }
 
-        .uk-navbar-center-left { right:  unquote('calc(100% + #{$navbar-gap-m})'); }
+        .uk-navbar-center-left { right: unquote('calc(100% + #{$navbar-gap-m})'); }
         .uk-navbar-center-right { left: unquote('calc(100% + #{$navbar-gap-m})'); }
 
     }
@@ -1955,7 +1958,7 @@
 }
 @mixin hook-tab-misc(){
 
-    .uk-tab .uk-dropdown { margin-left: ($tab-margin-horizontal + $tab-item-padding-horizontal) }
+    .uk-tab .uk-dropdown { margin-left: ($tab-margin-horizontal + $tab-item-padding-horizontal); }
 
 }
 @mixin hook-inverse-tab(){

package/src/scss/mixins.scss

@@ -43,11 +43,11 @@
 @mixin hook-inverse-article-meta(){}
 @mixin hook-inverse-component-article(){
 
-    .uk-article-title  {
+    .uk-article-title {
         @if(mixin-exists(hook-inverse-article-title)) {@include hook-inverse-article-title();}
     }
 
-    .uk-article-meta  {
+    .uk-article-meta {
         color: $inverse-article-meta-color;
         @if(mixin-exists(hook-inverse-article-meta)) {@include hook-inverse-article-meta();}
     }
@@ -113,7 +113,7 @@
     //
 
     a,
-    .uk-link  {
+    .uk-link {
         color: $inverse-base-link-color;
         @if(mixin-exists(hook-inverse-base-link)) {@include hook-inverse-base-link();}
     }
@@ -939,7 +939,7 @@
 
     a.uk-link-muted:hover,
     .uk-link-muted a:hover,
-    .uk-link-toggle:hover .uk-link-muted  {
+    .uk-link-toggle:hover .uk-link-muted {
         color: $inverse-link-muted-hover-color;
         @if(mixin-exists(hook-inverse-link-muted-hover)) {@include hook-inverse-link-muted-hover();}
     }
@@ -1049,6 +1049,9 @@
 @mixin hook-nav-secondary-subtitle-active(){}
 @mixin hook-nav-secondary-header(){}
 @mixin hook-nav-secondary-divider(){}
+@mixin hook-nav-medium(){}
+@mixin hook-nav-large(){}
+@mixin hook-nav-xlarge(){}
 @mixin hook-nav-dividers(){}
 @mixin hook-nav-misc(){}
 @mixin hook-inverse-nav-default-item(){}

package/src/scss/theme/alert.scss

@@ -42,3 +42,4 @@
 // Miscellaneous
 // ========================================================================
 
+

package/src/scss/theme/align.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-align-misc(){}
+// @mixin hook-align-misc(){}

package/src/scss/theme/animation.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-animation-misc(){}
+// @mixin hook-animation-misc(){}

package/src/scss/theme/article.scss

@@ -46,4 +46,4 @@
 // Inverse
 // ========================================================================
 
-// @mixin hook-inverse-article-meta(){}
+// @mixin hook-inverse-article-meta(){}

package/src/scss/theme/background.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-background-misc(){}
+// @mixin hook-background-misc(){}

package/src/scss/theme/badge.scss

@@ -26,4 +26,4 @@
 // ========================================================================
 
 // @mixin hook-inverse-badge(){}
-// @mixin hook-inverse-badge-hover(){}
+// @mixin hook-inverse-badge-hover(){}

package/src/scss/theme/base.scss

@@ -101,4 +101,4 @@
 
 
 
-// @mixin hook-inverse-base-hr(){}
+// @mixin hook-inverse-base-hr(){}

package/src/scss/theme/breadcrumb.scss

@@ -42,4 +42,4 @@
 // @mixin hook-inverse-breadcrumb-item-disabled(){}
 // @mixin hook-inverse-breadcrumb-item-active(){}
 
-// @mixin hook-inverse-breadcrumb-divider(){}
+// @mixin hook-inverse-breadcrumb-divider(){}

package/src/scss/theme/button.scss

@@ -129,4 +129,4 @@
 // @mixin hook-inverse-button-text-hover(){}
 // @mixin hook-inverse-button-text-disabled(){}
 
-// @mixin hook-inverse-button-link(){}
+// @mixin hook-inverse-button-link(){}

package/src/scss/theme/card.scss

@@ -108,3 +108,4 @@
 // Miscellaneous
 // ========================================================================
 
+

package/src/scss/theme/close.scss

@@ -26,4 +26,4 @@
 // ========================================================================
 
 // @mixin hook-inverse-close(){}
-// @mixin hook-inverse-close-hover(){}
+// @mixin hook-inverse-close-hover(){}

package/src/scss/theme/column.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-column-misc(){}
+// @mixin hook-column-misc(){}

package/src/scss/theme/comment.scss

@@ -64,4 +64,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-comment-misc(){}
+// @mixin hook-comment-misc(){}

package/src/scss/theme/container.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-container-misc(){}
+// @mixin hook-container-misc(){}

package/src/scss/theme/description-list.scss

@@ -26,4 +26,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-description-list-misc(){}
+// @mixin hook-description-list-misc(){}

package/src/scss/theme/divider.scss

@@ -46,4 +46,4 @@
 
 // @mixin hook-inverse-divider-small(){}
 
-// @mixin hook-inverse-divider-vertical(){}
+// @mixin hook-inverse-divider-vertical(){}

package/src/scss/theme/dotnav.scss

@@ -43,3 +43,4 @@
 
 
 
+

package/src/scss/theme/drop.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-drop-misc(){}
+// @mixin hook-drop-misc(){}

package/src/scss/theme/dropbar.scss

@@ -35,4 +35,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-dropbar-misc(){}
+// @mixin hook-dropbar-misc(){}

package/src/scss/theme/dropdown.scss

@@ -50,4 +50,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-dropdown-misc(){}
+// @mixin hook-dropdown-misc(){}

package/src/scss/theme/form-range.scss

@@ -38,4 +38,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-form-range-misc(){}
+// @mixin hook-form-range-misc(){}

package/src/scss/theme/height.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-height-misc(){}
+// @mixin hook-height-misc(){}

package/src/scss/theme/icon.scss

@@ -47,4 +47,4 @@
 
 // @mixin hook-inverse-icon-button(){}
 // @mixin hook-inverse-icon-button-hover(){}
-// @mixin hook-inverse-icon-button-active(){}
+// @mixin hook-inverse-icon-button-active(){}

package/src/scss/theme/iconnav.scss

@@ -36,4 +36,4 @@
 
 // @mixin hook-inverse-iconnav-item(){}
 // @mixin hook-inverse-iconnav-item-hover(){}
-// @mixin hook-inverse-iconnav-item-active(){}
+// @mixin hook-inverse-iconnav-item-active(){}

package/src/scss/theme/inverse.scss

@@ -11,4 +11,4 @@
 // Component
 // ========================================================================
 
-// @mixin hook-inverse(){}
+// @mixin hook-inverse(){}

package/src/scss/theme/label.scss

@@ -38,4 +38,4 @@
 // Inverse
 // ========================================================================
 
-// @mixin hook-inverse-label(){}
+// @mixin hook-inverse-label(){}

package/src/scss/theme/leader.scss

@@ -23,4 +23,4 @@
 // Inverse
 // ========================================================================
 
-// @mixin hook-inverse-leader(){}
+// @mixin hook-inverse-leader(){}

package/src/scss/theme/lightbox.scss

@@ -47,4 +47,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-lightbox-misc(){}
+// @mixin hook-lightbox-misc(){}

package/src/scss/theme/margin.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-margin-misc(){}
+// @mixin hook-margin-misc(){}

package/src/scss/theme/modal.scss

@@ -74,3 +74,4 @@
 // Miscellaneous
 // ========================================================================
 
+

package/src/scss/theme/nav.scss

@@ -128,4 +128,4 @@
 // @mixin hook-inverse-nav-secondary-header(){}
 // @mixin hook-inverse-nav-secondary-divider(){}
 
-// @mixin hook-inverse-nav-dividers(){}
+// @mixin hook-inverse-nav-dividers(){}

package/src/scss/theme/navbar.scss

@@ -132,4 +132,4 @@
 // @mixin hook-inverse-navbar-item(){}
 
 // @mixin hook-inverse-navbar-toggle(){}
-// @mixin hook-inverse-navbar-toggle-hover(){}
+// @mixin hook-inverse-navbar-toggle-hover(){}

package/src/scss/theme/notification.scss

@@ -41,4 +41,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-notification-misc(){}
+// @mixin hook-notification-misc(){}

package/src/scss/theme/offcanvas.scss

@@ -29,4 +29,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-offcanvas-misc(){}
+// @mixin hook-offcanvas-misc(){}

package/src/scss/theme/overlay.scss

@@ -30,4 +30,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-overlay-misc(){}
+// @mixin hook-overlay-misc(){}

package/src/scss/theme/padding.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-padding-misc(){}
+// @mixin hook-padding-misc(){}

package/src/scss/theme/pagination.scss

@@ -38,4 +38,4 @@
 // @mixin hook-inverse-pagination-item(){}
 // @mixin hook-inverse-pagination-item-hover(){}
 // @mixin hook-inverse-pagination-item-active(){}
-// @mixin hook-inverse-pagination-item-disabled(){}
+// @mixin hook-inverse-pagination-item-disabled(){}

package/src/scss/theme/position.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-position-misc(){}
+// @mixin hook-position-misc(){}

package/src/scss/theme/search.scss

@@ -79,4 +79,4 @@
 // @mixin hook-inverse-search-large-input-focus(){}
 
 // @mixin hook-inverse-search-toggle(){}
-// @mixin hook-inverse-search-toggle-hover(){}
+// @mixin hook-inverse-search-toggle-hover(){}

package/src/scss/theme/spinner.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-spinner-misc(){}
+// @mixin hook-spinner-misc(){}

package/src/scss/theme/sticky.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-sticky-misc(){}
+// @mixin hook-sticky-misc(){}

package/src/scss/theme/tab.scss

@@ -64,4 +64,4 @@
 // @mixin hook-inverse-tab-item(){}
 // @mixin hook-inverse-tab-item-hover(){}
 
-// @mixin hook-inverse-tab-item-disabled(){}
+// @mixin hook-inverse-tab-item-disabled(){}

package/src/scss/theme/table.scss

@@ -62,3 +62,4 @@
 
 // @mixin hook-inverse-table-hover(){}
 
+

package/src/scss/theme/thumbnav.scss

@@ -37,4 +37,4 @@
 
 
 // @mixin hook-inverse-thumbnav-item-hover(){}
-// @mixin hook-inverse-thumbnav-item-active(){}
+// @mixin hook-inverse-thumbnav-item-active(){}

package/src/scss/theme/tile.scss

@@ -49,4 +49,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-tile-misc(){}
+// @mixin hook-tile-misc(){}

package/src/scss/theme/tooltip.scss

@@ -17,4 +17,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-tooltip-misc(){}
+// @mixin hook-tooltip-misc(){}

package/src/scss/theme/totop.scss

@@ -29,4 +29,4 @@
 
 // @mixin hook-inverse-totop(){}
 // @mixin hook-inverse-totop-hover(){}
-// @mixin hook-inverse-totop-active(){}
+// @mixin hook-inverse-totop-active(){}

package/src/scss/theme/transition.scss

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-transition-misc(){}
+// @mixin hook-transition-misc(){}

package/src/scss/theme/utility.scss

@@ -46,4 +46,4 @@
 // @mixin hook-inverse-dropcap(){}
 
 // @mixin hook-inverse-logo(){}
-// @mixin hook-inverse-logo-hover(){}
+// @mixin hook-inverse-logo-hover(){}

package/src/scss/theme/variables.scss

@@ -33,4 +33,4 @@
 
 //
 // Z-index
-//
+//