uikit 3.13.2-dev.aa6a91433 → 3.13.2-dev.c2867cea0

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.13.2-dev.aa6a91433",
+    "version": "3.13.2-dev.c2867cea0",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/navbar.js

@@ -16,6 +16,7 @@ import {
     isVisible,
     matches,
     noop,
+    offset,
     once,
     parent,
     query,
@@ -274,10 +275,16 @@ export default {
                 return this.dropbar;
             },
 
-            handler() {
+            handler(_, { $el }) {
+                if (!hasClass($el, this.clsDrop)) {
+                    return;
+                }
+
                 if (!parent(this.dropbar)) {
                     after(this.dropbarAnchor || this.$el, this.dropbar);
                 }
+
+                addClass($el, `${this.clsDrop}-dropbar`);
             },
         },
 
@@ -297,12 +304,10 @@ export default {
                     return;
                 }
 
-                this.clsDrop && addClass($el, `${this.clsDrop}-dropbar`);
-
                 if (dir === 'bottom') {
                     this.transitionTo(
-                        $el.offsetHeight +
-                            toFloat(css($el, 'marginTop')) +
+                        offset($el).bottom -
+                            offset(this.dropbar).top +
                             toFloat(css($el, 'marginBottom')),
                         $el
                     );

package/src/js/core/video.js

@@ -34,7 +34,7 @@ export default {
             mute(this.$el);
         }
 
-        this.registerObserver(observeIntersection(this.$el, () => this.$emit('scroll'), {}, false));
+        this.registerObserver(observeIntersection(this.$el, () => this.$emit(), {}, false));
     },
 
     update: {

package/src/js/mixin/position.js

@@ -42,7 +42,7 @@ export default {
                       getOffset(target)[axis === 'x' ? 'right' : 'bottom']
                     : 0;
             }
-            offset += toPx(getCssVar('position-margin-offset', this.$el));
+            offset += toPx(getCssVar('position-margin-offset', element));
 
             const { x, y } = positionAt(
                 element,

package/src/js/util/observer.js

@@ -1,6 +1,7 @@
 import { on } from './event';
 import { toNodes } from './lang';
 import { fastdom } from './fastdom';
+import { inBrowser } from './env';
 
 export function observeIntersection(targets, cb, options, intersecting = true) {
     return observe(
@@ -17,7 +18,7 @@ export function observeIntersection(targets, cb, options, intersecting = true) {
     );
 }
 
-const hasResizeObserver = window.ResizeObserver;
+const hasResizeObserver = inBrowser && window.ResizeObserver;
 export function observeResize(targets, cb, options = { box: 'border-box' }) {
     if (hasResizeObserver) {
         return observe(ResizeObserver, targets, cb, options);

package/src/js/util/style.js

@@ -9,7 +9,6 @@ import {
     isUndefined,
     memoize,
     toNodes,
-    toWindow,
 } from './lang';
 
 const cssNumber = {
@@ -37,13 +36,15 @@ export function css(element, property, value, priority = '') {
             property = propName(property);
 
             if (isUndefined(value)) {
-                return toWindow(element).getComputedStyle(element).getPropertyValue(property);
-            } else if (!value && !isNumber(value)) {
-                element.style.removeProperty(property);
+                return getComputedStyle(element).getPropertyValue(property);
             } else {
                 element.style.setProperty(
                     property,
-                    isNumeric(value) && !cssNumber[property] ? `${value}px` : value,
+                    isNumeric(value) && !cssNumber[property]
+                        ? `${value}px`
+                        : value || isNumber(value)
+                        ? value
+                        : '',
                     priority
                 );
             }

package/src/less/components/drop.less

@@ -21,8 +21,8 @@
 // ========================================================================
 
 @drop-z-index:                              @global-z-index + 20;
-@drop-width:                                300px;
 @drop-margin:                               @global-margin;
+@drop-width:                                300px;
 
 
 /* ========================================================================
@@ -45,6 +45,7 @@
     /* 3 */
     box-sizing: border-box;
     width: @drop-width;
+    max-width: 100vw;
 }
 
 /* Show */

package/src/less/components/dropdown.less

@@ -21,11 +21,11 @@
 // ========================================================================
 
 @dropdown-z-index:                              @global-z-index + 20;
+@dropdown-margin:                               @global-small-margin;
 @dropdown-min-width:                            200px;
 @dropdown-padding:                              15px;
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
-@dropdown-margin:                               @global-small-margin;
 
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
@@ -57,6 +57,7 @@
     /* 3 */
     box-sizing: border-box;
     min-width: @dropdown-min-width;
+    max-width: 100vw;
     /* 4 */
     padding: @dropdown-padding;
     background: @dropdown-background;

package/src/less/components/navbar.less

@@ -56,8 +56,8 @@
 @navbar-subtitle-font-size:                     @global-small-font-size;
 
 @navbar-dropdown-z-index:                       @global-z-index + 20;
-@navbar-dropdown-width:                         200px;
 @navbar-dropdown-margin:                        0;
+@navbar-dropdown-width:                         200px;
 @navbar-dropdown-padding:                       15px;
 @navbar-dropdown-background:                    @global-muted-background;
 @navbar-dropdown-color:                         @global-color;
@@ -353,6 +353,7 @@
     /* 3 */
     box-sizing: border-box;
     width: @navbar-dropdown-width;
+    max-width: 100vw;
     /* 4 */
     padding: @navbar-dropdown-padding;
     background: @navbar-dropdown-background;

package/src/less/components/tooltip.less

@@ -21,6 +21,7 @@
 // ========================================================================
 
 @tooltip-z-index:                               @global-z-index + 30;
+@tooltip-margin:                                10px;
 @tooltip-max-width:                             200px;
 @tooltip-padding-vertical:                      3px;
 @tooltip-padding-horizontal:                    6px;
@@ -29,7 +30,6 @@
 @tooltip-color:                                 @global-inverse-color;
 @tooltip-font-size:                             12px;
 
-@tooltip-margin:                                10px;
 
 
 /* ========================================================================

package/src/scss/components/drop.scss

@@ -21,8 +21,8 @@
 // ========================================================================
 
 $drop-z-index:                               $global-z-index + 20 !default;
-$drop-width:                                 300px !default;
 $drop-margin:                                $global-margin !default;
+$drop-width:                                 300px !default;
 
 
 /* ========================================================================
@@ -45,6 +45,7 @@ $drop-margin:                                $global-margin !default;
     /* 3 */
     box-sizing: border-box;
     width: $drop-width;
+    max-width: 100vw;
 }
 
 /* Show */

package/src/scss/components/dropdown.scss

@@ -21,11 +21,11 @@
 // ========================================================================
 
 $dropdown-z-index:                               $global-z-index + 20 !default;
+$dropdown-margin:                                $global-small-margin !default;
 $dropdown-min-width:                             200px !default;
 $dropdown-padding:                               15px !default;
 $dropdown-background:                            $global-muted-background !default;
 $dropdown-color:                                 $global-color !default;
-$dropdown-margin:                                $global-small-margin !default;
 
 $dropdown-nav-item-color:                        $global-muted-color !default;
 $dropdown-nav-item-hover-color:                  $global-color !default;
@@ -57,6 +57,7 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
     /* 3 */
     box-sizing: border-box;
     min-width: $dropdown-min-width;
+    max-width: 100vw;
     /* 4 */
     padding: $dropdown-padding;
     background: $dropdown-background;

package/src/scss/components/navbar.scss

@@ -56,8 +56,8 @@ $navbar-toggle-hover-color:                      $global-color !default;
 $navbar-subtitle-font-size:                      $global-small-font-size !default;
 
 $navbar-dropdown-z-index:                        $global-z-index + 20 !default;
-$navbar-dropdown-width:                          200px !default;
 $navbar-dropdown-margin:                         0 !default;
+$navbar-dropdown-width:                          200px !default;
 $navbar-dropdown-padding:                        15px !default;
 $navbar-dropdown-background:                     $global-muted-background !default;
 $navbar-dropdown-color:                          $global-color !default;
@@ -353,6 +353,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     /* 3 */
     box-sizing: border-box;
     width: $navbar-dropdown-width;
+    max-width: 100vw;
     /* 4 */
     padding: $navbar-dropdown-padding;
     background: $navbar-dropdown-background;

package/src/scss/components/tooltip.scss

@@ -21,6 +21,7 @@
 // ========================================================================
 
 $tooltip-z-index:                                $global-z-index + 30 !default;
+$tooltip-margin:                                 10px !default;
 $tooltip-max-width:                              200px !default;
 $tooltip-padding-vertical:                       3px !default;
 $tooltip-padding-horizontal:                     6px !default;
@@ -29,7 +30,6 @@ $tooltip-border-radius:                          2px !default;
 $tooltip-color:                                  $global-inverse-color !default;
 $tooltip-font-size:                              12px !default;
 
-$tooltip-margin:                                 10px !default;
 
 
 /* ========================================================================

package/src/scss/variables-theme.scss

@@ -366,14 +366,14 @@ $inverse-dotnav-item-onclick-background: rgba($inverse-global-color, 0.5) !defau
 $inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !default;
 $global-z-index: 1000 !default;
 $drop-z-index: $global-z-index + 20 !default;
-$drop-width: 300px !default;
 $drop-margin: $global-margin !default;
+$drop-width: 300px !default;
 $dropdown-z-index: $global-z-index + 20 !default;
+$dropdown-margin: $global-small-margin !default;
 $dropdown-min-width: 200px !default;
 $dropdown-padding: 25px !default;
 $dropdown-background: $global-background !default;
 $dropdown-color: $global-color !default;
-$dropdown-margin: $global-small-margin !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
 $dropdown-nav-header-color: $global-emphasis-color !default;
@@ -739,8 +739,8 @@ $navbar-toggle-color: $global-muted-color !default;
 $navbar-toggle-hover-color: $global-color !default;
 $navbar-subtitle-font-size: $global-small-font-size !default;
 $navbar-dropdown-z-index: $global-z-index + 20 !default;
-$navbar-dropdown-width: 200px !default;
 $navbar-dropdown-margin: 15px !default;
+$navbar-dropdown-width: 200px !default;
 $navbar-dropdown-padding: 25px !default;
 $navbar-dropdown-background: $global-background !default;
 $navbar-dropdown-color: $global-color !default;
@@ -1015,6 +1015,7 @@ $tile-primary-color-mode: light !default;
 $tile-secondary-background: $global-secondary-background !default;
 $tile-secondary-color-mode: light !default;
 $tooltip-z-index: $global-z-index + 30 !default;
+$tooltip-margin: 10px !default;
 $tooltip-max-width: 200px !default;
 $tooltip-padding-vertical: 3px !default;
 $tooltip-padding-horizontal: 6px !default;
@@ -1022,7 +1023,6 @@ $tooltip-background: #666 !default;
 $tooltip-border-radius: 2px !default;
 $tooltip-color: $global-inverse-color !default;
 $tooltip-font-size: 12px !default;
-$tooltip-margin: 10px !default;
 $totop-padding: 5px !default;
 $totop-color: $global-muted-color !default;
 $totop-hover-color: $global-color !default;

package/src/scss/variables.scss

@@ -365,14 +365,14 @@ $inverse-dotnav-item-onclick-background: rgba($inverse-global-color, 0.5) !defau
 $inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !default;
 $global-z-index: 1000 !default;
 $drop-z-index: $global-z-index + 20 !default;
-$drop-width: 300px !default;
 $drop-margin: $global-margin !default;
+$drop-width: 300px !default;
 $dropdown-z-index: $global-z-index + 20 !default;
+$dropdown-margin: $global-small-margin !default;
 $dropdown-min-width: 200px !default;
 $dropdown-padding: 15px !default;
 $dropdown-background: $global-muted-background !default;
 $dropdown-color: $global-color !default;
-$dropdown-margin: $global-small-margin !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
 $dropdown-nav-header-color: $global-emphasis-color !default;
@@ -737,8 +737,8 @@ $navbar-toggle-color: $global-muted-color !default;
 $navbar-toggle-hover-color: $global-color !default;
 $navbar-subtitle-font-size: $global-small-font-size !default;
 $navbar-dropdown-z-index: $global-z-index + 20 !default;
-$navbar-dropdown-width: 200px !default;
 $navbar-dropdown-margin: 0 !default;
+$navbar-dropdown-width: 200px !default;
 $navbar-dropdown-padding: 15px !default;
 $navbar-dropdown-background: $global-muted-background !default;
 $navbar-dropdown-color: $global-color !default;
@@ -1013,6 +1013,7 @@ $tile-primary-color-mode: light !default;
 $tile-secondary-background: $global-secondary-background !default;
 $tile-secondary-color-mode: light !default;
 $tooltip-z-index: $global-z-index + 30 !default;
+$tooltip-margin: 10px !default;
 $tooltip-max-width: 200px !default;
 $tooltip-padding-vertical: 3px !default;
 $tooltip-padding-horizontal: 6px !default;
@@ -1020,7 +1021,6 @@ $tooltip-background: #666 !default;
 $tooltip-border-radius: 2px !default;
 $tooltip-color: $global-inverse-color !default;
 $tooltip-font-size: 12px !default;
-$tooltip-margin: 10px !default;
 $totop-padding: 5px !default;
 $totop-color: $global-muted-color !default;
 $totop-hover-color: $global-color !default;