From 59d29d549b7ab7948e8c0855151ad5b45b201f99 Mon Sep 17 00:00:00 2001 From: Jonathan Hung Date: Tue, 7 Jul 2020 13:36:41 -0400 Subject: [PATCH 1/5] feat: search button on dark now inverts when active --- src/assets/styles/components/_search.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/assets/styles/components/_search.scss b/src/assets/styles/components/_search.scss index 1b934e8f..5705e068 100644 --- a/src/assets/styles/components/_search.scss +++ b/src/assets/styles/components/_search.scss @@ -81,8 +81,9 @@ --outline-color: var(--blue-600); --hover-color: var(--blue-600); --hover-background-color: var(--blue-150); - --active-color: var(--blue-400); - --active-background-color: var(--background-color); + --active-border-color: var(--blue-50); + --active-color: var(--blue-50); + --active-background-color: var(--parent-background-color); --focus-color: var(--blue-600); --focus-background-color: var(--background-color); --focus-border-color: var(--blue-50); From 6307d24655054148e360282c61261864fec39d85 Mon Sep 17 00:00:00 2001 From: Jonathan Hung Date: Tue, 21 Jul 2020 10:56:08 -0400 Subject: [PATCH 2/5] style: fixed menu button focus styling --- src/assets/styles/components/_menu--home.scss | 3 --- src/assets/styles/components/_menu-button.scss | 1 - 2 files changed, 4 deletions(-) diff --git a/src/assets/styles/components/_menu--home.scss b/src/assets/styles/components/_menu--home.scss index 23b36f13..9ca34a71 100644 --- a/src/assets/styles/components/_menu--home.scss +++ b/src/assets/styles/components/_menu--home.scss @@ -7,9 +7,6 @@ --active-color: var(--blue-200); --focus-color: var(--off-white); --focus-background-color: transparent; - --focus-box-shadow: 0 0 0 var(--border-width) var(--dark-mint-500), 0 0 0 calc(2 * var(--border-width)) var(--outline-color); - --focus-box-shadow: 0 0 0 var(--border-width) var(--outline-color), 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(3 * var(--border-width)) var(--outline-color); - } @include breakpoint-up(md) { diff --git a/src/assets/styles/components/_menu-button.scss b/src/assets/styles/components/_menu-button.scss index b48489a9..5b56b74f 100644 --- a/src/assets/styles/components/_menu-button.scss +++ b/src/assets/styles/components/_menu-button.scss @@ -15,7 +15,6 @@ --active-color: var(--blue-200); --focus-color: var(--off-white); --focus-background-color: transparent; - --focus-box-shadow: 0 0 0 var(--border-width) var(--outline-color), 0 0 0 calc(2 * var(--border-width)) var(--parent-background-color), 0 0 0 calc(3 * var(--border-width)) var(--outline-color); } .menu-button__menu { From af97b62c74f8209d90a4f22922bd9e466483d4c4 Mon Sep 17 00:00:00 2001 From: Jonathan Hung Date: Tue, 21 Jul 2020 14:29:45 -0400 Subject: [PATCH 3/5] style: fix background color of checked radio group --- src/assets/styles/components/_button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/styles/components/_button.scss b/src/assets/styles/components/_button.scss index 32ef3c8c..2cf983c3 100644 --- a/src/assets/styles/components/_button.scss +++ b/src/assets/styles/components/_button.scss @@ -153,7 +153,7 @@ button:-moz-focusring { &[aria-pressed="true"], &[aria-checked="true"] { --color: var(--off-white); - --background-color: var(--blue-600); + --background-color: var(--blue-400); --border-color: var(--background-color); --focus-background-color: var(--background-color); From 0b837c7d9747163f7f33b43262d475bfa3321dee Mon Sep 17 00:00:00 2001 From: Jonathan Hung Date: Tue, 21 Jul 2020 15:40:17 -0400 Subject: [PATCH 4/5] style: fix border overlap when accordion control has focus --- src/assets/styles/components/_accordion.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/styles/components/_accordion.scss b/src/assets/styles/components/_accordion.scss index 3ca8a7e5..8946f786 100644 --- a/src/assets/styles/components/_accordion.scss +++ b/src/assets/styles/components/_accordion.scss @@ -72,6 +72,7 @@ font-weight: $font-weight-bold; height: rem(54); line-height: normal; + margin: calc(2 * var(--border-width)) 0; padding-bottom: rem(14); padding-left: 0; padding-right: 0; From 28c870e1cbc269be9a76389eacef97e56b24653c Mon Sep 17 00:00:00 2001 From: Jonathan Hung Date: Tue, 21 Jul 2020 16:13:47 -0400 Subject: [PATCH 5/5] style: search button on Home layout now inverts when active --- src/assets/styles/layouts/_home.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/assets/styles/layouts/_home.scss b/src/assets/styles/layouts/_home.scss index c6c205cb..329c4980 100644 --- a/src/assets/styles/layouts/_home.scss +++ b/src/assets/styles/layouts/_home.scss @@ -45,6 +45,11 @@ position: relative; top: rem(-25); } + + .search-form.search-form--inverse .button--search { + --active-background-color: var(--blue-500); + --active-color: var(--blue-50); + } } .home__browse {