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

package/src/scss/mixins.scss

@@ -18,8 +18,7 @@
         @if(mixin-exists(hook-inverse-accordion-title)) {@include hook-inverse-accordion-title();}
     }
 
-    .uk-accordion-title:hover,
-    .uk-accordion-title:focus {
+    .uk-accordion-title:hover {
         color: $inverse-accordion-title-hover-color;
         @if(mixin-exists(hook-inverse-accordion-title-hover)) {@include hook-inverse-accordion-title-hover();}
     }
@@ -68,8 +67,7 @@
         @if(mixin-exists(hook-inverse-badge)) {@include hook-inverse-badge();}
     }
 
-    .uk-badge:hover,
-    .uk-badge:focus {
+    .uk-badge:hover {
         @if(mixin-exists(hook-inverse-badge-hover)) {@include hook-inverse-badge-hover();}
     }
 
@@ -122,8 +120,7 @@
 
     a:hover,
     .uk-link:hover,
-    .uk-link-toggle:hover .uk-link,
-    .uk-link-toggle:focus .uk-link {
+    .uk-link-toggle:hover .uk-link {
         color: $inverse-base-link-hover-color;
         @if(mixin-exists(hook-inverse-base-link-hover)) {@include hook-inverse-base-link-hover();}
     }
@@ -209,6 +206,13 @@
         @if(mixin-exists(hook-inverse-base-hr)) {@include hook-inverse-base-hr();}
     }
 
+    //
+    // Focus
+    //
+
+    :focus { outline-color: $inverse-base-focus-outline; }
+    :focus-visible { outline-color: $inverse-base-focus-outline; }
+
 }
 @mixin hook-breadcrumb(){}
 @mixin hook-breadcrumb-item(){}
@@ -229,8 +233,7 @@
         @if(mixin-exists(hook-inverse-breadcrumb-item)) {@include hook-inverse-breadcrumb-item();}
     }
 
-    .uk-breadcrumb > * > :hover,
-    .uk-breadcrumb > * > :focus {
+    .uk-breadcrumb > * > :hover {
         color: $inverse-breadcrumb-item-hover-color;
         @if(mixin-exists(hook-inverse-breadcrumb-item-hover)) {@include hook-inverse-breadcrumb-item-hover();}
     }
@@ -257,7 +260,6 @@
 }
 @mixin hook-button(){}
 @mixin hook-button-hover(){}
-@mixin hook-button-focus(){}
 @mixin hook-button-active(){}
 @mixin hook-button-default(){}
 @mixin hook-button-default-hover(){}
@@ -304,8 +306,7 @@
         @if(mixin-exists(hook-inverse-button-default)) {@include 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;
         @if(mixin-exists(hook-inverse-button-default-hover)) {@include hook-inverse-button-default-hover();}
@@ -328,8 +329,7 @@
         @if(mixin-exists(hook-inverse-button-primary)) {@include 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;
         @if(mixin-exists(hook-inverse-button-primary-hover)) {@include hook-inverse-button-primary-hover();}
@@ -352,8 +352,7 @@
         @if(mixin-exists(hook-inverse-button-secondary)) {@include 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;
         @if(mixin-exists(hook-inverse-button-secondary-hover)) {@include hook-inverse-button-secondary-hover();}
@@ -375,8 +374,7 @@
         @if(mixin-exists(hook-inverse-button-text)) {@include hook-inverse-button-text();}
     }
 
-    .uk-button-text:hover,
-    .uk-button-text:focus {
+    .uk-button-text:hover {
         color: $inverse-button-text-hover-color;
         @if(mixin-exists(hook-inverse-button-text-hover)) {@include hook-inverse-button-text-hover();}
     }
@@ -395,9 +393,7 @@
         @if(mixin-exists(hook-inverse-button-link)) {@include 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; }
 
 }
 @mixin hook-card(){}
@@ -446,8 +442,7 @@
         @if(mixin-exists(hook-inverse-close)) {@include hook-inverse-close();}
     }
 
-    .uk-close:hover,
-    .uk-close:focus {
+    .uk-close:hover {
         color: $inverse-close-hover-color;
         @if(mixin-exists(hook-inverse-close-hover)) {@include hook-inverse-close-hover();}
     }
@@ -568,8 +563,7 @@
         @if(mixin-exists(hook-inverse-dotnav-item)) {@include hook-inverse-dotnav-item();}
     }
 
-    .uk-dotnav > * > :hover,
-    .uk-dotnav > * > :focus {
+    .uk-dotnav > * > :hover {
         background-color: $inverse-dotnav-item-hover-background;
         @if(mixin-exists(hook-inverse-dotnav-item-hover)) {@include hook-inverse-dotnav-item-hover();}
     }
@@ -820,8 +814,7 @@
         @if(mixin-exists(hook-inverse-icon-link)) {@include hook-inverse-icon-link();}
     }
 
-    .uk-icon-link:hover,
-    .uk-icon-link:focus {
+    .uk-icon-link:hover {
         color: $inverse-icon-link-hover-color;
         @if(mixin-exists(hook-inverse-icon-link-hover)) {@include hook-inverse-icon-link-hover();}
     }
@@ -842,8 +835,7 @@
         @if(mixin-exists(hook-inverse-icon-button)) {@include 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;
         @if(mixin-exists(hook-inverse-icon-button-hover)) {@include hook-inverse-icon-button-hover();}
@@ -871,8 +863,7 @@
         @if(mixin-exists(hook-inverse-iconnav-item)) {@include hook-inverse-iconnav-item();}
     }
 
-    .uk-iconnav > * > a:hover,
-    .uk-iconnav > * > a:focus {
+    .uk-iconnav > * > a:hover {
         color: $inverse-iconnav-item-hover-color;
         @if(mixin-exists(hook-inverse-iconnav-item-hover)) {@include hook-inverse-iconnav-item-hover();}
     }
@@ -893,24 +884,21 @@
 
     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;
         @if(mixin-exists(hook-inverse-link-muted-hover)) {@include 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;
         @if(mixin-exists(hook-inverse-link-text-hover)) {@include 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;
         @if(mixin-exists(hook-inverse-link-heading-hover)) {@include hook-inverse-link-heading-hover();}
     }
@@ -946,8 +934,7 @@
         @if(mixin-exists(hook-inverse-totop)) {@include hook-inverse-totop();}
     }
 
-    .uk-totop:hover,
-    .uk-totop:focus {
+    .uk-totop:hover {
         color: $inverse-totop-hover-color;
         @if(mixin-exists(hook-inverse-totop-hover)) {@include hook-inverse-totop-hover();}
     }
@@ -1019,8 +1006,7 @@
         @if(mixin-exists(hook-inverse-search-toggle)) {@include hook-inverse-search-toggle();}
     }
 
-    .uk-search-toggle:hover,
-    .uk-search-toggle:focus {
+    .uk-search-toggle:hover {
         color: $inverse-search-toggle-hover-color;
         @if(mixin-exists(hook-inverse-search-toggle-hover)) {@include hook-inverse-search-toggle-hover();}
     }
@@ -1048,8 +1034,7 @@
         @if(mixin-exists(hook-inverse-nav-default-item)) {@include 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;
         @if(mixin-exists(hook-inverse-nav-default-item-hover)) {@include hook-inverse-nav-default-item-hover();}
     }
@@ -1071,8 +1056,7 @@
 
     .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; }
 
@@ -1085,8 +1069,7 @@
         @if(mixin-exists(hook-inverse-nav-primary-item)) {@include 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;
         @if(mixin-exists(hook-inverse-nav-primary-item-hover)) {@include hook-inverse-nav-primary-item-hover();}
     }
@@ -1108,8 +1091,7 @@
 
     .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; }
 
@@ -1131,7 +1113,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;
         @if(mixin-exists(hook-inverse-navbar-nav-item-hover)) {@include hook-inverse-navbar-nav-item-hover();}
@@ -1158,7 +1139,6 @@
     }
 
     .uk-navbar-toggle:hover,
-    .uk-navbar-toggle:focus,
     .uk-navbar-toggle[aria-expanded="true"] {
         color: $inverse-navbar-toggle-hover-color;
         @if(mixin-exists(hook-inverse-navbar-toggle-hover)) {@include hook-inverse-navbar-toggle-hover();}
@@ -1172,8 +1152,7 @@
         @if(mixin-exists(hook-inverse-subnav-item)) {@include hook-inverse-subnav-item();}
     }
 
-    .uk-subnav > * > a:hover,
-    .uk-subnav > * > a:focus {
+    .uk-subnav > * > a:hover {
         color: $inverse-subnav-item-hover-color;
         @if(mixin-exists(hook-inverse-subnav-item-hover)) {@include hook-inverse-subnav-item-hover();}
     }
@@ -1202,8 +1181,7 @@
         @if(mixin-exists(hook-inverse-subnav-pill-item)) {@include 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;
         @if(mixin-exists(hook-inverse-subnav-pill-item-hover)) {@include hook-inverse-subnav-pill-item-hover();}
@@ -1238,8 +1216,7 @@
         @if(mixin-exists(hook-inverse-pagination-item)) {@include hook-inverse-pagination-item();}
     }
 
-    .uk-pagination > * > :hover,
-    .uk-pagination > * > :focus {
+    .uk-pagination > * > :hover {
         color: $inverse-pagination-item-hover-color;
         @if(mixin-exists(hook-inverse-pagination-item-hover)) {@include hook-inverse-pagination-item-hover();}
     }
@@ -1266,8 +1243,7 @@
         @if(mixin-exists(hook-inverse-tab-item)) {@include hook-inverse-tab-item();}
     }
 
-    .uk-tab > * > a:hover,
-    .uk-tab > * > a:focus{
+    .uk-tab > * > a:hover {
         color: $inverse-tab-item-hover-color;
         @if(mixin-exists(hook-inverse-tab-item-hover)) {@include hook-inverse-tab-item-hover();}
     }
@@ -1290,8 +1266,7 @@
         @if(mixin-exists(hook-inverse-slidenav)) {@include hook-inverse-slidenav();}
     }
 
-    .uk-slidenav:hover,
-    .uk-slidenav:focus {
+    .uk-slidenav:hover {
         color: $inverse-slidenav-hover-color;
         @if(mixin-exists(hook-inverse-slidenav-hover)) {@include hook-inverse-slidenav-hover();}
     }
@@ -1332,8 +1307,7 @@
         @if(mixin-exists(hook-inverse-logo)) {@include hook-inverse-logo();}
     }
 
-    .uk-logo:hover,
-    .uk-logo:focus {
+    .uk-logo:hover {
         color: $inverse-logo-hover-color;
         @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
     }
@@ -1428,8 +1402,7 @@
         @if(mixin-exists(hook-inverse-marker)) {@include hook-inverse-marker();}
     }
 
-    .uk-marker:hover,
-    .uk-marker:focus {
+    .uk-marker:hover {
         color: $inverse-marker-hover-color;
         @if(mixin-exists(hook-inverse-marker-hover)) {@include hook-inverse-marker-hover();}
     }
@@ -1709,8 +1682,7 @@
         @if(mixin-exists(hook-inverse-thumbnav-item)) {@include hook-inverse-thumbnav-item();}
     }
 
-    .uk-thumbnav > * > :hover,
-    .uk-thumbnav > * > :focus {
+    .uk-thumbnav > * > :hover {
         @if(mixin-exists(hook-inverse-thumbnav-item-hover)) {@include hook-inverse-thumbnav-item-hover();}
     }
 

package/src/scss/theme/button.scss

@@ -47,8 +47,6 @@ $button-text-border:                             $button-text-hover-color !defau
 
 // @mixin hook-button-hover(){}
 
-// @mixin hook-button-focus(){}
-
 // @mixin hook-button-active(){}
 
 

package/src/scss/theme/form.scss

@@ -34,7 +34,7 @@ $form-danger-border:                             $global-danger-background !defa
 $form-success-border:                            $global-success-background !default;
 
 $form-blank-focus-border:                        $global-border !default;
-$form-blank-focus-border-style:                  dashed !default;
+$form-blank-focus-border-style:                  solid !default;
 
 $form-radio-border-width:                        $global-border-width !default;
 $form-radio-border:                              darken($global-border, 10%) !default;

package/src/scss/theme/table.scss

@@ -65,4 +65,5 @@ $table-striped-border:                           $global-border !default;
 // @mixin hook-inverse-table-row-active(){}
 // @mixin hook-inverse-table-divider(){}
 
-// @mixin hook-inverse-table-hover(){}
+// @mixin hook-inverse-table-hover(){}
+

package/src/scss/variables-theme.scss

@@ -142,6 +142,10 @@ $base-pre-font-size: $global-small-font-size !default;
 $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;
 $inverse-base-color: $inverse-global-color !default;
@@ -152,6 +156,7 @@ $inverse-base-em-color: $inverse-global-emphasis-color !default;
 $inverse-base-heading-color: $inverse-global-emphasis-color !default;
 $inverse-global-border: rgba($global-inverse-color, 0.2) !default;
 $inverse-base-hr-border: $inverse-global-border !default;
+$inverse-base-focus-outline: $inverse-global-emphasis-color !default;
 $breadcrumb-item-font-size: $global-small-font-size !default;
 $breadcrumb-item-color: $global-muted-color !default;
 $breadcrumb-item-hover-color: $global-color !default;
@@ -242,13 +247,13 @@ $card-body-padding-vertical: $global-gutter !default;
 $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;
 $card-badge-top: 15px !default;
@@ -276,16 +281,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;
 $global-large-gutter: 70px !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;
 $inverse-card-badge-background: $inverse-global-primary-background !default;
 $inverse-card-badge-color: $inverse-global-inverse-color !default;
 $close-color: $global-muted-color !default;
@@ -569,6 +574,7 @@ $leader-fill-content: unquote('.') !default;
 $leader-fill-margin-left: $global-small-gutter !default;
 $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;
@@ -795,7 +801,7 @@ $overlay-primary-color-mode: light !default;
 $padding-padding: $global-gutter !default;
 $padding-padding-l: $global-medium-gutter !default;
 $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;
 $pagination-margin-horizontal: 0 !default;
 $pagination-item-padding-vertical: 5px !default;
@@ -884,7 +890,7 @@ $sortable-placeholder-opacity: 0 !default;
 $sortable-empty-height: 50px !default;
 $spinner-size: 30px !default;
 $spinner-stroke-width: 1 !default;
-$spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2) !default;
+$spinner-radius: floor((($spinner-size - $spinner-stroke-width) / 2)) !default;
 $spinner-circumference: round(2 * 3.141 * $spinner-radius) !default;
 $spinner-duration: 1.4s !default;
 $sticky-z-index: $global-z-index - 20 !default;
@@ -1038,11 +1044,11 @@ $dropcap-margin-right: 10px !default;
 $dropcap-font-size: (($global-line-height * 3) * 1em) !default;
 $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;
-$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;
 $deprecated: false !default;
 $breakpoint-small: 640px !default;
 $breakpoint-medium: 960px !default;
@@ -1122,7 +1128,7 @@ $form-disabled-border: $global-border !default;
 $form-danger-border: $global-danger-background !default;
 $form-success-border: $global-success-background !default;
 $form-blank-focus-border: $global-border !default;
-$form-blank-focus-border-style: dashed !default;
+$form-blank-focus-border-style: solid !default;
 $form-radio-border-width: $global-border-width !default;
 $form-radio-border: darken($global-border, 10%) !default;
 $form-radio-focus-border: $global-primary-background !default;

package/src/scss/variables.scss

@@ -142,6 +142,10 @@ $base-pre-font-size: $global-small-font-size !default;
 $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;
 $inverse-base-color: $inverse-global-color !default;
@@ -152,6 +156,7 @@ $inverse-base-em-color: $inverse-global-emphasis-color !default;
 $inverse-base-heading-color: $inverse-global-emphasis-color !default;
 $inverse-global-border: rgba($global-inverse-color, 0.2) !default;
 $inverse-base-hr-border: $inverse-global-border !default;
+$inverse-base-focus-outline: $inverse-global-emphasis-color !default;
 $breadcrumb-item-font-size: $global-small-font-size !default;
 $breadcrumb-item-color: $global-muted-color !default;
 $breadcrumb-item-hover-color: $global-color !default;
@@ -241,13 +246,13 @@ $card-body-padding-vertical: $global-gutter !default;
 $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;
 $card-badge-top: 15px !default;
@@ -275,16 +280,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;
 $global-large-gutter: 70px !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;
 $inverse-card-badge-background: $inverse-global-primary-background !default;
 $inverse-card-badge-color: $inverse-global-inverse-color !default;
 $close-color: $global-muted-color !default;
@@ -567,6 +572,7 @@ $leader-fill-content: unquote('.') !default;
 $leader-fill-margin-left: $global-small-gutter !default;
 $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;
@@ -793,7 +799,7 @@ $overlay-primary-color-mode: light !default;
 $padding-padding: $global-gutter !default;
 $padding-padding-l: $global-medium-gutter !default;
 $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;
 $pagination-margin-horizontal: 0 !default;
 $pagination-item-padding-vertical: 5px !default;
@@ -882,7 +888,7 @@ $sortable-placeholder-opacity: 0 !default;
 $sortable-empty-height: 50px !default;
 $spinner-size: 30px !default;
 $spinner-stroke-width: 1 !default;
-$spinner-radius: floor(($spinner-size - $spinner-stroke-width) / 2) !default;
+$spinner-radius: floor((($spinner-size - $spinner-stroke-width) / 2)) !default;
 $spinner-circumference: round(2 * 3.141 * $spinner-radius) !default;
 $spinner-duration: 1.4s !default;
 $sticky-z-index: $global-z-index - 20 !default;
@@ -1036,11 +1042,11 @@ $dropcap-margin-right: 10px !default;
 $dropcap-font-size: (($global-line-height * 3) * 1em) !default;
 $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;
-$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;
 $deprecated: false !default;
 $breakpoint-small: 640px !default;
 $breakpoint-medium: 960px !default;

package/tests/scroll.html

@@ -6,6 +6,15 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Scroll - UIkit tests</title>
         <script src="js/test.js"></script>
+        <script>
+
+            UIkit.util.on(document, 'change', '#offset', function (e) {
+                UIkit.util.$$('[uk-scroll]').forEach(function (el) {
+                    el.setAttribute('data-offset', e.target.value);
+                })
+            })
+
+        </script>
     </head>
 
     <body>
@@ -14,12 +23,67 @@
 
             <h1>Scroll</h1>
 
+            <div class="uk-margin">
+                <label class="uk-form-label" for="offset">Offset</label>
+                <div class="uk-form-controls">
+                    <input class="uk-input uk-form-width-small" id="offset" type="text" value="0">
+                </div>
+            </div>
             <a class="uk-button uk-button-default" href="#bottom" uk-scroll>Go Down!</a>
+            <a class="uk-button uk-button-default" href="#second-card" uk-scroll>Go to second card!</a>
+            <a class="uk-button uk-button-default" href="#nested-card" uk-scroll>Go to last nested card!</a>
             <a id="js-top-callback" class="uk-button uk-button-default" href="#bottom" uk-scroll>Go Down with callback!</a>
 
-            <div style="height: 2000px;"></div>
+            <div class="uk-flex uk-flex-column uk-flex-center" style="height: 2000px;">
+
+                <div class="uk-overflow-auto" style="height: 300px;">
+                    <div class="uk-card uk-card-default uk-card-hover uk-card-body">
+                        <h3 class="uk-card-title">1</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                    </div>
+                    <div id="second-card" class="uk-card uk-card-primary uk-card-hover uk-card-body">
+                        <h3 class="uk-card-title">2</h3>
+                        <div class="uk-overflow-auto" style="height: 250px;">
+                            <div class="uk-card uk-card-default uk-card-hover uk-card-body">
+                                <h3 class="uk-card-title">Nested 1</h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                            </div>
+                            <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
+                                <h3 class="uk-card-title">Nested 2</h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                            </div>
+                            <div id="nested-card" class="uk-card uk-card-default uk-card-hover uk-card-body">
+                                <h3 class="uk-card-title">Nested 3</h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
+                        <h3 class="uk-card-title">3</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                    </div>
+                </div>
+
+
+            </div>
 
             <a id="bottom" class="uk-button uk-button-default" href="#" uk-scroll>Go Up!</a>
+            <a class="uk-button uk-button-default" href="#nested-card" uk-scroll>Go to last nested card!</a>
 
             <script>