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

package/src/less/components/visibility.less

@@ -92,21 +92,19 @@
 .uk-invisible { visibility: hidden !important; }
 
 
-/* Toggle (Hover + Focus)
+/* Based on the State of the Parent Element
  ========================================================================== */
 
 /*
- * Hidden
- * 1. The toggle is triggered on touch devices using `:focus` and tabindex
- * 2. The target stays visible if any element within receives focus through keyboard
- *    Doesn't work in Edge, yet.
- * 3. Can't use `display: none` nor `visibility: hidden` because both are not focusable.
- *
+ * Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+ * The target stays visible if any element within receives focus through keyboard.
+ */
+
+/*
+ * Discard space when hidden.
  */
 
-/* 1 + 2 */
 .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
-    /* 3 */
     position: absolute !important;
     width: 0 !important;
     height: 0 !important;
@@ -116,54 +114,27 @@
 }
 
 /*
- * Invisible
- */
-
-/* 1 + 2 */
-.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
-    /* 3 */
-    opacity: 0 !important;
-}
-
-/*
- * 1. Prevent tab highlighting on iOS.
+ * Keep space when hidden.
  */
 
-.uk-visible-toggle {
-    /* 1 */
-    -webkit-tap-highlight-color: transparent;
-}
-
-/*
- * Remove outline for `tabindex`
- */
-
-.uk-visible-toggle:focus { outline: none; }
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) { opacity: 0 !important; }
 
 
-/* Touch
+/* Based on Hover Capability of the Pointing Device
  ========================================================================== */
 
 /*
- * Hide if primary pointing device has limited accuracy, e.g. a touch screen.
- * Works on mobile browsers: Safari, Chrome and Android browser
+ * Hover
  */
 
-@media (pointer: coarse) {
+/* Hide if primary pointing device doesn't support hover, e.g. touch screens. */
+@media (hover: none) {
     .uk-hidden-touch { display: none !important; }
 }
 
-/*
- * Hide if primary pointing device is accurate, e.g. mouse.
- * 1. Fallback for IE11 and Firefox, because `pointer` is not supported
- * 2. Reset if supported
- */
-
-/* 1 */
-.uk-hidden-notouch { display: none !important; }
-
-@media (pointer: coarse) {
-    .uk-hidden-notouch { display: block !important; }
+/* Hide if primary pointing device supports hover, e.g. mice. */
+@media (hover) {
+    .uk-hidden-notouch { display: none !important; }
 }
 
 

package/src/less/theme/button.less

@@ -51,8 +51,6 @@
 
 .hook-button-hover() {}
 
-.hook-button-focus() {}
-
 .hook-button-active() {}
 
 
@@ -171,7 +169,6 @@
      */
 
     .uk-button-group .uk-button:hover,
-    .uk-button-group .uk-button:focus,
     .uk-button-group .uk-button:active,
     .uk-button-group .uk-button.uk-active {
         position: relative;

package/src/less/theme/form.less

@@ -34,7 +34,7 @@
 @form-success-border:                           @global-success-background;
 
 @form-blank-focus-border:                       @global-border;
-@form-blank-focus-border-style:                 dashed;
+@form-blank-focus-border-style:                 solid;
 
 @form-radio-border-width:                       @global-border-width;
 @form-radio-border:                             darken(@global-border, 10%);

package/src/less/theme/table.less

@@ -61,6 +61,9 @@
 
     .uk-table tbody tr { transition: background-color 0.1s linear; }
 
+    .uk-table-striped > tr:nth-of-type(even):last-child,
+    .uk-table-striped tbody tr:nth-of-type(even):last-child { border-bottom: @table-striped-border-width solid @table-striped-border; }
+
 }
 
 
@@ -75,4 +78,9 @@
     border-top-color: @inverse-global-border;
     border-bottom-color: @inverse-global-border;
 }
-.hook-inverse-table-hover() {}
+.hook-inverse-table-hover() {}
+
+.hook-inverse() {
+    .uk-table-striped > tr:nth-of-type(even):last-child,
+    .uk-table-striped tbody tr:nth-of-type(even):last-child { border-bottom-color: @inverse-global-border; }
+}

package/src/scss/components/accordion.scss

@@ -55,12 +55,10 @@ $accordion-content-margin-top:                  $global-margin !default;
     @if(mixin-exists(hook-accordion-title)) {@include 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;
     @if(mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();}
 }
 

package/src/scss/components/alert.scss

@@ -79,11 +79,10 @@ $alert-danger-color:                             $global-danger-background !defa
 .uk-alert-close:first-child + * { margin-top: 0; }
 
 /*
- * Hover + Focus
+ * Hover
  */
 
-.uk-alert-close:hover,
-.uk-alert-close:focus {
+.uk-alert-close:hover {
     @if(mixin-exists(hook-alert-close-hover)) {@include hook-alert-close-hover();}
 }
 

package/src/scss/components/animation.scss

@@ -40,11 +40,7 @@ $animation-slide-medium-translate:               50px !default;
    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 @@ $animation-slide-medium-translate:               50px !default;
  * 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 @@ $animation-slide-medium-translate:               50px !default;
 
 .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 @@ $animation-slide-medium-translate:               50px !default;
 /* 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 @@ $animation-slide-medium-translate:               50px !default;
 }
 
 /*
- * 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/scss/components/badge.scss

@@ -50,10 +50,8 @@ $badge-font-size:                                11px !default;
  * Required for `a`
  */
 
-.uk-badge:hover,
-.uk-badge:focus {
+.uk-badge:hover {
     text-decoration: none;
-    outline: none;
     @if(mixin-exists(hook-badge-hover)) {@include hook-badge-hover();}
 }
 

package/src/scss/components/base.scss

@@ -76,6 +76,11 @@ $base-pre-line-height:                           1.5 !default;
 $base-pre-font-family:                           $base-code-font-family !default;
 $base-pre-color:                                 $global-color !default;
 
+$base-focus-outline-width:                       2px !default;
+$base-focus-outline-style:                       dotted !default;
+$base-focus-outline:                             $global-emphasis-color !default;
+$base-focus-outline-offset:                      1px !default;
+
 $base-selection-background:                      #39f !default;
 $base-selection-color:                           $global-inverse-color !default;
 
@@ -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;
     @if(mixin-exists(hook-base-link-hover)) {@include 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 @@ $inverse-base-code-color:                       $inverse-global-color !default;
 $inverse-base-em-color:                         $inverse-global-emphasis-color !default;
 $inverse-base-heading-color:                    $inverse-global-emphasis-color !default;
 $inverse-base-hr-border:                        $inverse-global-border !default;
+$inverse-base-focus-outline:                    $inverse-global-emphasis-color !default;
 
 
 

package/src/scss/components/breadcrumb.scss

@@ -53,9 +53,8 @@ $breadcrumb-divider-color:                           $global-muted-color !defaul
     @if(mixin-exists(hook-breadcrumb-item)) {@include 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;
     @if(mixin-exists(hook-breadcrumb-item-hover)) {@include hook-breadcrumb-item-hover();}