uikit 3.14.4-dev.d014a9a57 → 3.14.4-dev.d472fe41a

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.14.4-dev.d014a9a57",
+    "version": "3.14.4-dev.d472fe41a",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/index.js

@@ -29,7 +29,7 @@ export { default as Video } from './video';
 // Icon components
 export { Close } from './icon';
 export { Spinner } from './icon';
-export { NavParentIcon} from './icon';
+export { NavParentIcon } from './icon';
 export { Slidenav as SlidenavNext } from './icon';
 export { Slidenav as SlidenavPrevious } from './icon';
 export { Search as SearchIcon } from './icon';

package/src/less/components/dropdown.less

@@ -70,6 +70,12 @@
 /* Show */
 .uk-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropdown > :last-child { margin-bottom: 0; }
+
 
 /* Size modifier
  ========================================================================== */

package/src/less/components/nav.less

@@ -72,7 +72,7 @@
 @nav-primary-sublist-item-hover-color:          @global-color;
 @nav-primary-sublist-item-active-color:         @global-emphasis-color;
 
-@nav-dividers-margin-top:                       0;
+@nav-dividers-margin-top:                       5px;
 @nav-dividers-border-width:                     @global-border-width;
 @nav-dividers-border:                           @global-border;
 

package/src/less/components/navbar.less

@@ -409,6 +409,12 @@
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+ .uk-navbar-dropdown > :last-child { margin-bottom: 0; }
+
 // Color Mode
 .uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
 .uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}

package/src/less/components/utility.less

@@ -147,6 +147,13 @@
 .uk-overflow-auto > :last-child { margin-bottom: 0; }
 
 
+/* Box Sizing
+ ========================================================================== */
+
+.uk-box-sizing-content { box-sizing: content-box; }
+.uk-box-sizing-border { box-sizing: border-box; }
+
+
 /* Resize
  ========================================================================== */
 
@@ -413,7 +420,7 @@
     .hook-logo-hover();
 }
 
-.uk-logo > :where(img, svg, video) { display: block; }
+.uk-logo :where(img, svg, video) { display: block; }
 
 .uk-logo-inverse { display: none; }
 
@@ -525,7 +532,8 @@
         .hook-inverse-logo-hover();
     }
 
-    .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }

package/src/scss/components/dropdown.scss

@@ -70,6 +70,12 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
 /* Show */
 .uk-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-dropdown > :last-child { margin-bottom: 0; }
+
 
 /* Size modifier
  ========================================================================== */

package/src/scss/components/nav.scss

@@ -72,7 +72,7 @@ $nav-primary-sublist-item-color:                 $global-muted-color !default;
 $nav-primary-sublist-item-hover-color:           $global-color !default;
 $nav-primary-sublist-item-active-color:          $global-emphasis-color !default;
 
-$nav-dividers-margin-top:                        0 !default;
+$nav-dividers-margin-top:                        5px !default;
 $nav-dividers-border-width:                      $global-border-width !default;
 $nav-dividers-border:                            $global-border !default;
 

package/src/scss/components/navbar.scss

@@ -409,6 +409,12 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
+/*
+ * Remove margin from the last-child
+ */
+
+ .uk-navbar-dropdown > :last-child { margin-bottom: 0; }
+
 // Color Mode
 @if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
 @if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} }

package/src/scss/components/utility.scss

@@ -147,6 +147,13 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 .uk-overflow-auto > :last-child { margin-bottom: 0; }
 
 
+/* Box Sizing
+ ========================================================================== */
+
+.uk-box-sizing-content { box-sizing: content-box; }
+.uk-box-sizing-border { box-sizing: border-box; }
+
+
 /* Resize
  ========================================================================== */
 
@@ -413,7 +420,7 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     @if(mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
 }
 
-.uk-logo > :where(img, svg, video) { display: block; }
+.uk-logo :where(img, svg, video) { display: block; }
 
 .uk-logo-inverse { display: none; }
 

package/src/scss/mixins-theme.scss

@@ -1568,7 +1568,8 @@
         @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
     }
 
-    .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }

package/src/scss/mixins.scss

@@ -1319,7 +1319,8 @@
         @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
     }
 
-    .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
+    .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
+    .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
     .uk-logo-inverse { display: block; }
 
 }

package/src/scss/variables-theme.scss

@@ -716,7 +716,7 @@ $nav-primary-sublist-line-height: $global-line-height !default;
 $nav-primary-sublist-item-color: $global-muted-color !default;
 $nav-primary-sublist-item-hover-color: $global-color !default;
 $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
-$nav-dividers-margin-top: 0 !default;
+$nav-dividers-margin-top: 5px !default;
 $nav-dividers-border-width: $global-border-width !default;
 $nav-dividers-border: $global-border !default;
 $inverse-nav-default-item-color: $inverse-global-muted-color !default;

package/src/scss/variables.scss

@@ -714,7 +714,7 @@ $nav-primary-sublist-line-height: $global-line-height !default;
 $nav-primary-sublist-item-color: $global-muted-color !default;
 $nav-primary-sublist-item-hover-color: $global-color !default;
 $nav-primary-sublist-item-active-color: $global-emphasis-color !default;
-$nav-dividers-margin-top: 0 !default;
+$nav-dividers-margin-top: 5px !default;
 $nav-dividers-border-width: $global-border-width !default;
 $nav-dividers-border: $global-border !default;
 $inverse-nav-default-item-color: $inverse-global-muted-color !default;

package/tests/utility.html

@@ -434,6 +434,25 @@
                         <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
                     </a>
                 </div>
+                <div>
+                    <p>Picture</p>
+                    <a class="uk-logo" href="#">
+                        <picture>
+                            <img src="images/photo.jpg" width="200" height="133" alt="">
+                        </picture>
+                    </a>
+                </div>
+                <div>
+                    <p>+ Inverse Picture</p>
+                    <a class="uk-logo" href="#">
+                        <picture>
+                            <img src="images/photo.jpg" width="200" height="133" alt="">
+                        </picture>
+                        <picture>
+                            <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
+                        </picture>
+                    </a>
+                </div>
             </div>
 
         </div>