// 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;
}
}
}
}