Merge pull request #1752 from alphagov/fix_header_input_focus

Fix orange outline on global site search
alphagov · Oct 27, 2020 · 7058a30 · 7058a30
2 parents 76fc9e4 + d58bafe
commit 7058a30
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Add custom margin support for print link ([PR #1753](https://github.com/alphagov/govuk_publishing_components/pull/1753))
+* Fix orange outline on global site search ([PR #1752](https://github.com/alphagov/govuk_publishing_components/pull/1752))
 
 ## 23.0.0
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_search.scss b/app/assets/stylesheets/govuk_publishing_components/components/_search.scss
@@ -36,7 +36,6 @@ $large-input-size: 50px;
 
 .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside
   @include govuk-font($size: 19, $line-height: (28 / 19));
-
   padding: 6px;
   margin: 0;
   width: 100%;
@@ -71,6 +70,13 @@ $large-input-size: 50px;
   }
 }
 
+@include govuk-compatibility(govuk_template) {
+  //  ultra specific rule overrides focus styling from govuk_template
+  #global-header .gem-c-search__input[type="search"]:focus { // stylelint-disable selector-max-id
+    @extend .gem-c-search__input[type="search"]:focus; // stylelint-disable scss/at-extend-no-missing-placeholder
+  }
+}
+
 .gem-c-search__submit {
   border: 0;
   cursor: pointer;