refactor(MeiliSearch): use search-dialog-icon match search icon (#4969)

* refactor: 更新依赖包 9.1.2

* style: 更新变量

Co-Authored-By: Alex chow <[email protected]>

* style: 增加 MeiliSearch 组件样式

* style: 调整搜索栏颜色

* chore: bump version 9.1.3

Co-Authored-By: Alex chow <[email protected]>

---------

Co-authored-by: Alex chow <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -46,7 +46,7 @@
     <PackageReference Include="BootstrapBlazor.Markdown" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MaterialDesign" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MaterialDesign.Extensions" Version="9.0.0" />
-    <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.1.1" />
+    <PackageReference Include="BootstrapBlazor.MeiliSearch" Version="9.1.3" />
     <PackageReference Include="BootstrapBlazor.Mermaid" Version="9.0.3" />
     <PackageReference Include="BootstrapBlazor.MindMap" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.MouseFollower" Version="9.0.1" />

src/BootstrapBlazor.Server/wwwroot/css/site.css

@@ -44,12 +44,11 @@
 }
 
 html .search-dialog-mask {
-    --bb-global-search-placeholder-color: #a88dbc;
-    --bb-global-search-item-bg: #6522cc;
     --bb-global-search-item-active-bg: rgba(var(--bb-primary-color-rgb), 0.5);
     --bb-global-search-item-hover-bg: rgba(var(--bb-primary-color-rgb), 0.4);
     --bb-global-search-dialog-input-focus-border-color: var(--bb-primary-color);
     --bb-global-search-highlight-color: var(--bb-primary-color);
+    --bb-global-search-footer-kbd-bg: #6522cc;
 }
 
 .navbar {

src/BootstrapBlazor/wwwroot/scss/components.scss

@@ -106,3 +106,4 @@
 @import "../../Components/TreeView/TreeView.razor.scss";
 @import "../../Components/Marquee/Marquee.razor.scss";
 @import "../../Components/Waterfall/Waterfall.razor.scss";
+@import "./meilisearch.scss";

src/BootstrapBlazor/wwwroot/scss/meilisearch.scss

@@ -0,0 +1,43 @@
+.bb-g-search {
+    --bb-global-search-input-margin-left: .5rem;
+    --bb-global-search-border-color: rgba(255,255,255,.5);
+    --bb-global-search-color: rgba(255,255,255,.5);
+    --bb-global-search-border-hover-color: rgba(255,255,255);
+    --bb-global-search-padding: 0.25rem 0.75rem;
+    --bb-global-search-width: 168px;
+    display: flex;
+    align-items: center;
+    color: var(--bb-global-search-color);
+    border: var(--bs-border-width) solid var(--bb-global-search-border-color);
+    border-radius: var(--bs-border-radius);
+    padding: var(--bb-global-search-padding);
+    width: var(--bb-global-search-width);
+    transition: border-color .3s linear;
+
+    &:hover {
+        border: var(--bs-border-width) solid var(--bb-global-search-border-hover-color);
+    }
+
+    > input {
+        width: 100%;
+        background-color: transparent;
+        border: none;
+        line-height: 1.5;
+        padding: 0;
+        margin-left: var(--bb-global-search-input-margin-left);
+        cursor: pointer;
+
+        &::placeholder {
+            color: var(--bb-global-search-border-color);
+        }
+    }
+
+    .search-dialog-icon {
+        cursor: pointer;
+        font-size: 18px;
+    }
+}
+
+.search-dialog-mask {
+    display: none;
+}

src/BootstrapBlazor/wwwroot/scss/root.scss

@@ -76,49 +76,6 @@ a, a:hover, a:focus {
     --bs-popover-body-padding-y: 0.5rem;
 }
 
-.bb-g-search {
-    --bb-global-search-input-margin-left: .5rem;
-    --bb-global-search-border-color: rgba(255,255,255,.5);
-    --bb-global-search-color: rgba(255,255,255,.5);
-    --bb-global-search-border-hover-color: rgba(255,255,255);
-    --bb-global-search-padding: 0.25rem 0.75rem;
-    --bb-global-search-width: 168px;
-    display: flex;
-    align-items: center;
-    color: var(--bb-global-search-color);
-    border: var(--bs-border-width) solid var(--bb-global-search-border-color);
-    border-radius: var(--bs-border-radius);
-    padding: var(--bb-global-search-padding);
-    width: var(--bb-global-search-width);
-    transition: border-color .3s linear;
-
-    &:hover {
-        border: var(--bs-border-width) solid var(--bb-global-search-border-hover-color);
-    }
-
-    > input {
-        width: 100%;
-        background-color: transparent;
-        border: none;
-        line-height: 1.5;
-        padding: 0;
-        margin-left: var(--bb-global-search-input-margin-left);
-        cursor: pointer;
-
-        &::placeholder {
-            color: var(--bb-global-search-border-color);
-        }
-    }
-
-    > i {
-        cursor: pointer;
-    }
-}
-
-.search-dialog-mask {
-    display: none;
-}
-
 ::view-transition-old(root) {
     animation: none;
 }