Skip to content

Commit 80de788

Browse files
paulo-valimpaulo-valim
authored
New search bar (elixir-lang#1791)
We moved it to the main content as we want to include more search results and more context.
1 parent 6ddaa2b commit 80de788

28 files changed

+401
-185
lines changed

‎assets/css/_html.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
@import 'icons.css';
1616
@import 'layout.css';
1717
@import 'sidebar.css';
18+
@import 'search-bar.css';
1819
@import 'focus.css';
1920
@import 'content/general.css';
2021
@import 'content/admonition.css';

‎assets/css/autocomplete.css

Lines changed: 107 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,86 @@
11
.autocomplete {
22
display: none;
33
height: 0;
4-
margin: 0 5px 0 12px;
4+
margin: 0 5px 0 0;
55
overflow: visible;
66
position: relative;
7-
width: 100%;
7+
width: 95%;
8+
}
9+
10+
.autocomplete .triangle {
11+
width: 0;
12+
height: 0;
13+
border-left: 12px solid transparent;
14+
border-right: 12px solid transparent;
15+
border-bottom: 12px solid var(--autocompleBackground);
16+
position: absolute;
17+
top: 9px;
18+
left: 10%;
19+
transform: translateX(-50%);
20+
z-index: 250;
21+
background-color: transparent;
22+
}
23+
24+
.autocomplete-results {
25+
list-style: none;
26+
margin: 0;
27+
padding: 20px;
28+
display: flex;
29+
justify-content: space-between;
30+
color: var(--autocompleteResults);
31+
font-family: var(--sansFontFamily);
32+
font-weight: 300;
33+
font-size: 16px;
34+
gap: 3%;
35+
}
36+
37+
.autocomplete-results .show {
38+
white-space: normal;
39+
overflow-x: hidden;
40+
width: 62%;
41+
}
42+
43+
.autocomplete-results .bold {
44+
color: var(--autocompleteResultsBold);
45+
font-weight: 400;
46+
}
47+
48+
.autocomplete-results .mobile-hide {
49+
width: 35%;
850
}
951

1052
.autocomplete.shown {
1153
display: block;
1254
}
1355

1456
.autocomplete-suggestions {
15-
box-shadow: 2px 2px 10px rgba(0,0,0,.25);
16-
background-color: var(--gray700);
17-
border-top: 1px solid var(--gray800);
18-
left: 0;
57+
background-color: var(--autocompleBackground);
58+
border-radius: 8px;
1959
position: absolute;
20-
top: -2px;
21-
width: 276px;
60+
top: 20px;
61+
width: 100%;
2262
z-index: 200;
63+
box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
64+
overflow-y: auto;
65+
max-height: 320px;
66+
padding: 0 0 10px 0;
67+
margin-right: 10px;
68+
white-space: normal;
69+
overflow-x: hidden;
2370
}
2471

2572
.autocomplete-suggestion {
2673
color: inherit;
2774
display: block;
28-
padding: 10px;
75+
padding: 12px 20px;
2976
text-decoration: none;
77+
transition: background-color .3s ease-in-out;
78+
border-bottom: 1px solid var(--suggestionBorder);
3079
}
3180

3281
.autocomplete-suggestion:hover,
3382
.autocomplete-suggestion.selected {
34-
background-color: var(--gray600);
35-
border-left: 3px solid var(--main);
83+
background-color: var(--autocompleteHover);
3684
}
3785

3886
.autocomplete-suggestion em {
@@ -57,3 +105,51 @@
57105
white-space: nowrap;
58106
width: 100%;
59107
}
108+
109+
.autocomplete-suggestions a {
110+
text-decoration: none !important;
111+
}
112+
113+
/* Style the scrollbar track (the area behind the thumb) */
114+
.autocomplete-suggestions::-webkit-scrollbar {
115+
width: 5px; /* Set the width of the scrollbar */
116+
border-radius: 7px; /* Add rounded corners to the thumb */
117+
flex-shrink: 0;
118+
}
119+
120+
/* Style the scrollbar thumb (the draggable part) */
121+
.autocomplete-suggestions::-webkit-scrollbar-thumb {
122+
background-color: var(--autocompleteSrollbarThumb);
123+
border-radius: 7px;
124+
}
125+
126+
/* Style the scrollbar track on hover */
127+
.autocomplete-suggestions::-webkit-scrollbar-track {
128+
background-color: var(--autocompleteSrollbarTrack);
129+
}
130+
131+
@media (max-width: 480px) {
132+
.autocomplete .triangle {
133+
left: 27%;
134+
}
135+
}
136+
137+
@media (max-width: 767px) {
138+
.autocomplete .triangle {
139+
left: 17%;
140+
}
141+
}
142+
143+
@media (max-width: 1024px) {
144+
.autocomplete-results {
145+
gap: 0;
146+
}
147+
148+
.autocomplete-results .show {
149+
width: 100%;
150+
}
151+
152+
.autocomplete-results .mobile-hide {
153+
display: none;
154+
}
155+
}

‎assets/css/custom-props/theme-dark.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,21 @@ body.dark {
8080
--sidebarHover: var(--white);
8181
--sidebarScrollbarThumb: var(--coldGray);
8282
--sidebarScrollbarTrack: var(--sidebarBackground);
83-
--sidebarSearch: var(--gray700);
8483
--sidebarSubheadings: var(--gray400);
8584
--sidebarItem: var(--gray200);
8685
--sidebarInactiveItemMarker: var(--gray600);
8786
--sidebarLanguageAccentBar: var(--main);
8887
--sidebarActiveItem: var(--main-lightened-10);
88+
--searchBarBorder: var(--gray500);
89+
--searchAccentMain: var(--gray300);
90+
--searchLanguageAccentBar: var(--main);
91+
--searchSearch: var(--gray900);
92+
--autocompleteBorder: rgba(0,0,0,.25);
93+
--autocompleteHover: var(--gray700);
94+
--autocompleBackground: var(--gray800);
95+
--suggestionBorder: var(--gray600);
96+
--autocompleteResults: var(--gray200);
97+
--autocompleteResultsBold: var(--gray100);
98+
--autocompleteSrollbarThumb: var(--gray600);
99+
--autocompleteSrollbarTrack: var(--gray850);
89100
}

‎assets/css/custom-props/theme-light.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,21 @@
8080
--sidebarHover: var(--white);
8181
--sidebarScrollbarThumb: var(--coldGray);
8282
--sidebarScrollbarTrack: var(--sidebarBackground);
83-
--sidebarSearch: var(--gray700);
8483
--sidebarSubheadings: var(--gray400);
8584
--sidebarItem: var(--gray200);
8685
--sidebarInactiveItemMarker: var(--gray600);
8786
--sidebarLanguageAccentBar: var(--main);
8887
--sidebarActiveItem: var(--main-lightened-10);
88+
--searchBarBorder: var(--gray200);
89+
--searchAccentMain: var(--gray-400);
90+
--searchLanguageAccentBar: var(--main);
91+
--searchSearch: var(--white);
92+
--autocompleteBorder: rgba(3, 9, 19, 0.10);
93+
--autocompleteHover: var(--grey50, #F0F5F9);
94+
--autocompleBackground: var(--white);
95+
--suggestionBorder: var(--gray200);
96+
--autocompleteResults: var(--gray500);
97+
--autocompleteResultsBold: var(--gray700);
98+
--autocompleteSrollbarThumb: var(--gray200);
99+
--autocompleteSrollbarTrack: var(--gray50);
89100
}

‎assets/css/layout.css

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ body {
4747
top: 0;
4848
transition: all var(--sidebarTransitionDuration) ease-in-out;
4949
will-change: transform;
50+
margin-top: 6px;
5051
}
5152

5253
.content {
@@ -109,7 +110,28 @@ body.sidebar-closed .content {
109110
left: 0;
110111
}
111112

113+
.content-inner {
114+
max-width: var(--content-width);
115+
margin: 0 auto;
116+
padding: 3px var(--content-gutter);
117+
}
118+
119+
.content-inner:focus {
120+
outline: none;
121+
}
122+
123+
.content-outer {
124+
min-height: 100%;
125+
}
126+
112127
@media screen and (max-width: 768px) {
128+
129+
.sidebar-button {
130+
position: absolute;
131+
top: 4px;
132+
left: -1px;
133+
}
134+
113135
.sidebar-button:before {
114136
--sidebarButtonHeight: 60px;
115137
content: "";
@@ -121,7 +143,6 @@ body.sidebar-closed .content {
121143
top: 0;
122144
height: var(--sidebarButtonHeight);
123145
width: calc(100vw + 2px);
124-
background: var(--sidebarButtonBackground);
125146
transition: top var(--sidebarTransitionDuration) ease-in-out;
126147
}
127148

@@ -138,31 +159,11 @@ body.sidebar-closed .content {
138159
}
139160
}
140161

141-
body.search-focused .sidebar-button {
142-
transform: translateX(250px) scaleY(0);
143-
transition: all 0.15s ease-out;
144-
opacity: 0;
145-
}
146-
147-
body.search-focused .sidebar-search .search-close-button {
162+
body.search-focused .search-bar .search-close-button {
148163
transform: scaleY(1);
149164
transition: transform 0.15s ease-out 0.15s;
150165
}
151166

152-
.content-inner {
153-
max-width: var(--content-width);
154-
margin: 0 auto;
155-
padding: 3px var(--content-gutter);
156-
}
157-
158-
.content-inner:focus {
159-
outline: none;
160-
}
161-
162-
.content-outer {
163-
min-height: 100%;
164-
}
165-
166167
@media screen and (max-width: 768px) {
167168
.content,
168169
body.sidebar-opening .content {

0 commit comments

Comments
 (0)