Skip to content

Commit 68ae804

Browse files
adriendupuisadriendupuis
committed
IBX-4064: Search page (#1860)
--------- Co-authored-by: Michał Grabowski <[email protected]> (cherry picked from commit 2145f26)
1 parent ec6ce63 commit 68ae804

File tree

12 files changed

+594
-23
lines changed

12 files changed

+594
-23
lines changed

‎docs/css/instantsearch.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
.md-content {
2+
margin: 0 auto;
3+
}
4+
5+
footer.md-footer {
6+
left: 0;
7+
}
8+
9+
.md-content .ais-InstantSearch {
10+
letter-spacing: 0.12px;
11+
}
12+
13+
.md-content .ais-InstantSearch h1 {
14+
font-size: 32px;
15+
line-height: 36px;
16+
letter-spacing: 0.17px;
17+
margin: 8px 0 40px;
18+
}
19+
20+
.md-content .ais-InstantSearch .ais-SearchBox .ais-SearchBox-submit {
21+
left: 16px;
22+
}
23+
24+
.md-content .ais-InstantSearch .ais-SearchBox .ais-SearchBox-submitIcon {
25+
width: 16px;
26+
}
27+
28+
.md-content .ais-InstantSearch .ais-SearchBox .ais-SearchBox-input {
29+
font-size: 14px;
30+
line-height: 21px;
31+
height: 48px;
32+
padding-left: 48px;
33+
border-color: #A0A4A8;
34+
}
35+
36+
.md-content .ais-InstantSearch .ais-Hits-list {
37+
margin-left: 0;
38+
}
39+
40+
.md-content .ais-InstantSearch .ais-Hits-item {
41+
padding: 0px;
42+
width: initial;
43+
margin: 0;
44+
border: 0;
45+
box-shadow: none;
46+
}
47+
48+
.md-content .ais-InstantSearch .ais-Hits-item + .ais-Hits-item {
49+
border-top: 1px solid #E0E0E8;
50+
margin-top: 16px;
51+
padding-top: 16px;
52+
}
53+
54+
.md-content .ais-InstantSearch .ais-Highlight-highlighted {
55+
background-color: #ECF4FF;
56+
color: #4191FF;
57+
font-size: inherit;
58+
line-height: inherit;
59+
}
60+
61+
.md-content .ais-InstantSearch .instantsearch__entry {
62+
display: block;
63+
color: var(--ibexa-dusk-black);
64+
}
65+
66+
.md-content .ais-InstantSearch .instantsearch__entry:hover,
67+
.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-header,
68+
.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-content {
69+
color: var(--ibexa-jazzberry)
70+
}
71+
72+
.md-content .ais-InstantSearch .instantsearch__entry:hover mark,
73+
.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-header mark,
74+
.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-content mark {
75+
color: var(--ibexa-jazzberry)
76+
}
77+
78+
.md-content .ais-InstantSearch .instantsearch__entry-header {
79+
font-size: 18px;
80+
line-height: 20px;
81+
letter-spacing: 0.12px;
82+
margin: 4px 0;
83+
}
84+
85+
.md-content .ais-InstantSearch .instantsearch__entry-header .ais-Highlight-highlighted {
86+
font-size: 18px;
87+
line-height: 20px;
88+
}
89+
90+
.md-content .ais-InstantSearch .instantsearch__entry-content {
91+
color: #3B424A;
92+
font-size: 14px;
93+
line-height: 21px;
94+
letter-spacing: 0.12px;
95+
margin-top: 10px;
96+
padding-left: 10px;
97+
border-left: 2px solid var(--mid-grey);
98+
}
99+
100+
.md-content .ais-InstantSearch .instantsearch__entry-content .ais-Highlight-highlighted {
101+
font-size: 14px;
102+
line-height: 21px;
103+
}
104+
105+
.md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs {
106+
font-size: 12px;
107+
line-height: 21px;
108+
letter-spacing: 0.12px;
109+
}
110+
111+
.md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs-item:after {
112+
content: '›';
113+
display: inline-block;
114+
padding: 0 5px;
115+
}
116+
117+
.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-list:not([hidden]) {
118+
display: flex;
119+
list-style: none;
120+
margin: 15px 0 0;
121+
display: flex;
122+
justify-content: flex-end;
123+
}
124+
125+
.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item {
126+
margin: 0;
127+
}
128+
129+
.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-link {
130+
border: none;
131+
font-size: 14px;
132+
line-height: 21px;
133+
letter-spacing: 0.12px;
134+
color: var(--ibexa-dusk-black);
135+
height: 40px;
136+
min-width: 40px;
137+
display: flex;
138+
justify-content: center;
139+
align-items: center;
140+
}
141+
142+
.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-item--selected .ais-Pagination-link,
143+
.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-link:hover {
144+
background-color: #F3F3F6;
145+
border-radius: 5px;
146+
}
147+
148+
#version {
149+
display: none;
150+
}

‎docs/css/search.css‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
.md-header .md-search .algolia-autocomplete .ds-dataset-1 {
2+
padding: 0;
3+
}
4+
5+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion {
6+
padding: 0;
7+
}
8+
9+
.md-header .md-search .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
10+
background-color: transparent;
11+
color: var(--ibexa-jazzberry);
12+
}
13+
14+
.md-header .md-search .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--wrapper * {
15+
color: var(--ibexa-jazzberry);
16+
}
17+
18+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--highlight {
19+
background-color: #ECF4FF;
20+
color: #4191FF !important;
21+
box-shadow: none;
22+
padding: 0;
23+
}
24+
25+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main {
26+
padding: 0 0 14px 0;
27+
}
28+
29+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion:not(.algolia-docsearch-suggestion__main) {
30+
padding: 14px 0;
31+
border-top: 1px solid #E0E0E8;
32+
}
33+
34+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
35+
display: flex;
36+
align-items: center;
37+
font-size: 14px;
38+
line-height: 21px;
39+
letter-spacing: 0.12px;
40+
height: 40px;
41+
margin: 16px 0;
42+
padding: 0 40px;
43+
border: 0;
44+
background-color: #F2F2F5;
45+
color: var(--ibexa-dusk-black);
46+
font-weight: 600;
47+
}
48+
49+
.md-header .md-search .algolia-autocomplete .ds-suggestions > .ds-suggestion:first-child .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
50+
margin-top: 0;
51+
}
52+
53+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--wrapper {
54+
padding: 0;
55+
}
56+
57+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content {
58+
float: none;
59+
width: 100%;
60+
text-align: left;
61+
padding: 0;
62+
margin: 0 40px;
63+
color: var(--ibexa-dusk-black);
64+
}
65+
66+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--title {
67+
font-size: 18px;
68+
line-height: 20px;
69+
letter-spacing: 0.12px;
70+
font-weight: 600;
71+
}
72+
73+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
74+
float: none;
75+
width: 100%;
76+
text-align: left;
77+
color: #3B424A;
78+
font-size: 12px;
79+
line-height: 21px;
80+
letter-spacing: 0.12px;
81+
padding: 0;
82+
margin: 0px 40px 4px;
83+
display: flex;
84+
flex-direction: column-reverse;
85+
}
86+
87+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content::before {
88+
display: none;
89+
}
90+
91+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--text {
92+
color: #3B424A;
93+
font-size: 14px;
94+
line-height: 21px;
95+
letter-spacing: 0.12px;
96+
margin-top: 10px;
97+
padding-left: 10px;
98+
border-left: 2px solid var(--mid-grey);
99+
}
100+
101+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .aa-suggestion-title-separator {
102+
padding: 0 5px;
103+
}
104+
105+
.md-header .md-search .algolia-autocomplete .ds-dataset-1 {
106+
z-index: 1;
107+
padding-bottom: 70px;
108+
}
109+
110+
.md-header .md-search .algolia-autocomplete .search-page-link-wrapper {
111+
position: absolute;
112+
z-index: 2;
113+
bottom: 0;
114+
left: 0;
115+
right: 0;
116+
background-color: #F2F2F5;
117+
width: 100%;
118+
height: 60px;
119+
padding: 0 40px;
120+
display: flex;
121+
align-items: center;
122+
justify-content: center;
123+
}
124+
125+
.md-header .md-search .algolia-autocomplete .search-page-link {
126+
color: var(--link);
127+
transition: color 125ms;
128+
}
129+
130+
.md-header .md-search .algolia-autocomplete .search-page-link:hover {
131+
color: var(--ibexa-jazzberry);
132+
transition: color 125ms;
133+
}
134+
135+
.md-header .md-search .algolia-autocomplete .algolia-docsearch-footer {
136+
margin-right: 10px;
137+
}

‎docs/images/caret-back.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎docs/images/caret-double-back.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎docs/images/caret-double-next.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎docs/images/caret-next.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎docs/images/ez-icons.svg‎

Lines changed: 20 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)