diff --git a/src/assets/styles/components/_accordion.scss b/src/assets/styles/components/_accordion.scss index 4374ce46..3ca8a7e5 100644 --- a/src/assets/styles/components/_accordion.scss +++ b/src/assets/styles/components/_accordion.scss @@ -44,20 +44,28 @@ .accordion__control { @extend %interactive; - --border-width: #{rem(2)}; + --border-width: #{rem(1)}; --color: var(--blue-500); --background-color: transparent; --hover-color: var(--blue-400); --hover-background-color: var(--background-color); - --active-color: var(--blue-400); - --active-background-color: var(--background-color); - --focus-background-color: var(--blue-500); + --outline-color: var(--parent-background-color); + --active-color: var(--off-white); + --active-background-color: var(--blue-500); + --active-border-color: var(--blue-500); + --focus-background-color: var(--parent-background-color); + --focus-color: var(--blue-500); + --focus-box-shadow: - 0 0 0 var(--border-width) var(--outline-color), - 0 0 0 calc(2 * var(--border-width)) var(--focus-background-color); + 0 0 0 calc(2 * var(--border-width)) var(--outline-color), + 0 0 0 calc(4 * var(--border-width)) var(--focus-border-color); + + --active-box-shadow: + 0 0 0 calc(2 * var(--border-width)) var(--outline-color), + 0 0 0 calc(4 * var(--border-width)) var(--active-border-color); border: 0; - border-top: solid var(--border-width) var(--color); + border-top: solid calc(2 * var(--border-width)) var(--color); display: block; font-family: $font-family-sans; font-size: rem(20); @@ -78,9 +86,12 @@ --background-color: transparent; --outline-color: var(--dark-mint-500); --hover-color: var(--off-white); - --active-color: var(--blue-200); - --focus-color: var(--dark-mint-500); - --focus-background-color: var(--blue-200); + --active-color: var(--parent-background-color); + --active-background-color: var(--blue-200); + --active-border-color: var(--blue-200); + --focus-background-color: var(--parent-background-color); + --focus-border-color: var(--blue-200); + --focus-color: var(--off-white); } .accordion__control svg { @@ -95,7 +106,7 @@ } .accordion__control:hover { - border-top: solid var(--border-width) var(--blue-300); + border-top: solid calc(2 * var(--border-width)) var(--blue-300); svg { color: var(--blue-300); @@ -103,7 +114,12 @@ } .accordion__control:active { - border-top-color: var(--active-color); + border-top-color: var(--active-background-color); + margin-left: rem(-16); + margin-right: rem(-16); + padding-left: rem(16); + padding-right: rem(16); + width: calc(100% + #{rem(32)}); svg { color: inherit; @@ -127,17 +143,12 @@ } .accordion__control:focus:hover { - border-top-color: transparent; + border-top-color: var(--parent-background-color); } .accordion__control:focus:active, .accordion__control:focus:hover:active { - border-top-color: var(--active-color); - margin-left: 0; - margin-right: 0; - padding-left: 0; - padding-right: 0; - width: 100%; + border-top-color: var(--active-background-color); } .accordion__control[aria-expanded="true"] { @@ -148,9 +159,10 @@ --background-color: var(--expanded-background-color); --active-background-color: var(--expanded-background-color); --color: var(--expanded-color); + --focus-color: var(--off-white); border-top-color: transparent; - box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--expanded-background-color); + box-shadow: 0 0 0 calc(4 * var(--border-width)) var(--expanded-background-color); margin-left: rem(-16); margin-right: rem(-16); padding-left: rem(16); @@ -175,7 +187,13 @@ } } +.accordion__control[aria-expanded="true"]:active, +.accordion__control[aria-expanded="true"]:focus { + border-top-color: var(--background-color); +} + .accordion__control[aria-expanded="true"]:focus { + --outline-color: var(--active-color); box-shadow: var(--focus-box-shadow); } diff --git a/src/assets/styles/components/_call-to-action.scss b/src/assets/styles/components/_call-to-action.scss index c4151c3d..0675b06f 100644 --- a/src/assets/styles/components/_call-to-action.scss +++ b/src/assets/styles/components/_call-to-action.scss @@ -1,9 +1,6 @@ .cta { @extend %interactive; - - --visited-color: var(--off-white); - --visited-background-color: var(--blue-600); - + border-radius: rem(3); display: block; font-family: $font-family-sans; @@ -24,11 +21,6 @@ margin-left: 0.25em; } - &:visited { - background-color: var(--visited-background); - color: var(--visited-color); - } - &:hover, &:active, &:focus { @@ -43,9 +35,19 @@ --color: var(--blue-500); --outline-color: var(--blue-500); --background-color: var(--off-white); + --hover-color: var(--color); --hover-background-color: var(--blue-50); - --active-color: var(--blue-400); - --active-background-color: var(--background-color); + --active-color: var(--off-white); + --active-background-color: var(--parent-background-color); + --active-border-color: var(--off-white); + --active-box-shadow: + 0 0 0 calc(2 * var(--border-width)) var(--active-border-color) inset, + 0 0 0 calc(1 * var(--border-width)) var(--active-background-color), + 0 0 0 calc(3 * var(--border-width)) var(--active-border-color); --focus-background-color: var(--background-color); --focus-color: var(--blue-500); + --focus-border-color: var(--background-color); + --focus-box-shadow: + 0 0 0 calc(1 * var(--border-width)) var(--parent-background-color), + 0 0 0 calc(3 * var(--border-width)) var(--focus-border-color); } diff --git a/src/assets/styles/components/_filter-sort.scss b/src/assets/styles/components/_filter-sort.scss index 04cb67ba..bf732194 100644 --- a/src/assets/styles/components/_filter-sort.scss +++ b/src/assets/styles/components/_filter-sort.scss @@ -33,6 +33,10 @@ } .filters { + label { + font-weight: $font-weight-normal; + } + @include breakpoint-down(md) { display: none; @@ -82,10 +86,13 @@ --border-width: #{rem(1)}; --color: var(--off-white); --hover-color: var(--off-white); - --active-color: var(--white); - --focus-background-color: var(--blue-600); - --focus-box-shadow: none; - --focus-color: var(--color); + --hover-underline-color: var(--blue-300); + --active-color: var(--parent-background-color); + --active-background-color: var(--blue-200); + --active-border-color: var(--blue-200); + --focus-background-color: var(--parent-background-color); + --focus-border-color: var(--blue-200); + --focus-color: var(--off-white); border-top-color: var(--dark-mint-500); height: rem(69); @@ -95,19 +102,51 @@ padding-right: $gutter; width: calc(100% + 2 * #{$gutter}); + --focus-box-shadow: + 0 0 0 calc(3 * var(--border-width)) var(--focus-background-color) inset, + 0 0 0 calc(5 * var(--border-width)) var(--focus-border-color) inset; + + --active-box-shadow: + 0 0 0 calc(3 * var(--border-width)) var(--parent-background-color) inset, + 0 0 0 calc(5 * var(--border-width)) var(--active-border-color) inset, + 0 0 0 calc(7 * var(--border-width)) var(--parent-background-color) inset; + svg { margin-right: rem(7); } + &:active, + &:focus { + border-top-color: var(--parent-background-color); + } + &:hover { - border-top-color: var(--dark-mint-500); + border-top-color: var(--hover-underline-color); svg { color: inherit; } + + &:active, + &:focus { + border-top-color: var(--parent-background-color); + } } } + .accordion__control[aria-expanded="true"]:active { + box-shadow: var(--active-box-shadow); + } + + .accordion__control[aria-expanded="true"]:active:focus { + border-top-color: var(--parent-background-color); + margin-left: (-1 * $gutter); + margin-right: 0; + padding-left: $gutter; + padding-right: $gutter; + width: calc(100% + 2 * #{$gutter}); + } + .accordion__control[aria-expanded="true"] + .accordion__content { background: var(--blue-600); color: var(--white); @@ -250,6 +289,7 @@ } @include breakpoint-down(md) { + .filters, .filters .form { --text-border-color-default: var(--grey-500); --text-border-color-disabled: var(--grey-500); diff --git a/src/assets/styles/components/_link-list.scss b/src/assets/styles/components/_link-list.scss index 06e36aa6..491d5f4f 100644 --- a/src/assets/styles/components/_link-list.scss +++ b/src/assets/styles/components/_link-list.scss @@ -57,25 +57,25 @@ border-bottom: solid rem(3) var(--hover-underline-color); } - a:active, - a:active:hover, - a:active:focus { - background-color: var(--active-background-color); + a:focus { + background-color: var(--focus-background-color); border-bottom: 0; - color: var(--active-color); margin-left: rem(-16); margin-right: rem(-16); padding-left: rem(16); padding-right: rem(16); - text-decoration: none; } - a:focus { - background-color: var(--focus-background-color); + a:active, + a:active:hover, + a:active:focus { + background-color: var(--active-background-color); border-bottom: 0; + color: var(--active-color); margin-left: rem(-16); margin-right: rem(-16); padding-left: rem(16); padding-right: rem(16); + text-decoration: none; } } diff --git a/src/assets/styles/components/_tag.scss b/src/assets/styles/components/_tag.scss index d0aa4c30..8e4a091c 100644 --- a/src/assets/styles/components/_tag.scss +++ b/src/assets/styles/components/_tag.scss @@ -23,14 +23,18 @@ --outline-color: var(--white); --hover-background-color: var(--grey-200); --hover-color: var(--blue-500); - --active-background-color: var(--blue-50); - --active-color: var(--blue-500); + --active-background-color: var(--blue-700); + --active-border-color: var(--blue-700); + --active-box-shadow: + 0 0 0 calc(2 * var(--border-width)) var(--outline-color), + 0 0 0 calc(4 * var(--border-width)) var(--active-border-color); + --active-color: var(--white); --focus-background-color: var(--grey-200); --focus-border-color: var(--blue-500); --focus-box-shadow: - 0 0 0 var(--border-width) var(--blue-500) inset, + 0 0 0 calc(2 * var(--border-width)) var(--focus-border-color) inset, 0 0 0 calc(2 * var(--border-width)) var(--outline-color), - 0 0 0 calc(4 * var(--border-width)) var(--blue-500); + 0 0 0 calc(4 * var(--border-width)) var(--focus-border-color); --focus-color: var(--blue-500); border-radius: rem(15); diff --git a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk index dd4c7046..dcf56072 100644 --- a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk +++ b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk @@ -1,7 +1,7 @@