uikit 3.23.13 → 3.23.14-dev.be820cd99

package/src/scss/mixins-theme.scss

@@ -543,6 +543,9 @@
 @mixin hook-card-secondary(){ box-shadow: $card-secondary-box-shadow; }
 @mixin hook-card-secondary-title(){}
 @mixin hook-card-secondary-hover(){ box-shadow: $card-secondary-hover-box-shadow; }
+@mixin hook-card-overlay(){ box-shadow: $card-overlay-box-shadow; }
+@mixin hook-card-overlay-title(){}
+@mixin hook-card-overlay-hover(){ box-shadow: $card-overlay-hover-box-shadow; }
 @mixin hook-card-misc(){
 
     /*
@@ -1018,8 +1021,6 @@
 @mixin hook-heading-xlarge(){}
 @mixin hook-heading-2xlarge(){}
 @mixin hook-heading-3xlarge(){}
-@mixin hook-heading-primary(){}
-@mixin hook-heading-hero(){}
 @mixin hook-heading-divider(){}
 @mixin hook-heading-bullet(){}
 @mixin hook-heading-line(){}
@@ -1030,8 +1031,6 @@
 @mixin hook-inverse-heading-xlarge(){}
 @mixin hook-inverse-heading-2xlarge(){}
 @mixin hook-inverse-heading-3xlarge(){}
-@mixin hook-inverse-heading-primary(){}
-@mixin hook-inverse-heading-hero(){}
 @mixin hook-inverse-heading-divider(){}
 @mixin hook-inverse-heading-bullet(){}
 @mixin hook-inverse-heading-line(){}
@@ -1061,10 +1060,6 @@
         @if(meta.mixin-exists(hook-inverse-heading-3xlarge)) {@include hook-inverse-heading-3xlarge();}
     }
 
-    @if ($deprecated == true) { .uk-heading-primary { @if (meta.mixin-exists(hook-inverse-heading-primary)) {@include hook-inverse-heading-primary();}}}
-
-    @if ($deprecated == true) { .uk-heading-hero { @if (meta.mixin-exists(hook-inverse-heading-hero)) {@include hook-inverse-heading-hero();}}}
-
     .uk-heading-divider {
         border-bottom-color: $inverse-heading-divider-border;
         @if(meta.mixin-exists(hook-inverse-heading-divider)) {@include hook-inverse-heading-divider();}
@@ -1092,6 +1087,11 @@
 }
 @mixin hook-icon-button-hover(){}
 @mixin hook-icon-button-active(){}
+@mixin hook-icon-overlay(){
+    transition: 0.1s ease-in-out;
+    transition-property: color;
+}
+@mixin hook-icon-overlay-hover(){}
 @mixin hook-icon-misc(){}
 @mixin hook-inverse-icon-link(){}
 @mixin hook-inverse-icon-link-hover(){}
@@ -1099,6 +1099,8 @@
 @mixin hook-inverse-icon-button(){}
 @mixin hook-inverse-icon-button-hover(){}
 @mixin hook-inverse-icon-button-active(){}
+@mixin hook-inverse-icon-overlay(){}
+@mixin hook-inverse-icon-overlay-hover(){}
 @mixin hook-inverse-component-icon(){
 
     //
@@ -1143,6 +1145,24 @@
         @if(meta.mixin-exists(hook-inverse-icon-button-active)) {@include hook-inverse-icon-button-active();}
     }
 
+    //
+    // Overlay
+    //
+
+    .uk-icon-overlay,
+    a .uk-icon-overlay
+    a& .uk-icon-overlay {
+        color: $inverse-icon-overlay-color;
+        @if(meta.mixin-exists(hook-inverse-icon-overlay)) {@include hook-inverse-icon-overlay();}
+    }
+
+    .uk-icon-overlay:hover,
+    a:hover .uk-icon-overlay,
+    a&:hover .uk-icon-overlay {
+        color: $inverse-icon-overlay-hover-color;
+        @if(meta.mixin-exists(hook-inverse-icon-overlay-hover)) {@include hook-inverse-icon-overlay-hover();}
+    }
+
 }
 @mixin hook-iconnav(){}
 @mixin hook-iconnav-item(){

package/src/scss/mixins.scss

@@ -421,6 +421,9 @@
 @mixin hook-card-secondary(){}
 @mixin hook-card-secondary-title(){}
 @mixin hook-card-secondary-hover(){}
+@mixin hook-card-overlay(){}
+@mixin hook-card-overlay-title(){}
+@mixin hook-card-overlay-hover(){}
 @mixin hook-card-misc(){}
 @mixin hook-inverse-card-badge(){}
 @mixin hook-inverse-component-card(){
@@ -777,8 +780,6 @@
 @mixin hook-heading-xlarge(){}
 @mixin hook-heading-2xlarge(){}
 @mixin hook-heading-3xlarge(){}
-@mixin hook-heading-primary(){}
-@mixin hook-heading-hero(){}
 @mixin hook-heading-divider(){}
 @mixin hook-heading-bullet(){}
 @mixin hook-heading-line(){}
@@ -789,8 +790,6 @@
 @mixin hook-inverse-heading-xlarge(){}
 @mixin hook-inverse-heading-2xlarge(){}
 @mixin hook-inverse-heading-3xlarge(){}
-@mixin hook-inverse-heading-primary(){}
-@mixin hook-inverse-heading-hero(){}
 @mixin hook-inverse-heading-divider(){}
 @mixin hook-inverse-heading-bullet(){}
 @mixin hook-inverse-heading-line(){}
@@ -820,10 +819,6 @@
         @if(meta.mixin-exists(hook-inverse-heading-3xlarge)) {@include hook-inverse-heading-3xlarge();}
     }
 
-    @if ($deprecated == true) { .uk-heading-primary { @if (meta.mixin-exists(hook-inverse-heading-primary)) {@include hook-inverse-heading-primary();}}}
-
-    @if ($deprecated == true) { .uk-heading-hero { @if (meta.mixin-exists(hook-inverse-heading-hero)) {@include hook-inverse-heading-hero();}}}
-
     .uk-heading-divider {
         border-bottom-color: $inverse-heading-divider-border;
         @if(meta.mixin-exists(hook-inverse-heading-divider)) {@include hook-inverse-heading-divider();}
@@ -848,6 +843,8 @@
 @mixin hook-icon-button(){}
 @mixin hook-icon-button-hover(){}
 @mixin hook-icon-button-active(){}
+@mixin hook-icon-overlay(){}
+@mixin hook-icon-overlay-hover(){}
 @mixin hook-icon-misc(){}
 @mixin hook-inverse-icon-link(){}
 @mixin hook-inverse-icon-link-hover(){}
@@ -855,6 +852,8 @@
 @mixin hook-inverse-icon-button(){}
 @mixin hook-inverse-icon-button-hover(){}
 @mixin hook-inverse-icon-button-active(){}
+@mixin hook-inverse-icon-overlay(){}
+@mixin hook-inverse-icon-overlay-hover(){}
 @mixin hook-inverse-component-icon(){
 
     //
@@ -899,6 +898,24 @@
         @if(meta.mixin-exists(hook-inverse-icon-button-active)) {@include hook-inverse-icon-button-active();}
     }
 
+    //
+    // Overlay
+    //
+
+    .uk-icon-overlay,
+    a .uk-icon-overlay
+    a& .uk-icon-overlay {
+        color: $inverse-icon-overlay-color;
+        @if(meta.mixin-exists(hook-inverse-icon-overlay)) {@include hook-inverse-icon-overlay();}
+    }
+
+    .uk-icon-overlay:hover,
+    a:hover .uk-icon-overlay,
+    a&:hover .uk-icon-overlay {
+        color: $inverse-icon-overlay-hover-color;
+        @if(meta.mixin-exists(hook-inverse-icon-overlay-hover)) {@include hook-inverse-icon-overlay-hover();}
+    }
+
 }
 @mixin hook-iconnav(){}
 @mixin hook-iconnav-item(){}

package/src/scss/variables-theme.scss

@@ -283,6 +283,11 @@ $card-secondary-color: $global-inverse-color !default;
 $card-secondary-title-color: $card-secondary-color !default;
 $card-secondary-hover-background: $card-secondary-background !default;
 $card-secondary-color-mode: light !default;
+$card-overlay-background: rgba($global-background, 0.8) !default;
+$card-overlay-color: $global-color !default;
+$card-overlay-title-color: $global-emphasis-color !default;
+$card-overlay-hover-background: color.adjust($card-overlay-background, $alpha: 0.1) !default;
+$card-overlay-color-mode: dark !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;
@@ -324,14 +329,8 @@ $container-xlarge-max-width: 1600px !default;
 $container-padding-horizontal: 15px !default;
 $container-padding-horizontal-s: $global-gutter !default;
 $container-padding-horizontal-m: $global-medium-gutter !default;
-$countdown-number-line-height: 0.8 !default;
-$countdown-number-font-size: 2rem !default;
-$countdown-number-font-size-s: 4rem !default;
-$countdown-number-font-size-m: 6rem !default;
-$countdown-separator-line-height: 1.6 !default;
-$countdown-separator-font-size: 1rem !default;
-$countdown-separator-font-size-s: 2rem !default;
-$countdown-separator-font-size-m: 3rem !default;
+$countdown-separator-line-height: 2 !default;
+$countdown-separator-font-size: 0.5em !default;
 $description-list-term-color: $global-emphasis-color !default;
 $description-list-term-margin-top: $global-margin !default;
 $description-list-divider-term-margin-top: $global-margin !default;
@@ -436,16 +435,6 @@ $form-focus-color: $global-color !default;
 $form-disabled-background: $global-muted-background !default;
 $form-disabled-color: $global-muted-color !default;
 $form-placeholder-color: $global-muted-color !default;
-$form-small-height: $global-control-small-height !default;
-$form-small-padding-horizontal: 8px !default;
-$form-small-padding-vertical: math.round($form-small-padding-horizontal * 0.6) !default;
-$form-small-line-height: $form-small-height - (2* $form-border-width) !default;
-$form-small-font-size: $global-small-font-size !default;
-$form-large-height: $global-control-large-height !default;
-$form-large-padding-horizontal: 12px !default;
-$form-large-padding-vertical: math.round($form-large-padding-horizontal * 0.6) !default;
-$form-large-line-height: $form-large-height - (2* $form-border-width) !default;
-$form-large-font-size: $global-medium-font-size !default;
 $form-danger-color: $global-danger-background !default;
 $form-success-color: $global-success-background !default;
 $form-width-xsmall: 50px !default;
@@ -467,6 +456,18 @@ $form-radio-checked-icon-color: $global-inverse-color !default;
 $form-radio-checked-focus-background: color.adjust($global-primary-background, $lightness: -10%) !default;
 $form-radio-disabled-background: $global-muted-background !default;
 $form-radio-disabled-icon-color: $global-muted-color !default;
+$form-small-font-size: $global-small-font-size !default;
+$form-small-height: $global-control-small-height !default;
+$form-small-padding-horizontal: 8px !default;
+$form-small-padding-vertical: math.round($form-small-padding-horizontal * 0.6) !default;
+$form-small-line-height: $form-small-height - (2* $form-border-width) !default;
+$form-small-radio-size: 14px !default;
+$form-large-font-size: $global-medium-font-size !default;
+$form-large-height: $global-control-large-height !default;
+$form-large-padding-horizontal: 12px !default;
+$form-large-padding-vertical: math.round($form-large-padding-horizontal * 0.6) !default;
+$form-large-line-height: $form-large-height - (2* $form-border-width) !default;
+$form-large-radio-size: 22px !default;
 $form-legend-font-size: $global-large-font-size !default;
 $form-legend-line-height: 1.4 !default;
 $form-stacked-margin-bottom: 5px !default;
@@ -480,7 +481,7 @@ $form-icon-hover-color: $global-color !default;
 $internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
 $internal-form-datalist-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
 $internal-form-radio-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
-$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
+$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2213%203.5%206%2010%203%207.5%202%208%206%2012.5%2014%204%2013%203.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
 $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
 $inverse-form-background: $inverse-global-muted-background !default;
 $inverse-form-color: $inverse-global-color !default;
@@ -548,17 +549,6 @@ $heading-line-height: $heading-line-border-width !default;
 $heading-line-width: 2000px !default;
 $heading-line-border: $global-border !default;
 $heading-line-margin-horizontal: string.unquote('calc(5px + 0.3em)') !default;
-$heading-primary-font-size-l: 3.75rem !default;
-$heading-primary-line-height-l: 1.1 !default;
-$heading-primary-font-size-m: $heading-primary-font-size-l * 0.9 !default;
-$heading-primary-font-size: $heading-primary-font-size-l * 0.8 !default;
-$heading-primary-line-height: 1.2 !default;
-$heading-hero-font-size-l: 8rem !default;
-$heading-hero-line-height-l: 1 !default;
-$heading-hero-font-size-m: $heading-hero-font-size-l * 0.75 !default;
-$heading-hero-line-height-m: 1 !default;
-$heading-hero-font-size: $heading-hero-font-size-l * 0.5 !default;
-$heading-hero-line-height: 1.1 !default;
 $inverse-heading-divider-border: $inverse-global-border !default;
 $inverse-heading-bullet-border: $inverse-global-border !default;
 $inverse-heading-line-border: $inverse-global-border !default;
@@ -577,6 +567,8 @@ $icon-button-hover-background: color.adjust($icon-button-background, $lightness:
 $icon-button-hover-color: $global-color !default;
 $icon-button-active-background: color.adjust($icon-button-background, $lightness: -10%) !default;
 $icon-button-active-color: $global-color !default;
+$icon-overlay-color: rgba($global-emphasis-color, 0.6) !default;
+$icon-overlay-hover-color: $global-emphasis-color !default;
 $inverse-icon-link-color: $inverse-global-muted-color !default;
 $inverse-icon-link-hover-color: $inverse-global-color !default;
 $inverse-icon-link-active-color: $inverse-global-color !default;
@@ -586,6 +578,8 @@ $inverse-icon-button-hover-background: color.adjust($inverse-icon-button-backgro
 $inverse-icon-button-hover-color: $inverse-global-color !default;
 $inverse-icon-button-active-background: color.adjust($inverse-icon-button-background, $alpha: 0.1) !default;
 $inverse-icon-button-active-color: $inverse-global-color !default;
+$inverse-icon-overlay-color: rgba($inverse-global-emphasis-color, 0.6) !default;
+$inverse-icon-overlay-hover-color: $inverse-global-emphasis-color !default;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
 $iconnav-item-color: $global-muted-color !default;
@@ -1159,6 +1153,7 @@ $panel-scrollable-height: 170px !default;
 $panel-scrollable-padding: 10px !default;
 $panel-scrollable-border-width: $global-border-width !default;
 $panel-scrollable-border: $global-border !default;
+$overflow-fade-size: 100px !default;
 $border-rounded-border-radius: 5px !default;
 $box-shadow-duration: 0.1s !default;
 $box-shadow-bottom-height: 30px !default;
@@ -1234,6 +1229,8 @@ $card-primary-box-shadow: $global-medium-box-shadow !default;
 $card-primary-hover-box-shadow: $global-large-box-shadow !default;
 $card-secondary-box-shadow: $global-medium-box-shadow !default;
 $card-secondary-hover-box-shadow: $global-large-box-shadow !default;
+$card-overlay-box-shadow: $global-medium-box-shadow !default;
+$card-overlay-hover-box-shadow: $global-large-box-shadow !default;
 $comment-primary-padding: $global-gutter !default;
 $comment-primary-background: $global-muted-background !default;
 $description-list-term-font-size: $global-small-font-size !default;

package/src/scss/variables.scss

@@ -282,6 +282,11 @@ $card-secondary-color: $global-inverse-color !default;
 $card-secondary-title-color: $card-secondary-color !default;
 $card-secondary-hover-background: color.adjust($card-secondary-background, $lightness: -5%) !default;
 $card-secondary-color-mode: light !default;
+$card-overlay-background: rgba($global-background, 0.8) !default;
+$card-overlay-color: $global-color !default;
+$card-overlay-title-color: $global-emphasis-color !default;
+$card-overlay-hover-background: color.adjust($card-overlay-background, $alpha: 0.1) !default;
+$card-overlay-color-mode: dark !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;
@@ -323,14 +328,8 @@ $container-xlarge-max-width: 1600px !default;
 $container-padding-horizontal: 15px !default;
 $container-padding-horizontal-s: $global-gutter !default;
 $container-padding-horizontal-m: $global-medium-gutter !default;
-$countdown-number-line-height: 0.8 !default;
-$countdown-number-font-size: 2rem !default;
-$countdown-number-font-size-s: 4rem !default;
-$countdown-number-font-size-m: 6rem !default;
-$countdown-separator-line-height: 1.6 !default;
-$countdown-separator-font-size: 1rem !default;
-$countdown-separator-font-size-s: 2rem !default;
-$countdown-separator-font-size-m: 3rem !default;
+$countdown-separator-line-height: 2 !default;
+$countdown-separator-font-size: 0.5em !default;
 $description-list-term-color: $global-emphasis-color !default;
 $description-list-term-margin-top: $global-margin !default;
 $description-list-divider-term-margin-top: $global-margin !default;
@@ -434,16 +433,6 @@ $form-focus-color: $global-color !default;
 $form-disabled-background: $global-muted-background !default;
 $form-disabled-color: $global-muted-color !default;
 $form-placeholder-color: $global-muted-color !default;
-$form-small-height: $global-control-small-height !default;
-$form-small-padding-horizontal: 8px !default;
-$form-small-padding-vertical: math.round($form-small-padding-horizontal * 0.6) !default;
-$form-small-line-height: $form-small-height !default;
-$form-small-font-size: $global-small-font-size !default;
-$form-large-height: $global-control-large-height !default;
-$form-large-padding-horizontal: 12px !default;
-$form-large-padding-vertical: math.round($form-large-padding-horizontal * 0.6) !default;
-$form-large-line-height: $form-large-height !default;
-$form-large-font-size: $global-medium-font-size !default;
 $form-danger-color: $global-danger-background !default;
 $form-success-color: $global-success-background !default;
 $form-width-xsmall: 50px !default;
@@ -465,6 +454,18 @@ $form-radio-checked-icon-color: $global-inverse-color !default;
 $form-radio-checked-focus-background: color.adjust($global-primary-background, $lightness: -10%) !default;
 $form-radio-disabled-background: $global-muted-background !default;
 $form-radio-disabled-icon-color: $global-muted-color !default;
+$form-small-font-size: $global-small-font-size !default;
+$form-small-height: $global-control-small-height !default;
+$form-small-padding-horizontal: 8px !default;
+$form-small-padding-vertical: math.round($form-small-padding-horizontal * 0.6) !default;
+$form-small-line-height: $form-small-height !default;
+$form-small-radio-size: 14px !default;
+$form-large-font-size: $global-medium-font-size !default;
+$form-large-height: $global-control-large-height !default;
+$form-large-padding-horizontal: 12px !default;
+$form-large-padding-vertical: math.round($form-large-padding-horizontal * 0.6) !default;
+$form-large-line-height: $form-large-height !default;
+$form-large-radio-size: 22px !default;
 $form-legend-font-size: $global-large-font-size !default;
 $form-legend-line-height: 1.4 !default;
 $form-stacked-margin-bottom: $global-small-margin !default;
@@ -478,7 +479,7 @@ $form-icon-hover-color: $global-color !default;
 $internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
 $internal-form-datalist-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
 $internal-form-radio-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22#000%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%222%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
-$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
+$internal-form-checkbox-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2213%203.5%206%2010%203%207.5%202%208%206%2012.5%2014%204%2013%203.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
 $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22#000%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
 $inverse-form-background: $inverse-global-muted-background !default;
 $inverse-form-color: $inverse-global-color !default;
@@ -546,17 +547,6 @@ $heading-line-height: $heading-line-border-width !default;
 $heading-line-width: 2000px !default;
 $heading-line-border: $global-border !default;
 $heading-line-margin-horizontal: string.unquote('calc(5px + 0.3em)') !default;
-$heading-primary-font-size-l: 3.75rem !default;
-$heading-primary-line-height-l: 1.1 !default;
-$heading-primary-font-size-m: $heading-primary-font-size-l * 0.9 !default;
-$heading-primary-font-size: $heading-primary-font-size-l * 0.8 !default;
-$heading-primary-line-height: 1.2 !default;
-$heading-hero-font-size-l: 8rem !default;
-$heading-hero-line-height-l: 1 !default;
-$heading-hero-font-size-m: $heading-hero-font-size-l * 0.75 !default;
-$heading-hero-line-height-m: 1 !default;
-$heading-hero-font-size: $heading-hero-font-size-l * 0.5 !default;
-$heading-hero-line-height: 1.1 !default;
 $inverse-heading-divider-border: $inverse-global-border !default;
 $inverse-heading-bullet-border: $inverse-global-border !default;
 $inverse-heading-line-border: $inverse-global-border !default;
@@ -575,6 +565,8 @@ $icon-button-hover-background: color.adjust($icon-button-background, $lightness:
 $icon-button-hover-color: $global-color !default;
 $icon-button-active-background: color.adjust($icon-button-background, $lightness: -10%) !default;
 $icon-button-active-color: $global-color !default;
+$icon-overlay-color: rgba($global-emphasis-color, 0.6) !default;
+$icon-overlay-hover-color: $global-emphasis-color !default;
 $inverse-icon-link-color: $inverse-global-muted-color !default;
 $inverse-icon-link-hover-color: $inverse-global-color !default;
 $inverse-icon-link-active-color: $inverse-global-color !default;
@@ -584,6 +576,8 @@ $inverse-icon-button-hover-background: color.adjust($inverse-icon-button-backgro
 $inverse-icon-button-hover-color: $inverse-global-color !default;
 $inverse-icon-button-active-background: color.adjust($inverse-icon-button-background, $alpha: 0.1) !default;
 $inverse-icon-button-active-color: $inverse-global-color !default;
+$inverse-icon-overlay-color: rgba($inverse-global-emphasis-color, 0.6) !default;
+$inverse-icon-overlay-hover-color: $inverse-global-emphasis-color !default;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
 $iconnav-item-color: $global-muted-color !default;
@@ -1157,6 +1151,7 @@ $panel-scrollable-height: 170px !default;
 $panel-scrollable-padding: 10px !default;
 $panel-scrollable-border-width: $global-border-width !default;
 $panel-scrollable-border: $global-border !default;
+$overflow-fade-size: 100px !default;
 $border-rounded-border-radius: 5px !default;
 $box-shadow-duration: 0.1s !default;
 $box-shadow-bottom-height: 30px !default;

package/tests/article.html

@@ -18,7 +18,7 @@
 
                 <article class="uk-article">
 
-                    <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
+                    <h1 class="uk-article-title"><a class="uk-link-reset" href>Heading</a></h1>
 
                     <p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
 
@@ -39,7 +39,7 @@
 
                 <article class="uk-article">
 
-                    <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
+                    <h1 class="uk-article-title"><a class="uk-link-reset" href>Heading</a></h1>
 
                     <p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
 
@@ -62,7 +62,7 @@
 
                     <img class="uk-margin-medium-bottom" src="images/photo.jpg" width="1800" height="1200" alt="">
 
-                    <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
+                    <h1 class="uk-article-title"><a class="uk-link-reset" href>Heading</a></h1>
 
                     <p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
 
@@ -85,7 +85,7 @@
 
                     <img class="uk-margin-medium-bottom" src="images/dark.jpg" width="1800" height="1200" alt="">
 
-                    <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
+                    <h1 class="uk-article-title"><a class="uk-link-reset" href>Heading</a></h1>
 
                     <p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
 
@@ -106,7 +106,7 @@
 
                 <article class="uk-article">
 
-                    <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
+                    <h1 class="uk-article-title"><a class="uk-link-reset" href>Heading</a></h1>
 
                     <p class="uk-text-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
 
@@ -125,7 +125,7 @@
 
                 <article class="uk-article">
 
-                    <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
+                    <h1 class="uk-article-title"><a class="uk-link-reset" href>Heading</a></h1>
 
                     <p class="uk-article-meta">Written by <a href="#">Super User</a> on 12 April 2012. Posted in <a href="#">Blog</a></p>
 
@@ -144,7 +144,7 @@
 
                 <article class="uk-article">
 
-                    <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
+                    <h1 class="uk-article-title"><a class="uk-link-reset" href>Heading</a></h1>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 

package/tests/base.html

@@ -15,13 +15,13 @@
             <div uk-grid>
                 <div class="uk-width-2-3@m">
 
-                    <h1>this is an H1 heading</h1>
+                    <h1>This is an H1 heading</h1>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
                     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 
-                    <h2>this is an H2 heading</h2>
+                    <h2>This is an H2 heading</h2>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
@@ -36,7 +36,7 @@
 
                     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h3>this is an H3 heading</h3>
+                    <h3>This is an H3 heading</h3>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
@@ -44,18 +44,18 @@
 
                     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 
-                    <h4>this is an H4 heading</h4>
+                    <h4>This is an H4 heading</h4>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
                     <blockquote cite="#">
                         <p class="uk-margin-remove">The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
-                        <footer>Someone famous in <cite><a href="">Source Title</a></cite></footer>
+                        <footer>Someone famous in <cite><a href>Source Title</a></cite></footer>
                     </blockquote>
 
                     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 
-                    <h5>this is an H5 heading</h5>
+                    <h5>This is an H5 heading</h5>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
@@ -63,7 +63,7 @@
 
                     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 
-                    <h6>this is an H6 heading</h6>
+                    <h6>This is an H6 heading</h6>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
 
@@ -71,27 +71,27 @@
 
                     <hr>
 
-                    <h1>this is an H1 heading<br>with some more text</h1>
+                    <h1>This is an H1 heading<br>with some more text</h1>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h2>this is an H2 heading<br>with some more text</h2>
+                    <h2>This is an H2 heading<br>with some more text</h2>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h3>this is an H3 heading<br>with some more text</h3>
+                    <h3>This is an H3 heading<br>with some more text</h3>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h4>this is an H4 heading<br>with some more text</h4>
+                    <h4>This is an H4 heading<br>with some more text</h4>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h5>this is an H5 heading<br>with some more text</h5>
+                    <h5>This is an H5 heading<br>with some more text</h5>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
-                    <h6>this is an H6 heading<br>with some more text</h6>
+                    <h6>This is an H6 heading<br>with some more text</h6>
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 

package/tests/card.html

@@ -184,7 +184,7 @@
             <div class="uk-section uk-section-small uk-background-cover" style="background-image: url('images/photo.jpg');">
                 <div class="uk-container">
 
-                    <div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
+                    <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
                         <div>
 
                             <div class="uk-card uk-card-default uk-card-hover uk-card-body">
@@ -209,6 +209,14 @@
                             </div>
 
                         </div>
+                        <div>
+
+                            <div class="uk-card uk-card-overlay uk-card-hover uk-card-body">
+                                <h3 class="uk-card-title">Overlay</h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
+                            </div>
+
+                        </div>
                     </div>
 
                 </div>

package/tests/column.html

@@ -56,7 +56,7 @@
 
                 <blockquote cite="#" class="uk-column-span uk-width-3-4@m uk-margin-auto uk-margin-large">
                     <p>The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
-                    <footer>Someone famous in <cite><a href="">Source Title</a></cite></footer>
+                    <footer>Someone famous in <cite><a href>Source Title</a></cite></footer>
                 </blockquote>
 
                 <img src="images/photo.jpg" width="1800" height="1200" alt="">