Merge pull request #518 from SnowdogApps/release/1.6.0

Release/1.6.0
SnowdogApps · Sep 29, 2020 · 201f7f4 · 201f7f4
2 parents 2ff43ad + b539961
commit 201f7f4
Show file tree

Hide file tree

Showing 49 changed files with 103 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.6.0] - 29.09.2020
+### Added
+- focus-visible styles
+### Fixed
+- spacing between dashboard items sections in 2 column layout without overriding templates
+- typo in login page styles
+
 ## [1.5.1] - 15.06.2020
 ### Added
 - Node 12.x support

diff --git a/components/01-globals/_focus/_focus.scss b/components/01-globals/_focus/_focus.scss
@@ -1,3 +1,7 @@
-*:focus {
+.js-focus-visible :focus:not(.focus-visible) {
+    outline: $outline-base;
+}
+
+.js-focus-visible .focus-visible {
     @include focus();
 }
diff --git a/components/01-globals/mixins/_visually-hidden.scss b/components/01-globals/mixins/_visually-hidden.scss
@@ -8,7 +8,7 @@
     overflow: hidden;
     border: 0;
     @if $usePseudo != '' {
-        &:focus,
+        &.focus-visible,
         &:active {
             clip:     auto;
             height:   auto;

diff --git a/components/01-globals/typography/link/_link.scss b/components/01-globals/typography/link/_link.scss
@@ -22,7 +22,7 @@ $link__color-hover--invert: $blue !default;
         color: $link__color-hover;
     }
 
-    &:focus {
+    &.focus-visible {
         @include focus();
     }
 
@@ -50,7 +50,7 @@ $link__color-hover--invert: $blue !default;
     p &,
     cite & {
         background-clip: content-box;
-        &:focus:not(.banner) {
+        &.focus-visible:not(.banner) {
             @include focus-inline();
         }
     }

diff --git a/components/02-elements/action/_action.scss b/components/02-elements/action/_action.scss
@@ -41,7 +41,7 @@ $action-padding: 15px !default;
         margin-right: 15px;
         background-clip: content-box;
 
-        &:focus {
+        &.focus-visible {
             @include focus-inline();
         }
 

diff --git a/components/02-elements/breadcrumbs/_breadcrumbs.scss b/components/02-elements/breadcrumbs/_breadcrumbs.scss
@@ -68,7 +68,7 @@ $breadcrumbs__min-height             : 50px !default;
         text-decoration: none;
         background-clip: content-box;
 
-        &:focus {
+        &.focus-visible {
             @include focus-inline();
         }
     }

diff --git a/components/02-elements/cookie-message/_cookie-message.scss b/components/02-elements/cookie-message/_cookie-message.scss
@@ -56,7 +56,7 @@ $cookie-message__close-icon-margin-left : $spacer !default;
     &__link {
         color: $cookie-message__link-color;
         background-clip: content-box;
-        &:focus {
+        &.focus-visible {
             @include focus-inline();
         }
     }

diff --git a/components/02-elements/dropdown-list/_dropdown-list.scss b/components/02-elements/dropdown-list/_dropdown-list.scss
@@ -93,7 +93,7 @@ $dropdown-list__content-margin--screen-m  : $spacer $spacer--medium !default;
             }
 
             &:hover,
-            &:focus {
+            &.focus-visible {
                 background-color: $dropdown-list__bg-color--secondary;
                 color: $dropdown-list__item-color--secondary;
                 & > .dropdown-list__icon {
@@ -124,7 +124,7 @@ $dropdown-list__content-margin--screen-m  : $spacer $spacer--medium !default;
             font-weight: $font-weight-bold;
 
             &:hover,
-            &:focus {
+            &.focus-visible {
                 color: $dropdown-list__item-color-hover--dark;
                 background-color: $dropdown-list__item-bg-color-hover--dark;
 
@@ -152,7 +152,7 @@ $dropdown-list__content-margin--screen-m  : $spacer $spacer--medium !default;
             background-color: $dropdown-list__item-bg-color--inner;
             font-weight: $dropdown-list__item-font-weight--inner;
             &:hover,
-            &:focus {
+            &.focus-visible {
                 color: $dropdown-list__item-color-hover--inner;
             }
             &[aria-expanded="true"] {
@@ -223,7 +223,7 @@ $dropdown-list__content-margin--screen-m  : $spacer $spacer--medium !default;
         font-weight: $dropdown-list__item-font-weight;
 
         &:hover,
-        &:focus {
+        &.focus-visible {
             color: $dropdown-list__item-color-hover;
             background-color: $dropdown-list__item-bg-color-hover;
             text-decoration: underline;
@@ -276,7 +276,7 @@ $dropdown-list__content-margin--screen-m  : $spacer $spacer--medium !default;
             .dropdown-list__label {
                 cursor: default;
                 &:hover,
-                &:focus {
+                &.focus-visible {
                     color: $dropdown-list__item-color;
                     background-color: $dropdown-list__item-bg-color;
                     text-decoration: none;
@@ -293,7 +293,7 @@ $dropdown-list__content-margin--screen-m  : $spacer $spacer--medium !default;
             &.dropdown-list--dark {
                 .dropdown-list__label {
                     &:hover,
-                    &:focus {
+                    &.focus-visible {
                         color: $dropdown-list__item-color--dark;
                         background-color: $dropdown-list__item-bg-color-hover--dark;
                     }

diff --git a/components/02-elements/form/checkbox/_checkbox.scss b/components/02-elements/form/checkbox/_checkbox.scss
@@ -21,7 +21,7 @@ $checkbox__color--fake          : $gray-dark !default;
         color: $checkbox__color--fake;
 
         &:hover,
-        &:focus {
+        &.focus-visible {
             text-decoration: underline;
         }
     }
@@ -52,7 +52,7 @@ $checkbox__color--fake          : $gray-dark !default;
             border: $checkbox__border--checked;
         }
 
-        &:focus ~ .checkbox__label {
+        &.focus-visible ~ .checkbox__label {
             @include focus();
         }
     }

diff --git a/components/02-elements/form/input/_input.scss b/components/02-elements/form/input/_input.scss
@@ -43,7 +43,7 @@ $input__date-margin                  : 0 0 0 $spacer !default;
             color: $input__placeholder-color;
         }
 
-        &:focus {
+        &.focus-visible {
             @include focus-input();
         }
 
@@ -68,7 +68,7 @@ $input__date-margin                  : 0 0 0 $spacer !default;
         margin: $input__date-margin;
 
         &:hover,
-        &:focus {
+        &.focus-visible {
             background-image: $input__date-background-image;
             background-size: $input__date-background-size;
             background-repeat: $input__date-background-repeat;

diff --git a/components/02-elements/form/radio/_radio.scss b/components/02-elements/form/radio/_radio.scss
@@ -43,7 +43,7 @@ $radio__icon-transition   : $transition-base !default;
             }
         }
 
-        &:focus + .radio__label {
+        &.focus-visible + .radio__label {
             @include focus();
         }
     }

diff --git a/components/02-elements/form/select/_select.scss b/components/02-elements/form/select/_select.scss
@@ -23,7 +23,7 @@ $select__field-list-border-radius--single: 20px !default;
             appearance: none;
             transition: $transition-base;
 
-            &:focus {
+            &.focus-visible {
                 @include focus-input();
             }
         }
@@ -51,7 +51,7 @@ $select__field-list-border-radius--single: 20px !default;
     &__field-input {
         transition: $transition-base;
 
-        &:focus {
+        &.focus-visible {
             outline: none;
         }
     }

diff --git a/components/02-elements/marketing-bar/_marketing-bar.scss b/components/02-elements/marketing-bar/_marketing-bar.scss
@@ -52,7 +52,7 @@ $marketing-bar__button-icon-padding : 2px !default;
         border: none;
         background-color: transparent;
 
-        &:focus,
+        &.focus-visible,
         &:hover {
             background-color: transparent;
         }

diff --git a/components/02-elements/rating/_rating.scss b/components/02-elements/rating/_rating.scss
@@ -13,7 +13,7 @@ $rating__error-color            : $red !default;
     width: $rating__size;
 
     &:hover,
-    &:focus {
+    &.focus-visible {
         .rating__rate-item span:before {
             display: block;
         }
@@ -25,7 +25,7 @@ $rating__error-color            : $red !default;
         overflow: hidden;
 
         &:hover,
-        &:focus {
+        &.focus-visible {
             ~ .rating__rate-item span:before {
                 display: none;
             }
@@ -96,7 +96,7 @@ $rating__error-color            : $red !default;
                 display: none;
             }
             .rating__star--rate:hover &,
-            .rating__star--rate:focus &,
+            .rating__star--rate.focus-visible &,
             .rating__rate-item--active & {
                 display: block;
             }
@@ -179,7 +179,7 @@ $rating__error-color            : $red !default;
             width: 1px;
             height: 1px;
             bottom: 0;
-            &:focus {
+            &.focus-visible {
                 opacity: 1;
                 height: 0;
                 outline: none;

diff --git a/components/02-elements/skip-nav/_skip-nav.scss b/components/02-elements/skip-nav/_skip-nav.scss
@@ -4,7 +4,7 @@
     top: 0;
     left: 0;
 
-    &:focus,
+    &.focus-visible,
     &:hover {
         position: absolute;
         margin: $spacer;
@@ -13,7 +13,7 @@
     }
 
     &--relative {
-        &:focus,
+        &.focus-visible,
         &:hover {
             display: block;
             position: relative;

diff --git a/components/02-elements/swatch/_swatch.scss b/components/02-elements/swatch/_swatch.scss
@@ -30,7 +30,7 @@ $swatch__option-border-color--active : $color-primary !default;
         cursor: pointer;
 
         &:hover,
-        &:focus,
+        &.focus-visible,
         &.selected {
             outline: none;
             border-color: $swatch__option-border-color--active;

diff --git a/components/03-modules/active-filters/_active-filters.scss b/components/03-modules/active-filters/_active-filters.scss
@@ -39,7 +39,7 @@ $active-filters__clear-color\@medium : $color-secondary !default;
         word-break: break-all;
 
         &:hover,
-        &:focus {
+        &.focus-visible {
             outline-offset: -7px;
             .active-filters__remove-icon {
                 fill: $active-filters__icon-fill--hover;
@@ -84,7 +84,7 @@ $active-filters__clear-color\@medium : $color-secondary !default;
         text-decoration: none;
 
         &:hover,
-        &:focus {
+        &.focus-visible {
             text-decoration: none;
             color: $active-filters__clear-color;
         }
@@ -98,7 +98,7 @@ $active-filters__clear-color\@medium : $color-secondary !default;
             text-decoration: none;
 
             &:hover,
-            &:focus {
+            &.focus-visible {
                 color: $active-filters__clear-color\@medium;
                 text-decoration: underline;
             }

diff --git a/components/03-modules/bundle-option/_bundle-option.scss b/components/03-modules/bundle-option/_bundle-option.scss
@@ -51,7 +51,7 @@ $bundle-option__qty-input-cursor--disabled : default !default;
             color: $bundle-option__qty-input-color--disabled;
 
             &:hover,
-            &:focus {
+            &.focus-visible {
                 cursor: $bundle-option__qty-input-cursor--disabled;
             }
         }

diff --git a/components/03-modules/cart-list-item/_cart-list-item.scss b/components/03-modules/cart-list-item/_cart-list-item.scss
@@ -63,7 +63,7 @@ $cart-list-item__actions-item-margin       : 0 0 0 $spacer !default;
         }
 
         &:hover,
-        &:focus {
+        &.focus-visible {
             text-decoration: none;
         }
     }

diff --git a/components/03-modules/catalog-grid-item/_catalog-grid-item.scss b/components/03-modules/catalog-grid-item/_catalog-grid-item.scss
@@ -90,7 +90,7 @@ $catalog-grid-item__IE-width\@medium              : calc(100% / 3 - #{$spacer--m
         flex-direction: row;
 
         &:hover,
-        &:focus-within {
+        &.focus-within {
             .catalog-grid-item__details {
                 transform: $catalog-grid-item__content-translateY--active;
             }
@@ -133,7 +133,7 @@ $catalog-grid-item__IE-width\@medium              : calc(100% / 3 - #{$spacer--m
         align-self: stretch;
         width: $catalog-grid-item__link-width;
 
-        &:focus {
+        &.focus-visible {
             z-index: $catalog-grid-item__link-z-index--focus;
             outline: $catalog-grid-item__link-outline--focus;
         }
@@ -260,7 +260,7 @@ $catalog-grid-item__IE-width\@medium              : calc(100% / 3 - #{$spacer--m
         padding: $catalog-grid-item__primary-padding;
 
         &:hover,
-        &:focus {
+        &.focus-visible {
             .icon {
                 fill: $catalog-grid-item__primary-icon-fill;
             }
@@ -292,7 +292,7 @@ $catalog-grid-item__IE-width\@medium              : calc(100% / 3 - #{$spacer--m
             border: $catalog-grid-item__action-border;
             cursor: $catalog-grid-item__action-cursor;
             &:hover,
-            &:focus {
+            &.focus-visible {
                 .button__icon {
                     fill: $catalog-grid-item__action-icon-fill-hover;
                 }

diff --git a/components/03-modules/catalog-list-item/_catalog-list-item.scss b/components/03-modules/catalog-list-item/_catalog-list-item.scss
@@ -103,7 +103,7 @@ $catalog-list-item__stock-status-color--out-of-stock             : $color-danger
 
     &__link {
         display: block;
-        &:focus {
+        &.focus-visible {
             outline: $outline-base;
             z-index: 0;
             .image {
@@ -212,7 +212,7 @@ $catalog-list-item__stock-status-color--out-of-stock             : $color-danger
             }
 
             &:hover,
-            &:focus {
+            &.focus-visible {
                 background-color: transparent;
 
                 .button__icon {

diff --git a/components/03-modules/dashboard/items/_items.scss b/components/03-modules/dashboard/items/_items.scss
@@ -1,5 +1,7 @@
-$dashboard-items-padding: 15px !default;
-$dashboard-items-margin : 15px !default;
+$dashboard-items-padding         : 15px !default;
+$dashboard-items-margin          : 15px !default;
+$dashboard-items__item-max-width : calc(50% - #{$spacer--medium}) !default;
+$dashboard-items__item-margin    : 15px $spacer--medium 15px 0 !default;
 
 .dashboard-items {
     &__title {
@@ -17,7 +19,8 @@ $dashboard-items-margin : 15px !default;
     }
 
     &__item {
+        max-width: $dashboard-items__item-max-width;
+        margin: $dashboard-items__item-margin;
         padding: $dashboard-items-padding 0;
-        margin-bottom: $dashboard-items-margin;
     }
 }
diff --git a/components/03-modules/dashboard/table/_table.scss b/components/03-modules/dashboard/table/_table.scss
@@ -33,7 +33,7 @@ $dashboard-table-margin: $spacer--medium !default;
 
     &__link {
         display: inline-flex;
-        &:focus {
+        &.focus-visible {
             @include focus-inline();
         }
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,7 +43,7 @@ $radio__icon-transition : $transition-base !default; @@
                 }
             }
-            &:focus + .radio__label {
+            &.focus-visible + .radio__label {
                 @include focus();
             }
         }
@@ Expand Down @@