uikit 3.7.6 → 3.8.0

package/src/less/components/button.less

@@ -143,12 +143,6 @@
     .hook-button-hover;
 }
 
-/* Focus */
-.uk-button:focus {
-    outline: none;
-    .hook-button-focus;
-}
-
 /* OnClick + Active */
 .uk-button:active,
 .uk-button.uk-active {
@@ -169,9 +163,8 @@
     .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;
     .hook-button-default-hover;
@@ -195,9 +188,8 @@
     .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;
     .hook-button-primary-hover;
@@ -221,9 +213,8 @@
     .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;
     .hook-button-secondary-hover;
@@ -247,9 +238,8 @@
     .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;
     .hook-button-danger-hover;
@@ -315,9 +305,8 @@
     .hook-button-text;
 }
 
-/* Hover + Focus */
-.uk-button-text:hover,
-.uk-button-text:focus {
+/* Hover */
+.uk-button-text:hover {
     color: @button-text-hover-color;
     .hook-button-text-hover;
 }
@@ -344,9 +333,8 @@
     .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 @@
 
 .hook-button() {}
 .hook-button-hover() {}
-.hook-button-focus() {}
 .hook-button-active() {}
 .hook-button-default() {}
 .hook-button-default-hover() {}
@@ -447,8 +434,7 @@
         .hook-inverse-button-default;
     }
 
-    .uk-button-default:hover,
-    .uk-button-default:focus {
+    .uk-button-default:hover {
         background-color: @inverse-button-default-hover-background;
         color: @inverse-button-default-hover-color;
         .hook-inverse-button-default-hover;
@@ -471,8 +457,7 @@
         .hook-inverse-button-primary;
     }
 
-    .uk-button-primary:hover,
-    .uk-button-primary:focus {
+    .uk-button-primary:hover {
         background-color: @inverse-button-primary-hover-background;
         color: @inverse-button-primary-hover-color;
         .hook-inverse-button-primary-hover;
@@ -495,8 +480,7 @@
         .hook-inverse-button-secondary;
     }
 
-    .uk-button-secondary:hover,
-    .uk-button-secondary:focus {
+    .uk-button-secondary:hover {
         background-color: @inverse-button-secondary-hover-background;
         color: @inverse-button-secondary-hover-color;
         .hook-inverse-button-secondary-hover;
@@ -518,8 +502,7 @@
         .hook-inverse-button-text;
     }
 
-    .uk-button-text:hover,
-    .uk-button-text:focus {
+    .uk-button-text:hover {
         color: @inverse-button-text-hover-color;
         .hook-inverse-button-text-hover;
     }
@@ -538,9 +521,7 @@
         .hook-inverse-button-link;
     }
 
-    .uk-button-link:hover,
-    .uk-button-link:focus { color: @inverse-button-link-hover-color; }
-
+    .uk-button-link:hover { color: @inverse-button-link-hover-color; }
 
 }
 

package/src/less/components/close.less

@@ -26,11 +26,9 @@
     .hook-close;
 }
 
-/* Hover + Focus */
-.uk-close:hover,
-.uk-close:focus {
+/* Hover */
+.uk-close:hover {
     color: @close-hover-color;
-    outline: none;
     .hook-close-hover;
 }
 
@@ -58,8 +56,7 @@
         .hook-inverse-close;
     }
 
-    .uk-close:hover,
-    .uk-close:focus {
+    .uk-close:hover {
         color: @inverse-close-hover-color;
         .hook-inverse-close-hover;
     }

package/src/less/components/cover.less

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

@@ -84,11 +84,9 @@
     .hook-dotnav-item;
 }
 
-/* Hover + Focus */
-.uk-dotnav > * > :hover,
-.uk-dotnav > * > :focus {
+/* Hover */
+.uk-dotnav > * > :hover {
     background-color: @dotnav-item-hover-background;
-    outline: none;
     .hook-dotnav-item-hover;
 }
 
@@ -156,8 +154,7 @@
         .hook-inverse-dotnav-item;
     }
 
-    .uk-dotnav > * > :hover,
-    .uk-dotnav > * > :focus {
+    .uk-dotnav > * > :hover {
         background-color: @inverse-dotnav-item-hover-background;
         .hook-inverse-dotnav-item-hover;
     }

package/src/less/components/dropdown.less

@@ -85,9 +85,8 @@
     .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;
     .hook-dropdown-nav-item-hover;
@@ -118,7 +117,6 @@
 .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/less/components/icon.less

@@ -131,10 +131,8 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
     .hook-icon-link;
 }
 
-.uk-icon-link:hover,
-.uk-icon-link:focus {
+.uk-icon-link:hover {
     color: @icon-link-hover-color;
-    outline: none;
     .hook-icon-link-hover;
 }
 
@@ -165,12 +163,10 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
     .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;
     .hook-icon-button-hover;
 }
 
@@ -221,8 +217,7 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
         .hook-inverse-icon-link;
     }
 
-    .uk-icon-link:hover,
-    .uk-icon-link:focus {
+    .uk-icon-link:hover {
         color: @inverse-icon-link-hover-color;
         .hook-inverse-icon-link-hover;
     }
@@ -243,8 +238,7 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
         .hook-inverse-icon-button;
     }
 
-    .uk-icon-button:hover,
-    .uk-icon-button:focus {
+    .uk-icon-button:hover {
         background-color: @inverse-icon-button-hover-background;
         color: @inverse-icon-button-hover-color;
         .hook-inverse-icon-button-hover;

package/src/less/components/iconnav.less

@@ -84,11 +84,9 @@
     .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;
     .hook-iconnav-item-hover;
 }
 
@@ -148,8 +146,7 @@
         .hook-inverse-iconnav-item;
     }
 
-    .uk-iconnav > * > a:hover,
-    .uk-iconnav > * > a:focus {
+    .uk-iconnav > * > a:hover {
         color: @inverse-iconnav-item-hover-color;
         .hook-inverse-iconnav-item-hover;
     }

package/src/less/components/lightbox.less

@@ -22,6 +22,8 @@
 @lightbox-z-index:                              @global-z-index + 10;
 @lightbox-background:                           #000;
 
+@lightbox-focus-outline:                        rgba(255,255,255,0.7);
+
 @lightbox-item-color:                           rgba(255,255,255,0.7);
 @lightbox-item-max-width:                       100vw;
 @lightbox-item-max-height:                      100vh;
@@ -89,6 +91,13 @@
     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 @@
  * 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 @@
     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 @@
     .hook-lightbox-button;
 }
 
-/* Hover + Focus */
-.uk-lightbox-button:hover,
-.uk-lightbox-button:focus {
+/* Hover */
+.uk-lightbox-button:hover {
     color: @lightbox-button-hover-color;
     .hook-lightbox-button-hover;
 }

package/src/less/components/link.less

@@ -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;
     .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;
     .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;
     .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
@@ -142,24 +137,21 @@ a.uk-link-reset,
 
     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: @inverse-link-muted-hover-color;
         .hook-inverse-link-muted-hover;
     }
 
     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: @inverse-link-text-hover-color;
         .hook-inverse-link-text-hover;
     }
 
     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: @inverse-link-heading-hover-color;
         .hook-inverse-link-heading-hover;
     }

package/src/less/components/marker.less

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

package/src/less/components/nav.less

@@ -110,12 +110,6 @@
 /* 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 {
     .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;
     .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 {
     .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;
     .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; }
 
@@ -412,8 +402,7 @@ ul.uk-nav-sub {
         .hook-inverse-nav-default-item;
     }
 
-    .uk-nav-default > li > a:hover,
-    .uk-nav-default > li > a:focus {
+    .uk-nav-default > li > a:hover {
         color: @inverse-nav-default-item-hover-color;
         .hook-inverse-nav-default-item-hover;
     }
@@ -435,8 +424,7 @@ ul.uk-nav-sub {
 
     .uk-nav-default .uk-nav-sub a { color: @inverse-nav-default-sublist-item-color; }
 
-    .uk-nav-default .uk-nav-sub a:hover,
-    .uk-nav-default .uk-nav-sub a:focus { color: @inverse-nav-default-sublist-item-hover-color; }
+    .uk-nav-default .uk-nav-sub a:hover { color: @inverse-nav-default-sublist-item-hover-color; }
 
     .uk-nav-default .uk-nav-sub li.uk-active > a { color: @inverse-nav-default-sublist-item-active-color; }
 
@@ -449,8 +437,7 @@ ul.uk-nav-sub {
         .hook-inverse-nav-primary-item;
     }
 
-    .uk-nav-primary > li > a:hover,
-    .uk-nav-primary > li > a:focus {
+    .uk-nav-primary > li > a:hover {
         color: @inverse-nav-primary-item-hover-color;
         .hook-inverse-nav-primary-item-hover;
     }
@@ -472,8 +459,7 @@ ul.uk-nav-sub {
 
     .uk-nav-primary .uk-nav-sub a { color: @inverse-nav-primary-sublist-item-color; }
 
-    .uk-nav-primary .uk-nav-sub a:hover,
-    .uk-nav-primary .uk-nav-sub a:focus { color: @inverse-nav-primary-sublist-item-hover-color; }
+    .uk-nav-primary .uk-nav-sub a:hover { color: @inverse-nav-primary-sublist-item-hover-color; }
 
     .uk-nav-primary .uk-nav-sub li.uk-active > a { color: @inverse-nav-primary-sublist-item-active-color; }
 

package/src/less/components/navbar.less

@@ -246,14 +246,12 @@
 
 /*
  * 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;
     .hook-navbar-nav-item-hover;
 }
 
@@ -294,10 +292,8 @@
 }
 
 .uk-navbar-toggle:hover,
-.uk-navbar-toggle:focus,
 .uk-navbar-toggle[aria-expanded="true"] {
     color: @navbar-toggle-hover-color;
-    outline: none;
     text-decoration: none;
     .hook-navbar-toggle-hover;
 }
@@ -311,9 +307,8 @@
     .hook-navbar-toggle-icon;
 }
 
-/* Hover + Focus */
-:hover > .uk-navbar-toggle-icon,
-:focus > .uk-navbar-toggle-icon {
+/* Hover */
+:hover > .uk-navbar-toggle-icon {
     .hook-navbar-toggle-icon-hover;
 }
 
@@ -435,9 +430,8 @@
     .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;
     .hook-navbar-dropdown-nav-item-hover;
 }
@@ -472,8 +466,7 @@
 
 .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; }
 
@@ -551,7 +544,6 @@
     }
 
     .uk-navbar-nav > li:hover > a,
-    .uk-navbar-nav > li > a:focus,
     .uk-navbar-nav > li > a[aria-expanded="true"] {
         color: @inverse-navbar-nav-item-hover-color;
         .hook-inverse-navbar-nav-item-hover;
@@ -578,7 +570,6 @@
     }
 
     .uk-navbar-toggle:hover,
-    .uk-navbar-toggle:focus,
     .uk-navbar-toggle[aria-expanded="true"] {
         color: @inverse-navbar-toggle-hover-color;
         .hook-inverse-navbar-toggle-hover;

package/src/less/components/pagination.less

@@ -81,9 +81,8 @@
     .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;
     .hook-pagination-item-hover;
@@ -130,8 +129,7 @@
         .hook-inverse-pagination-item;
     }
 
-    .uk-pagination > * > :hover,
-    .uk-pagination > * > :focus {
+    .uk-pagination > * > :hover {
         color: @inverse-pagination-item-hover-color;
         .hook-inverse-pagination-item-hover;
     }