Fixing width and hiding effect on focus

google · Oct 7, 2022 · 7e23a2c · 7e23a2c
1 parent 25e868b
commit 7e23a2c
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/assets/scss/_search.scss b/assets/scss/_search.scss
@@ -2,7 +2,7 @@
 .td-search-wrapper {
     position: relative;
     background: transparent;
-    max-width: 90%;
+    width: 90%;
 }
 
 .td-search-wrapper .td-search-input {
@@ -40,6 +40,15 @@
     pointer-events: none;
 }
 
+# Hide the icon on focus.
+.td-search-wrapper:focus-within .fa {
+    display: none;
+}
+
+.td-search-wrapper:focus-within .td-search-input {
+   text-indent: 0px;
+}
+
 .popover.offline-search-result {
     // Override bootstrap default style (max-width: $popover-max-width;)
     max-width: 90%;