uikit 3.15.20-dev.bf544e984 → 3.15.21

package/package.json

@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.15.20-dev.bf544e984",
+    "version": "3.15.21",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/less/theme/base.less

@@ -116,7 +116,7 @@
 .hook-inverse-base-link-hover() {}
 
 .hook-inverse-base-code() {
-    background: @inverse-global-muted-background;
+    background-color: @inverse-global-muted-background;
 }
 
 .hook-inverse-base-heading() {}

package/src/less/theme/form.less

@@ -140,7 +140,7 @@
 .hook-inverse-form-radio() { border-color: @inverse-global-border; }
 .hook-inverse-form-radio-focus() { border-color: @inverse-global-color; }
 
-.hook-inverse-form-radio-checked() { border-color: @inverse-global-color; }
+.hook-inverse-form-radio-checked() { border-color: @inverse-global-primary-background; }
 .hook-inverse-form-radio-checked-focus() {}
 
 .hook-inverse-form-label() { color: @inverse-form-label-color; }

package/src/less/theme/navbar.less

@@ -7,9 +7,9 @@
 // Variables
 // ========================================================================
 
-@navbar-gap:                                    30px;
+@navbar-gap:                                    15px;
 
-@navbar-nav-gap:                                30px;
+@navbar-nav-gap:                                15px;
 
 @navbar-nav-item-padding-horizontal:            0;
 
@@ -27,6 +27,9 @@
 // New
 //
 
+@navbar-gap-m:                                  30px;
+@navbar-nav-gap-m:                              30px;
+
 @navbar-nav-item-text-transform:                uppercase;
 
 @navbar-dropdown-nav-font-size:                 @global-small-font-size;
@@ -133,7 +136,28 @@
 // Miscellaneous
 // ========================================================================
 
-.hook-navbar-misc() {}
+.hook-navbar-misc() {
+
+    /* Tablet landscape and bigger */
+    @media (min-width: @breakpoint-medium) {
+
+        .uk-navbar-left,
+        .uk-navbar-right,
+        [class*='uk-navbar-center'] { gap: @navbar-gap-m; }
+
+        .uk-navbar-center-left { right:  ~'calc(100% + @{navbar-gap-m})'; }
+        .uk-navbar-center-right { left: ~'calc(100% + @{navbar-gap-m})'; }
+
+    }
+
+    /* Tablet landscape and bigger */
+    @media (min-width: @breakpoint-medium) {
+
+        .uk-navbar-nav { gap: @navbar-nav-gap-m; }
+
+    }
+
+}
 
 
 // Inverse

package/src/less/theme/text.less

@@ -14,6 +14,8 @@
 @text-meta-link-color:                          @text-meta-color;
 @text-meta-link-hover-color:                    @global-color;
 
+@internal-text-background-color-gradient:         linear-gradient(90deg, @text-background-color 0%, spin(@text-background-color, 40%) 100%);
+
 
 // Style modifiers
 // ========================================================================
@@ -22,9 +24,9 @@
 
 .hook-text-meta() {
 
-    a { color: @text-meta-link-color; }
+    > a { color: @text-meta-link-color; }
 
-    a:hover {
+    > a:hover {
         color: @text-meta-link-hover-color;
         text-decoration: none;
     }
@@ -43,7 +45,7 @@
 // Background modifier
 // ========================================================================
 
-.hook-text-background() {}
+.hook-text-background() { background-image: @internal-text-background-color-gradient; }
 
 
 // Miscellaneous

package/src/less/theme/thumbnav.less

@@ -11,9 +11,9 @@
 // New
 //
 
-@thumbnav-item-background:                      fade(@global-background, 40%);
-@thumbnav-item-hover-background:                transparent;
-@thumbnav-item-active-background:               transparent;
+@thumbnav-item-gradient:                        linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.4));
+@thumbnav-item-hover-opacity:                   0;
+@thumbnav-item-active-opacity:                  0;
 
 
 // Component
@@ -32,18 +32,18 @@
         bottom: 0;
         left: 0;
         right: 0;
-        background: @thumbnav-item-background;
-        transition: background-color 0.1s ease-in-out;
+        background-image: @thumbnav-item-gradient;
+        transition: opacity 0.1s ease-in-out;
     }
 
 }
 
 .hook-thumbnav-item-hover() {
-    &::after { background-color: @thumbnav-item-hover-background; }
+    &::after { opacity: @thumbnav-item-hover-opacity; }
 }
 
 .hook-thumbnav-item-active() {
-    &::after { background-color: @thumbnav-item-active-background; }
+    &::after { opacity: @thumbnav-item-active-opacity; }
 }
 
 
@@ -56,6 +56,10 @@
 // Inverse
 // ========================================================================
 
-.hook-inverse-thumbnav-item() {}
+@inverse-thumbnav-item-gradient:                linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.4));
+
+.hook-inverse-thumbnav-item() {
+    &::after { background-image: @inverse-thumbnav-item-gradient; }
+}
 .hook-inverse-thumbnav-item-hover() {}
 .hook-inverse-thumbnav-item-active() {}

package/src/scss/mixins-theme.scss

@@ -152,7 +152,7 @@
 @mixin hook-inverse-base-link(){}
 @mixin hook-inverse-base-link-hover(){}
 @mixin hook-inverse-base-code(){
-    background: $inverse-global-muted-background;
+    background-color: $inverse-global-muted-background;
 }
 @mixin hook-inverse-base-heading(){}
 @mixin hook-inverse-base-h1(){}
@@ -863,7 +863,7 @@
 @mixin hook-inverse-form-focus(){ border-color: $inverse-global-color; }
 @mixin hook-inverse-form-radio(){ border-color: $inverse-global-border; }
 @mixin hook-inverse-form-radio-focus(){ border-color: $inverse-global-color; }
-@mixin hook-inverse-form-radio-checked(){ border-color: $inverse-global-color; }
+@mixin hook-inverse-form-radio-checked(){ border-color: $inverse-global-primary-background; }
 @mixin hook-inverse-form-radio-checked-focus(){}
 @mixin hook-inverse-form-label(){ color: $inverse-form-label-color; }
 @mixin hook-inverse-component-form(){
@@ -1849,7 +1849,28 @@
 @mixin hook-navbar-dropdown-nav-header(){}
 @mixin hook-navbar-dropdown-nav-divider(){}
 @mixin hook-navbar-dropbar(){}
-@mixin hook-navbar-misc(){}
+@mixin hook-navbar-misc(){
+
+    /* Tablet landscape and bigger */
+    @media (min-width: $breakpoint-medium) {
+
+        .uk-navbar-left,
+        .uk-navbar-right,
+        [class*='uk-navbar-center'] { gap: $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})'); }
+
+    }
+
+    /* Tablet landscape and bigger */
+    @media (min-width: $breakpoint-medium) {
+
+        .uk-navbar-nav { gap: $navbar-nav-gap-m; }
+
+    }
+
+}
 @mixin hook-inverse-navbar-nav-item(){}
 @mixin hook-inverse-navbar-nav-item-hover(){}
 @mixin hook-inverse-navbar-nav-item-onclick(){}
@@ -2090,9 +2111,9 @@
 @mixin hook-text-lead(){}
 @mixin hook-text-meta(){
 
-    a { color: $text-meta-link-color; }
+    > a { color: $text-meta-link-color; }
 
-    a:hover {
+    > a:hover {
         color: $text-meta-link-hover-color;
         text-decoration: none;
     }
@@ -2100,7 +2121,7 @@
 }
 @mixin hook-text-small(){}
 @mixin hook-text-large(){}
-@mixin hook-text-background(){}
+@mixin hook-text-background(){ background-image: $internal-text-background-color-gradient; }
 @mixin hook-text-misc(){}
 @mixin hook-inverse-text-lead(){}
 @mixin hook-inverse-text-meta(){}
@@ -2116,19 +2137,21 @@
         bottom: 0;
         left: 0;
         right: 0;
-        background: $thumbnav-item-background;
-        transition: background-color 0.1s ease-in-out;
+        background-image: $thumbnav-item-gradient;
+        transition: opacity 0.1s ease-in-out;
     }
 
 }
 @mixin hook-thumbnav-item-hover(){
-    &::after { background-color: $thumbnav-item-hover-background; }
+    &::after { opacity: $thumbnav-item-hover-opacity; }
 }
 @mixin hook-thumbnav-item-active(){
-    &::after { background-color: $thumbnav-item-active-background; }
+    &::after { opacity: $thumbnav-item-active-opacity; }
 }
 @mixin hook-thumbnav-misc(){}
-@mixin hook-inverse-thumbnav-item(){}
+@mixin hook-inverse-thumbnav-item(){
+    &::after { background-image: $inverse-thumbnav-item-gradient; }
+}
 @mixin hook-inverse-thumbnav-item-hover(){}
 @mixin hook-inverse-thumbnav-item-active(){}
 @mixin hook-inverse-component-thumbnav(){

package/src/scss/theme/navbar.scss

@@ -7,9 +7,9 @@
 // Variables
 // ========================================================================
 
-$navbar-gap:                                     30px !default;
+$navbar-gap:                                     15px !default;
 
-$navbar-nav-gap:                                 30px !default;
+$navbar-nav-gap:                                 15px !default;
 
 $navbar-nav-item-padding-horizontal:             0 !default;
 
@@ -27,6 +27,9 @@ $navbar-dropdown-nav-subtitle-font-size:         12px !default;
 // New
 //
 
+$navbar-gap-m:                                   30px !default;
+$navbar-nav-gap-m:                               30px !default;
+
 $navbar-nav-item-text-transform:                 uppercase !default;
 
 $navbar-dropdown-nav-font-size:                  $global-small-font-size !default;
@@ -129,7 +132,7 @@ $navbar-dropdown-box-shadow:                     0 5px 12px rgba(0,0,0,0.15) !de
 // Miscellaneous
 // ========================================================================
 
-// @mixin hook-navbar-misc(){}
+
 
 
 // Inverse

package/src/scss/theme/text.scss

@@ -14,6 +14,8 @@
 $text-meta-link-color:                           $text-meta-color !default;
 $text-meta-link-hover-color:                     $global-color !default;
 
+$internal-text-background-color-gradient:          linear-gradient(90deg, $text-background-color 0%, spin($text-background-color, 40%) 100%) !default;
+
 
 // Style modifiers
 // ========================================================================
@@ -34,7 +36,7 @@ $text-meta-link-hover-color:                     $global-color !default;
 // Background modifier
 // ========================================================================
 
-// @mixin hook-text-background(){}
+
 
 
 // Miscellaneous

package/src/scss/theme/thumbnav.scss

@@ -11,9 +11,9 @@
 // New
 //
 
-$thumbnav-item-background:                       rgba($global-background, 0.4) !default;
-$thumbnav-item-hover-background:                 transparent !default;
-$thumbnav-item-active-background:                transparent !default;
+$thumbnav-item-gradient:                         linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.4)) !default;
+$thumbnav-item-hover-opacity:                    0 !default;
+$thumbnav-item-active-opacity:                   0 !default;
 
 
 // Component
@@ -37,6 +37,8 @@ $thumbnav-item-active-background:                transparent !default;
 // Inverse
 // ========================================================================
 
-// @mixin hook-inverse-thumbnav-item(){}
+$inverse-thumbnav-item-gradient:                 linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.4)) !default;
+
+
 // @mixin hook-inverse-thumbnav-item-hover(){}
 // @mixin hook-inverse-thumbnav-item-active(){}

package/src/scss/variables-theme.scss

@@ -779,9 +779,9 @@ $inverse-nav-secondary-sublist-item-hover-color: $inverse-global-color !default;
 $inverse-nav-secondary-sublist-item-active-color: $inverse-global-emphasis-color !default;
 $inverse-nav-dividers-border: $inverse-global-border !default;
 $navbar-background: $global-muted-background !default;
-$navbar-gap: 30px !default;
+$navbar-gap: 15px !default;
 $navbar-color-mode: none !default;
-$navbar-nav-gap: 30px !default;
+$navbar-nav-gap: 15px !default;
 $navbar-nav-item-height: 80px !default;
 $navbar-nav-item-padding-horizontal: 0 !default;
 $navbar-nav-item-color: $global-muted-color !default;
@@ -1236,6 +1236,8 @@ $nav-background-item-hover-background: $global-muted-background !default;
 $nav-background-item-active-background: $global-muted-background !default;
 $inverse-nav-background-item-hover-background: $inverse-global-muted-background !default;
 $inverse-nav-background-item-active-background: $inverse-global-muted-background !default;
+$navbar-gap-m: 30px !default;
+$navbar-nav-gap-m: 30px !default;
 $navbar-nav-item-text-transform: uppercase !default;
 $navbar-dropdown-nav-font-size: $global-small-font-size !default;
 $navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
@@ -1257,6 +1259,8 @@ $table-striped-border-width: $global-border-width !default;
 $table-striped-border: $global-border !default;
 $text-meta-link-color: $text-meta-color !default;
 $text-meta-link-hover-color: $global-color !default;
-$thumbnav-item-background: rgba($global-background, 0.4) !default;
-$thumbnav-item-hover-background: transparent !default;
-$thumbnav-item-active-background: transparent !default;
+$internal-text-background-color-gradient: linear-gradient(90deg, $text-background-color 0%, spin($text-background-color, 40%) 100%) !default;
+$thumbnav-item-gradient: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.4)) !default;
+$thumbnav-item-hover-opacity: 0 !default;
+$thumbnav-item-active-opacity: 0 !default;
+$inverse-thumbnav-item-gradient: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.4)) !default;