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

package/src/less/theme/position.less

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

package/src/less/theme/search.less

@@ -84,4 +84,4 @@
 .hook-inverse-search-large-input-focus() {}
 
 .hook-inverse-search-toggle() {}
-.hook-inverse-search-toggle-hover() {}
+.hook-inverse-search-toggle-hover() {}

package/src/less/theme/spinner.less

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

package/src/less/theme/sticky.less

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

package/src/less/theme/tab.less

@@ -116,7 +116,7 @@
 
 .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); }
 
 }
 
@@ -135,4 +135,4 @@
 .hook-inverse-tab-item() {}
 .hook-inverse-tab-item-hover() {}
 .hook-inverse-tab-item-active() { border-color: @inverse-global-primary-background; }
-.hook-inverse-tab-item-disabled() {}
+.hook-inverse-tab-item-disabled() {}

package/src/less/theme/table.less

@@ -83,4 +83,4 @@
 .hook-inverse() {
     .uk-table-striped > tr:nth-of-type(even):last-child,
     .uk-table-striped tbody tr:nth-of-type(even):last-child { border-bottom-color: @inverse-global-border; }
-}
+}

package/src/less/theme/thumbnav.less

@@ -62,4 +62,4 @@
     &::after { background-image: @inverse-thumbnav-item-gradient; }
 }
 .hook-inverse-thumbnav-item-hover() {}
-.hook-inverse-thumbnav-item-active() {}
+.hook-inverse-thumbnav-item-active() {}

package/src/less/theme/tile.less

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

package/src/less/theme/tooltip.less

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

package/src/less/theme/totop.less

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

package/src/less/theme/transition.less

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

package/src/less/theme/utility.less

@@ -49,4 +49,4 @@
 .hook-inverse-dropcap() {}
 
 .hook-inverse-logo() {}
-.hook-inverse-logo-hover() {}
+.hook-inverse-logo-hover() {}

package/src/less/theme/variables.less

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

package/src/less/theme/width.less

@@ -11,4 +11,4 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-width-misc() {}
+.hook-width-misc() {}

package/src/less/uikit.less

@@ -2,4 +2,4 @@
 // Core
 //
 
-@import "components/_import.less";
+@import "components/_import.less";

package/src/scss/components/align.scss

@@ -22,12 +22,12 @@
  * Default
  */
 
-[class*='uk-align'] {
+[class*="uk-align"] {
     display: block;
     margin-bottom: $align-margin-vertical;
 }
 
-* + [class*='uk-align'] { margin-top: $align-margin-vertical; }
+* + [class*="uk-align"] { margin-top: $align-margin-vertical; }
 
 /*
  * Center

package/src/scss/components/animation.scss

@@ -33,7 +33,7 @@
    Component: Animation
  ========================================================================== */
 
-[class*='uk-animation-'] { animation: $animation-duration ease-out both; }
+[class*="uk-animation-"] { animation: $animation-duration ease-out both; }
 
 
 /* Animations
@@ -131,7 +131,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):not(:focus) [class*="uk-animation-"] { animation-name: none; }
 
 
 /* Keyframes used by animation classes

package/src/scss/components/base.scss

@@ -384,7 +384,7 @@ hr, .uk-hr {
 
 /* Add margin if adjacent element */
 * + hr,
-* + .uk-hr { margin-top: $base-hr-margin-vertical }
+* + .uk-hr { margin-top: $base-hr-margin-vertical; }
 
 
 /* Address
@@ -414,7 +414,7 @@ blockquote {
 blockquote p:last-of-type { margin-bottom: 0; }
 
 blockquote footer {
-    margin-top:  $base-blockquote-footer-margin-top;
+    margin-top: $base-blockquote-footer-margin-top;
     font-size: $base-blockquote-footer-font-size;
     line-height: $base-blockquote-footer-line-height;
     @if(mixin-exists(hook-base-blockquote-footer)) {@include hook-base-blockquote-footer();}

package/src/scss/components/card.scss

@@ -100,13 +100,13 @@
  * Implemented by the theme
  */
 
-[class*='uk-card-media'] {
+[class*="uk-card-media"] {
     @if(mixin-exists(hook-card-media)) {@include hook-card-media();}
 }
 
 .uk-card-media-top,
 .uk-grid-stack > .uk-card-media-left,
-.uk-grid-stack > .uk-card-media-right  {
+.uk-grid-stack > .uk-card-media-right {
     @if(mixin-exists(hook-card-media-top)) {@include hook-card-media-top();}
 }
 
@@ -212,6 +212,12 @@
     @if(mixin-exists(hook-card-default-footer)) {@include hook-card-default-footer();}
 }
 
+// Color Mode
+@if ( $card-default-color-mode == light ) { .uk-card-default.uk-card-body { @extend .uk-light !optional;} }
+@if ( $card-default-color-mode == light ) { .uk-card-default > :not([class*="uk-card-media"]) { @extend .uk-light !optional;} }
+@if ( $card-default-color-mode == dark ) { .uk-card-default.uk-card-body { @extend .uk-dark !optional;} }
+@if ( $card-default-color-mode == dark ) { .uk-card-default > :not([class*="uk-card-media"]) { @extend .uk-dark !optional;} }
+
 /*
  * Primary
  */
@@ -234,9 +240,9 @@
 
 // Color Mode
 @if ( $card-primary-color-mode == light ) { .uk-card-primary.uk-card-body { @extend .uk-light !optional;} }
-@if ( $card-primary-color-mode == light ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} }
+@if ( $card-primary-color-mode == light ) { .uk-card-primary > :not([class*="uk-card-media"]) { @extend .uk-light !optional;} }
 @if ( $card-primary-color-mode == dark ) { .uk-card-primary.uk-card-body { @extend .uk-dark !optional;} }
-@if ( $card-primary-color-mode == dark ) { .uk-card-primary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} }
+@if ( $card-primary-color-mode == dark ) { .uk-card-primary > :not([class*="uk-card-media"]) { @extend .uk-dark !optional;} }
 
 /*
  * Secondary
@@ -260,9 +266,9 @@
 
 // Color Mode
 @if ( $card-secondary-color-mode == light ) { .uk-card-secondary.uk-card-body { @extend .uk-light !optional;} }
-@if ( $card-secondary-color-mode == light ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-light !optional;} }
+@if ( $card-secondary-color-mode == light ) { .uk-card-secondary > :not([class*="uk-card-media"]) { @extend .uk-light !optional;} }
 @if ( $card-secondary-color-mode == dark ) { .uk-card-secondary.uk-card-body { @extend .uk-dark !optional;} }
-@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary > :not([class*='uk-card-media']) { @extend .uk-dark !optional;} }
+@if ( $card-secondary-color-mode == dark ) { .uk-card-secondary > :not([class*="uk-card-media"]) { @extend .uk-dark !optional;} }
 
 
 /* Size modifier

package/src/scss/components/column.scss

@@ -20,12 +20,12 @@
    Component: Column
  ========================================================================== */
 
-[class*='uk-column-'] { column-gap: $column-gutter; }
+[class*="uk-column-"] { column-gap: $column-gutter; }
 
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
 
-    [class*='uk-column-'] { column-gap: $column-gutter-l; }
+    [class*="uk-column-"] { column-gap: $column-gutter-l; }
 
 }
 
@@ -33,7 +33,7 @@
  * Fix image 1px line wrapping into the next column in Chrome
  */
 
-[class*='uk-column-'] img { transform: translate3d(0,0,0); }
+[class*="uk-column-"] img { transform: translate3d(0, 0, 0); }
 
 
 /* Divider

package/src/scss/components/container.scss

@@ -141,7 +141,7 @@
  */
 
 .uk-container-item-padding-remove-left,
-.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal})') }
+.uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal})'); }
 
 .uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal); }
 .uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal); }
@@ -150,7 +150,7 @@
 @media (min-width: $breakpoint-small) {
 
     .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-s})') }
+    .uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-s})'); }
 
     .uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-s); }
     .uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-s); }
@@ -161,7 +161,7 @@
 @media (min-width: $breakpoint-medium) {
 
     .uk-container-item-padding-remove-left,
-    .uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-m})') }
+    .uk-container-item-padding-remove-right { width: unquote('calc(100% + #{$container-padding-horizontal-m})'); }
 
     .uk-container-item-padding-remove-left { margin-left: (-$container-padding-horizontal-m); }
     .uk-container-item-padding-remove-right { margin-right: (-$container-padding-horizontal-m); }

package/src/scss/components/divider.scss

@@ -26,7 +26,7 @@
  * 2. Set margin if a `div` is used for semantical reason
  */
 
-[class*='uk-divider'] {
+[class*="uk-divider"] {
     /* 1 */
     border: none;
     /* 2 */
@@ -34,7 +34,7 @@
 }
 
 /* Add margin if adjacent element */
-* + [class*='uk-divider'] { margin-top: $divider-margin-vertical; }
+* + [class*="uk-divider"] { margin-top: $divider-margin-vertical; }
 
 
 /* Icon

package/src/scss/components/dropnav.scss

@@ -39,4 +39,4 @@
 
 @if(mixin-exists(hook-dropnav-misc)) {@include hook-dropnav-misc();}
 
-// @mixin hook-dropnav-misc(){}
+// @mixin hook-dropnav-misc(){}

package/src/scss/components/form.scss

@@ -323,7 +323,7 @@ textarea.uk-form-large,
  */
 
 .uk-form-success,
-.uk-form-success:focus  {
+.uk-form-success:focus {
     color: $form-success-color;
     @if(mixin-exists(hook-form-success)) {@include hook-form-success();}
 }

package/src/scss/components/grid.scss

@@ -104,7 +104,7 @@
 .uk-grid-small,
 .uk-grid-column-small { margin-left: (-$grid-small-gutter-horizontal); }
 .uk-grid-small > *,
-.uk-grid-column-small > *  { padding-left: $grid-small-gutter-horizontal; }
+.uk-grid-column-small > * { padding-left: $grid-small-gutter-horizontal; }
 
 /* Vertical */
 .uk-grid + .uk-grid-small,
@@ -362,8 +362,8 @@
     flex-wrap: wrap;
 }
 
-.uk-grid-match > * > :not([class*='uk-width']),
-.uk-grid-item-match > :not([class*='uk-width']) {
+.uk-grid-match > * > :not([class*="uk-width"]),
+.uk-grid-item-match > :not([class*="uk-width"]) {
     /* 2 */
     box-sizing: border-box;
     width: 100%;

package/src/scss/components/height.scss

@@ -15,7 +15,7 @@
    Component: Height
  ========================================================================== */
 
-[class*='uk-height'] { box-sizing: border-box; }
+[class*="uk-height"] { box-sizing: border-box; }
 
 /*
  * Only works if parent element has a height set

package/src/scss/components/icon.scss

@@ -80,14 +80,14 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
  * Set the fill and stroke color of all SVG elements to the current text color
  */
 
-.uk-icon:not(.uk-preserve) [fill*='#']:not(.uk-preserve) { fill: currentcolor; }
-.uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) { stroke: currentcolor; }
+.uk-icon:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) { fill: currentcolor; }
+.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { stroke: currentcolor; }
 
 /*
  * Fix Firefox blurry SVG rendering: https://bugzilla.mozilla.org/show_bug.cgi?id=1046835
  */
 
-.uk-icon > * { transform: translate(0,0); }
+.uk-icon > * { transform: translate(0, 0); }
 
 
 /* Image modifier

package/src/scss/components/inverse.scss

@@ -30,6 +30,18 @@
 
 @if ($inverse-global-color-mode == dark) { .uk-dark { @if (mixin-exists(hook-inverse)) {@include hook-inverse();}}}
 
+/*
+ * Pass dropbar behind color to JS
+ */
+
+* { --uk-inverse: initial; }
+
+.uk-light { --uk-inverse: light; }
+.uk-dark { --uk-inverse: dark; }
+
+.uk-inverse-light { --uk-inverse: light !important; }
+.uk-inverse-dark { --uk-inverse: dark !important; }
+
 
 // Hooks
 // ========================================================================

package/src/scss/components/modal.scss

@@ -233,7 +233,7 @@
  * Adopts `uk-close`
  ========================================================================== */
 
-[class*='uk-modal-close-'] {
+[class*="uk-modal-close-"] {
     position: absolute;
     z-index: $modal-z-index;
     top: $modal-close-position;
@@ -246,13 +246,13 @@
  * Remove margin from adjacent element
  */
 
-[class*='uk-modal-close-']:first-child + * { margin-top: 0; }
+[class*="uk-modal-close-"]:first-child + * { margin-top: 0; }
 
 /*
  * Hover
  */
 
-[class*='uk-modal-close-']:hover {
+[class*="uk-modal-close-"]:hover {
     @if(mixin-exists(hook-modal-close-hover)) {@include hook-modal-close-hover();}
 }
 

package/src/scss/components/nav.scss

@@ -11,6 +11,10 @@
 //
 // Modifiers:       `uk-nav-default`
 //                  `uk-nav-primary`
+//                  `uk-nav-secondary`
+//                  `uk-nav-medium`
+//                  `uk-nav-large`
+//                  `uk-nav-xlarge`
 //                  `uk-nav-center`,
 //                  `uk-nav-divider`
 //
@@ -33,6 +37,18 @@
 
 
 
+$nav-medium-font-size:                           $nav-medium-font-size-m * 0.825 !default;    // 40px 0.714
+$nav-medium-font-size-m:                         $nav-medium-font-size-l * 0.875 !default;    // 3.5rem / 56px
+$nav-medium-font-size-l:                         4rem !default; // 64px
+
+$nav-large-font-size:                            $nav-large-font-size-m * 0.85 !default;      // 50px 0.78
+$nav-large-font-size-m:                          4rem !default; // 64px
+$nav-large-font-size-l:                          6rem !default; // 96px
+
+$nav-xlarge-font-size:                           4rem !default; // 64px
+$nav-xlarge-font-size-m:                         6rem !default; // 96px
+$nav-xlarge-font-size-l:                         8rem !default; // 128px
+
 
 
 /* ========================================================================
@@ -366,6 +382,50 @@ ul.uk-nav-sub {
 .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $nav-secondary-sublist-item-active-color; }
 
 
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Medium
+ */
+
+.uk-nav-medium {
+    font-size: $nav-medium-font-size;
+    line-height: $nav-medium-line-height;
+    @if(mixin-exists(hook-nav-medium)) {@include hook-nav-medium();}
+}
+
+.uk-nav-large {
+    font-size: $nav-large-font-size;
+    line-height: $nav-large-line-height;
+    @if(mixin-exists(hook-nav-large)) {@include hook-nav-large();}
+}
+
+.uk-nav-xlarge {
+    font-size: $nav-xlarge-font-size;
+    line-height: $nav-xlarge-line-height;
+    @if(mixin-exists(hook-nav-xlarge)) {@include hook-nav-xlarge();}
+}
+
+/* Tablet Landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-nav-medium { font-size: $nav-medium-font-size-m; }
+    .uk-nav-large { font-size: $nav-large-font-size-m; }
+    .uk-nav-xlarge { font-size: $nav-xlarge-font-size-m; }
+
+}
+
+/* Laptop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-nav-medium { font-size: $nav-medium-font-size-l; }
+    .uk-nav-large { font-size: $nav-large-font-size-l; }
+    .uk-nav-xlarge { font-size: $nav-xlarge-font-size-l; }
+
+}
+
+
 /* Alignment modifier
  ========================================================================== */
 
@@ -434,6 +494,9 @@ ul.uk-nav-sub {
 // @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(){}
 

package/src/scss/components/navbar.scss

@@ -49,25 +49,22 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 
 
-
 /* ========================================================================
    Component: Navbar
  ========================================================================== */
 
 /*
  * 1. Create position context to center navbar group
- * 2. Pass dropbar behind color to JS
  */
 
 .uk-navbar {
     display: flex;
     /* 1 */
     position: relative;
-    /* 2 */
-    --uk-navbar-dropbar-behind-color: #{$navbar-dropbar-behind-color-mode};
     @if(mixin-exists(hook-navbar)) {@include hook-navbar();}
 }
 
+
 /* Container
  ========================================================================== */
 
@@ -90,7 +87,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 .uk-navbar-left,
 .uk-navbar-right,
-[class*='uk-navbar-center'] {
+[class*="uk-navbar-center"] {
     display: flex;
     gap: $navbar-gap;
     /* 1 */
@@ -119,7 +116,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     /* 2 */
     width: max-content;
     box-sizing: border-box;
@@ -134,10 +131,10 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
    top: 0;
 }
 
-.uk-navbar-center-left { right:  unquote('calc(100% + #{$navbar-gap})'); }
+.uk-navbar-center-left { right: unquote('calc(100% + #{$navbar-gap})'); }
 .uk-navbar-center-right { left: unquote('calc(100% + #{$navbar-gap})'); }
 
-[class*='uk-navbar-center-'] {
+[class*="uk-navbar-center-"] {
     width: max-content;
     box-sizing: border-box;
 }

package/src/scss/components/overlay.scss

@@ -54,6 +54,10 @@
     @if(mixin-exists(hook-overlay-default)) {@include hook-overlay-default();}
 }
 
+// Color Mode
+@if ( $overlay-default-color-mode == light ) { .uk-overlay-default { @extend .uk-light !optional;} }
+@if ( $overlay-default-color-mode == dark ) { .uk-overlay-default { @extend .uk-dark !optional;} }
+
 /*
  * Primary
  */

package/src/scss/components/position.scss

@@ -45,11 +45,11 @@
  * 1. Prevent content overflow.
  */
 
-[class*='uk-position-top'],
-[class*='uk-position-bottom'],
-[class*='uk-position-left'],
-[class*='uk-position-right'],
-[class*='uk-position-center'] {
+[class*="uk-position-top"],
+[class*="uk-position-bottom"],
+[class*="uk-position-left"],
+[class*="uk-position-right"],
+[class*="uk-position-center"] {
     position: absolute !important;
     /* 1 */
     max-width: unquote('calc(100% - (var(--uk-position-margin-offset) * 2))');
@@ -126,8 +126,8 @@
 }
 
 /* Vertical */
-[class*='uk-position-center-left'],
-[class*='uk-position-center-right'] {
+[class*="uk-position-center-left"],
+[class*="uk-position-center-right"] {
     top: unquote('calc(50% - var(--uk-position-margin-offset))');
     --uk-position-translate-y: -50%;
     transform: translate(0, var(--uk-position-translate-y));

package/src/scss/components/section.scss

@@ -104,7 +104,6 @@
 
 }
 
-
 /*
  * XLarge
  */
@@ -134,27 +133,30 @@
 
 .uk-section-default {
     background: $section-default-background;
-    --uk-navbar-color: #{$section-default-color-mode};
     @if(mixin-exists(hook-section-default)) {@include hook-section-default();}
 }
 
+@if ( $section-default-color-mode == light ) { .uk-section-default:not(.uk-preserve-color) { @extend .uk-light !optional;} }
+@if ( $section-default-color-mode == dark ) { .uk-section-default:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
+
 /*
  * Muted
  */
 
 .uk-section-muted {
     background: $section-muted-background;
-    --uk-navbar-color: #{$section-muted-color-mode};
     @if(mixin-exists(hook-section-muted)) {@include hook-section-muted();}
 }
 
+@if ( $section-muted-color-mode == light ) { .uk-section-muted:not(.uk-preserve-color) { @extend .uk-light !optional;} }
+@if ( $section-muted-color-mode == dark ) { .uk-section-muted:not(.uk-preserve-color) { @extend .uk-dark !optional;} }
+
 /*
  * Primary
  */
 
 .uk-section-primary {
     background: $section-primary-background;
-    --uk-navbar-color: #{$section-primary-color-mode};
     @if(mixin-exists(hook-section-primary)) {@include hook-section-primary();}
 }
 
@@ -167,7 +169,6 @@
 
 .uk-section-secondary {
     background: $section-secondary-background;
-    --uk-navbar-color: #{$section-secondary-color-mode};
     @if(mixin-exists(hook-section-secondary)) {@include hook-section-secondary();}
 }
 

package/src/scss/components/sticky.scss

@@ -51,7 +51,7 @@
  * Faster animations
  */
 
-.uk-sticky[class*='uk-animation-'] { animation-duration: $sticky-animation-duration; }
+.uk-sticky[class*="uk-animation-"] { animation-duration: $sticky-animation-duration; }
 
 .uk-sticky.uk-animation-reverse { animation-duration: $sticky-reverse-animation-duration; }