uikit 3.7.6 → 3.8.0

package/src/less/components/position.less

@@ -39,12 +39,14 @@
    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 @@
 [class*='uk-position-center'] {
     position: absolute !important;
     /* 1 */
-    max-width: 100%;
+    max-width: ~'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 @@
     right: 0;
 }
 
-
-/* Corners
- ========================================================================== */
+/*
+ * Corners
+ */
 
 .uk-position-top-left {
     top: 0;
@@ -113,23 +116,25 @@
 /*
  * 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: ~'calc(50% - var(--uk-position-margin-offset))';
+    left: ~'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: ~'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 @@
 /* Horizontal */
 .uk-position-top-center,
 .uk-position-bottom-center {
-    left: 50%;
-    transform: translateX(-50%);
+    left: ~'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 @@
 }
 
 
-/* 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: ~'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: ~'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: ~'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: ~'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/less/components/search.less

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

package/src/less/components/slidenav.less

@@ -40,11 +40,9 @@
     .hook-slidenav;
 }
 
-/* Hover + Focus */
-.uk-slidenav:hover,
-.uk-slidenav:focus {
+/* Hover */
+.uk-slidenav:hover {
     color: @slidenav-hover-color;
-    outline: none;
     .hook-slidenav-hover;
 }
 
@@ -122,8 +120,7 @@
         .hook-inverse-slidenav;
     }
 
-    .uk-slidenav:hover,
-    .uk-slidenav:focus {
+    .uk-slidenav:hover {
         color: @inverse-slidenav-hover-color;
         .hook-inverse-slidenav-hover;
     }

package/src/less/components/slider.less

@@ -94,7 +94,6 @@
  *    `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 @@
     touch-action: pan-y;
 }
 
-/* 5 */
-.uk-slider-items > :focus { outline: none; }
-
 
 // Hooks
 // ========================================================================

package/src/less/components/slideshow.less

@@ -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/less/components/subnav.less

@@ -104,12 +104,10 @@
     .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;
     .hook-subnav-item-hover;
 }
 
@@ -168,9 +166,8 @@
     .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;
     .hook-subnav-pill-item-hover;
@@ -243,8 +240,7 @@
         .hook-inverse-subnav-item;
     }
 
-    .uk-subnav > * > a:hover,
-    .uk-subnav > * > a:focus {
+    .uk-subnav > * > a:hover {
         color: @inverse-subnav-item-hover-color;
         .hook-inverse-subnav-item-hover;
     }
@@ -273,8 +269,7 @@
         .hook-inverse-subnav-pill-item;
     }
 
-    .uk-subnav-pill > * > a:hover,
-    .uk-subnav-pill > * > a:focus {
+    .uk-subnav-pill > * > a:hover {
         background-color: @inverse-subnav-pill-item-hover-background;
         color: @inverse-subnav-pill-item-hover-color;
         .hook-inverse-subnav-pill-item-hover;

package/src/less/components/tab.less

@@ -90,9 +90,8 @@
     .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;
     .hook-tab-item-hover;
@@ -199,8 +198,7 @@
         .hook-inverse-tab-item;
     }
 
-    .uk-tab > * > a:hover,
-    .uk-tab > * > a:focus{
+    .uk-tab > * > a:hover {
         color: @inverse-tab-item-hover-color;
         .hook-inverse-tab-item-hover;
     }

package/src/less/components/thumbnav.less

@@ -63,10 +63,8 @@
     .hook-thumbnav-item;
 }
 
-/* Hover + Focus */
-.uk-thumbnav > * > :hover,
-.uk-thumbnav > * > :focus {
-    outline: none;
+/* Hover */
+.uk-thumbnav > * > :hover {
     .hook-thumbnav-item-hover;
 }
 
@@ -120,8 +118,7 @@
         .hook-inverse-thumbnav-item;
     }
 
-    .uk-thumbnav > * > :hover,
-    .uk-thumbnav > * > :focus {
+    .uk-thumbnav > * > :hover {
         .hook-inverse-thumbnav-item-hover;
     }
 

package/src/less/components/totop.less

@@ -31,11 +31,9 @@
     .hook-totop;
 }
 
-/* Hover + Focus */
-.uk-totop:hover,
-.uk-totop:focus {
+/* Hover */
+.uk-totop:hover {
     color: @totop-hover-color;
-    outline: none;
     .hook-totop-hover;
 }
 
@@ -71,8 +69,7 @@
         .hook-inverse-totop;
     }
 
-    .uk-totop:hover,
-    .uk-totop:focus {
+    .uk-totop:hover {
         color: @inverse-totop-hover-color;
         .hook-inverse-totop-hover;
     }

package/src/less/components/transition.less

@@ -38,26 +38,6 @@
    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 @@
  * 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 @@
 
 .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/less/components/utility.less

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