Nicer header icon styling

Author: philwareham

src/assets/sass/modules/_layout.scss

@@ -177,13 +177,13 @@ noscript {
 
     // search input field
 
-    input[type="search"] {
+    [type="search"] {
         width: 34px;
         height: 34px;
         padding-left: 32px;
         transition: width 0.2s ease-in-out;
         border-color: $color-background;
-        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23333'%3E%3Cpath d='M4,13c0-5,4-9,9-9s9,4,9,9s-4,9-9,9S4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z'/%3E%3Cpath d='M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.8,2.2S25,28,25,28l-4.5-4.5L17.5,19z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
+        background: $color-background-form url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23333'%3E%3Cpath d='M4,13c0-5,4-9,9-9s9,4,9,9s-4,9-9,9S4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z'/%3E%3Cpath d='M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.8,2.2S25,28,25,28l-4.5-4.5L17.5,19z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
         background-size: 32px 32px;
 
         &:focus {
@@ -193,12 +193,14 @@ noscript {
 }
 
 @include dark-mode {
-    .search-form input[type="search"] {
-        border-color: $dark-color-border-extra-dark;
-        background: $dark-color-background-form url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23ced4da'%3E%3Cpath d='M4,13c0-5,4-9,9-9s9,4,9,9s-4,9-9,9S4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z'/%3E%3Cpath d='M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.8,2.2S25,28,25,28l-4.5-4.5L17.5,19z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
+    .search-form [type="search"] {
+        border-color: $dark-color-background;
+        background-color: $dark-color-background;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23ced4da'%3E%3Cpath d='M4,13c0-5,4-9,9-9s9,4,9,9s-4,9-9,9S4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z'/%3E%3Cpath d='M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.8,2.2S25,28,25,28l-4.5-4.5L17.5,19z'/%3E%3C/g%3E%3C/svg%3E");
 
         &:focus {
             border-color: $dark-color-link-focus;
+            background-color: $dark-color-background-form;
         }
     }
 }

src/assets/sass/modules/_navigation.scss

@@ -163,16 +163,12 @@
         display: block;
     }
 
-    &:hover {
-        background-color: $color-selected;
-    }
-
     &.site-navigation-toggle-active {
-        background-color: $color-strong-highlight-box;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23333'%3E%3Cpath d='m6.1 23.1 17-17 2.8 2.8-17 17z'/%3E%3Cpath d='m8.9 6.1 17 17-2.8 2.8-17-17z'/%3E%3C/g%3E%3C/svg%3E");
     }
 
-    &:active {
-        background-color: $color-selecting;
+    &:hover {
+        border-color: $color-border-extra-dark;
     }
 
     &:focus {
@@ -183,20 +179,15 @@
 
 @include dark-mode {
     #site-navigation-toggle {
-        border-color: $dark-color-border-extra-dark;
-        background: $dark-color-background-form url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ced4da' d='M4 6h24v4H4zm0 8h24v4H4zm0 8h24v4H4z'/%3E%3C/svg%3E");
+        border-color: $dark-color-background;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ced4da' d='M4 6h24v4H4zm0 8h24v4H4zm0 8h24v4H4z'/%3E%3C/svg%3E");
 
         &:hover {
             border-color: $dark-color-border-extra-light;
-            background-color: $dark-color-selecting;
         }
 
         &.site-navigation-toggle-active {
-            background-color: $dark-color-strong-highlight-box;
-        }
-
-        &:active {
-            background-color: $dark-color-selected;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23ced4da'%3E%3Cpath d='m6.1 23.1 17-17 2.8 2.8-17 17z'/%3E%3Cpath d='m8.9 6.1 17 17-2.8 2.8-17-17z'/%3E%3C/g%3E%3C/svg%3E");
         }
 
         &:focus {

src/assets/sass/modules/_responsive.scss

@@ -291,8 +291,14 @@
         top: 0.75em;
         right: 0;
 
-        input[type="search"] {
-            width: 244px;
+        [type="search"] {
+            width: 254px;
+        }
+    }
+
+    @include dark-mode {
+        .search-form [type="search"] {
+            background-color: $dark-color-background-form;
         }
     }
 
@@ -452,33 +458,12 @@
             padding-right: 0;
             cursor: pointer;
 
-            &:hover {
-                background-color: $color-selected;
-            }
-
             &:focus {
-                width: 244px;
-                padding-right: 0.5384615em;
-                background-color: $color-background-form;
+                width: 254px;
                 cursor: auto;
             }
         }
     }
-
-    @include dark-mode {
-        .search-form {
-            [type="search"] {
-                &:hover {
-                    border-color: $dark-color-border-extra-light;
-                    background-color: $dark-color-selecting;
-                }
-
-                &:focus {
-                    background-color: $dark-color-background-form;
-                }
-            }
-        }
-    }
 }