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

package/src/scss/components/search.scss

@@ -133,12 +133,6 @@ $search-toggle-hover-color:                          $global-color !default;
 /* Icon (Adopts `uk-icon`)
  ========================================================================== */
 
-/*
- * Remove default focus style
- */
-
-.uk-search-icon:focus { outline: none; }
-
 /*
  * Position above input
  * 1. Set position
@@ -275,9 +269,8 @@ $search-toggle-hover-color:                          $global-color !default;
     @if(mixin-exists(hook-search-toggle)) {@include hook-search-toggle();}
 }
 
-/* Hover + Focus */
-.uk-search-toggle:hover,
-.uk-search-toggle:focus {
+/* Hover */
+.uk-search-toggle:hover {
     color: $search-toggle-hover-color;
     @if(mixin-exists(hook-search-toggle-hover)) {@include hook-search-toggle-hover();}
 }

package/src/scss/components/slidenav.scss

@@ -40,11 +40,9 @@ $slidenav-large-padding-horizontal:              $slidenav-large-padding-vertica
     @if(mixin-exists(hook-slidenav)) {@include hook-slidenav();}
 }
 
-/* Hover + Focus */
-.uk-slidenav:hover,
-.uk-slidenav:focus {
+/* Hover */
+.uk-slidenav:hover {
     color: $slidenav-hover-color;
-    outline: none;
     @if(mixin-exists(hook-slidenav-hover)) {@include hook-slidenav-hover();}
 }
 

package/src/scss/components/slider.scss

@@ -94,7 +94,6 @@ $slider-container-margin-right:                      -25px !default;
  *    `max-width` needed to keep image responsiveness and prevent content overflow
  * 3. Create position context
  * 4. Disable horizontal panning gestures in IE11 and Edge
- * 5. Suppress outline on focus
  */
 
 .uk-slider-items > * {
@@ -107,9 +106,6 @@ $slider-container-margin-right:                      -25px !default;
     touch-action: pan-y;
 }
 
-/* 5 */
-.uk-slider-items > :focus { outline: none; }
-
 
 // Hooks
 // ========================================================================

package/src/scss/components/slideshow.scss

@@ -59,7 +59,6 @@
  * 3. Clip child elements, e.g. for `uk-cover`
  * 4. Optimize animation
  * 5. Disable horizontal panning gestures in IE11 and Edge
- * 6. Suppress outline on focus
  */
 
 .uk-slideshow-items > * {
@@ -78,9 +77,6 @@
     touch-action: pan-y;
 }
 
-/* 6 */
-.uk-slideshow-items > :focus { outline: none; }
-
 /*
  * Hide not active items
  */

package/src/scss/components/subnav.scss

@@ -104,12 +104,10 @@ $subnav-item-disabled-color:                     $global-muted-color !default;
     @if(mixin-exists(hook-subnav-item)) {@include hook-subnav-item();}
 }
 
-/* Hover + Focus */
-.uk-subnav > * > a:hover,
-.uk-subnav > * > a:focus {
+/* Hover */
+.uk-subnav > * > a:hover {
     color: $subnav-item-hover-color;
     text-decoration: $subnav-item-hover-text-decoration;
-    outline: none;
     @if(mixin-exists(hook-subnav-item-hover)) {@include hook-subnav-item-hover();}
 }
 
@@ -168,9 +166,8 @@ $subnav-item-disabled-color:                     $global-muted-color !default;
     @if(mixin-exists(hook-subnav-pill-item)) {@include hook-subnav-pill-item();}
 }
 
-/* Hover + Focus */
-.uk-subnav-pill > * > a:hover,
-.uk-subnav-pill > * > a:focus {
+/* Hover */
+.uk-subnav-pill > * > a:hover {
     background-color: $subnav-pill-item-hover-background;
     color: $subnav-pill-item-hover-color;
     @if(mixin-exists(hook-subnav-pill-item-hover)) {@include hook-subnav-pill-item-hover();}

package/src/scss/components/tab.scss

@@ -90,9 +90,8 @@ $tab-item-disabled-color:                 $global-muted-color !default;
     @if(mixin-exists(hook-tab-item)) {@include hook-tab-item();}
 }
 
-/* Hover + Focus */
-.uk-tab > * > a:hover,
-.uk-tab > * > a:focus {
+/* Hover */
+.uk-tab > * > a:hover {
     color: $tab-item-hover-color;
     text-decoration: $tab-item-hover-text-decoration;
     @if(mixin-exists(hook-tab-item-hover)) {@include hook-tab-item-hover();}

package/src/scss/components/thumbnav.scss

@@ -63,10 +63,8 @@ $thumbnav-margin-vertical:                       $thumbnav-margin-horizontal !de
     @if(mixin-exists(hook-thumbnav-item)) {@include hook-thumbnav-item();}
 }
 
-/* Hover + Focus */
-.uk-thumbnav > * > :hover,
-.uk-thumbnav > * > :focus {
-    outline: none;
+/* Hover */
+.uk-thumbnav > * > :hover {
     @if(mixin-exists(hook-thumbnav-item-hover)) {@include hook-thumbnav-item-hover();}
 }
 

package/src/scss/components/totop.scss

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

package/src/scss/components/transition.scss

@@ -38,26 +38,6 @@ $transition-slow-duration:                       0.7s !default;
    Component: Transition
  ========================================================================== */
 
-
-/* Toggle (Hover + Focus)
- ========================================================================== */
-
-/*
- * 1. Prevent tab highlighting on iOS.
- */
-
-.uk-transition-toggle {
-    /* 1 */
-    -webkit-tap-highlight-color: transparent;
-}
-
-/*
- * Remove outline for `tabindex`
- */
-
-.uk-transition-toggle:focus { outline: none; }
-
-
 /* Transitions
  ========================================================================== */
 
@@ -66,14 +46,25 @@ $transition-slow-duration:                       0.7s !default;
  * 1. Using `:focus` and tabindex
  * 2. Using `:hover` and a `touchstart` event listener registered on the document
  *    (Doesn't work on Surface touch devices)
- *
- * Note: Transitions don't work with `uk-postion-center-*` classes because they also use `transform`,
- *       therefore it's recommended to use an extra `div` for the transition.
  */
 
+:where(.uk-transition-fade),
+:where([class*='uk-transition-scale']),
+:where([class*='uk-transition-slide']) {
+    --uk-position-translate-x: 0;
+    --uk-position-translate-y: 0;
+}
+
 .uk-transition-fade,
 [class*='uk-transition-scale'],
 [class*='uk-transition-slide'] {
+    --uk-translate-x: 0;
+    --uk-translate-y: 0;
+    --uk-scale-x: 1;
+    --uk-scale-y: 1;
+    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y))
+               translate(var(--uk-translate-x), var(--uk-translate-y))
+               scale(var(--uk-scale-x), var(--uk-scale-y));
     transition: $transition-duration ease-out;
     transition-property: opacity, transform, filter;
     opacity: 0;
@@ -85,55 +76,72 @@ $transition-slow-duration:                       0.7s !default;
 
 .uk-transition-toggle:hover .uk-transition-fade,
 .uk-transition-toggle:focus .uk-transition-fade,
+.uk-transition-toggle .uk-transition-fade:focus-within,
 .uk-transition-active.uk-active .uk-transition-fade { opacity: 1; }
 
 /*
  * Scale
+ * 1. Make image rendering the same during the transition as before and after. Prefixed because of Safari.
  */
 
-.uk-transition-scale-up { transform: scale(1,1); }
-.uk-transition-scale-down { transform: scale($transition-scale,$transition-scale); }
+/* 1 */
+[class*='uk-transition-scale'] { -webkit-backface-visibility: hidden; }
+
+.uk-transition-scale-up {
+    --uk-scale-x: 1;
+    --uk-scale-y: 1;
+}
+.uk-transition-scale-down {
+    --uk-scale-x: #{$transition-scale};
+    --uk-scale-y: #{$transition-scale};
+}
 
 /* Show */
 .uk-transition-toggle:hover .uk-transition-scale-up,
 .uk-transition-toggle:focus .uk-transition-scale-up,
+.uk-transition-toggle .uk-transition-scale-up:focus-within,
 .uk-transition-active.uk-active .uk-transition-scale-up {
+    --uk-scale-x: #{$transition-scale};
+    --uk-scale-y: #{$transition-scale};
     opacity: 1;
-    transform: scale($transition-scale,$transition-scale);
 }
 
 .uk-transition-toggle:hover .uk-transition-scale-down,
 .uk-transition-toggle:focus .uk-transition-scale-down,
+.uk-transition-toggle .uk-transition-scale-down:focus-within,
 .uk-transition-active.uk-active .uk-transition-scale-down {
+    --uk-scale-x: 1;
+    --uk-scale-y: 1;
     opacity: 1;
-    transform: scale(1,1);
 }
 
 /*
  * Slide
  */
 
-.uk-transition-slide-top { transform: translateY(-100%); }
-.uk-transition-slide-bottom { transform: translateY(100%); }
-.uk-transition-slide-left { transform: translateX(-100%); }
-.uk-transition-slide-right { transform: translateX(100%); }
+.uk-transition-slide-top { --uk-translate-y: -100%; }
+.uk-transition-slide-bottom { --uk-translate-y: 100%; }
+.uk-transition-slide-left { --uk-translate-x: -100%; }
+.uk-transition-slide-right { --uk-translate-x: 100%; }
 
-.uk-transition-slide-top-small { transform: translateY(-$transition-slide-small-translate); }
-.uk-transition-slide-bottom-small { transform: translateY($transition-slide-small-translate); }
-.uk-transition-slide-left-small { transform: translateX(-$transition-slide-small-translate); }
-.uk-transition-slide-right-small { transform: translateX($transition-slide-small-translate); }
+.uk-transition-slide-top-small { --uk-translate-y: (-$transition-slide-small-translate); }
+.uk-transition-slide-bottom-small { --uk-translate-y: #{$transition-slide-small-translate}; }
+.uk-transition-slide-left-small { --uk-translate-x: (-$transition-slide-small-translate); }
+.uk-transition-slide-right-small { --uk-translate-x: #{$transition-slide-small-translate}; }
 
-.uk-transition-slide-top-medium { transform: translateY(-$transition-slide-medium-translate); }
-.uk-transition-slide-bottom-medium { transform: translateY($transition-slide-medium-translate); }
-.uk-transition-slide-left-medium { transform: translateX(-$transition-slide-medium-translate); }
-.uk-transition-slide-right-medium { transform: translateX($transition-slide-medium-translate); }
+.uk-transition-slide-top-medium { --uk-translate-y: (-$transition-slide-medium-translate); }
+.uk-transition-slide-bottom-medium { --uk-translate-y: #{$transition-slide-medium-translate}; }
+.uk-transition-slide-left-medium { --uk-translate-x: (-$transition-slide-medium-translate); }
+.uk-transition-slide-right-medium { --uk-translate-x: #{$transition-slide-medium-translate}; }
 
 /* Show */
 .uk-transition-toggle:hover [class*='uk-transition-slide'],
 .uk-transition-toggle:focus [class*='uk-transition-slide'],
+.uk-transition-toggle [class*='uk-transition-slide']:focus-within,
 .uk-transition-active.uk-active [class*='uk-transition-slide'] {
+    --uk-translate-x: 0;
+    --uk-translate-y: 0;
     opacity: 1;
-    transform: translate(0,0);
 }
 
 

package/src/scss/components/utility.scss

@@ -49,8 +49,8 @@ $dropcap-font-size:                              (($global-line-height * 3) * 1e
 
 $logo-font-size:                                 $global-large-font-size !default;
 $logo-font-family:                               $global-font-family !default;
-$logo-color:                                     $global-color !default;
-$logo-hover-color:                               $global-color !default;
+$logo-color:                                     $global-emphasis-color !default;
+$logo-hover-color:                               $global-emphasis-color !default;
 
 $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3) !default;
 
@@ -372,11 +372,9 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
     @if(mixin-exists(hook-logo)) {@include hook-logo();}
 }
 
-/* Hover + Focus */
-.uk-logo:hover,
-.uk-logo:focus {
+/* Hover */
+.uk-logo:hover {
     color: $logo-hover-color;
-    outline: none;
     /* 1 */
     text-decoration: none;
     @if(mixin-exists(hook-logo-hover)) {@include hook-logo-hover();}
@@ -472,8 +470,8 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 // Inverse
 // ========================================================================
 
-$inverse-logo-color:                            $inverse-global-color !default;
-$inverse-logo-hover-color:                      $inverse-global-color !default;
+$inverse-logo-color:                            $inverse-global-emphasis-color !default;
+$inverse-logo-hover-color:                      $inverse-global-emphasis-color !default;
 
 
 

package/src/scss/components/visibility.scss

@@ -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; }
 }