diff --git a/components/navigation/search-style.scss b/components/navigation/search-style.scss index 16bb3c2345c8..994d1a4f04e6 100644 --- a/components/navigation/search-style.scss +++ b/components/navigation/search-style.scss @@ -2,6 +2,7 @@ .algolia-autocomplete { display: flex !important; + position: relative; .ds-dropdown-menu { box-shadow: none; @@ -11,33 +12,91 @@ } [class^=ds-dataset-] { - border-color: getColor(alto); - border-radius: 3px; + border-radius: 0; + border-color: getColor(malibu); + border-width: 2px 0; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); + padding: 0; + } + + .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { + background: transparentize(getColor(malibu), 0.9) !important; } } - .algolia-docsearch-suggestion--category-header { - border-color:getColor(alto); + .algolia-docsearch-suggestion { + padding: 0; + } + + .algolia-docsearch-suggestion--wrapper { + display: flex; + padding: 0; + } + + .algolia-docsearch-suggestion--text { + color: getColor(dusty-grey); + + .algolia-docsearch-suggestion--highlight { + color: lighten(getColor(denim), 5%); + box-shadow: none; + font-weight: bold; + } } .algolia-docsearch-suggestion--highlight { - color:getColor(denim); - background:rgba(getColor(malibu), 0.2); + color: lighten(getColor(denim), 5%); + background: rgba(getColor(malibu), 0.15); } - .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content { - background:rgba(getColor(dusty-grey), 0.15) !important; + .algolia-docsearch-suggestion--category-header { + text-transform: uppercase; + font-weight: bold; + font-size: 0.9em; + border-color: getColor(alto); + color: getColor(mine-shaft); + margin: 0; + padding: 6px 16px; } .algolia-docsearch-suggestion--subcategory-column { - color:getColor(dove-grey); + padding: 8px 16px 8px 12px; + background: transparentize(getColor(dusty-grey), 0.92); + display: block; + color: transparent; } - .algolia-docsearch-suggestion--category-header { - color:getColor(mine-shaft); + .algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--subcategory-column { + color: getColor(dove-grey); + } + + .algolia-docsearch-suggestion--content { + padding: 8px 16px 8px 12px; + } + + .ds-suggestion:nth-child(n+2) { + .algolia-docsearch-suggestion--category-header { + border-top: 1px solid #dedede; + } } .algolia-docsearch-suggestion--title { - color:getColor(mine-shaft); + color: getColor(mine-shaft); + } + + .ds-suggestion:last-child { + .algolia-docsearch-suggestion--subcategory-column, + .algolia-docsearch-suggestion--content { + padding-bottom: 26px; + } + } + + .algolia-docsearch-footer { + position: absolute; + bottom: 4px; + right: 16px; + } + + .aa-suggestion-title-separator { + color: getColor(dusty-grey); } }