From 581f060e26d8bef704d48a3d84bcd7d1da1b4e28 Mon Sep 17 00:00:00 2001
From: Razon Yang <razonyang@gmail.com>
Date: Sun, 29 Oct 2023 19:59:32 +0800
Subject: [PATCH] style: tweak search bar (#988)

Switch back to medium input form size

Tweak the search shortcuts

Expand the input field when typing
---
 assets/main/scss/_top-app-bar.scss      | 17 +++++++++++------
 layouts/partials/header/search-bar.html |  4 ++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/assets/main/scss/_top-app-bar.scss b/assets/main/scss/_top-app-bar.scss
index 7c000498..18b2b6ba 100644
--- 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
index c1ae8181..a4f9aade 100644
--- 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 }}