uikit 3.13.2-dev.d4aecc3e6 → 3.13.2

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;
 
 
 /* ========================================================================
@@ -41,25 +41,17 @@ $drop-margin:                                $global-margin !default;
     /* 2 */
     position: absolute;
     z-index: $drop-z-index;
+    --uk-position-margin-offset: #{$drop-margin};
     /* 3 */
     box-sizing: border-box;
     width: $drop-width;
+    max-width: 100vw;
 }
 
 /* Show */
 .uk-drop.uk-open { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-drop-top'] { margin-top: (-$drop-margin); }
-[class*='uk-drop-bottom'] { margin-top: $drop-margin; }
-[class*='uk-drop-left'] { margin-left: (-$drop-margin); }
-[class*='uk-drop-right'] { margin-left: $drop-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

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;
@@ -53,9 +53,11 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
     /* 2 */
     position: absolute;
     z-index: $dropdown-z-index;
+    --uk-position-margin-offset: #{$dropdown-margin};
     /* 3 */
     box-sizing: border-box;
     min-width: $dropdown-min-width;
+    max-width: 100vw;
     /* 4 */
     padding: $dropdown-padding;
     background: $dropdown-background;
@@ -120,16 +122,6 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
 .uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: $dropdown-nav-sublist-item-hover-color; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-dropdown-top'] { margin-top: (-$dropdown-margin); }
-[class*='uk-dropdown-bottom'] { margin-top: $dropdown-margin; }
-[class*='uk-dropdown-left'] { margin-left: (-$dropdown-margin); }
-[class*='uk-dropdown-right'] { margin-left: $dropdown-margin; }
-
-
 /* Grid modifiers
  ========================================================================== */
 

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;
@@ -66,6 +66,7 @@ $navbar-dropdown-grid-gutter-vertical:           $navbar-dropdown-grid-gutter-ho
 
 $navbar-dropdown-dropbar-margin-top:             0 !default;
 $navbar-dropdown-dropbar-margin-bottom:          $navbar-dropdown-dropbar-margin-top !default;
+$navbar-dropdown-dropbar-padding:                $navbar-nav-item-padding-horizontal !default;
 
 $navbar-dropdown-nav-item-color:                 $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color:           $global-color !default;
@@ -348,9 +349,11 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     /* 2 */
     position: absolute;
     z-index: $navbar-dropdown-z-index;
+    --uk-position-margin-offset: #{$navbar-dropdown-margin};
     /* 3 */
     box-sizing: border-box;
     width: $navbar-dropdown-width;
+    max-width: 100vw;
     /* 4 */
     padding: $navbar-dropdown-padding;
     background: $navbar-dropdown-background;
@@ -361,16 +364,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
-/*
- * Direction / Alignment modifiers
- */
-
-/* Direction */
-[class*='uk-navbar-dropdown-top'] { margin-top: (-$navbar-dropdown-margin); }
-[class*='uk-navbar-dropdown-bottom'] { margin-top: $navbar-dropdown-margin; }
-[class*='uk-navbar-dropdown-left'] { margin-left: (-$navbar-dropdown-margin); }
-[class*='uk-navbar-dropdown-right'] { margin-left: $navbar-dropdown-margin; }
-
 /*
  * Grid
  * Adopts `uk-grid`
@@ -397,11 +390,17 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 /*
  * Dropbar modifier
+ * 1. Set position
+ * 2. Bottom padding for dropbar
+ * 3. Horizontal padding
  */
 
 .uk-navbar-dropdown-dropbar {
-    margin-top: $navbar-dropdown-dropbar-margin-top;
+    /* 1 */
+    --uk-position-margin-offset: #{$navbar-dropdown-dropbar-margin-top};
+    /* 2 */
     margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
+    padding: $navbar-dropdown-dropbar-padding;
     @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
 }
 
@@ -468,20 +467,12 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
  ========================================================================== */
 
 .uk-navbar-dropbar {
-    background: $navbar-dropbar-background;
-    @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
-}
-
-/*
- * Slide modifier
- */
-
-.uk-navbar-dropbar-slide {
     position: absolute;
     z-index: $navbar-dropbar-z-index;
     left: 0;
     right: 0;
-    @if(mixin-exists(hook-navbar-dropbar-slide)) {@include hook-navbar-dropbar-slide();}
+    background: $navbar-dropbar-background;
+    @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
 }
 
 
@@ -514,7 +505,6 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 // @mixin hook-navbar-dropdown-nav-header(){}
 // @mixin hook-navbar-dropdown-nav-divider(){}
 // @mixin hook-navbar-dropbar(){}
-// @mixin hook-navbar-dropbar-slide(){}
 // @mixin hook-navbar-misc(){}
 
 

package/src/scss/components/offcanvas.scss

@@ -35,9 +35,11 @@ $offcanvas-bar-width-m:                          350px !default;
 $offcanvas-bar-padding-vertical-m:               $global-medium-gutter !default;
 $offcanvas-bar-padding-horizontal-m:             $global-medium-gutter !default;
 
-$offcanvas-close-position:                       20px !default;
+$offcanvas-close-position:                       5px !default;
 $offcanvas-close-padding:                        5px !default;
 
+$offcanvas-close-position-m:                     20px !default;
+
 $offcanvas-overlay-background:                   rgba(0,0,0,0.1) !default;
 
 
@@ -206,6 +208,22 @@ $offcanvas-overlay-background:                   rgba(0,0,0,0.1) !default;
     @if(mixin-exists(hook-offcanvas-close)) {@include hook-offcanvas-close();}
 }
 
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-offcanvas-close {
+        top: $offcanvas-close-position-m;
+        right: $offcanvas-close-position-m;
+    }
+
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+.uk-offcanvas-close:first-child + * { margin-top: 0; }
+
 
 /* Overlay
  ========================================================================== */

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;
 
 
 /* ========================================================================
@@ -50,6 +50,7 @@ $tooltip-margin:                                 10px !default;
     /* 2 */
     position: absolute;
     z-index: $tooltip-z-index;
+    --uk-position-margin-offset: #{$dropdown-margin};
     /* 3 */
     top: 0;
     /* 4 */
@@ -68,16 +69,6 @@ $tooltip-margin:                                 10px !default;
 .uk-tooltip.uk-active { display: block; }
 
 
-/* Direction / Alignment modifiers
- ========================================================================== */
-
-/* Direction */
-[class*='uk-tooltip-top'] { margin-top: (-$tooltip-margin); }
-[class*='uk-tooltip-bottom'] { margin-top: $tooltip-margin; }
-[class*='uk-tooltip-left'] { margin-left: (-$tooltip-margin); }
-[class*='uk-tooltip-right'] { margin-left: $tooltip-margin; }
-
-
 // Hooks
 // ========================================================================
 

package/src/scss/mixins-theme.scss

@@ -1754,8 +1754,7 @@
 @mixin hook-navbar-dropdown-nav-item-active(){}
 @mixin hook-navbar-dropdown-nav-header(){}
 @mixin hook-navbar-dropdown-nav-divider(){}
-@mixin hook-navbar-dropbar(){}
-@mixin hook-navbar-dropbar-slide(){ box-shadow: $navbar-dropbar-box-shadow; }
+@mixin hook-navbar-dropbar(){ box-shadow: $navbar-dropbar-box-shadow; }
 @mixin hook-navbar-misc(){
 
     /*

package/src/scss/mixins.scss

@@ -1481,7 +1481,6 @@
 @mixin hook-navbar-dropdown-nav-header(){}
 @mixin hook-navbar-dropdown-nav-divider(){}
 @mixin hook-navbar-dropbar(){}
-@mixin hook-navbar-dropbar-slide(){}
 @mixin hook-navbar-misc(){}
 @mixin hook-inverse-navbar-nav-item(){}
 @mixin hook-inverse-navbar-nav-item-hover(){}

package/src/scss/theme/navbar.scss

@@ -113,8 +113,6 @@ $navbar-dropdown-grid-divider-border:            $navbar-dropdown-nav-divider-bo
 // Dropbar
 // ========================================================================
 
-// @mixin hook-navbar-dropbar(){}
-
 
 
 

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;
@@ -748,6 +748,7 @@ $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-dropbar-margin-top: 0 !default;
 $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
+$navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
@@ -790,8 +791,9 @@ $offcanvas-bar-color-mode: light !default;
 $offcanvas-bar-width-m: 350px !default;
 $offcanvas-bar-padding-vertical-m: $global-medium-gutter !default;
 $offcanvas-bar-padding-horizontal-m: $global-medium-gutter !default;
-$offcanvas-close-position: 20px !default;
+$offcanvas-close-position: 5px !default;
 $offcanvas-close-padding: 5px !default;
+$offcanvas-close-position-m: 20px !default;
 $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
 $overlay-padding-horizontal: $global-gutter !default;
 $overlay-padding-vertical: $global-gutter !default;
@@ -1013,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;
@@ -1020,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;
@@ -746,6 +746,7 @@ $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-dropbar-margin-top: 0 !default;
 $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
+$navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
 $navbar-dropdown-nav-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
@@ -788,8 +789,9 @@ $offcanvas-bar-color-mode: light !default;
 $offcanvas-bar-width-m: 350px !default;
 $offcanvas-bar-padding-vertical-m: $global-medium-gutter !default;
 $offcanvas-bar-padding-horizontal-m: $global-medium-gutter !default;
-$offcanvas-close-position: 20px !default;
+$offcanvas-close-position: 5px !default;
 $offcanvas-close-padding: 5px !default;
+$offcanvas-close-position-m: 20px !default;
 $offcanvas-overlay-background: rgba(0,0,0,0.1) !default;
 $overlay-padding-horizontal: $global-gutter !default;
 $overlay-padding-vertical: $global-gutter !default;
@@ -1011,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;
@@ -1018,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;

package/tests/navbar.html

@@ -1151,12 +1151,12 @@
 
             <div class="uk-margin">
 
-                <nav class="uk-navbar-container" uk-navbar="dropbar: true; dropbar-mode: push">
+                <nav class="uk-navbar-container" uk-navbar="dropbar: true">
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
                             <li>
-                                <a href="#">Push</a>
+                                <a href="#">Hover</a>
                                 <div class="uk-navbar-dropdown">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
@@ -1982,12 +1982,6 @@
                             <td>false</td>
                             <td>The dropbar selector. If true the dropbar will be inserted automatically.</td>
                         </tr>
-                        <tr>
-                            <td><code>dropbar-mode</code></td>
-                            <td>slide | push</td>
-                            <td>slide</td>
-                            <td>The dropbar mode. (`push` mode is not supported within Sticky component)</td>
-                        </tr>
                         <tr>
                             <td><code>duration</code></td>
                             <td>Number</td>

package/tests/search.html

@@ -294,7 +294,7 @@
                 </div>
             </nav>
 
-            <nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar; dropbar-mode: expand">
+            <nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar">
                 <div class="uk-navbar-left">
 
                     <a class="uk-navbar-item uk-logo" href="#">Dropbar</a>