diff --git a/CHANGELOG.md b/CHANGELOG.md index 4690b209..b1a7d5ab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Release History +## 74.0 (2024-07-10) + +Compare: + +- Update FIS search in header - remove dropdown search and simplify to single text input, consistent with the standard homepage +- Add transparent border to search inputs to improve visibility of input boundary in high contrast mode + ## 73.0 (2024-07-09) Compare: diff --git a/bc/static_src/sass/abstracts/_mixins.scss b/bc/static_src/sass/abstracts/_mixins.scss index 7e619d90..93f9935d 100755 --- a/bc/static_src/sass/abstracts/_mixins.scss +++ b/bc/static_src/sass/abstracts/_mixins.scss @@ -209,6 +209,15 @@ background: darken($backgroundColor, 3%); color: $textColor; } + + .icon { + fill: $textColor; + + &--stroke { + fill: transparent; + stroke: $textColor; + } + } } @mixin focus() { diff --git a/bc/static_src/sass/components/_button.scss b/bc/static_src/sass/components/_button.scss index c7152f86..4e797559 100644 --- a/bc/static_src/sass/components/_button.scss +++ b/bc/static_src/sass/components/_button.scss @@ -83,6 +83,15 @@ @include button($color--slate, $color--leaf, $color--leaf); } + &--no-border { + border-bottom: 0; + + &:focus, + &:active { + border-bottom: 0; + } + } + &--area-search { display: flex; min-height: 40px; diff --git a/bc/static_src/sass/components/_family-info.scss b/bc/static_src/sass/components/_family-info.scss index bd584d3a..3dc59cc0 100644 --- a/bc/static_src/sass/components/_family-info.scss +++ b/bc/static_src/sass/components/_family-info.scss @@ -11,6 +11,8 @@ } &__search { + // adds visible border around input field for high contrast mode + border: 1px solid transparent; padding: 60px 0; label { diff --git a/bc/static_src/sass/components/_form.scss b/bc/static_src/sass/components/_form.scss index 28bb7f0c..15b9609f 100644 --- a/bc/static_src/sass/components/_form.scss +++ b/bc/static_src/sass/components/_form.scss @@ -110,7 +110,7 @@ margin-bottom: $grid; input[type='text'] { - border: 0; + border: 1px solid transparent; @include media-query(tablet-portrait) { width: 100%; diff --git a/bc/static_src/sass/components/_search-header.scss b/bc/static_src/sass/components/_search-header.scss index 595bcffa..8f70c99a 100644 --- a/bc/static_src/sass/components/_search-header.scss +++ b/bc/static_src/sass/components/_search-header.scss @@ -24,6 +24,8 @@ } &__search { + // adds visible border around input field for high contrast mode + border: 1px solid transparent; margin-bottom: $grid; } diff --git a/bc/static_src/sass/layout/_header.scss b/bc/static_src/sass/layout/_header.scss index f333837e..a3517f77 100644 --- a/bc/static_src/sass/layout/_header.scss +++ b/bc/static_src/sass/layout/_header.scss @@ -26,6 +26,8 @@ } &__search { + // adds visible border around input field for high contrast mode + border: 1px solid transparent; width: 100%; margin-top: $grid--small; @@ -34,9 +36,9 @@ } .template-home-page &, - .template-fis-home &, .template-jobs-home &, - .template-searchresults & { + .template-searchresults &, + .template-fis-home & { display: none; } @@ -46,14 +48,19 @@ } &--fis { - #{$root}__heading, - #{$root}__heading-title { + #{$root}__heading { display: block; + margin-top: $grid--min; } #{$root}__search { - margin-top: 0; - width: auto; + margin-bottom: $grid--min; + + @include media-query(tablet-portrait) { + margin-top: 0; + margin-bottom: 0; + width: auto; + } } #{$root}__search-button { @@ -85,6 +92,13 @@ margin: 0 $grid--min; } + @include media-query(px550) { + #{$root}__heading-title { + display: block; + margin-bottom: $grid--min; + } + } + @include media-query(tablet-portrait) { #{$root}__heading { display: flex; @@ -218,6 +232,7 @@ } @include media-query(px550) { + @include font-size(m); flex: 0 1 50%; line-height: 1.25; margin-top: 0; @@ -260,9 +275,10 @@ display: none; } - @include media-query(tablet-landscape) { + @include media-query(tablet-portrait) { &__heading { - display: block; + display: flex; + align-items: center; } } }