uikit 3.7.7-dev.8ab84e819 → 3.8.2-dev.713899c03

package/src/less/components/utility.less

@@ -49,8 +49,8 @@
 
 @logo-font-size:                                @global-large-font-size;
 @logo-font-family:                              @global-font-family;
-@logo-color:                                    @global-color;
-@logo-hover-color:                              @global-color;
+@logo-color:                                    @global-emphasis-color;
+@logo-hover-color:                              @global-emphasis-color;
 
 @dragover-box-shadow:                           0 0 20px rgba(100,100,100,0.3);
 
@@ -372,11 +372,9 @@
     .hook-logo;
 }
 
-/* Hover + Focus */
-.uk-logo:hover,
-.uk-logo:focus {
+/* Hover */
+.uk-logo:hover {
     color: @logo-hover-color;
-    outline: none;
     /* 1 */
     text-decoration: none;
     .hook-logo-hover;
@@ -472,8 +470,8 @@
 // Inverse
 // ========================================================================
 
-@inverse-logo-color:                           @inverse-global-color;
-@inverse-logo-hover-color:                     @inverse-global-color;
+@inverse-logo-color:                           @inverse-global-emphasis-color;
+@inverse-logo-hover-color:                     @inverse-global-emphasis-color;
 
 .hook-inverse() {
 
@@ -487,8 +485,7 @@
         .hook-inverse-logo;
     }
 
-    .uk-logo:hover,
-    .uk-logo:focus {
+    .uk-logo:hover {
         color: @inverse-logo-hover-color;
         .hook-inverse-logo-hover;
     }

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();}
 }