uikit 3.15.23-dev.0a3f7fb6d → 3.15.23-dev.aeae9bcb1

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.23-dev.0a3f7fb6d",
+    "version": "3.15.23-dev.aeae9bcb1",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/components/subnav-parent-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 3.5 6 8.5 11 3.5"/>
+</svg>

package/src/js/core/icon.js

@@ -17,6 +17,7 @@ import slidenavNextLarge from '../../images/components/slidenav-next-large.svg';
 import slidenavPrevious from '../../images/components/slidenav-previous.svg';
 import slidenavPreviousLarge from '../../images/components/slidenav-previous-large.svg';
 import spinner from '../../images/components/spinner.svg';
+import subnavParentIcon from '../../images/components/subnav-parent-icon.svg';
 import totop from '../../images/components/totop.svg';
 import {
     $,
@@ -53,6 +54,7 @@ const icons = {
     'slidenav-next-large': slidenavNextLarge,
     'slidenav-previous': slidenavPrevious,
     'slidenav-previous-large': slidenavPreviousLarge,
+    'subnav-parent-icon': subnavParentIcon,
 };
 
 const Icon = {

package/src/js/core/index.js

@@ -40,3 +40,4 @@ export { IconComponent as OverlayIcon } from './icon';
 export { IconComponent as PaginationNext } from './icon';
 export { IconComponent as PaginationPrevious } from './icon';
 export { IconComponent as Totop } from './icon';
+export { IconComponent as SubnavParentIcon } from './icon';

package/src/js/mixin/modal.js

@@ -358,7 +358,7 @@ export function preventBackgroundScroll() {
 
     const { scrollingElement } = document;
     css(scrollingElement, {
-        overflowY: 'hidden',
+        overflowY: CSS.supports('overflow', 'clip') ? 'clip' : 'hidden',
         touchAction: 'none',
         paddingRight: width(window) - scrollingElement.clientWidth,
     });

package/src/less/components/form.less

@@ -710,6 +710,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
     align-items: center;
     /* 4 */
     color: @form-icon-color;
+    .hook-form-icon();
 }
 
 /*
@@ -765,6 +766,7 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 .hook-form-label() {}
 .hook-form-stacked-label() {}
 .hook-form-horizontal-label() {}
+.hook-form-icon() {}
 .hook-form-misc() {}
 
 
@@ -875,7 +877,10 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
     }
 
     // Icon
-    .uk-form-icon { color: @inverse-form-icon-color; }
+    .uk-form-icon {
+        color: @inverse-form-icon-color;
+        .hook-inverse-form-icon();
+    }
     .uk-form-icon:hover { color: @inverse-form-icon-hover-color; }
 
 }
@@ -887,3 +892,4 @@ select.uk-form-width-xsmall { width: (@form-width-xsmall + 25px); }
 .hook-inverse-form-radio-checked() {}
 .hook-inverse-form-radio-checked-focus() {}
 .hook-inverse-form-label() {}
+.hook-inverse-form-icon() {}

package/src/less/components/subnav.less

@@ -3,6 +3,8 @@
 //
 // Component:       `uk-subnav`
 //
+// Sub-objects:     `uk-subnav-parent-icon`
+//
 // Modifiers:       `uk-subnav-divider`
 //                  `uk-subnav-pill`
 //
@@ -22,6 +24,8 @@
 @subnav-item-hover-text-decoration:             none;
 @subnav-item-active-color:                      @global-emphasis-color;
 
+@subnav-parent-icon-margin-left:                4px;
+
 @subnav-divider-margin-horizontal:              @subnav-margin-horizontal;
 @subnav-divider-border-height:                  1.5em;
 @subnav-divider-border-width:                   @global-border-width;
@@ -118,6 +122,14 @@
 }
 
 
+/* Parent icon modifier
+ ========================================================================== */
+
+.uk-subnav-parent-icon { margin-left: @subnav-parent-icon-margin-left; }
+
+.uk-subnav > li > a[aria-expanded="true"] .uk-subnav-parent-icon { transform: rotate(180deg); }
+
+
 /* Divider modifier
  ========================================================================== */
 

package/src/less/theme/form.less

@@ -123,6 +123,12 @@
 .hook-form-horizontal-label() {}
 
 
+// Icon
+// ========================================================================
+
+.hook-form-icon() {}
+
+
 // Miscellaneous
 // ========================================================================
 
@@ -143,4 +149,6 @@
 .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; }
+.hook-inverse-form-label() { color: @inverse-form-label-color; }
+
+.hook-inverse-form-icon() {}

package/src/scss/components/form.scss

@@ -710,6 +710,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
     align-items: center;
     /* 4 */
     color: $form-icon-color;
+    @if(mixin-exists(hook-form-icon)) {@include hook-form-icon();}
 }
 
 /*
@@ -765,6 +766,7 @@ select.uk-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 // @mixin hook-form-label(){}
 // @mixin hook-form-stacked-label(){}
 // @mixin hook-form-horizontal-label(){}
+// @mixin hook-form-icon(){}
 // @mixin hook-form-misc(){}
 
 
@@ -802,3 +804,4 @@ $inverse-form-icon-hover-color:                 $inverse-global-color !default;
 // @mixin hook-inverse-form-radio-checked(){}
 // @mixin hook-inverse-form-radio-checked-focus(){}
 // @mixin hook-inverse-form-label(){}
+// @mixin hook-inverse-form-icon(){}

package/src/scss/components/subnav.scss

@@ -3,6 +3,8 @@
 //
 // Component:       `uk-subnav`
 //
+// Sub-objects:     `uk-subnav-parent-icon`
+//
 // Modifiers:       `uk-subnav-divider`
 //                  `uk-subnav-pill`
 //
@@ -22,6 +24,8 @@ $subnav-item-hover-color:                        $global-color !default;
 $subnav-item-hover-text-decoration:              none !default;
 $subnav-item-active-color:                       $global-emphasis-color !default;
 
+$subnav-parent-icon-margin-left:                 4px !default;
+
 $subnav-divider-margin-horizontal:               $subnav-margin-horizontal !default;
 $subnav-divider-border-height:                   1.5em !default;
 $subnav-divider-border-width:                    $global-border-width !default;
@@ -118,6 +122,14 @@ $subnav-item-disabled-color:                     $global-muted-color !default;
 }
 
 
+/* Parent icon modifier
+ ========================================================================== */
+
+.uk-subnav-parent-icon { margin-left: $subnav-parent-icon-margin-left; }
+
+.uk-subnav > li > a[aria-expanded="true"] .uk-subnav-parent-icon { transform: rotate(180deg); }
+
+
 /* Divider modifier
  ========================================================================== */
 

package/src/scss/mixins-theme.scss

@@ -858,6 +858,7 @@
 }
 @mixin hook-form-stacked-label(){}
 @mixin hook-form-horizontal-label(){}
+@mixin hook-form-icon(){}
 @mixin hook-form-misc(){}
 @mixin hook-inverse-form(){ border-color: $inverse-global-border; }
 @mixin hook-inverse-form-focus(){ border-color: $inverse-global-color; }
@@ -866,6 +867,7 @@
 @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-form-icon(){}
 @mixin hook-inverse-component-form(){
 
     .uk-input,
@@ -948,7 +950,10 @@
     }
 
     // Icon
-    .uk-form-icon { color: $inverse-form-icon-color; }
+    .uk-form-icon {
+        color: $inverse-form-icon-color;
+        @if(mixin-exists(hook-inverse-form-icon)) {@include hook-inverse-form-icon();}
+    }
     .uk-form-icon:hover { color: $inverse-form-icon-hover-color; }
 
 }

package/src/scss/mixins.scss

@@ -618,6 +618,7 @@
 @mixin hook-form-label(){}
 @mixin hook-form-stacked-label(){}
 @mixin hook-form-horizontal-label(){}
+@mixin hook-form-icon(){}
 @mixin hook-form-misc(){}
 @mixin hook-inverse-form(){}
 @mixin hook-inverse-form-focus(){}
@@ -626,6 +627,7 @@
 @mixin hook-inverse-form-radio-checked(){}
 @mixin hook-inverse-form-radio-checked-focus(){}
 @mixin hook-inverse-form-label(){}
+@mixin hook-inverse-form-icon(){}
 @mixin hook-inverse-component-form(){
 
     .uk-input,
@@ -708,7 +710,10 @@
     }
 
     // Icon
-    .uk-form-icon { color: $inverse-form-icon-color; }
+    .uk-form-icon {
+        color: $inverse-form-icon-color;
+        @if(mixin-exists(hook-inverse-form-icon)) {@include hook-inverse-form-icon();}
+    }
     .uk-form-icon:hover { color: $inverse-form-icon-hover-color; }
 
 }

package/src/scss/theme/form.scss

@@ -109,6 +109,12 @@ $form-label-font-size:                           $global-small-font-size !defaul
 // @mixin hook-form-horizontal-label(){}
 
 
+// Icon
+// ========================================================================
+
+// @mixin hook-form-icon(){}
+
+
 // Miscellaneous
 // ========================================================================
 
@@ -129,3 +135,6 @@ $inverse-form-label-color:                       $inverse-global-emphasis-color
 
 // @mixin hook-inverse-form-radio-checked-focus(){}
 
+
+
+// @mixin hook-inverse-form-icon(){}

package/src/scss/variables-theme.scss

@@ -976,6 +976,7 @@ $subnav-item-color: $global-muted-color !default;
 $subnav-item-hover-color: $global-color !default;
 $subnav-item-hover-text-decoration: none !default;
 $subnav-item-active-color: $global-emphasis-color !default;
+$subnav-parent-icon-margin-left: 4px !default;
 $subnav-divider-margin-horizontal: $subnav-margin-horizontal !default;
 $subnav-divider-border-height: 1.5em !default;
 $subnav-divider-border-width: $global-border-width !default;

package/src/scss/variables.scss

@@ -974,6 +974,7 @@ $subnav-item-color: $global-muted-color !default;
 $subnav-item-hover-color: $global-color !default;
 $subnav-item-hover-text-decoration: none !default;
 $subnav-item-active-color: $global-emphasis-color !default;
+$subnav-parent-icon-margin-left: 4px !default;
 $subnav-divider-margin-horizontal: $subnav-margin-horizontal !default;
 $subnav-divider-border-height: 1.5em !default;
 $subnav-divider-border-width: $global-border-width !default;

package/tests/index.html

@@ -590,7 +590,20 @@
 
                         <ul class="uk-subnav uk-subnav-divider" uk-margin>
                             <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
+                            <li>
+                                <a href="#">Parent <span uk-subnav-parent-icon></span></a>
+                                <div uk-dropdown="mode: click">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#">Item</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#">Item</a></li>
+                                    </ul>
+                                </div>
+                            </li>
                             <li class="uk-disabled"><a>Disabled</a></li>
                         </ul>
 
@@ -599,7 +612,20 @@
 
                         <ul class="uk-subnav uk-subnav-pill" uk-margin>
                             <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
+                            <li>
+                                <a href="#">Parent <span uk-subnav-parent-icon></span></a>
+                                <div uk-dropdown="mode: click">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#">Item</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#">Item</a></li>
+                                    </ul>
+                                </div>
+                            </li>
                             <li class="uk-disabled"><a>Disabled</a></li>
                         </ul>
 
@@ -608,7 +634,20 @@
 
                         <ul uk-tab>
                             <li class="uk-active"><a href="#">Active</a></li>
-                            <li><a href="#">Item</a></li>
+                            <li>
+                                <a href="#">Parent <span uk-subnav-parent-icon></span></a>
+                                <div uk-dropdown="mode: click">
+                                    <ul class="uk-nav uk-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#">Item</a></li>
+                                        <li><a href="#">Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#">Item</a></li>
+                                    </ul>
+                                </div>
+                            </li>
                             <li class="uk-disabled"><a>Disabled</a></li>
                         </ul>
 

package/tests/subnav.html

@@ -19,38 +19,9 @@
 
                     <ul class="uk-subnav" uk-margin>
                         <li class="uk-active"><a href="#">Active</a></li>
-                        <li><a href="#">Item</a></li>
-                        <li><a href="#">Item</a></li>
-                        <li class="uk-disabled"><a>Disabled</a></li>
-                    </ul>
-
-                    <h2>Divider</h2>
-
-                    <ul class="uk-subnav uk-subnav-divider" uk-margin>
-                        <li class="uk-active"><a href="#">Active</a></li>
-                        <li><a href="#">Item</a></li>
-                        <li><a href="#">Item</a></li>
-                        <li><span>Disabled</span></li>
-                    </ul>
-
-                    <h2>Pill</h2>
-
-                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
-                        <li class="uk-active"><a href="#">Active</a></li>
-                        <li><a href="#">Item</a></li>
-                        <li><a href="#">Item</a></li>
-                        <li><span>Disabled</span></li>
-                    </ul>
-
-                    <h2>Icon and Dropdown</h2>
-
-                    <ul class="uk-subnav" uk-margin>
-                        <li class="uk-active"><a href="#">Active</a></li>
-                        <li><a href="#"><span uk-icon="icon: cart"></span> Icon</a></li>
-                        <li><a href="#">Item</a></li>
                         <li>
-                            <a href="#">More <span uk-icon="icon:  triangle-down"></span></a>
-                            <div uk-dropdown="mode: click;">
+                            <a href="#">Parent <span uk-subnav-parent-icon></span></a>
+                            <div uk-dropdown="mode: click">
                                 <ul class="uk-nav uk-dropdown-nav">
                                     <li class="uk-active"><a href="#">Active</a></li>
                                     <li><a href="#">Item</a></li>
@@ -62,14 +33,16 @@
                                 </ul>
                             </div>
                         </li>
+                        <li><a href="#">Item</a></li>
+                        <li class="uk-disabled"><a>Disabled</a></li>
                     </ul>
 
+                    <h2>Divider</h2>
+
                     <ul class="uk-subnav uk-subnav-divider" uk-margin>
                         <li class="uk-active"><a href="#">Active</a></li>
-                        <li><a href="#"><span uk-icon="icon: cart"></span> Icon</a></li>
-                        <li><a href="#">Item</a></li>
                         <li>
-                            <a href="#">More <span uk-icon="icon:  triangle-down"></span></a>
+                            <a href="#">Parent <span uk-subnav-parent-icon></span></a>
                             <div uk-dropdown="mode: click">
                                 <ul class="uk-nav uk-dropdown-nav">
                                     <li class="uk-active"><a href="#">Active</a></li>
@@ -82,15 +55,17 @@
                                 </ul>
                             </div>
                         </li>
+                        <li><a href="#">Item</a></li>
+                        <li><span>Disabled</span></li>
                     </ul>
 
+                    <h2>Pill</h2>
+
                     <ul class="uk-subnav uk-subnav-pill" uk-margin>
                         <li class="uk-active"><a href="#">Active</a></li>
-                        <li><a href="#"><span uk-icon="icon: cart"></span> Icon</a></li>
-                        <li><a href="#">Item</a></li>
                         <li>
-                            <a href="#">More <span uk-icon="icon:  triangle-down"></span></a>
-                            <div uk-dropdown="mode: click;">
+                            <a href="#">Parent <span uk-subnav-parent-icon></span></a>
+                            <div uk-dropdown="mode: click">
                                 <ul class="uk-nav uk-dropdown-nav">
                                     <li class="uk-active"><a href="#">Active</a></li>
                                     <li><a href="#">Item</a></li>
@@ -102,6 +77,28 @@
                                 </ul>
                             </div>
                         </li>
+                        <li><a href="#">Item</a></li>
+                        <li><span>Disabled</span></li>
+                    </ul>
+
+                    <h2>Icon</h2>
+
+                    <ul class="uk-subnav" uk-margin>
+                        <li class="uk-active"><a href="#"><span uk-icon="icon: home"></span> Active</a></li>
+                        <li><a href="#"><span uk-icon="icon: database"></span> Item</a></li>
+                        <li><a href="#"><span uk-icon="icon: user"></span> Item</a></li>
+                    </ul>
+
+                    <ul class="uk-subnav uk-subnav-divider" uk-margin>
+                        <li class="uk-active"><a href="#"><span uk-icon="icon: home"></span> Active</a></li>
+                        <li><a href="#"><span uk-icon="icon: database"></span> Item</a></li>
+                        <li><a href="#"><span uk-icon="icon: user"></span> Item</a></li>
+                    </ul>
+
+                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
+                        <li class="uk-active"><a href="#"><span uk-icon="icon: home"></span> Active</a></li>
+                        <li><a href="#"><span uk-icon="icon: database"></span> Item</a></li>
+                        <li><a href="#"><span uk-icon="icon: user"></span> Item</a></li>
                     </ul>
 
                 </div>