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

package/src/scss/components/base.scss

@@ -76,6 +76,11 @@ $base-pre-line-height:                           1.5 !default;
 $base-pre-font-family:                           $base-code-font-family !default;
 $base-pre-color:                                 $global-color !default;
 
+$base-focus-outline-width:                       2px !default;
+$base-focus-outline-style:                       dotted !default;
+$base-focus-outline:                             $global-emphasis-color !default;
+$base-focus-outline-offset:                      1px !default;
+
 $base-selection-background:                      #39f !default;
 $base-selection-color:                           $global-inverse-color !default;
 
@@ -115,13 +120,6 @@ body { margin: 0; }
 /* Links
  ========================================================================== */
 
-/*
- * Remove the outline on focused links when they are also active or hovered
- */
-
-a:active,
-a:hover { outline: none; }
-
 /*
  * Style
  */
@@ -136,8 +134,7 @@ a,
 
 a:hover,
 .uk-link:hover,
-.uk-link-toggle:hover .uk-link,
-.uk-link-toggle:focus .uk-link {
+.uk-link-toggle:hover .uk-link {
     color: $base-link-hover-color;
     text-decoration: $base-link-hover-text-decoration;
     @if(mixin-exists(hook-base-link-hover)) {@include hook-base-link-hover();}
@@ -522,6 +519,33 @@ pre {
 pre code { font-family: $base-pre-font-family; }
 
 
+/* Focus
+ ========================================================================== */
+
+/*
+ * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor. 
+ * 1. Fallback: Remove `:focus` for a negative tabindexes.
+ * 2. Fallback: Set `:focus` style but not for negative tabindexes.
+ * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
+ * 4. Set `:focus-visible` style for browsers which support it.
+ */
+
+/* 1 */
+:focus { outline: none; }
+
+/* 2 */
+:focus:not([tabindex^='-']) {
+    outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline;
+    outline-offset: $base-focus-outline-offset;
+}
+
+/* 3 */
+:focus:not(:focus-visible) { outline: none; }
+
+/* 4 */
+:focus-visible { outline: $base-focus-outline-width $base-focus-outline-style $base-focus-outline; }
+
+
 /* Selection pseudo-element
  ========================================================================== */
 
@@ -610,6 +634,7 @@ $inverse-base-code-color:                       $inverse-global-color !default;
 $inverse-base-em-color:                         $inverse-global-emphasis-color !default;
 $inverse-base-heading-color:                    $inverse-global-emphasis-color !default;
 $inverse-base-hr-border:                        $inverse-global-border !default;
+$inverse-base-focus-outline:                    $inverse-global-emphasis-color !default;
 
 
 

package/src/scss/components/breadcrumb.scss

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

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

@@ -32,16 +32,16 @@ $card-body-padding-horizontal-l:                $global-medium-gutter !default;
 $card-body-padding-vertical-l:                  $global-medium-gutter !default;
 
 $card-header-padding-horizontal:                $global-gutter !default;
-$card-header-padding-vertical:                  round($global-gutter / 2) !default;
+$card-header-padding-vertical:                  round(($global-gutter / 2)) !default;
 
 $card-header-padding-horizontal-l:              $global-medium-gutter !default;
-$card-header-padding-vertical-l:                round($global-medium-gutter / 2) !default;
+$card-header-padding-vertical-l:                round(($global-medium-gutter / 2)) !default;
 
 $card-footer-padding-horizontal:                $global-gutter !default;
 $card-footer-padding-vertical:                  ($global-gutter / 2) !default;
 
 $card-footer-padding-horizontal-l:              $global-medium-gutter !default;
-$card-footer-padding-vertical-l:                round($global-medium-gutter / 2) !default;
+$card-footer-padding-vertical-l:                round(($global-medium-gutter / 2)) !default;
 
 $card-title-font-size:                          $global-large-font-size !default;
 $card-title-line-height:                        1.4 !default;
@@ -76,16 +76,16 @@ $card-secondary-color-mode:                     light !default;
 $card-small-body-padding-horizontal:            $global-margin !default;
 $card-small-body-padding-vertical:              $global-margin !default;
 $card-small-header-padding-horizontal:          $global-margin !default;
-$card-small-header-padding-vertical:            round($global-margin / 1.5) !default;
+$card-small-header-padding-vertical:            round(($global-margin / 1.5)) !default;
 $card-small-footer-padding-horizontal:          $global-margin !default;
-$card-small-footer-padding-vertical:            round($global-margin / 1.5) !default;
+$card-small-footer-padding-vertical:            round(($global-margin / 1.5)) !default;
 
 $card-large-body-padding-horizontal-l:          $global-large-gutter !default;
 $card-large-body-padding-vertical-l:            $global-large-gutter !default;
 $card-large-header-padding-horizontal-l:        $global-large-gutter !default;
-$card-large-header-padding-vertical-l:          round($global-large-gutter / 2) !default;
+$card-large-header-padding-vertical-l:          round(($global-large-gutter / 2)) !default;
 $card-large-footer-padding-horizontal-l:        $global-large-gutter !default;
-$card-large-footer-padding-vertical-l:          round($global-large-gutter / 2) !default;
+$card-large-footer-padding-vertical-l:          round(($global-large-gutter / 2)) !default;
 
 
 /* ========================================================================

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/form-range.scss

@@ -83,7 +83,7 @@ $form-range-track-focus-background:              darken($form-range-track-backgr
 .uk-range::-webkit-slider-thumb {
     /* 1 */
     -webkit-appearance: none;
-    margin-top: (floor($form-range-thumb-height / 2) * -1);
+    margin-top: (floor(($form-range-thumb-height / 2)) * -1);
     /* 2 */
     height: $form-range-thumb-height;
     width: $form-range-thumb-width;

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

@@ -77,7 +77,7 @@ $notification-message-danger-color:                    $global-danger-background
 .uk-notification-top-center,
 .uk-notification-bottom-center {
     left: 50%;
-    margin-left: ($notification-width / -2);
+    margin-left: (($notification-width / -2));
 }
 
 .uk-notification-bottom-left,

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