uikit 3.16.19 → 3.16.20-dev.8a382829d

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.16.19",
+  "version": "3.16.20-dev.8a382829d",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/toggle.js

@@ -7,6 +7,7 @@ import {
     hasAttr,
     hasClass,
     includes,
+    isBoolean,
     isFocusable,
     isTag,
     isTouch,
@@ -72,7 +73,7 @@ export default {
             handler(e) {
                 this._preventClick = null;
 
-                if (!isTouch(e) || this._showState || this.$el.disabled) {
+                if (!isTouch(e) || isBoolean(this._showState) || this.$el.disabled) {
                     return;
                 }
 
@@ -112,18 +113,20 @@ export default {
                 // Skip hide if still hovered or focused
                 if (
                     !show &&
-                    ((e.type === pointerLeave && matches(this.$el, ':focus')) ||
+                    (!isBoolean(this._showState) ||
+                        expanded === this._showState ||
+                        (e.type === pointerLeave && matches(this.$el, ':focus')) ||
                         (e.type === 'blur' && matches(this.$el, ':hover')))
                 ) {
+                    // Reset showState if already hidden
+                    if (expanded === this._showState) {
+                        this._showState = null;
+                    }
                     return;
                 }
 
-                // Skip if state does not change e.g. hover + focus received
-                if (this._showState && show && expanded !== this._showState) {
-                    // Ensure reset if state has changed through click
-                    if (!show) {
-                        this._showState = null;
-                    }
+                // Skip show if state does not change e.g. hover + focus received
+                if (show && isBoolean(this._showState) && expanded !== this._showState) {
                     return;
                 }
 

package/src/less/components/visibility.less

@@ -129,7 +129,6 @@
     clip-path: inset(50%) !important;
     /* 4 */
     white-space: nowrap !important;
-
 }
 
 /*

package/src/less/theme/_import.less

@@ -24,8 +24,8 @@
 // Common
 @import "close.less";
 @import "spinner.less";
-@import "marker.less";
 @import "totop.less";
+@import "marker.less";
 @import "alert.less";
 @import "placeholder.less";
 @import "badge.less";

package/src/scss/components/accordion.scss

@@ -14,14 +14,14 @@
 // Variables
 // ========================================================================
 
-$accordion-item-margin-top:                     $global-margin !default;
+// $accordion-item-margin-top:                     $global-margin !default;
 
-$accordion-title-font-size:                     $global-medium-font-size !default;
-$accordion-title-line-height:                   1.4 !default;
-$accordion-title-color:                         $global-emphasis-color !default;
-$accordion-title-hover-color:                   $global-color !default;
+// $accordion-title-font-size:                     $global-medium-font-size !default;
+// $accordion-title-line-height:                   1.4 !default;
+// $accordion-title-color:                         $global-emphasis-color !default;
+// $accordion-title-hover-color:                   $global-color !default;
 
-$accordion-content-margin-top:                  $global-margin !default;
+// $accordion-content-margin-top:                  $global-margin !default;
 
 
 /* ========================================================================
@@ -95,8 +95,8 @@ $accordion-content-margin-top:                  $global-margin !default;
 // Inverse
 // ========================================================================
 
-$inverse-accordion-title-color:              $inverse-global-emphasis-color !default;
-$inverse-accordion-title-hover-color:        $inverse-global-color !default;
+// $inverse-accordion-title-color:              $inverse-global-emphasis-color !default;
+// $inverse-accordion-title-hover-color:        $inverse-global-color !default;
 
 
 

package/src/scss/components/alert.scss

@@ -16,26 +16,26 @@
 // Variables
 // ========================================================================
 
-$alert-margin-vertical:                          $global-margin !default;
-$alert-padding:                                  15px !default;
-$alert-padding-right:                            $alert-padding + 14px !default;
-$alert-background:                               $global-muted-background !default;
-$alert-color:                                    $global-color !default;
+// $alert-margin-vertical:                          $global-margin !default;
+// $alert-padding:                                  15px !default;
+// $alert-padding-right:                            $alert-padding + 14px !default;
+// $alert-background:                               $global-muted-background !default;
+// $alert-color:                                    $global-color !default;
 
-$alert-close-top:                                $alert-padding + 5px !default;
-$alert-close-right:                              $alert-padding !default;
+// $alert-close-top:                                $alert-padding + 5px !default;
+// $alert-close-right:                              $alert-padding !default;
 
-$alert-primary-background:                       lighten(mix(white, $global-primary-background, 40%), 20%) !default;
-$alert-primary-color:                            $global-primary-background !default;
+// $alert-primary-background:                       lighten(mix(white, $global-primary-background, 40%), 20%) !default;
+// $alert-primary-color:                            $global-primary-background !default;
 
-$alert-success-background:                       lighten(mix(white, $global-success-background, 40%), 25%) !default;
-$alert-success-color:                            $global-success-background !default;
+// $alert-success-background:                       lighten(mix(white, $global-success-background, 40%), 25%) !default;
+// $alert-success-color:                            $global-success-background !default;
 
-$alert-warning-background:                       lighten(mix(white, $global-warning-background, 45%), 15%) !default;
-$alert-warning-color:                            $global-warning-background !default;
+// $alert-warning-background:                       lighten(mix(white, $global-warning-background, 45%), 15%) !default;
+// $alert-warning-color:                            $global-warning-background !default;
 
-$alert-danger-background:                        lighten(mix(white, $global-danger-background, 40%), 20%) !default;
-$alert-danger-color:                             $global-danger-background !default;
+// $alert-danger-background:                        lighten(mix(white, $global-danger-background, 40%), 20%) !default;
+// $alert-danger-color:                             $global-danger-background !default;
 
 
 /* ========================================================================

package/src/scss/components/align.scss

@@ -11,10 +11,10 @@
 // Variables
 // ========================================================================
 
-$align-margin-horizontal:                        $global-gutter !default;
-$align-margin-vertical:                          $global-gutter !default;
+// $align-margin-horizontal:                        $global-gutter !default;
+// $align-margin-vertical:                          $global-gutter !default;
 
-$align-margin-horizontal-l:                      $global-medium-gutter !default;
+// $align-margin-horizontal-l:                      $global-medium-gutter !default;
 
 
 /* ========================================================================

package/src/scss/components/animation.scss

@@ -26,14 +26,14 @@
 // Variables
 // ========================================================================
 
-$animation-duration:                             0.5s !default;
-$animation-fade-duration:                        0.8s !default;
-$animation-stroke-duration:                      2s !default;
-$animation-kenburns-duration:                    15s !default;
-$animation-fast-duration:                        0.1s !default;
-
-$animation-slide-small-translate:                10px !default;
-$animation-slide-medium-translate:               50px !default;
+// $animation-duration:                             0.5s !default;
+// $animation-fade-duration:                        0.8s !default;
+// $animation-stroke-duration:                      2s !default;
+// $animation-kenburns-duration:                    15s !default;
+// $animation-fast-duration:                        0.1s !default;
+
+// $animation-slide-small-translate:                10px !default;
+// $animation-slide-medium-translate:               50px !default;
 
 
 /* ========================================================================

package/src/scss/components/article.scss

@@ -12,15 +12,15 @@
 // Variables
 // ========================================================================
 
-$article-margin-top:                             $global-large-margin !default;
+// $article-margin-top:                             $global-large-margin !default;
 
-$article-title-font-size-m:                      $global-2xlarge-font-size !default;
-$article-title-font-size:                        $article-title-font-size-m * 0.85 !default;
-$article-title-line-height:                      1.2 !default;
+// $article-title-font-size-m:                      $global-2xlarge-font-size !default;
+// $article-title-font-size:                        $article-title-font-size-m * 0.85 !default;
+// $article-title-line-height:                      1.2 !default;
 
-$article-meta-font-size:                         $global-small-font-size !default;
-$article-meta-line-height:                       1.4 !default;
-$article-meta-color:                             $global-muted-color !default;
+// $article-meta-font-size:                         $global-small-font-size !default;
+// $article-meta-line-height:                       1.4 !default;
+// $article-meta-color:                             $global-muted-color !default;
 
 
 /* ========================================================================
@@ -91,7 +91,7 @@ $article-meta-color:                             $global-muted-color !default;
 // Inverse
 // ========================================================================
 
-$inverse-article-meta-color:                    $inverse-global-muted-color !default;
+// $inverse-article-meta-color:                    $inverse-global-muted-color !default;
 
 
 

package/src/scss/components/background.scss

@@ -9,10 +9,10 @@
 // Variables
 // ========================================================================
 
-$background-default-background:                  $global-background !default;
-$background-muted-background:                    $global-muted-background !default;
-$background-primary-background:                  $global-primary-background !default;
-$background-secondary-background:                $global-secondary-background !default;
+// $background-default-background:                  $global-background !default;
+// $background-muted-background:                    $global-muted-background !default;
+// $background-primary-background:                  $global-primary-background !default;
+// $background-secondary-background:                $global-secondary-background !default;
 
 
 /* ========================================================================

package/src/scss/components/badge.scss

@@ -9,13 +9,13 @@
 // Variables
 // ========================================================================
 
-$badge-size:                                     18px !default;
-$badge-padding-vertical:                         0 !default;
-$badge-padding-horizontal:                       5px !default;
-$badge-border-radius:                            500px !default;
-$badge-background:                               $global-primary-background !default;
-$badge-color:                                    $global-inverse-color !default;
-$badge-font-size:                                11px !default;
+// $badge-size:                                     18px !default;
+// $badge-padding-vertical:                         0 !default;
+// $badge-padding-horizontal:                       5px !default;
+// $badge-border-radius:                            500px !default;
+// $badge-background:                               $global-primary-background !default;
+// $badge-color:                                    $global-inverse-color !default;
+// $badge-font-size:                                11px !default;
 
 
 /* ========================================================================
@@ -69,8 +69,8 @@ $badge-font-size:                                11px !default;
 // Inverse
 // ========================================================================
 
-$inverse-badge-background:                      $inverse-global-primary-background !default;
-$inverse-badge-color:                           $inverse-global-inverse-color !default;
+// $inverse-badge-background:                      $inverse-global-primary-background !default;
+// $inverse-badge-color:                           $inverse-global-inverse-color !default;
 
 
 

package/src/scss/components/base.scss

@@ -11,78 +11,78 @@
 // Variables
 // ========================================================================
 
-$base-body-background:                           $global-background !default;
-$base-body-font-family:                          $global-font-family !default;
-$base-body-font-weight:                          normal !default;
-$base-body-font-size:                            $global-font-size !default;
-$base-body-line-height:                          $global-line-height !default;
-$base-body-color:                                $global-color !default;
-
-$base-link-color:                                $global-link-color !default;
-$base-link-text-decoration:                      none !default;
-$base-link-hover-color:                          $global-link-hover-color !default;
-$base-link-hover-text-decoration:                underline !default;
-
-$base-strong-font-weight:                        bolder !default;
-$base-code-font-size:                            $global-small-font-size !default;
-$base-code-font-family:                          Consolas, monaco, monospace !default;
-$base-code-color:                                $global-danger-background !default;
-$base-em-color:                                  $global-danger-background !default;
-$base-ins-background:                            #ffd !default;
-$base-ins-color:                                 $global-color !default;
-$base-mark-background:                           #ffd !default;
-$base-mark-color:                                $global-color !default;
-$base-quote-font-style:                          italic !default;
-$base-small-font-size:                           80% !default;
-
-$base-margin-vertical:                           $global-margin !default;
-
-$base-heading-font-family:                       $global-font-family !default;
-$base-heading-font-weight:                       normal !default;
-$base-heading-color:                             $global-emphasis-color !default;
-$base-heading-text-transform:                    none !default;
-$base-heading-margin-top:                        $global-medium-margin !default;
-$base-h1-font-size-m:                            $global-2xlarge-font-size !default;
-$base-h1-font-size:                              $base-h1-font-size-m * 0.85 !default;
-$base-h1-line-height:                            1.2 !default;
-$base-h2-font-size-m:                            $global-xlarge-font-size !default;
-$base-h2-font-size:                              $base-h2-font-size-m * 0.85 !default;
-$base-h2-line-height:                            1.3 !default;
-$base-h3-font-size:                              $global-large-font-size !default;
-$base-h3-line-height:                            1.4 !default;
-$base-h4-font-size:                              $global-medium-font-size !default;
-$base-h4-line-height:                            1.4 !default;
-$base-h5-font-size:                              $global-font-size !default;
-$base-h5-line-height:                            1.4 !default;
-$base-h6-font-size:                              $global-small-font-size !default;
-$base-h6-line-height:                            1.4 !default;
-
-$base-list-padding-left:                         30px !default;
-
-$base-hr-margin-vertical:                        $global-margin !default;
-$base-hr-border-width:                           $global-border-width !default;
-$base-hr-border:                                 $global-border !default;
-
-$base-blockquote-font-size:                      $global-medium-font-size !default;
-$base-blockquote-line-height:                    1.5 !default;
-$base-blockquote-font-style:                     italic !default;
-$base-blockquote-margin-vertical:                $global-margin !default;
-$base-blockquote-footer-margin-top:              $global-small-margin !default;
-$base-blockquote-footer-font-size:               $global-small-font-size !default;
-$base-blockquote-footer-line-height:             1.5 !default;
-
-$base-pre-font-size:                             $global-small-font-size !default;
-$base-pre-line-height:                           1.5 !default;
-$base-pre-font-family:                           $base-code-font-family !default;
-$base-pre-color:                                 $global-color !default;
-
-$base-focus-outline-width:                       2px !default;
-$base-focus-outline-style:                       dotted !default;
-$base-focus-outline:                             $global-emphasis-color !default;
-$base-focus-outline-offset:                      1px !default;
-
-$base-selection-background:                      #39f !default;
-$base-selection-color:                           $global-inverse-color !default;
+// $base-body-background:                           $global-background !default;
+// $base-body-font-family:                          $global-font-family !default;
+// $base-body-font-weight:                          normal !default;
+// $base-body-font-size:                            $global-font-size !default;
+// $base-body-line-height:                          $global-line-height !default;
+// $base-body-color:                                $global-color !default;
+
+// $base-link-color:                                $global-link-color !default;
+// $base-link-text-decoration:                      none !default;
+// $base-link-hover-color:                          $global-link-hover-color !default;
+// $base-link-hover-text-decoration:                underline !default;
+
+// $base-strong-font-weight:                        bolder !default;
+// $base-code-font-size:                            $global-small-font-size !default;
+// $base-code-font-family:                          Consolas, monaco, monospace !default;
+// $base-code-color:                                $global-danger-background !default;
+// $base-em-color:                                  $global-danger-background !default;
+// $base-ins-background:                            #ffd !default;
+// $base-ins-color:                                 $global-color !default;
+// $base-mark-background:                           #ffd !default;
+// $base-mark-color:                                $global-color !default;
+// $base-quote-font-style:                          italic !default;
+// $base-small-font-size:                           80% !default;
+
+// $base-margin-vertical:                           $global-margin !default;
+
+// $base-heading-font-family:                       $global-font-family !default;
+// $base-heading-font-weight:                       normal !default;
+// $base-heading-color:                             $global-emphasis-color !default;
+// $base-heading-text-transform:                    none !default;
+// $base-heading-margin-top:                        $global-medium-margin !default;
+// $base-h1-font-size-m:                            $global-2xlarge-font-size !default;
+// $base-h1-font-size:                              $base-h1-font-size-m * 0.85 !default;
+// $base-h1-line-height:                            1.2 !default;
+// $base-h2-font-size-m:                            $global-xlarge-font-size !default;
+// $base-h2-font-size:                              $base-h2-font-size-m * 0.85 !default;
+// $base-h2-line-height:                            1.3 !default;
+// $base-h3-font-size:                              $global-large-font-size !default;
+// $base-h3-line-height:                            1.4 !default;
+// $base-h4-font-size:                              $global-medium-font-size !default;
+// $base-h4-line-height:                            1.4 !default;
+// $base-h5-font-size:                              $global-font-size !default;
+// $base-h5-line-height:                            1.4 !default;
+// $base-h6-font-size:                              $global-small-font-size !default;
+// $base-h6-line-height:                            1.4 !default;
+
+// $base-list-padding-left:                         30px !default;
+
+// $base-hr-margin-vertical:                        $global-margin !default;
+// $base-hr-border-width:                           $global-border-width !default;
+// $base-hr-border:                                 $global-border !default;
+
+// $base-blockquote-font-size:                      $global-medium-font-size !default;
+// $base-blockquote-line-height:                    1.5 !default;
+// $base-blockquote-font-style:                     italic !default;
+// $base-blockquote-margin-vertical:                $global-margin !default;
+// $base-blockquote-footer-margin-top:              $global-small-margin !default;
+// $base-blockquote-footer-font-size:               $global-small-font-size !default;
+// $base-blockquote-footer-line-height:             1.5 !default;
+
+// $base-pre-font-size:                             $global-small-font-size !default;
+// $base-pre-line-height:                           1.5 !default;
+// $base-pre-font-family:                           $base-code-font-family !default;
+// $base-pre-color:                                 $global-color !default;
+
+// $base-focus-outline-width:                       2px !default;
+// $base-focus-outline-style:                       dotted !default;
+// $base-focus-outline:                             $global-emphasis-color !default;
+// $base-focus-outline-offset:                      1px !default;
+
+// $base-selection-background:                      #39f !default;
+// $base-selection-color:                           $global-inverse-color !default;
 
 
 /* ========================================================================
@@ -585,14 +585,14 @@ template { display: none; }
 // Inverse
 // ========================================================================
 
-$inverse-base-color:                            $inverse-global-color !default;
-$inverse-base-link-color:                       $inverse-global-emphasis-color !default;
-$inverse-base-link-hover-color:                 $inverse-global-emphasis-color !default;
-$inverse-base-code-color:                       $inverse-global-color !default;
-$inverse-base-em-color:                         $inverse-global-emphasis-color !default;
-$inverse-base-heading-color:                    $inverse-global-emphasis-color !default;
-$inverse-base-hr-border:                        $inverse-global-border !default;
-$inverse-base-focus-outline:                    $inverse-global-emphasis-color !default;
+// $inverse-base-color:                            $inverse-global-color !default;
+// $inverse-base-link-color:                       $inverse-global-emphasis-color !default;
+// $inverse-base-link-hover-color:                 $inverse-global-emphasis-color !default;
+// $inverse-base-code-color:                       $inverse-global-color !default;
+// $inverse-base-em-color:                         $inverse-global-emphasis-color !default;
+// $inverse-base-heading-color:                    $inverse-global-emphasis-color !default;
+// $inverse-base-hr-border:                        $inverse-global-border !default;
+// $inverse-base-focus-outline:                    $inverse-global-emphasis-color !default;
 
 
 

package/src/scss/components/breadcrumb.scss

@@ -11,16 +11,16 @@
 // Variables
 // ========================================================================
 
-$breadcrumb-item-font-size:                          $global-small-font-size !default;
-$breadcrumb-item-color:                              $global-muted-color !default;
-$breadcrumb-item-hover-color:                        $global-color !default;
-$breadcrumb-item-hover-text-decoration:              none !default;
-$breadcrumb-item-active-color:                       $global-color !default;
+// $breadcrumb-item-font-size:                          $global-small-font-size !default;
+// $breadcrumb-item-color:                              $global-muted-color !default;
+// $breadcrumb-item-hover-color:                        $global-color !default;
+// $breadcrumb-item-hover-text-decoration:              none !default;
+// $breadcrumb-item-active-color:                       $global-color !default;
 
-$breadcrumb-divider:                                 "/" !default;
-$breadcrumb-divider-margin-horizontal:               20px !default;
-$breadcrumb-divider-font-size:                       $breadcrumb-item-font-size !default;
-$breadcrumb-divider-color:                           $global-muted-color !default;
+// $breadcrumb-divider:                                 "/" !default;
+// $breadcrumb-divider-margin-horizontal:               20px !default;
+// $breadcrumb-divider-font-size:                       $breadcrumb-item-font-size !default;
+// $breadcrumb-divider-color:                           $global-muted-color !default;
 
 
 /* ========================================================================
@@ -108,10 +108,10 @@ $breadcrumb-divider-color:                           $global-muted-color !defaul
 // Inverse
 // ========================================================================
 
-$inverse-breadcrumb-item-color:                 $inverse-global-muted-color !default;
-$inverse-breadcrumb-item-hover-color:           $inverse-global-color !default;
-$inverse-breadcrumb-item-active-color:          $inverse-global-color !default;
-$inverse-breadcrumb-divider-color:              $inverse-global-muted-color !default;
+// $inverse-breadcrumb-item-color:                 $inverse-global-muted-color !default;
+// $inverse-breadcrumb-item-hover-color:           $inverse-global-color !default;
+// $inverse-breadcrumb-item-active-color:          $inverse-global-color !default;
+// $inverse-breadcrumb-divider-color:              $inverse-global-muted-color !default;