diff --git a/dev/docsearch-styling.css b/dev/docsearch-styling.css
deleted file mode 100644
index 72bf189f..00000000
--- a/dev/docsearch-styling.css
+++ /dev/null
@@ -1,38 +0,0 @@
-/* Bottom border of each suggestion */
-.algolia-docsearch-suggestion {
- border-bottom-color: #3A3DD1;
-}
-/* Main category headers */
-.algolia-docsearch-suggestion--category-header {
- background-color: #4B54DE;
-}
-/* Highlighted search terms */
-.algolia-docsearch-suggestion--highlight {
- color: #3A33D1;
-}
-/* Highligted search terms in the main category headers */
-.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
- background-color: #4D47D5;
-}
-/* Currently selected suggestion */
-.aa-cursor .algolia-docsearch-suggestion--content {
- color: #272296;
-}
-.aa-cursor .algolia-docsearch-suggestion {
- background: #EBEBFB;
-}
-
-/* For bigger screens, when displaying results in two columns */
-@media (min-width: 768px) {
- /* Bottom border of each suggestion */
- .algolia-docsearch-suggestion {
- border-bottom-color: #7671df;
- }
- /* Left column, with secondary category header */
- .algolia-docsearch-suggestion--subcategory-column {
- border-right-color: #7671df;
- background-color: #F2F2FF;
- color: #4E4726;
- }
-}
-
diff --git a/dev/index.html b/dev/index.html
index cb55fe02..b5f58a86 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -6,7 +6,6 @@
Documentation
-
diff --git a/src/styles/_dropdown.scss b/src/styles/_dropdown.scss
new file mode 100644
index 00000000..5681114d
--- /dev/null
+++ b/src/styles/_dropdown.scss
@@ -0,0 +1,477 @@
+// 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%;
+ }
+}
+
+// Alignement 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: .1,
+ $highlight-type: 'underline'
+){
+
+ $header-size: 1em;
+ $title-size: .9em;
+ $text-size: .85em;
+ $subtitle-size: .9em;
+ $padding: spacing($spacing);
+
+ @if $font-size == 'small' {
+ $header-size: .95em;
+ $title-size: .8em;
+ $text-size: .75em;
+ $subtitle-size: .8em;
+ }
+
+ @else if $font-size == 'large' {
+ $header-size: 1.1em;
+ $title-size: 1em;
+ $text-size: .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,.05);
+ }
+
+ .algolia-docsearch-suggestion:not(.suggestion-layout-simple){
+ .algolia-docsearch-suggestion--content{
+ background-color: rgba($main-color,.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%;
+ display: none;
+ 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;
+ }
+ }
+
+ // Rules to display categories and subcategories
+ &.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
+ display: block;
+ }
+
+ &.algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--subcategory-column {
+ display: block;
+ }
+ }
+
+ //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: .6;
+ font-size: $text-size;
+ }
+
+ &-lvl1{
+ opacity: .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;
+ }
+
+ &--subcategory-column,
+ &--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: .8;
+
+ .algolia-docsearch-suggestion--highlight {
+ color: darken($text-color,15%);
+ font-weight: bold;
+ box-shadow: none;
+ }
+ }
+ }
+ }
+
+ // powered by
+ .algolia-docsearch-footer {
+ width: 100px;
+ 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;
+ }
+ }
+ }
+}
diff --git a/src/styles/_searchbox.scss b/src/styles/_searchbox.scss
new file mode 100644
index 00000000..fd018c2b
--- /dev/null
+++ b/src/styles/_searchbox.scss
@@ -0,0 +1,208 @@
+
+@function even-px($value) {
+ @if type-of($value) == 'number' {
+ @if (unitless($value)) {
+ $value: $value * 1px;
+ } @else if unit($value) == 'em' {
+ $value: ($value / 1em * 16px);
+ } @else if unit($value) == 'pts' {
+ $value: $value * 1.3333 * 1px;
+ } @else if unit($value) == '%' {
+ $value: $value * 16 / 100% * 1px;
+ };
+ $value: round($value);
+ @if ($value % 2 != 0) {
+ $value: $value + 1;
+ }
+ @return $value;
+ }
+}
+
+@mixin searchbox(
+ $font-size: 90%,
+ $input-width: 350px,
+ $input-height: $font-size * 2.4,
+ $border-width: 1px,
+ $border-radius: $input-height / 2,
+ $input-border-color: #ccc,
+ $input-focus-border-color: #1ec9ea,
+ $input-background: #f8f8f8,
+ $input-focus-background: #fff,
+ $placeholder-color: #aaa,
+ $icon: 'sbx-icon-search-1',
+ $icon-size: $input-height / 1.6,
+ $icon-position: left,
+ $icon-color: #888,
+ $icon-background: $input-focus-border-color,
+ $icon-background-opacity: .1,
+ $icon-clear: 'sbx-icon-clear-1',
+ $icon-clear-size: $font-size / 1.1
+) {
+ .searchbox {
+ display: inline-block;
+ position: relative;
+ width: $input-width;
+ height: even-px($input-height)!important;
+ white-space: nowrap;
+ box-sizing: border-box;
+ visibility: visible!important;
+
+ .algolia-autocomplete{
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ &__wrapper {
+ width: 100%;
+ height: 100%;
+ z-index: 999;
+ position: relative;
+ }
+
+ &__input {
+ display: inline-block;
+ box-sizing: border-box;
+ transition: box-shadow .4s ease, background .4s ease;
+ border: 0;
+ border-radius: even-px($border-radius);
+ box-shadow: inset 0 0 0 $border-width $input-border-color;
+ background: $input-background !important;
+ padding: 0;
+ padding-right: if($icon-position == 'right', even-px($input-height) + even-px($icon-clear-size) + 8px, even-px($input-height * .8))
+ + if($icon-background-opacity == 0, 0, even-px($font-size));
+ padding-left: if($icon-position == 'right',
+ even-px($font-size / 2) + even-px($border-radius / 2),
+ even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size * 1.2)));
+ width: 100%;
+ height: 100%;
+ vertical-align: middle;
+ white-space: normal;
+ font-size: $font-size;
+ appearance: none;
+
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-results-button,
+ &::-webkit-search-results-decoration {
+ display: none;
+ }
+
+ &:hover {
+ box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%);
+ }
+
+ &:focus,
+ &:active {
+ outline: 0;
+ box-shadow: inset 0 0 0 $border-width $input-focus-border-color;
+ background: $input-focus-background;
+ }
+
+ &::placeholder {
+ color: $placeholder-color;
+ }
+
+ }
+
+ &__submit {
+ position: absolute;
+ top: 0;
+ margin: 0;
+ border: 0;
+ border-radius: if($icon-position == 'right', 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius);
+ background-color: rgba($icon-background, $icon-background-opacity);
+ padding: 0;
+ width: even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size / 2));
+ height: 100%;
+ vertical-align: middle;
+ text-align: center;
+ font-size: inherit;
+ user-select: none;
+ @if $icon-position == 'right' {
+ right: 0;
+ left: inherit;
+ } @else {
+ right: inherit;
+ left: 0;
+ }
+
+ // Helper for vertical alignement of the icon
+ &::before {
+ display: inline-block;
+ margin-right: -4px;
+ height: 100%;
+ vertical-align: middle;
+ content: '';
+ }
+
+ &:hover,
+ &:active {
+ cursor: pointer;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ svg {
+ width: even-px($icon-size);
+ height: even-px($icon-size);
+ vertical-align: middle;
+ fill: $icon-color;
+ }
+ }
+
+ &__reset {
+ display: block;
+ position: absolute;
+ top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px;
+ right: if($icon-position == 'right',
+ even-px($input-height) + if($icon-background-opacity == 0, 0 , even-px($font-size)),
+ (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px);
+ margin: 0;
+ border: 0;
+ background: none;
+ cursor: pointer;
+ padding: 0;
+ font-size: inherit;
+ user-select: none;
+ fill: rgba(#000, .5);
+
+ &.hide {
+ display: none;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ svg {
+ display: block;
+ margin: 4px;
+ width: even-px($icon-clear-size);
+ height: even-px($icon-clear-size);
+ }
+ }
+
+ &__input:valid ~ &__reset {
+ display: block;
+ animation-name: sbx-reset-in;
+ animation-duration: .15s;
+ }
+
+ @at-root{
+ @keyframes sbx-reset-in {
+ 0% {
+ transform: translate3d(-20%, 0, 0);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: none;
+ opacity: 1;
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 94b6df3a..69ea58e1 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,15 +1,46 @@
-$color-border: #3A3A3A;
-$color-border-light: lighten($color-border, 15%);
-$color-category-header-background: #3C4658;
-$color-highlight-header-background: lighten($color-category-header-background, 15%);
-$color-highlight-text: #0064E1;
-$color-selected-background: #E7EDF3;
-$color-selected-text: #0064E1;
-$color-left-column-bg: #F1F3F5;
-$color-left-column: #555;
+// SEARCHBOX
+$searchbox-config: (
+ input-width: 200px,
+ input-height: 32px,
+ border-width: 1px,
+ border-radius: 16px,
+ input-border-color: #CCCCCC,
+ input-focus-border-color: #AAAAAA,
+ input-background: #FFFFFF,
+ input-focus-background: #FFFFFF,
+ font-size: 12px,
+ placeholder-color: #AAAAAA,
+ icon-size: 14px,
+ icon-position: left,
+ icon-color: #6D7E96,
+ icon-background: #458EE1,
+ icon-background-opacity: 0,
+ icon-clear-size: 8px
+) !default;
-$breakpoint-medium: 568px;
-$breakpoint-large: 768px;
+// DROPDOWN
+$dropdown-config: (
+ main-color: #458EE1,
+ layout-type: normal,
+ layout-width: normal,
+ layout-alignment: align,
+ background-color: #fff,
+ border-radius: 4,
+ border-width: 1,
+ border-color: #d9d9d9,
+ box-shadow: light,
+ branding-position: bottom,
+ spacing: normal,
+ include-desc: yes,
+ background-category-header: #ffffff,
+ font-size: normal,
+ header-color: #33363D,
+ title-color: #02060C,
+ subtitle-color: #A4A7AE,
+ text-color: #63676D,
+ highlight-color: #3881FF,
+ highlight-opacity: .1,
+ highlight-type: underline
+) !default;
-$dropdown-min-width-medium: 400px;
-$dropdown-min-width-large: 600px;
+$builder-height: 260px;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 552ce416..3de96a69 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,187 +1,11 @@
@import "variables";
+@import "dropdown";
+@import "searchbox";
-// The dropdown adapts to screen size, to provide three different displays.
-// - A simple list of matching results
-// - Same list, but with text snippetting added if size is large enough
-// - Adding a second colum to let the content breath if enough room available
+$searchbox: true!default;
-// Main autocomplete wrapper
-.ds-dropdown-menu {
- background-color: #FFF;
- border: 1px solid #333;
- border-radius: 4px;
- font-size: 16px;
- margin: 6px 0 0;
- padding: 4px;
- text-align: left;
+@if($searchbox == true){
+ @include searchbox($searchbox-config...);
}
-// Each suggestion
-.algolia-docsearch-suggestion {
- color: #333;
- cursor: pointer;
- overflow: hidden;
-}
-
- // Each sub-suggestion
- .algolia-docsearch-suggestion__secondary {
- border-top: 1px solid $color-border;
- }
-
-// Main category headers
-.algolia-docsearch-suggestion--category-header {
- display: none;
- background: $color-category-header-background;
- color: white;
- font-weight: 600;
- padding: 5px 10px;
- text-align: left;
- // Only show it when flaggued as "__main"
- .algolia-docsearch-suggestion__main & {
- display: block;
- }
-}
-
-// Highlight
-.algolia-docsearch-suggestion--highlight {
- padding: 0;
- color: $color-highlight-text;
- background: none;
- font-weight: 600;
- // Highlight the background in header
- .algolia-docsearch-suggestion--category-header & {
- color: inherit;
- background: $color-highlight-header-background;
- }
-}
-
-// Selected suggestion
-.ds-cursor .algolia-docsearch-suggestion--content {
- color: $color-selected-text;
-}
-.ds-cursor .algolia-docsearch-suggestion {
- background: $color-selected-background;
-}
-
-// The secondary column is hidden on small screens
-.algolia-docsearch-suggestion--subcategory-column {
- display: none;
- cursor: default;
-}
-// The text snippet is hidden on small screens
-.algolia-docsearch-suggestion--text {
- display: none;
-}
-
-.algolia-docsearch-suggestion--content {
- padding: 3px 5px;
- width: 100%;
- border-top: 1px solid lighten($color-border, 60%);
-}
-
-.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
-.algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content {
- border-top: 0;
-}
-
-.algolia-docsearch-suggestion--subcategory-inline {
- display: inline-block;
- font-weight: bold;
- &:after {
- content: " › ";
- }
-}
-.algolia-docsearch-suggestion--title {
- display: inline;
-}
-
-// Footer
-
-.algolia-docsearch-footer {
- border-top: 1px solid $color-border-light;
- text-align: right;
- font-size: 12px;
- padding: 4px 2px 0 0;
- color: #333;
-
- .algolia-docsearch-footer--logo {
- display: inline-block !important;
- width: 45px;
- height: 16px;
- text-indent: 101%;
- overflow: hidden;
- white-space: nowrap;
- background-image: url('data:image/png;base64,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');
- background-repeat: no-repeat;
- background-size: contain;
- vertical-align: middle;
- }
-}
-
-// BREAKPOINT 1:
-// Screen is big enough to display the text snippets
-@media (min-width: $breakpoint-medium) {
- .ds-dropdown-menu {
- min-width: $dropdown-min-width-medium;
- }
- .algolia-docsearch-suggestion--text {
- display: block;
- font-size: .9em;
- padding: 2px 0;
- }
-}
-
-// BREAKPOINT 2:
-// Screen is big enough to display results in two columns
-@media (min-width: $breakpoint-large) {
- .ds-dropdown-menu {
- min-width: $dropdown-min-width-large;
- }
- .algolia-docsearch-suggestion {
- display: table;
- width: 100%;
- }
-
- .algolia-docsearch-suggestion__secondary {
- border-top: 1px solid $color-border-light;
- }
-
- .algolia-docsearch-suggestion--subcategory-column {
- border-right: 1px solid $color-border-light;
- background: $color-left-column-bg;
- color: $color-left-column;
- display: table-cell;
- overflow: hidden;
- padding: 5px 7px 5px 5px;
- text-align: right;
- text-overflow: ellipsis;
- vertical-align: top;
-
- width: 135px; // Hardcoded
- max-width: 135px; // Hardcoded
- min-width: 135px; // Hardcoded
- }
-
- .algolia-docsearch-suggestion--subcategory-column-text {
- display: none;
-
- .algolia-docsearch-suggestion__secondary & {
- display: block;
- }
- }
- .algolia-docsearch-suggestion--content {
- display: table-cell;
- padding: 5px 10px;
- }
- .algolia-docsearch-suggestion--subcategory-inline {
- display: none;
- }
- .algolia-docsearch-suggestion--title {
- font-weight: 600;
- }
- .algolia-docsearch-suggestion--text {
- display: block;
- font-weight: normal;
- padding: 2px;
- }
-}
+@include dropdown($dropdown-config...);