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

package/src/scss/components/position.scss

@@ -39,12 +39,14 @@ $position-large-margin-l:                               50px !default;
    Component: Position
  ========================================================================== */
 
+:root { --uk-position-margin-offset: 0px; }
+
 
 /* Directions
  ========================================================================== */
 
 /*
- * 1. Prevent content overflow if `max-width: 100%` is used inside position container.
+ * 1. Prevent content overflow.
  */
 
 [class*='uk-position-top'],
@@ -54,14 +56,15 @@ $position-large-margin-l:                               50px !default;
 [class*='uk-position-center'] {
     position: absolute !important;
     /* 1 */
-    max-width: 100%;
+    max-width: unquote('calc(100% - (var(--uk-position-margin-offset) * 2))');
+    box-sizing: border-box;
 }
 
+/*
+ * Edges
+ * Don't use `width: 100%` because it's wrong if the parent has padding.
+ */
 
-/* Edges
- ========================================================================== */
-
-/* Don't use `width: 100%` because it is wrong if the parent has padding. */
 .uk-position-top {
     top: 0;
     left: 0;
@@ -86,9 +89,9 @@ $position-large-margin-l:                               50px !default;
     right: 0;
 }
 
-
-/* Corners
- ========================================================================== */
+/*
+ * Corners
+ */
 
 .uk-position-top-left {
     top: 0;
@@ -113,23 +116,25 @@ $position-large-margin-l:                               50px !default;
 /*
  * Center
  * 1. Fix text wrapping if content is larger than 50% of the container.
+ *    Using `max-content` requires `max-width` of 100% which is set generally.
  */
 
 .uk-position-center {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
+    top: unquote('calc(50% - var(--uk-position-margin-offset))');
+    left: unquote('calc(50% - var(--uk-position-margin-offset))');
+    --uk-position-translate-x: -50%;
+    --uk-position-translate-y: -50%;
+    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
     /* 1 */
     width: max-content;
-    max-width: 100%;
-    box-sizing: border-box;
 }
 
 /* Vertical */
 [class*='uk-position-center-left'],
 [class*='uk-position-center-right'] {
-    top: 50%;
-    transform: translateY(-50%);
+    top: unquote('calc(50% - var(--uk-position-margin-offset))');
+    --uk-position-translate-y: -50%;
+    transform: translate(0, var(--uk-position-translate-y));
 }
 
 .uk-position-center-left { left: 0; }
@@ -148,20 +153,19 @@ $position-large-margin-l:                               50px !default;
 /* Horizontal */
 .uk-position-top-center,
 .uk-position-bottom-center {
-    left: 50%;
-    transform: translateX(-50%);
+    left: unquote('calc(50% - var(--uk-position-margin-offset))');
+    --uk-position-translate-x: -50%;
+    transform: translate(var(--uk-position-translate-x), 0);
     /* 1 */
     width: max-content;
-    max-width: 100%;
-    box-sizing: border-box;
 }
 
 .uk-position-top-center { top: 0; }
 .uk-position-bottom-center { bottom: 0; }
 
-
-/* Cover
- ========================================================================== */
+/*
+ * Cover
+ */
 
 .uk-position-cover {
     position: absolute;
@@ -172,89 +176,48 @@ $position-large-margin-l:                               50px !default;
 }
 
 
-/* Utility
- ========================================================================== */
-
-.uk-position-relative { position: relative !important; }
-
-.uk-position-absolute { position: absolute !important; }
-
-.uk-position-fixed { position: fixed !important; }
-
-.uk-position-z-index { z-index: 1; }
-
-
-/* Margin modifier
+/* Margin
  ========================================================================== */
 
-/*
- * Small
- */
-
 .uk-position-small {
-    max-width: unquote('calc(100% - (#{$position-small-margin} * 2))');
     margin: $position-small-margin;
+    --uk-position-margin-offset: #{$position-small-margin};
 }
 
-.uk-position-small.uk-position-center { transform: translate(-50%, -50%) translate(-$position-small-margin, (-$position-small-margin)); }
-
-.uk-position-small[class*='uk-position-center-left'],
-.uk-position-small[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-small-margin); }
-
-.uk-position-small.uk-position-top-center,
-.uk-position-small.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-small-margin); }
-
-/*
- * Medium
- */
-
 .uk-position-medium {
-    max-width: unquote('calc(100% - (#{$position-medium-margin} * 2))');
     margin: $position-medium-margin;
+    --uk-position-margin-offset: #{$position-medium-margin};
 }
 
-.uk-position-medium.uk-position-center { transform: translate(-50%, -50%) translate(-$position-medium-margin, (-$position-medium-margin)); }
-
-.uk-position-medium[class*='uk-position-center-left'],
-.uk-position-medium[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-medium-margin); }
-
-.uk-position-medium.uk-position-top-center,
-.uk-position-medium.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-medium-margin); }
-
-/*
- * Large
- */
-
 .uk-position-large {
-    max-width: unquote('calc(100% - (#{$position-large-margin} * 2))');
     margin: $position-large-margin;
+    --uk-position-margin-offset: #{$position-large-margin};
 }
 
-.uk-position-large.uk-position-center { transform: translate(-50%, -50%) translate(-$position-large-margin, (-$position-large-margin)); }
-
-.uk-position-large[class*='uk-position-center-left'],
-.uk-position-large[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-large-margin); }
-
-.uk-position-large.uk-position-top-center,
-.uk-position-large.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-large-margin); }
-
 /* Desktop and bigger */
 @media (min-width: $breakpoint-large) {
 
     .uk-position-large {
-        max-width: unquote('calc(100% - (#{$position-large-margin-l} * 2))');
         margin: $position-large-margin-l;
+        --uk-position-margin-offset: #{$position-large-margin-l};
     }
 
-    .uk-position-large.uk-position-center { transform: translate(-50%, -50%) translate(-$position-large-margin-l, (-$position-large-margin-l)); }
+}
+
 
-    .uk-position-large[class*='uk-position-center-left'],
-    .uk-position-large[class*='uk-position-center-right'] { transform: translateY(-50%) translateY(-$position-large-margin-l); }
+/* Schemes
+ ========================================================================== */
 
-    .uk-position-large.uk-position-top-center,
-    .uk-position-large.uk-position-bottom-center { transform: translateX(-50%) translateX(-$position-large-margin-l); }
+.uk-position-relative { position: relative  !important; }
+.uk-position-absolute { position: absolute  !important; }
+.uk-position-fixed { position: fixed  !important; }
+.uk-position-sticky { position: sticky  !important; }
 
-}
+
+/* Layer
+ ========================================================================== */
+
+.uk-position-z-index { z-index: 1; }
 
 
 // Hooks

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/spinner.scss

@@ -11,7 +11,7 @@
 
 $spinner-size:                                   30px !default;
 $spinner-stroke-width:                           1 !default;
-$spinner-radius:                                 floor(($spinner-size - $spinner-stroke-width) / 2) !default; // Minus stroke width to prevent overflow clipping
+$spinner-radius:                                 floor((($spinner-size - $spinner-stroke-width) / 2)) !default; // Minus stroke width to prevent overflow clipping
 $spinner-circumference:                          round(2 * 3.141 * $spinner-radius) !default;
 $spinner-duration:                               1.4s !default;
 
@@ -55,7 +55,7 @@ $spinner-duration:                               1.4s !default;
 @keyframes uk-spinner-dash {
     0% { stroke-dashoffset: $spinner-circumference; }
     50% {
-        stroke-dashoffset: $spinner-circumference/4;
+        stroke-dashoffset: ($spinner-circumference / 4);
         transform:rotate(135deg);
     }
     100% {

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/table.scss

@@ -261,11 +261,11 @@ $table-expand-min-width:                         150px !default;
 
     .uk-table-responsive th:not(:first-child):not(.uk-table-link),
     .uk-table-responsive td:not(:first-child):not(.uk-table-link),
-    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round($table-cell-padding-vertical / 3) !important; }
+    .uk-table-responsive .uk-table-link:not(:first-child) > a { padding-top: round(($table-cell-padding-vertical / 3)) !important; }
 
     .uk-table-responsive th:not(:last-child):not(.uk-table-link),
     .uk-table-responsive td:not(:last-child):not(.uk-table-link),
-    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round($table-cell-padding-vertical / 3) !important; }
+    .uk-table-responsive .uk-table-link:not(:last-child) > a { padding-bottom: round(($table-cell-padding-vertical / 3)) !important; }
 
     .uk-table-justify.uk-table-responsive th,
     .uk-table-justify.uk-table-responsive td {
@@ -312,4 +312,4 @@ $inverse-table-hover-row-background:                     $inverse-table-row-acti
 // @mixin hook-inverse-table-row-active(){}
 // @mixin hook-inverse-table-divider(){}
 // @mixin hook-inverse-table-striped(){}
-// @mixin hook-inverse-table-hover(){}
+// @mixin hook-inverse-table-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: calc(-1 * #{$transition-slide-small-translate}); }
+.uk-transition-slide-bottom-small { --uk-translate-y: #{$transition-slide-small-translate}; }
+.uk-transition-slide-left-small { --uk-translate-x: calc(-1 * #{$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: calc(-1 * #{$transition-slide-medium-translate}); }
+.uk-transition-slide-bottom-medium { --uk-translate-y: #{$transition-slide-medium-translate}; }
+.uk-transition-slide-left-medium { --uk-translate-x: calc(-1 * #{$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; }
 }