From 71fd3980446021fbba04dcffcf6c75437560ac57 Mon Sep 17 00:00:00 2001 From: s-pace Date: Thu, 1 Nov 2018 14:51:21 +0100 Subject: [PATCH] simple eslint reformat --- src/styles/_dropdown.scss | 210 +++++++++++++++++++------------------- src/styles/main.scss | 4 +- 2 files changed, 105 insertions(+), 109 deletions(-) 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...); }