uikit 3.7.6 → 3.8.0

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.6",
+  "version": "3.8.0",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -36,18 +36,18 @@
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.5",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-replace": "^2.3.4",
+    "@rollup/plugin-replace": "^2.4.2",
     "archiver": "5.3.0",
     "camelcase": "^6.2.0",
     "clean-css": "^5.1.5",
-    "dateformat": "^4.5.1",
-    "eslint": "7.32.0",
+    "dateformat": "^4.6.3",
+    "eslint": "8.0.1",
     "glob": "^7.2.0",
-    "inquirer": "8.1.5",
+    "inquirer": "8.2.0",
     "less": "^2.7.2",
     "minimist": "^1.2.5",
     "npm-watch": "github:dasdeck/npm-watch#46a8a36c61cfd998ed53d27f62eaf79e11c395b4",
-    "postcss": "8.3.7",
+    "postcss": "8.3.9",
     "rollup": "^2.57.0",
     "rollup-plugin-html": "^0.2.1",
     "rtlcss": "^3.3.0",

package/src/js/core/sticky.js

@@ -148,6 +148,7 @@ export default {
 
                 this.topOffset = offset(this.isFixed ? this.placeholder : this.$el).top;
                 this.bottomOffset = this.topOffset + height;
+                this.offsetParentTop = offset(this.$el.offsetParent).top;
 
                 const bottom = parseProp('bottom', this);
 
@@ -285,13 +286,15 @@ export default {
 
             const active = this.top !== 0 || this.scroll > this.top;
             let top = Math.max(0, this.offset);
+            let position = 'fixed';
 
             if (isNumeric(this.bottom) && this.scroll > this.bottom - this.offset) {
-                top = this.bottom - this.scroll;
+                top = this.bottom - this.offsetParentTop;
+                position = 'absolute';
             }
 
             css(this.$el, {
-                position: 'fixed',
+                position,
                 top: `${top}px`,
                 width: this.width
             });

package/src/js/mixin/modal.js

@@ -78,7 +78,6 @@ export default {
 
                 e.preventDefault();
 
-                this.target = toggle.$el;
                 if (this.isToggled() === includes(active, this)) {
                     this.toggle();
                 }
@@ -161,7 +160,7 @@ export default {
 
             handler() {
                 if (!isFocusable(this.$el)) {
-                    attr(this.$el, 'tabindex', '0');
+                    attr(this.$el, 'tabindex', '-1');
                 }
 
                 if (!$(':focus', this.$el)) {
@@ -170,21 +169,6 @@ export default {
             }
         },
 
-        {
-
-            name: 'hide',
-
-            self: true,
-
-            handler() {
-                if (isFocusable(this.target)) {
-                    this.target.focus();
-                    this.target = null;
-                }
-            }
-
-        },
-
         {
 
             name: 'hidden',

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,8 @@
 @base-pre-font-family:                          @base-code-font-family;
 @base-pre-color:                                @global-color;
 
+@base-focus-outline:                            @global-emphasis-color;     
+
 @base-selection-background:                     #39f;
 @base-selection-color:                          @global-inverse-color;
 
@@ -115,13 +117,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 +131,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 +516,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: 2px dotted @base-focus-outline;
+    outline-offset: 1px;
+}
+
+/* 3 */
+:focus:not(:focus-visible) { outline: none; }
+
+/* 4 */
+:focus-visible { outline: 2px dotted @base-focus-outline; }
+
+
 /* Selection pseudo-element
  ========================================================================== */
 
@@ -610,6 +631,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 +652,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 +738,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;
     }