diff --git a/src/styles/_dropdown.scss b/src/styles/_dropdown.scss
index 53c83cd0..a161e7a1 100644
--- a/src/styles/_dropdown.scss
+++ b/src/styles/_dropdown.scss
@@ -1,4 +1,3 @@
-
// Detect lightness
@function detectLightness($color) {
@if (lightness($color) > 60) {
@@ -10,13 +9,12 @@
// Spacing
@function spacing($type) {
- @if $type == 'compact' {
+ @if $type == "compact" {
@return 12px;
}
- @if $type == 'spacious' {
+ @if $type == "spacious" {
@return 22px;
- }
- @else {
+ } @else {
@return 16px;
}
}
@@ -25,42 +23,41 @@
@function desc($display) {
@if $display == false {
@return none;
- }
- @else {
+ } @else {
@return block;
}
}
// Layout type
@mixin layout-width($type) {
- @if $type == 'small' {
+ @if $type == "small" {
max-width: 500px;
min-width: 400px;
}
- @if $type == 'normal' {
+ @if $type == "normal" {
max-width: 600px;
min-width: 500px;
}
- @if $type == 'large' {
+ @if $type == "large" {
max-width: 800px;
min-width: 600px;
}
- @if $type == 'full' {
+ @if $type == "full" {
width: 100%;
}
}
// Alignment type
@mixin alignment-type($type) {
- @if $type == 'left' {
+ @if $type == "left" {
left: 0 !important;
right: inherit !important;
}
- @if $type == 'right' {
+ @if $type == "right" {
right: 0 !important;
left: inherit !important;
}
- @if $type == 'center' {
+ @if $type == "center" {
left: 0 !important;
right: 0 !important;
margin: auto !important;
@@ -69,11 +66,12 @@
// 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 == "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);
+ @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);
}
}
@@ -81,67 +79,62 @@
@function set-highlight($highlight, $color) {
@if $highlight == 1 and lightness($color) < 60 {
@return mix(#fff, $color, 90%);
- }
- @else {
+ } @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',
-$code-background: #EBEBEB,
-$responsive-breakpoint: 768px
-){
-
+ $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: .9em;
- $text-size: .85em;
- $subtitle-size: .9em;
+ $title-size: 0.9em;
+ $text-size: 0.85em;
+ $subtitle-size: 0.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' {
+ @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: .9em;
+ $text-size: 0.9em;
$subtitle-size: 1em;
}
.algolia-autocomplete {
-
- &.algolia-autocomplete-right .ds-dropdown-menu{
+ &.algolia-autocomplete-right .ds-dropdown-menu {
@include alignment-type(right);
&:before {
right: 48px;
}
}
- &.algolia-autocomplete-left .ds-dropdown-menu{
+ &.algolia-autocomplete-left .ds-dropdown-menu {
@include alignment-type(left);
&:before {
left: 48px;
@@ -152,7 +145,7 @@ $responsive-breakpoint: 768px
.ds-dropdown-menu {
position: relative;
top: -6px;
- border-radius: $border-radius+px;
+ border-radius: $border-radius + px;
margin: 6px 0 0;
padding: 0;
text-align: left;
@@ -168,14 +161,14 @@ $responsive-breakpoint: 768px
&:before {
display: block;
position: absolute;
- content: '';
+ content: "";
width: 14px;
height: 14px;
background: $background-color;
- z-index:1000;
+ z-index: 1000;
top: -7px;
- border-top: $border-width+px solid $border-color;
- border-right: $border-width+px solid $border-color;
+ border-top: $border-width + px solid $border-color;
+ border-right: $border-width + px solid $border-color;
transform: rotate(-45deg);
border-radius: 2px;
}
@@ -186,17 +179,17 @@ $responsive-breakpoint: 768px
margin-top: $padding/2;
}
- .ds-suggestion{
+ .ds-suggestion {
cursor: pointer;
&.ds-cursor {
.algolia-docsearch-suggestion.suggestion-layout-simple {
- background-color: rgba($main-color,.05);
+ background-color: rgba($main-color, 0.05);
}
- .algolia-docsearch-suggestion:not(.suggestion-layout-simple){
- .algolia-docsearch-suggestion--content{
- background-color: rgba($main-color,.05);
+ .algolia-docsearch-suggestion:not(.suggestion-layout-simple) {
+ .algolia-docsearch-suggestion--content {
+ background-color: rgba($main-color, 0.05);
}
}
}
@@ -204,9 +197,9 @@ $responsive-breakpoint: 768px
[class^="ds-dataset-"] {
position: relative;
- border: solid $border-width+px $border-color;
+ border: solid $border-width + px $border-color;
background: $background-color;
- border-radius: $border-radius+px;
+ border-radius: $border-radius + px;
overflow: auto;
padding: 0 $padding/2 $padding/2;
}
@@ -231,26 +224,29 @@ $responsive-breakpoint: 768px
background-color: rgba($main-color, $highlight-opacity);
}
- .algolia-docsearch-suggestion--item-header .algolia-docsearch-suggestion--highlight{
+ .algolia-docsearch-suggestion--item-header
+ .algolia-docsearch-suggestion--highlight {
color: inherit;
background: inherit;
}
- }
-
- @else {
+ } @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 {
+ &--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{
+ &--text .algolia-docsearch-suggestion--highlight {
padding: 0 0 1px;
background: inherit;
box-shadow: inset 0 -2px 0 0 rgba($main-color, 0.8);
@@ -267,7 +263,7 @@ $responsive-breakpoint: 768px
cursor: pointer;
&:before {
- content: '';
+ content: "";
position: absolute;
display: block;
top: 0;
@@ -306,7 +302,7 @@ $responsive-breakpoint: 768px
word-wrap: break-word;
&:before {
- content: '';
+ content: "";
position: absolute;
display: block;
top: 0;
@@ -340,13 +336,13 @@ $responsive-breakpoint: 768px
color: $text-color;
}
- &--no-results{
+ &--no-results {
width: 100%;
padding: $padding/2 0;
text-align: center;
font-size: 1.2em;
- &::before{
+ &::before {
display: none;
}
}
@@ -358,14 +354,15 @@ $responsive-breakpoint: 768px
color: #222222;
background-color: $code-background;
border-radius: 3px;
- font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+ 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 {
+ &.algolia-docsearch-suggestion__main
+ .algolia-docsearch-suggestion--category-header {
display: block;
}
@@ -374,39 +371,39 @@ $responsive-breakpoint: 768px
}
@media all and (min-width: #{$responsive-breakpoint}) {
- .algolia-docsearch-suggestion--subcategory-column{
+ .algolia-docsearch-suggestion--subcategory-column {
display: block;
}
}
@media all and (max-width: #{$responsive-breakpoint}) {
- .algolia-docsearch-suggestion--subcategory-column{
+ .algolia-docsearch-suggestion--subcategory-column {
display: inline-block;
width: auto;
text-align: left;
float: left;
padding: 0;
- color: #02060C;
+ color: #02060c;
font-size: 0.9em;
font-weight: bold;
text-align: left;
opacity: 0.5;
- &:before{
+ &:before {
display: none;
}
- &:after{
- content:"|";
+ &:after {
+ content: "|";
}
}
- .algolia-docsearch-suggestion--content{
+ .algolia-docsearch-suggestion--content {
display: inline-block;
width: auto;
text-align: left;
float: left;
padding: 0;
- &:before{
+ &:before {
display: none;
}
}
@@ -414,8 +411,7 @@ $responsive-breakpoint: 768px
}
//Simple layout (no column)
- .suggestion-layout-simple{
-
+ .suggestion-layout-simple {
&.algolia-docsearch-suggestion {
border-bottom: solid 1px #eee;
padding: $padding/2;
@@ -427,7 +423,7 @@ $responsive-breakpoint: 768px
width: 100%;
padding: 0;
- &::before{
+ &::before {
display: none;
}
}
@@ -440,17 +436,17 @@ $responsive-breakpoint: 768px
border: none;
&-lvl0 {
- opacity: .6;
+ opacity: 0.6;
font-size: $text-size;
}
- &-lvl1{
- opacity: .6;
+ &-lvl1 {
+ opacity: 0.6;
font-size: $text-size;
- &::before{
+ &::before {
background-image: url('data:image/svg+xml;utf8,');
- content: '';
+ content: "";
width: 10px;
height: 10px;
display: inline-block;
@@ -467,7 +463,7 @@ $responsive-breakpoint: 768px
&--duplicate-content,
&--subcategory-inline {
- display: none!important;
+ display: none !important;
}
&--title {
@@ -476,7 +472,7 @@ $responsive-breakpoint: 768px
font-size: $title-size;
font-weight: normal;
- &::before{
+ &::before {
content: "#";
font-weight: bold;
color: $main-color;
@@ -491,10 +487,10 @@ $responsive-breakpoint: 768px
padding: $padding/3 $padding/2;
background: #f8f8f8;
font-size: $text-size;
- opacity: .8;
+ opacity: 0.8;
.algolia-docsearch-suggestion--highlight {
- color: darken($text-color,15%);
+ color: darken($text-color, 15%);
font-weight: bold;
box-shadow: none;
}
@@ -513,13 +509,13 @@ $responsive-breakpoint: 768px
line-height: 0;
&--logo {
- background-image: url("data:image/svg+xml;utf8,");
+ 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;
+ padding: 0 !important;
width: 100%;
height: 100%;
display: block;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 3de96a69..34b24fa6 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -2,9 +2,9 @@
@import "dropdown";
@import "searchbox";
-$searchbox: true!default;
+$searchbox: true !default;
-@if($searchbox == true){
+@if ($searchbox == true) {
@include searchbox($searchbox-config...);
}