uikit 3.7.6 → 3.8.0

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,8 @@ $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:                             $global-emphasis-color !default;     
+
 $base-selection-background:                      #39f !default;
 $base-selection-color:                           $global-inverse-color !default;
 
@@ -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;
     @if(mixin-exists(hook-base-link-hover)) {@include 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 @@ $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();}

package/src/scss/components/button.scss

@@ -143,12 +143,6 @@ $button-link-disabled-color:                     $global-muted-color !default;
     @if(mixin-exists(hook-button-hover)) {@include hook-button-hover();}
 }
 
-/* Focus */
-.uk-button:focus {
-    outline: none;
-    @if(mixin-exists(hook-button-focus)) {@include hook-button-focus();}
-}
-
 /* OnClick + Active */
 .uk-button:active,
 .uk-button.uk-active {
@@ -169,9 +163,8 @@ $button-link-disabled-color:                     $global-muted-color !default;
     @if(mixin-exists(hook-button-default)) {@include hook-button-default();}
 }
 
-/* Hover + Focus */
-.uk-button-default:hover,
-.uk-button-default:focus {
+/* Hover */
+.uk-button-default:hover {
     background-color: $button-default-hover-background;
     color: $button-default-hover-color;
     @if(mixin-exists(hook-button-default-hover)) {@include hook-button-default-hover();}
@@ -195,9 +188,8 @@ $button-link-disabled-color:                     $global-muted-color !default;
     @if(mixin-exists(hook-button-primary)) {@include hook-button-primary();}
 }
 
-/* Hover + Focus */
-.uk-button-primary:hover,
-.uk-button-primary:focus {
+/* Hover */
+.uk-button-primary:hover {
     background-color: $button-primary-hover-background;
     color: $button-primary-hover-color;
     @if(mixin-exists(hook-button-primary-hover)) {@include hook-button-primary-hover();}
@@ -221,9 +213,8 @@ $button-link-disabled-color:                     $global-muted-color !default;
     @if(mixin-exists(hook-button-secondary)) {@include hook-button-secondary();}
 }
 
-/* Hover + Focus */
-.uk-button-secondary:hover,
-.uk-button-secondary:focus {
+/* Hover */
+.uk-button-secondary:hover {
     background-color: $button-secondary-hover-background;
     color: $button-secondary-hover-color;
     @if(mixin-exists(hook-button-secondary-hover)) {@include hook-button-secondary-hover();}
@@ -247,9 +238,8 @@ $button-link-disabled-color:                     $global-muted-color !default;
     @if(mixin-exists(hook-button-danger)) {@include hook-button-danger();}
 }
 
-/* Hover + Focus */
-.uk-button-danger:hover,
-.uk-button-danger:focus {
+/* Hover */
+.uk-button-danger:hover {
     background-color: $button-danger-hover-background;
     color: $button-danger-hover-color;
     @if(mixin-exists(hook-button-danger-hover)) {@include hook-button-danger-hover();}
@@ -315,9 +305,8 @@ $button-link-disabled-color:                     $global-muted-color !default;
     @if(mixin-exists(hook-button-text)) {@include hook-button-text();}
 }
 
-/* Hover + Focus */
-.uk-button-text:hover,
-.uk-button-text:focus {
+/* Hover */
+.uk-button-text:hover {
     color: $button-text-hover-color;
     @if(mixin-exists(hook-button-text-hover)) {@include hook-button-text-hover();}
 }
@@ -344,9 +333,8 @@ $button-link-disabled-color:                     $global-muted-color !default;
     @if(mixin-exists(hook-button-link)) {@include hook-button-link();}
 }
 
-/* Hover + Focus */
-.uk-button-link:hover,
-.uk-button-link:focus {
+/* Hover */
+.uk-button-link:hover {
     color: $button-link-hover-color;
     text-decoration: $button-link-hover-text-decoration;
 }
@@ -384,7 +372,6 @@ $button-link-disabled-color:                     $global-muted-color !default;
 
 // @mixin hook-button(){}
 // @mixin hook-button-hover(){}
-// @mixin hook-button-focus(){}
 // @mixin hook-button-active(){}
 // @mixin hook-button-default(){}
 // @mixin hook-button-default-hover(){}

package/src/scss/components/close.scss

@@ -26,11 +26,9 @@ $close-hover-color:                              $global-color !default;
     @if(mixin-exists(hook-close)) {@include hook-close();}
 }
 
-/* Hover + Focus */
-.uk-close:hover,
-.uk-close:focus {
+/* Hover */
+.uk-close:hover {
     color: $close-hover-color;
-    outline: none;
     @if(mixin-exists(hook-close-hover)) {@include hook-close-hover();}
 }