diff --git a/dev/index.html b/dev/index.html
index b5f58a86..81c695bc 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -7,6 +7,7 @@
+
diff --git a/src/styles/_dropdown.scss b/src/styles/_dropdown.scss
index 4d6718bb..8f8f89f1 100644
--- a/src/styles/_dropdown.scss
+++ b/src/styles/_dropdown.scss
@@ -1,9 +1,10 @@
+
// Detect lightness
@function detectLightness($color) {
@if (lightness($color) > 60) {
@return mix($color, #000, 90%);
} @else {
- @return mix($color, #fff, 90%);
+ @return mix($color, #fff, 90%);
}
}
@@ -78,7 +79,7 @@
// Mixin - highlight
@function set-highlight($highlight, $color) {
- @if $highlight == 1 and lightness($color) < 60 {
+ @if $highlight == 1 and lightness($color) < 60 {
@return mix(#fff, $color, 90%);
}
@else {
@@ -87,28 +88,29 @@
}
@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',
- $code-background: #EBEBEB
+$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',
+$code-background: #EBEBEB,
+$responsive-breakpoint: 768px
){
$header-size: 1em;
@@ -295,7 +297,6 @@
&--subcategory-column {
float: left;
width: 30%;
- display: none;
padding-left: 0;
text-align: right;
position: relative;
@@ -368,9 +369,49 @@
display: block;
}
- &.algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--subcategory-column {
+ &.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;
+ padding: 0;
+ 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)
@@ -425,7 +466,6 @@
padding: 0;
}
- &--subcategory-column,
&--duplicate-content,
&--subcategory-inline {
display: none!important;
@@ -465,26 +505,26 @@
// 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;
+ 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;
- }
- }
+ &--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;
+ }
+ }
}
}