New search bar (elixir-lang#1791)

We moved it to the main content as we want to include more search results and more context.
sodapopcan · Oct 23, 2023 · 80de788 · 80de788
1 parent 6ddaa2b
commit 80de788
Show file tree

Hide file tree

Showing 28 changed files with 401 additions and 185 deletions.
diff --git a/assets/css/_html.css b/assets/css/_html.css
@@ -15,6 +15,7 @@
 @import 'icons.css';
 @import 'layout.css';
 @import 'sidebar.css';
+@import 'search-bar.css';
 @import 'focus.css';
 @import 'content/general.css';
 @import 'content/admonition.css';

diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
@@ -1,38 +1,86 @@
 .autocomplete {
   display: none;
   height: 0;
-  margin: 0 5px 0 12px;
+  margin: 0 5px 0 0;
   overflow: visible;
   position: relative;
-  width: 100%;
+  width: 95%;
+}
+
+.autocomplete .triangle {
+  width: 0;
+  height: 0;
+  border-left: 12px solid transparent;
+  border-right: 12px solid transparent;
+  border-bottom: 12px solid var(--autocompleBackground); 
+  position: absolute;
+  top: 9px; 
+  left: 10%; 
+  transform: translateX(-50%);
+  z-index: 250; 
+  background-color: transparent; 
+}
+
+.autocomplete-results {
+  list-style: none;
+  margin: 0;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  color: var(--autocompleteResults);
+  font-family: var(--sansFontFamily);
+  font-weight: 300;
+  font-size: 16px;
+  gap: 3%;
+}
+
+.autocomplete-results .show {
+  white-space: normal;
+  overflow-x: hidden;
+  width: 62%;
+}
+
+.autocomplete-results .bold {
+  color: var(--autocompleteResultsBold);
+  font-weight: 400;
+}
+
+.autocomplete-results .mobile-hide {
+  width: 35%;
 }
 
 .autocomplete.shown {
   display: block;
 }
 
 .autocomplete-suggestions {
-  box-shadow: 2px 2px 10px rgba(0,0,0,.25);
-  background-color: var(--gray700);
-  border-top: 1px solid var(--gray800);
-  left: 0;
+  background-color: var(--autocompleBackground);
+  border-radius: 8px;
   position: absolute;
-  top: -2px;
-  width: 276px;
+  top: 20px;
+  width: 100%;
   z-index: 200;
+  box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
+  overflow-y: auto; 
+  max-height: 320px; 
+  padding: 0 0 10px 0;
+  margin-right: 10px;
+  white-space: normal;
+  overflow-x: hidden; 
 }
 
 .autocomplete-suggestion {
   color: inherit;
   display: block;
-  padding: 10px;
+  padding: 12px 20px;
   text-decoration: none;
+  transition: background-color .3s ease-in-out;
+  border-bottom: 1px solid var(--suggestionBorder);
 }
 
 .autocomplete-suggestion:hover,
 .autocomplete-suggestion.selected {
-  background-color: var(--gray600);
-  border-left: 3px solid var(--main);
+  background-color: var(--autocompleteHover);
 }
 
 .autocomplete-suggestion em {
@@ -57,3 +105,51 @@
   white-space: nowrap;
   width: 100%;
 }
+
+.autocomplete-suggestions a {
+  text-decoration: none !important;
+}
+
+/* Style the scrollbar track (the area behind the thumb) */
+.autocomplete-suggestions::-webkit-scrollbar {
+  width: 5px; /* Set the width of the scrollbar */
+  border-radius: 7px; /* Add rounded corners to the thumb */
+  flex-shrink: 0;
+}
+
+/* Style the scrollbar thumb (the draggable part) */
+.autocomplete-suggestions::-webkit-scrollbar-thumb {
+  background-color: var(--autocompleteSrollbarThumb);
+  border-radius: 7px; 
+}
+
+/* Style the scrollbar track on hover */
+.autocomplete-suggestions::-webkit-scrollbar-track {
+  background-color: var(--autocompleteSrollbarTrack);
+}
+
+@media (max-width: 480px) {
+  .autocomplete .triangle {
+    left: 27%; 
+  }
+}
+
+@media (max-width: 767px) {
+  .autocomplete .triangle {
+    left: 17%; 
+  }
+}
+
+@media (max-width: 1024px) {
+  .autocomplete-results {
+    gap: 0;
+  }
+
+  .autocomplete-results .show {
+    width: 100%;
+  }
+
+  .autocomplete-results .mobile-hide {
+    display: none;
+  }
+}
diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css
@@ -80,10 +80,21 @@ body.dark {
   --sidebarHover:                var(--white);
   --sidebarScrollbarThumb:       var(--coldGray);
   --sidebarScrollbarTrack:       var(--sidebarBackground);
-  --sidebarSearch:               var(--gray700);
   --sidebarSubheadings:          var(--gray400);
   --sidebarItem:                 var(--gray200);
   --sidebarInactiveItemMarker:   var(--gray600);
   --sidebarLanguageAccentBar:    var(--main);
   --sidebarActiveItem:           var(--main-lightened-10);
+  --searchBarBorder:             var(--gray500);
+  --searchAccentMain:            var(--gray300);
+  --searchLanguageAccentBar:     var(--main);
+  --searchSearch:                var(--gray900);
+  --autocompleteBorder:          rgba(0,0,0,.25);
+  --autocompleteHover:           var(--gray700);
+  --autocompleBackground:        var(--gray800);
+  --suggestionBorder:            var(--gray600);
+  --autocompleteResults:         var(--gray200);
+  --autocompleteResultsBold:     var(--gray100);
+  --autocompleteSrollbarThumb:   var(--gray600);
+  --autocompleteSrollbarTrack:   var(--gray850);
 }
diff --git a/assets/css/custom-props/theme-light.css b/assets/css/custom-props/theme-light.css
@@ -80,10 +80,21 @@
   --sidebarHover:                var(--white);
   --sidebarScrollbarThumb:       var(--coldGray);
   --sidebarScrollbarTrack:       var(--sidebarBackground);
-  --sidebarSearch:               var(--gray700);
   --sidebarSubheadings:          var(--gray400);
   --sidebarItem:                 var(--gray200);
   --sidebarInactiveItemMarker:   var(--gray600);
   --sidebarLanguageAccentBar:    var(--main);
   --sidebarActiveItem:           var(--main-lightened-10);
+  --searchBarBorder:             var(--gray200);
+  --searchAccentMain:            var(--gray-400);
+  --searchLanguageAccentBar:     var(--main);
+  --searchSearch:                var(--white);
+  --autocompleteBorder:          rgba(3, 9, 19, 0.10);
+  --autocompleteHover:           var(--grey50, #F0F5F9);
+  --autocompleBackground:        var(--white); 
+  --suggestionBorder:            var(--gray200);
+  --autocompleteResults:         var(--gray500);
+  --autocompleteResultsBold:     var(--gray700);
+  --autocompleteSrollbarThumb:   var(--gray200);
+  --autocompleteSrollbarTrack:   var(--gray50);
 }
diff --git a/assets/css/layout.css b/assets/css/layout.css
@@ -47,6 +47,7 @@ body {
   top: 0;
   transition: all var(--sidebarTransitionDuration) ease-in-out;
   will-change: transform;
+  margin-top: 6px;
 }
 
 .content {
@@ -109,7 +110,28 @@ body.sidebar-closed .content {
   left: 0;
 }
 
+.content-inner {
+  max-width: var(--content-width);
+  margin: 0 auto;
+  padding: 3px var(--content-gutter);
+}
+
+.content-inner:focus {
+  outline: none;
+}
+
+.content-outer {
+  min-height: 100%;
+}
+
 @media screen and (max-width: 768px) {
+
+  .sidebar-button {
+    position: absolute;
+    top: 4px;
+    left: -1px;
+  }
+
   .sidebar-button:before {
     --sidebarButtonHeight: 60px;
     content: "";
@@ -121,7 +143,6 @@ body.sidebar-closed .content {
     top: 0;
     height: var(--sidebarButtonHeight);
     width: calc(100vw + 2px);
-    background: var(--sidebarButtonBackground);
     transition: top var(--sidebarTransitionDuration) ease-in-out;
   }
 
@@ -138,31 +159,11 @@ body.sidebar-closed .content {
   }
 }
 
-body.search-focused .sidebar-button {
-  transform: translateX(250px) scaleY(0);
-  transition: all 0.15s ease-out;
-  opacity: 0;
-}
-
-body.search-focused .sidebar-search .search-close-button {
+body.search-focused .search-bar .search-close-button {
   transform: scaleY(1);
   transition: transform 0.15s ease-out 0.15s;
 }
 
-.content-inner {
-  max-width: var(--content-width);
-  margin: 0 auto;
-  padding: 3px var(--content-gutter);
-}
-
-.content-inner:focus {
-  outline: none;
-}
-
-.content-outer {
-  min-height: 100%;
-}
-
 @media screen and (max-width: 768px) {
   .content,
   body.sidebar-opening .content {