style: tweak search bar

Switch back to medium input form size Tweak the search shortcuts Expand the input field when typing
razonyang · Oct 29, 2023 · adac3ce · adac3ce
1 parent 2f4daff
commit adac3ce
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/assets/main/scss/_top-app-bar.scss b/assets/main/scss/_top-app-bar.scss
@@ -67,16 +67,21 @@ $header-caret-width: 0.35em;
   }
 
   .search-bar {
-    @include media-breakpoint-up(xxl) {
-      width: 180px;
-    }
-
     .search-input {
-      padding-left: 2rem;
+      padding-left: 2.25rem;
+
+      @include media-breakpoint-up(xxl) {
+        width: 180px;
+        transition: 0.5s width ease-in-out;
+
+        &:focus {
+          width: 240px;
+        }
+      }
     }
 
     .search-shortcut {
-      margin-top: 0.35rem;
+      margin-top: 0.575rem;
     }
   }
 

diff --git a/layouts/partials/header/search-bar.html b/layouts/partials/header/search-bar.html
@@ -4,7 +4,7 @@
     {{- $shortcut := partialCached "functions/search-shortcut" . }}
     <hr class="d-xxl-none">
     <form class="search-bar ms-auto my-auto" action="{{ with $page }}{{ .RelPermalink }}{{ end }}" novalidate>
-      <div class="input-group input-group-sm align-items-center">
+      <div class="input-group align-items-center">
         <span class="btn btn-search disabled position-absolute left-0 border-0 px-1">
           <i class="fas fa-fw fa-search fa-lg"></i>
         </span>
@@ -18,7 +18,7 @@
           {{- with $shortcut }}
           <span class="search-shortcut position-absolute end-0 top-0 me-2">
             {{- range . }}
-            <kbd class="bg-primary rounded shadow">{{ . }}</kbd>
+            <kbd class="text-dark bg-white opacity-75 rounded-3 shadow border border-primary py-1 fw-bold">{{ . }}</kbd>
             {{- end }}
           </span>
           {{- end }}