This is an automated email from the ASF dual-hosted git repository.

jeffreyh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 320436c0082 fix:searchbar style (#1475)
320436c0082 is described below

commit 320436c0082b78b13888f85535790ab5555a8d71
Author: yangon <2689991...@qq.com>
AuthorDate: Mon Dec 9 10:56:24 2024 +0800

    fix:searchbar style (#1475)
    
    fix:
    
    
![image](https://github.com/user-attachments/assets/f197773f-1f6c-41ca-b27f-4afb1715dcfb)
    
    Co-authored-by: liyang <liy...@selectdb.com>
---
 src/scss/components/navbar.scss          |  58 +----------------
 src/theme/SearchBar/SearchBar.module.css | 106 +++++++++++++++++++++++--------
 2 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/src/scss/components/navbar.scss b/src/scss/components/navbar.scss
index 0dc57d431e6..0680fc92019 100644
--- a/src/scss/components/navbar.scss
+++ b/src/scss/components/navbar.scss
@@ -21,60 +21,6 @@
             width: 38vw;
             top: 12px;
             max-width: 443px;
-
-            .navbar__search > :last-child {
-                position: absolute;
-                right: 10x;
-                top: 50%;
-                transform: translateY(-50%);
-                display: flex !important;
-                align-items: center;
-                justify-content: center;
-                padding: 5px 7px;
-                background-color: #fff;
-                border: none;
-                gap: 2px;
-                height: auto;
-            }
-            .navbar__search kbd {
-                color: #8592a6 !important;
-                background-color: #ffffff !important;
-                border: none !important;
-                border-radius: none !important;
-                box-shadow: none !important;
-                font-size: 12px !important;
-                padding: 0 !important;
-            }
-            .navbar__search > span {
-                width: 100% !important;
-                left: auto !important;
-                right: 0 !important;
-                display: inline !important;
-                background: transparent;
-                border-radius: 6px;
-                margin-top: 8px;
-                width: var(--search-local-modal-width, 560px);
-                position: relative;
-                padding: 0 !important;
-            }
-            .navbar__search input {
-                width: 100% !important;
-                border: none !important;
-                background-color: #f7f9fe !important;
-                background-image: url('/static/images/search-icon.svg');
-                height: 2.5rem !important;
-                background-position: 0.625rem center !important;
-                padding-left: 2.25rem !important;
-                color: #4c576c !important;
-                border-radius: 0.5rem;
-            }
-            .navbar__search input:focus {
-                border: none !important;
-                outline: none !important;
-            }
-            .navbar__search span span {
-                top: 2.5rem !important;
-            }
         }
     }
 
@@ -432,8 +378,8 @@
                 }
                 .docs {
                     svg {
-                        width: 8.125rem;
-                        height: 1.5625rem;
+                        width: 11rem;
+                        height: 2rem;
                     }
                 }
             }
diff --git a/src/theme/SearchBar/SearchBar.module.css 
b/src/theme/SearchBar/SearchBar.module.css
index 077a0dd8bed..c4c0f0f7220 100644
--- a/src/theme/SearchBar/SearchBar.module.css
+++ b/src/theme/SearchBar/SearchBar.module.css
@@ -4,11 +4,9 @@
 
   background: var(--search-local-modal-background, #f5f6f7);
   border-radius: 6px;
-  box-shadow: var(
-    --search-local-modal-shadow,
-    inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
-    0 3px 8px 0 #555a64
-  );
+  box-shadow: var(--search-local-modal-shadow,
+      inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
+      0 3px 8px 0 #555a64);
   margin-top: 8px;
   width: var(--search-local-modal-width, 560px);
   position: relative;
@@ -36,11 +34,9 @@
 
 html[data-theme="dark"] .searchBar .dropdownMenu {
   background: var(--search-local-modal-background, 
var(--ifm-background-color));
-  box-shadow: var(
-    --search-local-modal-shadow,
-    inset 1px 1px 0 0 #2c2e40,
-    0 3px 8px 0 #000309
-  );
+  box-shadow: var(--search-local-modal-shadow,
+      inset 1px 1px 0 0 #2c2e40,
+      0 3px 8px 0 #000309);
 }
 
 .searchBar .dropdownMenu .suggestion {
@@ -69,10 +65,8 @@ html[data-theme="dark"] .dropdownMenu .suggestion {
 }
 
 .searchBar .dropdownMenu .suggestion.cursor {
-  background-color: var(
-    --search-local-highlight-color,
-    var(--ifm-color-primary)
-  );
+  background-color: var(--search-local-highlight-color,
+      var(--ifm-color-primary));
 }
 
 .hitTree,
@@ -95,7 +89,7 @@ html[data-theme="dark"] .noResultsIcon {
   align-items: center;
 }
 
-.hitTree > svg {
+.hitTree>svg {
   height: var(--search-local-hit-height, 56px);
   opacity: 0.5;
   stroke-width: var(--search-local-icon-stroke-width, 1.4);
@@ -145,7 +139,7 @@ html[data-theme="dark"] .noResultsIcon {
   width: 20px;
 }
 
-.hideAction > svg {
+.hideAction>svg {
   display: none;
 }
 
@@ -171,7 +165,7 @@ html[data-theme="dark"] .noResultsIcon {
   text-decoration: underline;
 }
 
-.cursor .hideAction > svg {
+.cursor .hideAction>svg {
   display: block;
 }
 
@@ -180,10 +174,8 @@ html[data-theme="dark"] .noResultsIcon {
 .suggestion.cursor .hitTree,
 .suggestion.cursor .hitIcon,
 .suggestion.cursor .hitPath {
-  color: var(
-    --search-local-hit-active-color,
-    var(--ifm-color-white)
-  ) !important;
+  color: var(--search-local-hit-active-color,
+      var(--ifm-color-white)) !important;
 }
 
 .suggestion.cursor mark {
@@ -214,6 +206,65 @@ html[data-theme="dark"] .noResultsIcon {
 
 :global(.navbar__search) {
   position: relative;
+
+  .searchBar {
+    width: 100% !important;
+    left: auto !important;
+    right: 0 !important;
+    display: inline !important;
+    background: transparent;
+    border-radius: 6px;
+    margin-top: 8px;
+    width: var(--search-local-modal-width, 560px);
+    position: relative;
+    padding: 0 !important;
+  }
+
+  input {
+    width: 100% !important;
+    border: none !important;
+    background-color: #f7f9fe !important;
+    background-image: url('/static/images/search-icon.svg');
+    height: 2.5rem !important;
+    background-position: 0.625rem center !important;
+    padding-left: 2.25rem !important;
+    color: #4c576c !important;
+    border-radius: 0.5rem;
+  }
+
+  input:focus {
+    border: none !important;
+    outline: none !important;
+  }
+
+  .dropdownMenu {
+    top: 2.5rem !important;
+  }
+
+  kbd {
+    color: #8592a6 !important;
+    background-color: #ffffff !important;
+    border: none !important;
+    border-radius: none !important;
+    box-shadow: none !important;
+    font-size: 12px !important;
+    padding: 0 !important;
+  }
+
+  .searchHintContainer {
+    position: absolute;
+    right: 10x;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 7px;
+    background-color: #fff;
+    border: none;
+    gap: 2px;
+    height: auto;
+  }
 }
 
 .searchIndexLoading :global(.navbar__search-input) {
@@ -244,6 +295,7 @@ html[data-theme="dark"] .noResultsIcon {
 }
 
 @media (max-width: 576px) {
+
   .searchBarContainer:not(.focused) .searchClearButton,
   .searchHintContainer {
     display: none;
@@ -274,12 +326,14 @@ html[dir="rtl"] :global(.navbar__search-input) {
 }
 .hint {
 }
+
 .suggestions {
   max-height: 500px !important;
   overflow: scroll !important;
 }
-.dataset {
-}
-.empty {
-}
-/**/
+
+.dataset {}
+
+.empty {}
+
+/**/
\ No newline at end of file


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@doris.apache.org
For additional commands, e-mail: commits-h...@doris.apache.org

Reply via email to