IBX-4064: Search page

docs/css/custom.css

@@ -630,6 +630,3 @@ div.path {
 .path p.description {
     color: var(--ibexa-dusk-black);
 }
-
-
-

docs/css/instantsearch.css

@@ -0,0 +1,165 @@
+.md-content {
+    margin: 0 auto;
+}
+
+footer.md-footer {
+    left: 0;
+}
+
+.md-content .ais-InstantSearch {
+    letter-spacing: 0.12px;
+}
+
+.md-content .ais-InstantSearch h1 {
+    font-size: 32px;
+    line-height: 36px;
+    letter-spacing: 0.17px;
+    margin: 8px 0 40px;
+}
+
+.md-content .ais-InstantSearch .ais-SearchBox .ais-SearchBox-submit {
+    left: 16px;
+}
+
+.md-content .ais-InstantSearch .ais-SearchBox .ais-SearchBox-submitIcon {
+    width: 16px;
+}
+
+.md-content .ais-InstantSearch .ais-SearchBox .ais-SearchBox-input {
+    font-size: 14px;
+    line-height: 21px;
+    height: 48px;
+    padding-left: 48px;
+    border-color: #A0A4A8;
+}
+
+.md-content .ais-InstantSearch .ais-Hits-list {
+    margin-left: 0;
+}
+
+.md-content .ais-InstantSearch .ais-Hits-item {
+    padding: 5px 0 10px;
+    width: initial;
+    margin: 0;
+    border: 0;
+    box-shadow: none;
+}
+
+.md-content .ais-InstantSearch .ais-Highlight-highlighted {
+    background-color: #ECF4FF;
+    color: #4191FF;
+    font-size: 14px;
+    line-height: 21px;
+}
+
+.md-content .ais-InstantSearch .instantsearch__group-header {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 0.12px;
+    height: 40px;
+    margin: 0;
+    padding: 0 16px;
+    background-color: #F2F2F5;
+}
+
+.md-content .ais-InstantSearch .instantsearch__group-header .ais-Highlight-highlighted {
+    font-size: 14px;
+    line-height: 21px;
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry {
+    display: block;
+    color: var(--ibexa-dusk-black);
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry:hover {
+    color: var(--ibexa-jazzberry);
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-header,
+.md-content .ais-InstantSearch .instantsearch__entry:hover .instantsearch__entry-content {
+    color: var(--ibexa-jazzberry)
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry + .instantsearch__entry {
+    border-top: 1px solid #E0E0E8;
+    margin-top: 16px;
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry-header {
+    font-size: 18px;
+    line-height: 20px;
+    letter-spacing: 0.12px;
+    margin: 24px 0 4px;
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry-header .ais-Highlight-highlighted {
+    font-size: 18px;
+    line-height: 20px;
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry-content {
+    color: #3B424A;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 0.12px;
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry-content .ais-Highlight-highlighted {
+    font-size: 14px;
+    line-height: 21px;
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs {
+    font-size: 12px;
+    line-height: 21px;
+    letter-spacing: 0.12px;
+    margin-top: 16px;
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs-item + .instantsearch__entry-breadcrumbs-item {
+    margin-left: 12px;
+}
+
+.md-content .ais-InstantSearch .instantsearch__entry-breadcrumbs-item + .instantsearch__entry-breadcrumbs-item:before {
+    content: '>';
+    display: inline-block;
+    padding-right: 12px;
+}
+
+.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-list:not([hidden]) {
+    display: flex;
+    list-style: none;
+    margin: 15px 0 0;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-list .ais-Pagination-item {
+    margin: 0;
+}
+
+.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-link {
+    border: none;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 0.12px;
+    color: var(--ibexa-dusk-black);
+    height: 40px;
+    min-width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-item--selected .ais-Pagination-link,
+.md-content .ais-InstantSearch .ais-Pagination .ais-Pagination-link:hover {
+    background-color: #F3F3F6;
+    border-radius: 5px;
+}
+
+#version {
+    display: none;
+}

docs/css/search.css

@@ -0,0 +1,120 @@
+.md-header .md-search .algolia-autocomplete .ds-dataset-1 {
+    padding: 0;
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion {
+    padding: 0;
+}
+
+.md-header .md-search .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
+    background-color: transparent;
+    color: var(--ibexa-jazzberry);
+}
+
+.md-header .md-search .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--wrapper * {
+    color: var(--ibexa-jazzberry);
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--highlight {
+    background-color: #ECF4FF;
+    color: #4191FF !important;
+    box-shadow: none;
+    padding: 0;
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 0.12px;
+    height: 40px;
+    margin: 16px 0 0 0;
+    padding: 0 40px;
+    border: 0;
+    background-color: #F2F2F5;
+    color: var(--ibexa-dusk-black);
+    font-weight: 600;
+}
+
+.md-header .md-search .algolia-autocomplete .ds-suggestions > .ds-suggestion:first-child .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
+    margin-top: 0;
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--wrapper {
+    padding: 0;
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+    float: none;
+    width: 100%;
+    text-align: left;
+    font-size: 18px;
+    line-height: 20px;
+    letter-spacing: 0.12px;
+    margin: 24px 40px 4px;
+    padding: 0;
+    color: var(--ibexa-dusk-black);
+    font-weight: 600;
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content {
+    float: none;
+    width: 100%;
+    text-align: left;
+    color: #3B424A;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 0.12px;
+    padding: 0;
+    margin: 0 40px;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content::before {
+    display: none;
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--title {
+    font-size: 12px;
+    line-height: 21px;
+    letter-spacing: 0.12px;
+    margin-top: 16px;
+    font-weight: 500;
+}
+
+.md-header .md-search .algolia-autocomplete .algolia-docsearch-suggestion .aa-suggestion-title-separator {
+    margin: 0 12px;
+    font-weight: 500;
+}
+
+.md-header .md-search .algolia-autocomplete .ds-dataset-1 {
+    z-index: 1;
+    padding-bottom: 70px;
+}
+
+.md-header .md-search .algolia-autocomplete .search-page-link-wrapper {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #F2F2F5;
+    width: 100%;
+    height: 60px;
+    padding: 0 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.md-header .md-search .algolia-autocomplete .search-page-link {
+    color: var(--link);
+    transition: color 125ms;
+}
+
+.md-header .md-search .algolia-autocomplete .search-page-link:hover {
+    color: var(--ibexa-jazzberry);
+    transition: color 125ms;
+}