uikit 3.7.7-dev.372404499 → 3.8.1-dev.3a43322ca

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.7.7-dev.372404499",
+  "version": "3.8.1-dev.3a43322ca",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/util/viewport.js

@@ -37,25 +37,31 @@ export function scrollTop(element, top) {
 export function scrollIntoView(element, {offset: offsetBy = 0} = {}) {
 
     const parents = isVisible(element) ? scrollParents(element) : [];
-    let diff = 0;
     return parents.reduce((fn, scrollElement, i) => {
 
-        const {scrollTop, scrollHeight} = scrollElement;
+        const {scrollTop, scrollHeight, offsetHeight} = scrollElement;
         const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
+        const {height: elHeight, top: elTop} = offset(parents[i - 1] || element);
 
         let top = Math.ceil(
-            offset(parents[i - 1] || element).top
+            elTop
             - offset(getViewport(scrollElement)).top
             - offsetBy
-            + diff
             + scrollTop
         );
 
+        if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
+            top += offsetBy;
+        } else {
+            offsetBy = 0;
+        }
+
         if (top > maxScroll) {
-            diff = top - maxScroll;
+            offsetBy -= top - maxScroll;
             top = maxScroll;
-        } else {
-            diff = 0;
+        } else if (top < 0) {
+            offsetBy -= top;
+            top = 0;
         }
 
         return () => scrollTo(scrollElement, top - scrollTop).then(fn);

package/src/less/components/accordion.less

@@ -55,12 +55,10 @@
     .hook-accordion-title;
 }
 
-/* Hover + Focus */
-.uk-accordion-title:hover,
-.uk-accordion-title:focus {
+/* Hover */
+.uk-accordion-title:hover {
     color: @accordion-title-hover-color;
     text-decoration: none;
-    outline: none;
     .hook-accordion-title-hover;
 }
 
@@ -111,8 +109,7 @@
         .hook-inverse-accordion-title;
     }
 
-    .uk-accordion-title:hover,
-    .uk-accordion-title:focus {
+    .uk-accordion-title:hover {
         color: @inverse-accordion-title-hover-color;
         .hook-inverse-accordion-title-hover;
     }

package/src/less/components/alert.less

@@ -79,11 +79,10 @@
 .uk-alert-close:first-child + * { margin-top: 0; }
 
 /*
- * Hover + Focus
+ * Hover
  */
 
-.uk-alert-close:hover,
-.uk-alert-close:focus {
+.uk-alert-close:hover {
     .hook-alert-close-hover;
 }
 

package/src/less/components/animation.less

@@ -40,11 +40,7 @@
    Component: Animation
  ========================================================================== */
 
-[class*='uk-animation-'] {
-    animation-duration: @animation-duration;
-    animation-timing-function: ease-out;
-    animation-fill-mode: both;
-}
+[class*='uk-animation-'] { animation: @animation-duration ease-out both; }
 
 
 /* Animations
@@ -64,42 +60,42 @@
  * Scale
  */
 
-.uk-animation-scale-up { animation-name: uk-fade-scale-02; }
-.uk-animation-scale-down { animation-name: uk-fade-scale-18; }
+.uk-animation-scale-up { animation-name: uk-fade, uk-scale-up; }
+.uk-animation-scale-down { animation-name: uk-fade, uk-scale-down; }
 
 /*
  * Slide
  */
 
-.uk-animation-slide-top { animation-name: uk-fade-top; }
-.uk-animation-slide-bottom { animation-name: uk-fade-bottom; }
-.uk-animation-slide-left { animation-name: uk-fade-left; }
-.uk-animation-slide-right { animation-name: uk-fade-right; }
+.uk-animation-slide-top { animation-name: uk-fade, uk-slide-top; }
+.uk-animation-slide-bottom { animation-name: uk-fade, uk-slide-bottom; }
+.uk-animation-slide-left { animation-name: uk-fade, uk-slide-left; }
+.uk-animation-slide-right { animation-name: uk-fade, uk-slide-right; }
 
 /*
  * Slide Small
  */
 
-.uk-animation-slide-top-small { animation-name: uk-fade-top-small; }
-.uk-animation-slide-bottom-small { animation-name: uk-fade-bottom-small; }
-.uk-animation-slide-left-small { animation-name: uk-fade-left-small; }
-.uk-animation-slide-right-small { animation-name: uk-fade-right-small; }
+.uk-animation-slide-top-small { animation-name: uk-fade, uk-slide-top-small; }
+.uk-animation-slide-bottom-small { animation-name: uk-fade, uk-slide-bottom-small; }
+.uk-animation-slide-left-small { animation-name: uk-fade, uk-slide-left-small; }
+.uk-animation-slide-right-small { animation-name: uk-fade, uk-slide-right-small; }
 
 /*
  * Slide Medium
  */
-
-.uk-animation-slide-top-medium { animation-name: uk-fade-top-medium; }
-.uk-animation-slide-bottom-medium { animation-name: uk-fade-bottom-medium; }
-.uk-animation-slide-left-medium { animation-name: uk-fade-left-medium; }
-.uk-animation-slide-right-medium { animation-name: uk-fade-right-medium; }
+ 
+.uk-animation-slide-top-medium { animation-name: uk-fade, uk-slide-top-medium; }
+.uk-animation-slide-bottom-medium { animation-name: uk-fade, uk-slide-bottom-medium; }
+.uk-animation-slide-left-medium { animation-name: uk-fade, uk-slide-left-medium; }
+.uk-animation-slide-right-medium { animation-name: uk-fade, uk-slide-right-medium; }
 
 /*
  * Kenburns
  */
 
 .uk-animation-kenburns {
-    animation-name: uk-scale-kenburns;
+    animation-name: uk-kenburns;
     animation-duration: @animation-kenburns-duration;
 }
 
@@ -119,15 +115,15 @@
 
 .uk-animation-stroke {
     animation-name: uk-stroke;
-    stroke-dasharray: var(--uk-animation-stroke);
     animation-duration: @animation-stroke-duration;
+    stroke-dasharray: var(--uk-animation-stroke);
 }
 
 
 /* Direction modifier
  ========================================================================== */
 
- .uk-animation-reverse {
+.uk-animation-reverse {
     animation-direction: reverse;
     animation-timing-function: ease-in;
 }
@@ -136,33 +132,14 @@
 /* Duration modifier
  ========================================================================== */
 
- .uk-animation-fast { animation-duration: @animation-fast-duration; }
+.uk-animation-fast { animation-duration: @animation-fast-duration; }
 
 
-/* Toggle (Hover + Focus)
-========================================================================== */
-
-/*
- * The toggle is triggered on touch devices using `:focus` and tabindex
- */
+/* Toggle animation based on the State of the Parent Element
+ ========================================================================== */
 
 .uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] { animation-name: none; }
 
-/*
- * 1. Prevent tab highlighting on iOS.
- */
-
-.uk-animation-toggle {
-    /* 1 */
-    -webkit-tap-highlight-color: transparent;
-}
-
-/*
- * Remove outline for `tabindex`
- */
-
-.uk-animation-toggle:focus { outline: none; }
-
 
 /* Keyframes used by animation classes
  ========================================================================== */
@@ -177,220 +154,96 @@
 }
 
 /*
- * Slide Top
+ * Scale
  */
 
-@keyframes uk-fade-top {
-    0% {
-        opacity: 0;
-        transform: translateY(-100%);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-scale-up {
+    0% { transform: scale(0.9); }
+    100% { transform: scale(1); }
 }
 
-/*
- * Slide Bottom
- */
-
-@keyframes uk-fade-bottom {
-    0% {
-        opacity: 0;
-        transform: translateY(100%);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-scale-down {
+    0% { transform: scale(1.1); }
+    100% { transform: scale(1); }
 }
 
 /*
- * Slide Left
+ * Slide
  */
 
-@keyframes uk-fade-left {
-    0% {
-        opacity: 0;
-        transform: translateX(-100%);
-    }
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-top {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Right
- */
-
-@keyframes uk-fade-right {
-    0% {
-        opacity: 0;
-        transform: translateX(100%);
-    }
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-bottom {
+    0% { transform: translateY(100%); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Top Small
- */
-
-@keyframes uk-fade-top-small {
-    0% {
-        opacity: 0;
-        transform: translateY(-@animation-slide-small-translate);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-slide-left {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(0); }
 }
 
-/*
- * Slide Bottom Small
- */
-
-@keyframes uk-fade-bottom-small {
-    0% {
-        opacity: 0;
-        transform: translateY(@animation-slide-small-translate);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-slide-right {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(0); }
 }
 
 /*
- * Slide Left Small
+ * Slide Small
  */
 
-@keyframes uk-fade-left-small {
-    0% {
-        opacity: 0;
-        transform: translateX(-@animation-slide-small-translate);
-    }
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-top-small {
+    0% { transform: translateY(-@animation-slide-small-translate); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Right Small
- */
-
-@keyframes uk-fade-right-small {
-    0% {
-        opacity: 0;
-        transform: translateX(@animation-slide-small-translate);
-    }
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-bottom-small {
+    0% { transform: translateY(@animation-slide-small-translate); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Top Medium
- */
-
-@keyframes uk-fade-top-medium {
-    0% {
-        opacity: 0;
-        transform: translateY(-@animation-slide-medium-translate);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-slide-left-small {
+    0% { transform: translateX(-@animation-slide-small-translate); }
+    100% { transform: translateX(0); }
 }
 
-/*
- * Slide Bottom Medium
- */
-
-@keyframes uk-fade-bottom-medium {
-    0% {
-        opacity: 0;
-        transform: translateY(@animation-slide-medium-translate);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+@keyframes uk-slide-right-small {
+    0% { transform: translateX(@animation-slide-small-translate); }
+    100% { transform: translateX(0); }
 }
 
 /*
- * Slide Left Medium
+ * Slide Medium
  */
 
-@keyframes uk-fade-left-medium {
-    0% {
-        opacity: 0;
-        transform: translateX(-@animation-slide-medium-translate);
-    }
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-top-medium {
+    0% { transform: translateY(-@animation-slide-medium-translate); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Slide Right Medium
- */
-
-@keyframes uk-fade-right-medium {
-    0% {
-        opacity: 0;
-        transform: translateX(@animation-slide-medium-translate);
-    }
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+@keyframes uk-slide-bottom-medium {
+    0% { transform: translateY(@animation-slide-medium-translate); }
+    100% { transform: translateY(0); }
 }
 
-/*
- * Scale Up
- */
-
-@keyframes uk-fade-scale-02 {
-    0% {
-        opacity: 0;
-        transform: scale(0.2);
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
+@keyframes uk-slide-left-medium {
+    0% { transform: translateX(-@animation-slide-medium-translate); }
+    100% { transform: translateX(0); }
 }
 
-/*
- * Scale Down
- */
-
-@keyframes uk-fade-scale-18 {
-    0% {
-        opacity: 0;
-        transform: scale(1.8);
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
+@keyframes uk-slide-right-medium {
+    0% { transform: translateX(@animation-slide-medium-translate); }
+    100% { transform: translateX(0); }
 }
 
 /*
  * Kenburns
  */
 
-@keyframes uk-scale-kenburns {
+@keyframes uk-kenburns {
     0% { transform: scale(1); }
     100% { transform: scale(1.2); }
 }

package/src/less/components/badge.less

@@ -50,10 +50,8 @@
  * Required for `a`
  */
 
-.uk-badge:hover,
-.uk-badge:focus {
+.uk-badge:hover {
     text-decoration: none;
-    outline: none;
     .hook-badge-hover;
 }
 
@@ -82,8 +80,7 @@
         .hook-inverse-badge;
     }
 
-    .uk-badge:hover,
-    .uk-badge:focus {
+    .uk-badge:hover {
         .hook-inverse-badge-hover;
     }
 

package/src/less/components/base.less

@@ -76,6 +76,11 @@
 @base-pre-font-family:                          @base-code-font-family;
 @base-pre-color:                                @global-color;
 
+@base-focus-outline-width:                      2px;
+@base-focus-outline-style:                      dotted;
+@base-focus-outline:                            @global-emphasis-color;
+@base-focus-outline-offset:                     1px;
+
 @base-selection-background:                     #39f;
 @base-selection-color:                          @global-inverse-color;
 
@@ -115,13 +120,6 @@ body { margin: 0; }
 /* Links
  ========================================================================== */
 
-/*
- * Remove the outline on focused links when they are also active or hovered
- */
-
-a:active,
-a:hover { outline: none; }
-
 /*
  * Style
  */
@@ -136,8 +134,7 @@ a,
 
 a:hover,
 .uk-link:hover,
-.uk-link-toggle:hover .uk-link,
-.uk-link-toggle:focus .uk-link {
+.uk-link-toggle:hover .uk-link {
     color: @base-link-hover-color;
     text-decoration: @base-link-hover-text-decoration;
     .hook-base-link-hover;
@@ -522,6 +519,33 @@ pre {
 pre code { font-family: @base-pre-font-family; }
 
 
+/* Focus
+ ========================================================================== */
+
+/*
+ * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor. 
+ * 1. Fallback: Remove `:focus` for a negative tabindexes.
+ * 2. Fallback: Set `:focus` style but not for negative tabindexes.
+ * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
+ * 4. Set `:focus-visible` style for browsers which support it.
+ */
+
+/* 1 */
+:focus { outline: none; }
+
+/* 2 */
+:focus:not([tabindex^='-']) {
+    outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline;
+    outline-offset: @base-focus-outline-offset;
+}
+
+/* 3 */
+:focus:not(:focus-visible) { outline: none; }
+
+/* 4 */
+:focus-visible { outline: @base-focus-outline-width @base-focus-outline-style @base-focus-outline; }
+
+
 /* Selection pseudo-element
  ========================================================================== */
 
@@ -610,6 +634,7 @@ template { display: none; }
 @inverse-base-em-color:                        @inverse-global-emphasis-color;
 @inverse-base-heading-color:                   @inverse-global-emphasis-color;
 @inverse-base-hr-border:                       @inverse-global-border;
+@inverse-base-focus-outline:                   @inverse-global-emphasis-color;
 
 .hook-inverse() {
 
@@ -630,8 +655,7 @@ template { display: none; }
 
     a:hover,
     .uk-link:hover,
-    .uk-link-toggle:hover .uk-link,
-    .uk-link-toggle:focus .uk-link {
+    .uk-link-toggle:hover .uk-link {
         color: @inverse-base-link-hover-color;
         .hook-inverse-base-link-hover;
     }
@@ -717,6 +741,13 @@ template { display: none; }
         .hook-inverse-base-hr;
     }
 
+    //
+    // Focus
+    //
+
+    :focus { outline-color: @inverse-base-focus-outline; }
+    :focus-visible { outline-color: @inverse-base-focus-outline; }
+
 }
 
 .hook-inverse-base-link() {}

package/src/less/components/breadcrumb.less

@@ -53,9 +53,8 @@
     .hook-breadcrumb-item;
 }
 
-/* Hover + Focus */
-.uk-breadcrumb > * > :hover,
-.uk-breadcrumb > * > :focus {
+/* Hover */
+.uk-breadcrumb > * > :hover {
     color: @breadcrumb-item-hover-color;
     text-decoration: @breadcrumb-item-hover-text-decoration;
     .hook-breadcrumb-item-hover;
@@ -121,8 +120,7 @@
         .hook-inverse-breadcrumb-item;
     }
 
-    .uk-breadcrumb > * > :hover,
-    .uk-breadcrumb > * > :focus {
+    .uk-breadcrumb > * > :hover {
         color: @inverse-breadcrumb-item-hover-color;
         .hook-inverse-breadcrumb-item-hover;
     }