// Detect lightness @function detectLightness($color) { @if (lightness($color) > 60) { @return mix($color, #000, 90%); } @else { @return mix($color, #fff, 90%); } } // Spacing @function spacing($type) { @if $type == "compact" { @return 12px; } @if $type == "spacious" { @return 22px; } @else { @return 16px; } } // Description @function desc($display) { @if $display == false { @return none; } @else { @return block; } } // Layout type @mixin layout-width($type) { @if $type == "small" { max-width: 500px; min-width: 400px; } @if $type == "normal" { max-width: 600px; min-width: 500px; } @if $type == "large" { max-width: 800px; min-width: 600px; } @if $type == "full" { width: 100%; } } // Alignment type @mixin alignment-type($type) { @if $type == "left" { left: 0 !important; right: inherit !important; } @if $type == "right" { right: 0 !important; left: inherit !important; } @if $type == "center" { left: 0 !important; right: 0 !important; margin: auto !important; } } // Mixin - Shadow type @mixin shadow-type($type) { @if $type == "light" { box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1); } @if $type == "heavy" { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } } // Mixin - highlight @function set-highlight($highlight, $color) { @if $highlight == 1 and lightness($color) < 60 { @return mix(#fff, $color, 90%); } @else { @return darken(detectLightness($color), 30%); } } @mixin dropdown( $main-color: #458ee1, $layout-width: normal, $layout-type: normal, $layout-alignment: "align", $background-color: #ffffff, $border-radius: 4, $border-width: 1, $border-color: #d9d9d9, $box-shadow: light, $branding-position: bottom, $font-size: normal, $header-color: #33363d, $title-color: #02060c, $subtitle-color: #a4a7ae, $text-color: #63676d, $highlight-color: #3881ff, $spacing: normal, $include-desc: true, $background-category-header: #ffffff, $highlight-opacity: 0.1, $highlight-type: "underline", $code-background: #ebebeb, $responsive-breakpoint: 768px ) { $header-size: 1em; $title-size: 0.9em; $text-size: 0.85em; $subtitle-size: 0.9em; $padding: spacing($spacing); @if $font-size == "small" { $header-size: 0.95em; $title-size: 0.8em; $text-size: 0.75em; $subtitle-size: 0.8em; } @else if $font-size == "large" { $header-size: 1.1em; $title-size: 1em; $text-size: 0.9em; $subtitle-size: 1em; } .algolia-autocomplete { &.algolia-autocomplete-right .ds-dropdown-menu { @include alignment-type(right); &:before { right: 48px; } } &.algolia-autocomplete-left .ds-dropdown-menu { @include alignment-type(left); &:before { left: 48px; } } // Dropdown wrapper .ds-dropdown-menu { position: relative; top: -6px; border-radius: $border-radius + px; margin: 6px 0 0; padding: 0; text-align: left; height: auto; position: relative; background: transparent; border: none; z-index: 999; @include layout-width($layout-width); @include shadow-type($box-shadow); // Arrow &:before { display: block; position: absolute; content: ""; width: 14px; height: 14px; background: $background-color; z-index: 1000; top: -7px; border-top: $border-width + px solid $border-color; border-right: $border-width + px solid $border-color; transform: rotate(-45deg); border-radius: 2px; } .ds-suggestions { position: relative; z-index: 1000; margin-top: $padding/2; } .ds-suggestion { cursor: pointer; &.ds-cursor { .algolia-docsearch-suggestion.suggestion-layout-simple { background-color: rgba($main-color, 0.05); } .algolia-docsearch-suggestion:not(.suggestion-layout-simple) { .algolia-docsearch-suggestion--content { background-color: rgba($main-color, 0.05); } } } } [class^="ds-dataset-"] { position: relative; border: solid $border-width + px $border-color; background: $background-color; border-radius: $border-radius + px; overflow: auto; padding: 0 $padding/2 $padding/2; } // Inner-grid setup * { box-sizing: border-box; } } // Each suggestion item is wrapped .algolia-docsearch-suggestion { position: relative; padding: 0 $padding/2; background: $background-color; color: $title-color; overflow: hidden; @if $highlight-type == basic { &--highlight { color: $main-color; background-color: rgba($main-color, $highlight-opacity); } .algolia-docsearch-suggestion--item-header .algolia-docsearch-suggestion--highlight { color: inherit; background: inherit; } } @else { &--highlight { color: set-highlight($highlight-opacity, $main-color); background: rgba(mix($main-color, #fff, 60%), $highlight-opacity); padding: 0.1em 0.05em; } &--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, &--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight { color: inherit; background: inherit; } &--text .algolia-docsearch-suggestion--highlight { padding: 0 0 1px; background: inherit; box-shadow: inset 0 -2px 0 0 rgba($main-color, 0.8); color: inherit; } } &--content { display: block; float: right; width: 70%; position: relative; padding: $padding/3 0 $padding/3 $padding/1.5; cursor: pointer; &:before { content: ""; position: absolute; display: block; top: 0; height: 100%; width: 1px; background: #ddd; left: -1px; } } &--category-header { position: relative; border-bottom: 1px solid #ddd; display: none; margin-top: $padding/2; padding: $padding/4 0; font-size: $header-size; color: $header-color; } &--wrapper { width: 100%; float: left; padding: $padding/2 0 0 0; } &--subcategory-column { float: left; width: 30%; padding-left: 0; text-align: right; position: relative; padding: $padding/3 $padding/1.5; color: $subtitle-color; font-size: $subtitle-size; word-wrap: break-word; &:before { content: ""; position: absolute; display: block; top: 0; height: 100%; width: 1px; background: #ddd; right: 0; } .algolia-docsearch-suggestion--highlight { background-color: inherit; color: inherit; } } &--subcategory-inline { display: none; } &--title { margin-bottom: $padding/4; color: $title-color; font-size: $title-size; font-weight: bold; } &--text { display: desc($include-desc); line-height: 1.2em; font-size: $text-size; color: $text-color; } &--no-results { width: 100%; padding: $padding/2 0; text-align: center; font-size: 1.2em; &::before { display: none; } } code { padding: 1px 5px; font-size: 90%; border: none; color: #222222; background-color: $code-background; border-radius: 3px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; .algolia-docsearch-suggestion--highlight { background: none; } } // Rules to display categories and subcategories &.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header { display: block; } &.algolia-docsearch-suggestion__secondary { display: block; } @media all and (min-width: #{$responsive-breakpoint}) { .algolia-docsearch-suggestion--subcategory-column { display: block; } } @media all and (max-width: #{$responsive-breakpoint}) { .algolia-docsearch-suggestion--subcategory-column { display: inline-block; width: auto; text-align: left; float: left; padding: 0; color: #02060c; font-size: 0.9em; font-weight: bold; text-align: left; opacity: 0.5; &:before { display: none; } &:after { content: "|"; } } .algolia-docsearch-suggestion--content { display: inline-block; width: auto; text-align: left; float: left; padding: 0; &:before { display: none; } } } } //Simple layout (no column) .suggestion-layout-simple { &.algolia-docsearch-suggestion { border-bottom: solid 1px #eee; padding: $padding/2; margin: 0; } .algolia-docsearch-suggestion { &--content { width: 100%; padding: 0; &::before { display: none; } } &--category-header { margin: 0; padding: 0; display: block; width: 100%; border: none; &-lvl0 { opacity: 0.6; font-size: $text-size; } &-lvl1 { opacity: 0.6; font-size: $text-size; &::before { background-image: url('data:image/svg+xml;utf8,'); content: ""; width: 10px; height: 10px; display: inline-block; } } } &--wrapper { width: 100%; float: left; margin: 0; padding: 0; } &--duplicate-content, &--subcategory-inline { display: none !important; } &--title { margin: 0; color: $main-color; font-size: $title-size; font-weight: normal; &::before { content: "#"; font-weight: bold; color: $main-color; display: inline-block; } } &--text { margin: $padding/4 0 0; display: desc($include-desc); line-height: 1.4em; padding: $padding/3 $padding/2; background: #f8f8f8; font-size: $text-size; opacity: 0.8; .algolia-docsearch-suggestion--highlight { color: darken($text-color, 15%); font-weight: bold; box-shadow: none; } } } } // powered by .algolia-docsearch-footer { width: 110px; height: 20px; z-index: 2000; margin-top: $padding/1.5; float: right; font-size: 0; line-height: 0; &--logo { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 100%; overflow: hidden; text-indent: -9000px; padding: 0 !important; width: 100%; height: 100%; display: block; } } } }