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

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

package/src/scss/components/cover.scss

@@ -14,20 +14,25 @@
 
 /*
  * Works with iframes and embedded content
- * 1. Reset responsiveness for embedded content
- * 2. Center object
+ * 1. Apply transform instantly. Needed if transform is transitioned.
+ * 2. Reset responsiveness for embedded content
+ * 3. Center object
  * Note: Percent values on the `top` property only works if this element
  *       is absolute positioned or if the container has a height
  */
 
-.uk-cover {
-    /* 1 */
-    max-width: none;
+.uk-cover,
+/* 1 */
+[uk-cover] {
     /* 2 */
+    max-width: none;
+    /* 3 */
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%,-50%);
+    --uk-position-translate-x: -50%;
+    --uk-position-translate-y: -50%;
+    transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
 }
 
 iframe.uk-cover { pointer-events: none; }

package/src/scss/components/dotnav.scss

@@ -84,11 +84,9 @@ $dotnav-item-active-background:                  rgba($global-color, 0.6) !defau
     @if(mixin-exists(hook-dotnav-item)) {@include hook-dotnav-item();}
 }
 
-/* Hover + Focus */
-.uk-dotnav > * > :hover,
-.uk-dotnav > * > :focus {
+/* Hover */
+.uk-dotnav > * > :hover {
     background-color: $dotnav-item-hover-background;
-    outline: none;
     @if(mixin-exists(hook-dotnav-item-hover)) {@include hook-dotnav-item-hover();}
 }
 

package/src/scss/components/dropdown.scss

@@ -85,9 +85,8 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
     @if(mixin-exists(hook-dropdown-nav-item)) {@include hook-dropdown-nav-item();}
 }
 
-/* Hover + Focus + Active */
+/* Hover + Active */
 .uk-dropdown-nav > li > a:hover,
-.uk-dropdown-nav > li > a:focus,
 .uk-dropdown-nav > li.uk-active > a {
     color: $dropdown-nav-item-hover-color;
     @if(mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();}
@@ -118,7 +117,6 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
 .uk-dropdown-nav .uk-nav-sub a { color: $dropdown-nav-sublist-item-color; }
 
 .uk-dropdown-nav .uk-nav-sub a:hover,
-.uk-dropdown-nav .uk-nav-sub a:focus,
 .uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: $dropdown-nav-sublist-item-hover-color; }
 
 

package/src/scss/components/icon.scss

@@ -131,10 +131,8 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
     @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();}
 }
 
-.uk-icon-link:hover,
-.uk-icon-link:focus {
+.uk-icon-link:hover {
     color: $icon-link-hover-color;
-    outline: none;
     @if(mixin-exists(hook-icon-link-hover)) {@include hook-icon-link-hover();}
 }
 
@@ -165,12 +163,10 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
     @if(mixin-exists(hook-icon-button)) {@include hook-icon-button();}
 }
 
-/* Hover + Focus */
-.uk-icon-button:hover,
-.uk-icon-button:focus {
+/* Hover */
+.uk-icon-button:hover {
     background-color: $icon-button-hover-background;
     color: $icon-button-hover-color;
-    outline: none;
     @if(mixin-exists(hook-icon-button-hover)) {@include hook-icon-button-hover();}
 }
 

package/src/scss/components/iconnav.scss

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

package/src/scss/components/lightbox.scss

@@ -22,6 +22,8 @@
 $lightbox-z-index:                               $global-z-index + 10 !default;
 $lightbox-background:                            #000 !default;
 
+$lightbox-focus-outline:                         rgba(255,255,255,0.7) !default;
+
 $lightbox-item-color:                            rgba(255,255,255,0.7) !default;
 $lightbox-item-max-width:                        100vw !default;
 $lightbox-item-max-height:                       100vh !default;
@@ -89,6 +91,13 @@ $lightbox-button-hover-color:                    #fff !default;
     opacity: 1;
 }
 
+/*
+ * Focus
+ */
+
+.uk-lightbox :focus { outline-color: $lightbox-focus-outline; }
+.uk-lightbox :focus-visible { outline-color: $lightbox-focus-outline; }
+
 
 /* Page
  ========================================================================== */
@@ -111,7 +120,6 @@ $lightbox-button-hover-color:                    #fff !default;
  * 5. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
  *    Using `vh` and `vw` to make responsive image work in IE11
- * 6. Suppress outline on focus
  */
 
 .uk-lightbox-items > * {
@@ -138,9 +146,6 @@ $lightbox-button-hover-color:                    #fff !default;
     max-height: $lightbox-item-max-height;
 }
 
-/* 6 */
-.uk-lightbox-items > :focus { outline: none; }
-
 .uk-lightbox-items > * > :not(iframe) {
     width: auto;
     height: auto;
@@ -201,9 +206,8 @@ $lightbox-button-hover-color:                    #fff !default;
     @if(mixin-exists(hook-lightbox-button)) {@include hook-lightbox-button();}
 }
 
-/* Hover + Focus */
-.uk-lightbox-button:hover,
-.uk-lightbox-button:focus {
+/* Hover */
+.uk-lightbox-button:hover {
     color: $lightbox-button-hover-color;
     @if(mixin-exists(hook-lightbox-button-hover)) {@include hook-lightbox-button-hover();}
 }

package/src/scss/components/link.scss

@@ -39,8 +39,7 @@ a.uk-link-muted,
 
 a.uk-link-muted:hover,
 .uk-link-muted a:hover,
-.uk-link-toggle:hover .uk-link-muted,
-.uk-link-toggle:focus .uk-link-muted {
+.uk-link-toggle:hover .uk-link-muted {
     color: $link-muted-hover-color;
     @if(mixin-exists(hook-link-muted-hover)) {@include hook-link-muted-hover();}
 }
@@ -57,8 +56,7 @@ a.uk-link-text,
 
 a.uk-link-text:hover,
 .uk-link-text a:hover,
-.uk-link-toggle:hover .uk-link-text,
-.uk-link-toggle:focus .uk-link-text {
+.uk-link-toggle:hover .uk-link-text {
     color: $link-text-hover-color;
     @if(mixin-exists(hook-link-text-hover)) {@include hook-link-text-hover();}
 }
@@ -75,8 +73,7 @@ a.uk-link-heading,
 
 a.uk-link-heading:hover,
 .uk-link-heading a:hover,
-.uk-link-toggle:hover .uk-link-heading,
-.uk-link-toggle:focus .uk-link-heading {
+.uk-link-toggle:hover .uk-link-heading {
     color: $link-heading-hover-color;
     text-decoration: $link-heading-hover-text-decoration;
     @if(mixin-exists(hook-link-heading-hover)) {@include hook-link-heading-hover();}
@@ -105,8 +102,6 @@ a.uk-link-reset,
     color: inherit !important;
     text-decoration: none !important;
 }
- 
-.uk-link-toggle:focus { outline: none; }
 
 
 // Hooks

package/src/scss/components/marker.scss

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

package/src/scss/components/nav.scss

@@ -110,12 +110,6 @@ $internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20widt
 /* 4 */
 .uk-nav li > a > * { flex: none; }
 
-/*
- * Remove default focus style
- */
-
-.uk-nav li > a:focus { outline: none; }
-
 /*
  * Items
  * Must target `a` elements to exclude other elements (e.g. lists)
@@ -205,9 +199,8 @@ ul.uk-nav-sub {
     @if(mixin-exists(hook-nav-default-item)) {@include hook-nav-default-item();}
 }
 
-/* Hover + Focus */
-.uk-nav-default > li > a:hover,
-.uk-nav-default > li > a:focus {
+/* Hover */
+.uk-nav-default > li > a:hover {
     color: $nav-default-item-hover-color;
     @if(mixin-exists(hook-nav-default-item-hover)) {@include hook-nav-default-item-hover();}
 }
@@ -242,8 +235,7 @@ ul.uk-nav-sub {
 
 .uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; }
 
-.uk-nav-default .uk-nav-sub a:hover,
-.uk-nav-default .uk-nav-sub a:focus { color: $nav-default-sublist-item-hover-color; }
+.uk-nav-default .uk-nav-sub a:hover { color: $nav-default-sublist-item-hover-color; }
 
 .uk-nav-default .uk-nav-sub li.uk-active > a { color: $nav-default-sublist-item-active-color; }
 
@@ -266,9 +258,8 @@ ul.uk-nav-sub {
     @if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();}
 }
 
-/* Hover + Focus */
-.uk-nav-primary > li > a:hover,
-.uk-nav-primary > li > a:focus {
+/* Hover */
+.uk-nav-primary > li > a:hover {
     color: $nav-primary-item-hover-color;
     @if(mixin-exists(hook-nav-primary-item-hover)) {@include hook-nav-primary-item-hover();}
 }
@@ -303,8 +294,7 @@ ul.uk-nav-sub {
 
 .uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; }
 
-.uk-nav-primary .uk-nav-sub a:hover,
-.uk-nav-primary .uk-nav-sub a:focus { color: $nav-primary-sublist-item-hover-color; }
+.uk-nav-primary .uk-nav-sub a:hover { color: $nav-primary-sublist-item-hover-color; }
 
 .uk-nav-primary .uk-nav-sub li.uk-active > a { color: $nav-primary-sublist-item-active-color; }
 

package/src/scss/components/navbar.scss

@@ -246,14 +246,12 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 /*
  * Hover
- * Apply hover style also to focus state and if dropdown is opened
+ * Apply hover style also if dropdown is opened
  */
 
 .uk-navbar-nav > li:hover > a,
-.uk-navbar-nav > li > a:focus,
 .uk-navbar-nav > li > a[aria-expanded="true"] {
     color: $navbar-nav-item-hover-color;
-    outline: none;
     @if(mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();}
 }
 
@@ -294,10 +292,8 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 }
 
 .uk-navbar-toggle:hover,
-.uk-navbar-toggle:focus,
 .uk-navbar-toggle[aria-expanded="true"] {
     color: $navbar-toggle-hover-color;
-    outline: none;
     text-decoration: none;
     @if(mixin-exists(hook-navbar-toggle-hover)) {@include hook-navbar-toggle-hover();}
 }
@@ -311,9 +307,8 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     @if(mixin-exists(hook-navbar-toggle-icon)) {@include hook-navbar-toggle-icon();}
 }
 
-/* Hover + Focus */
-:hover > .uk-navbar-toggle-icon,
-:focus > .uk-navbar-toggle-icon {
+/* Hover */
+:hover > .uk-navbar-toggle-icon {
     @if(mixin-exists(hook-navbar-toggle-icon-hover)) {@include hook-navbar-toggle-icon-hover();}
 }
 
@@ -435,9 +430,8 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
     @if(mixin-exists(hook-navbar-dropdown-nav-item)) {@include hook-navbar-dropdown-nav-item();}
 }
 
-/* Hover + Focus */
-.uk-navbar-dropdown-nav > li > a:hover,
-.uk-navbar-dropdown-nav > li > a:focus {
+/* Hover */
+.uk-navbar-dropdown-nav > li > a:hover {
     color: $navbar-dropdown-nav-item-hover-color;
     @if(mixin-exists(hook-navbar-dropdown-nav-item-hover)) {@include hook-navbar-dropdown-nav-item-hover();}
 }
@@ -472,8 +466,7 @@ $navbar-dropbar-z-index:                         $global-z-index - 20 !default;
 
 .uk-navbar-dropdown-nav .uk-nav-sub a { color: $navbar-dropdown-nav-sublist-item-color; }
 
-.uk-navbar-dropdown-nav .uk-nav-sub a:hover,
-.uk-navbar-dropdown-nav .uk-nav-sub a:focus { color: $navbar-dropdown-nav-sublist-item-hover-color; }
+.uk-navbar-dropdown-nav .uk-nav-sub a:hover { color: $navbar-dropdown-nav-sublist-item-hover-color; }
 
 .uk-navbar-dropdown-nav .uk-nav-sub li.uk-active > a { color: $navbar-dropdown-nav-sublist-item-active-color; }
 

package/src/scss/components/padding.scss

@@ -16,7 +16,7 @@ $padding-padding-l:                                      $global-medium-gutter !
 
 $padding-small-padding:                                  $global-small-gutter !default;
 
-$padding-large-padding:                                  $global-gutter !default;
+$padding-large-padding:                                  $global-medium-gutter !default;
 $padding-large-padding-l:                                $global-large-gutter !default;
 
 

package/src/scss/components/pagination.scss

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

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