diff --git a/.sass-lint.yml b/.sass-lint.yml index 356493ec48..d2c8a6dbe9 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -2,20 +2,15 @@ options: formatter: stylish files: include: - '+(docs|src)/**/*.scss' + '+(docgen|src)/**/*.scss' ignore: - - 'docs/_site/**' - - 'docs/_assets/stylesheets/bootstrap/**/*.scss' # Vendor - - 'docs/_assets/stylesheets/_syntax-highlighting.scss' # Vendor - - 'docs/examples/**/main.scss' # Files with front-matter - # Contains asset_path() call to jekyll-assets. sass-lint cannot disable rules inline - # https://github.com/sasstools/sass-lint/issues/70 - - 'docs/_assets/stylesheets/_home.scss' + - 'docgen/src/stylesheets/vendors/**/*.scss' + - 'docgen/node_modules/**/*.scss' rules: # Extends extends-before-mixins: 1 extends-before-declarations: 1 - placeholder-in-extend: 1 + placeholder-in-extend: 0 class-name-format: - 1 @@ -27,11 +22,11 @@ rules: # Line Spacing one-declaration-per-line: 1 - empty-line-between-blocks: 0 + empty-line-between-blocks: 1 single-line-per-selector: 0 # Disallows - no-color-keywords: 1 + no-color-keywords: 0 no-color-literals: 0 no-css-comments: 0 no-debug: 1 @@ -56,7 +51,7 @@ rules: force-pseudo-nesting: 1 # Name Formats - function-name-format: 1 + function-name-format: 0 # this rule also applies on function name that are called... mixin-name-format: 1 placeholder-name-format: 1 variable-name-format: 1 @@ -68,15 +63,18 @@ rules: empty-args: 1 hex-length: 0 hex-notation: - - 2 + - 1 - style: uppercase indentation: 1 - leading-zero: 1 + leading-zero: 0 nesting-depth: 0 property-sort-order: 0 quotes: 0 - shorthand-values: 1 + shorthand-values: + - 1 + - + allowed-shorthands: [1, 2] url-quotes: 1 variable-for-property: 1 zero-unit: 1 @@ -89,6 +87,7 @@ rules: space-before-bang: 1 space-after-bang: 1 space-between-parens: 1 + space-around-operator: 0 # because it's hard to read when you have multiple value set with operators (eg. padding) # Final Items trailing-semicolon: 1 diff --git a/docgen/src/examples/e-commerce/main.scss b/docgen/src/examples/e-commerce/main.scss index 5cb00d54d8..fdcb26fdc1 100644 --- a/docgen/src/examples/e-commerce/main.scss +++ b/docgen/src/examples/e-commerce/main.scss @@ -13,7 +13,7 @@ $header-height: 60px; $sidebar-width: 230px; @mixin clearfix { - &:after { + &::after { content: ""; display: table; clear: both; @@ -36,6 +36,7 @@ hr { margin-top: 10px; margin-bottom: 10px; } + .transparent { opacity: 0; } @@ -55,20 +56,24 @@ header { height: $header-height; padding: 10px; background: $dark-blue; + .is-logo { float: left; margin-right: 12px; } + .logo { float: left; margin-right: 16px; font-size: 30px; font-weight: bold; color: #FFFFFF; + &:hover { text-decoration: none; } } + .input-group { float: left; width: 350px; @@ -76,15 +81,18 @@ header { margin-top: 5px; border-radius: 5px; overflow: hidden; + #q { border: 0; height: 100%; padding-bottom: 7px; + &:focus { outline: none; box-shadow: inset 0 0 0 1px $primary-color; } } + .input-group-btn button { height: 100%; padding: 0 30px; @@ -104,37 +112,46 @@ aside { padding: 20px; border-right: 1px solid $gray-light; background: #FFFFFF; + .facet-category-title { font-size: 1.2em; color: $gray; margin: 0 0 8px; } + .facet-wrapper { padding-bottom: 12px; border-bottom: solid 1px $gray-light; margin-bottom: 12px; font-size: .87em; } + .facet { margin-bottom: 16px; } + .facet-title { font-weight: bold; margin: 4px 0; } + .facet-item, a { color: #000000; + &:hover { color: $secondary-color; text-decoration: none; } + &.active { font-weight: bold; } + input { margin-right: 4px; } } + .facet-name { width: 100%; white-space: nowrap; @@ -142,13 +159,16 @@ aside { overflow: hidden; display: inline-block; } + .facet-count { margin-left: 4px; color: $gray; } + #colors { @include clearfix; } + .facet-color { width: 28px; height: 28px; @@ -157,115 +177,151 @@ aside { display: block; overflow: hidden; float: left; + &.checked { box-shadow: inset 0 0 0 4px rgba(#FFFFFF, .5); } + &[data-facet-value="White"] { background-color: #FFFFFF; box-shadow: inset 0 0 0 1px #CCC; + &.checked { box-shadow: inset 0 0 0 4px rgba(#000000, .1); } } + &[data-facet-value="Black"] { background-color: #000000; } + &[data-facet-value="Black-brown"] { background-color: #382919; } + &[data-facet-value="Pink"] { background-color: #C0116D; } + &[data-facet-value="Gray"] { background-color: #6F6E6C; } + &[data-facet-value="Blue"] { background-color: #5182A1; } + &[data-facet-value="Green"] { background-color: #1E9C5E; } + &[data-facet-value="Brown"] { background-color: #7B6A63; } + &[data-facet-value="Red"] { background-color: #BC1C1A; } + &[data-facet-value="Dark gray"] { background-color: #444348; } + &[data-facet-value="Silver color"] { background-color: #AAAAA8; } + &[data-facet-value="Light brown"] { background-color: #C19A6E; } + &[data-facet-value="Black-brown stain"] { background-color: #4B4640; } + &[data-facet-value="Off-white"] { background-color: #D0C8B4; } + &[data-facet-value="Beige"] { background-color: #C9B8A3; } + &[data-facet-value="Light green"] { background-color: #ABBD9B; } + &[data-facet-value="White stain"] { background-color: #E4E1DC; } + &[data-facet-value="Turquoise"] { background-color: #46BCC9; } + &[data-facet-value="Birch effect"] { background-color: #CBBFA4; } + &[data-facet-value="Yellow"] { background-color: #F5E500; } + &[data-facet-value="Dark blue"] { background-color: #374063; } + &[data-facet-value="Galvanized"] { background-color: #726F6A; } + &[data-facet-value="Birch"] { background-color: #726F6A; } + &[data-facet-value="Dark brown"] { background-color: #74523E; } + &[data-facet-value="High gloss gray"] { background-color: #E5E5E5; } + &[data-facet-value="Gray/white"] { background-color: #E5E5E5; } + &[data-facet-value="Red/white"] { background-color: #FA757B; } + &[data-facet-value="Clear"] { background-color: #D5DAE0; } + &[data-facet-value="Matte black"] { background-color: #616872; } + &[data-facet-value="Matte white"] { background-color: #DCDBD7; } + &[data-facet-value="White stained oak effect"] { background-color: #E7E8E0; } // to fix - add more colors } + .ais-price-ranges--form { margin-top: 8px; } + .ais-price-ranges--currency { display: inline-block; margin-right: 4px; } + .ais-price-ranges--input { display: inline-block; width: 50px; @@ -273,6 +329,7 @@ aside { border: solid 1px $gray; font-weight: normal; } + .ais-price-ranges--button { display: block; float: right; @@ -286,10 +343,12 @@ aside { border-radius: 50%; text-align: center; background-color: $gray-light; + &:hover { color: $brand-primary; background-color: #FFFFFF; } + &:focus { outline: none; box-shadow: inset 0 0 0 1px $primary-color; @@ -306,13 +365,16 @@ aside { width: 100%; line-height: 22px; @include clearfix; + .sort-by { float: right; } + label { font-weight: normal; font-size: .8em; } + #sort-by-selector { display: inline-block; } @@ -321,9 +383,11 @@ aside { #clear-all { display: block; margin-bottom: 16px; + .btn { font-size: 13px; padding: 0; + .ais-clear-all--link > div { margin: 6px 12px; } @@ -350,9 +414,11 @@ aside { border: solid 1px $gray-light; box-shadow: 0 0 3px lighten($gray-light, 3%); position: relative; + @media( max-width: 960px) { width: 49%; } + .product-picture-wrapper { display: table; table-layout: fixed; @@ -360,24 +426,29 @@ aside { text-align: center; margin-bottom: 10px; } + .product-picture { display: table-cell; vertical-align: middle; margin: 0 auto; + img { transition: opacity 500ms cubic-bezier(.19, 1, .22, 1); height: 150px; max-width: 100%; + @media( min-width: 1400px) { height: inherit; } } } + .product-desc-wrapper { height: 100px; width: 100%; overflow: hidden; } + .product-name { font-weight: bold; color: #000000; @@ -385,15 +456,18 @@ aside { margin: 0 0 8px; min-width: 120px; } + .product-type { font-size: .8em; margin: 0 0 10px; color: lighten($gray, 10%); } + .product-rating { //float: right; margin-bottom: 10px; } + .product-price { font-size: 1.1em; font-weight: bold; @@ -401,6 +475,7 @@ aside { float: right; letter-spacing: -1px; } + em { color: #000000; font-style: normal; @@ -415,27 +490,34 @@ aside { font-size: 1.2em; line-height: 3em; text-align: center; + .ais-pagination--item__active a { color: #000000; font-weight: bold; } + .ais-pagination--item__disabled { visibility: visible; + a { color: darken($gray-light, 20%); + &:hover { cursor: default; text-decoration: none; } } } + ul { margin: 0; padding: 0; } + li { padding: 0 8px; } + .fa { position: relative; top: 5px; diff --git a/docgen/src/examples/media/main.scss b/docgen/src/examples/media/main.scss index fbb5024f2d..3220a4799f 100644 --- a/docgen/src/examples/media/main.scss +++ b/docgen/src/examples/media/main.scss @@ -25,18 +25,22 @@ a { hr { margin: 10px 14px; } + .is-logo { float: left; margin-left: 18px; } + .logo { margin-left: 15px; font-size: 30px; font-weight: bold; float: left; + &:hover { text-decoration: none; } + i { margin-left: 5px; color: $media-red; @@ -59,6 +63,7 @@ header { .ais-search-box { max-width: inherit; + #q { border-radius: 0; padding-bottom: 7px; @@ -67,7 +72,9 @@ header { .input-group { margin-top: 5px; + .form-control { + &:focus { outline: none; box-shadow: none; @@ -100,11 +107,14 @@ section { .nav { margin: 0 20px; + li { + a { display: block; padding: 2px 10px; margin: 10px 0; + &:hover { color: $white; background: $media-text-color; @@ -134,6 +144,7 @@ section { } #genres { + label { display: block; cursor: pointer; @@ -141,19 +152,24 @@ section { font-weight: normal; font-size: .9em; margin: 0 0 -1px; + &:hover { color: $white; background: $media-text-color; } + input { display: none; } } + .active { + label { border: 1px solid $media-red-dark; margin-top: -1px; } + .badge { background: $media-text-color; } @@ -162,18 +178,23 @@ section { #ratings { margin-left: 10px; + .ais-stars-list--link { font-size: .9em; + &:hover, &:active, &:focus { text-decoration: none; } } + .ais-stars-list--count { font-size: 8px; } + .ais-star-rating--item { margin-bottom: 6px; } + .ais-star-rating--item__active a { color: $media-red-dark; } @@ -202,15 +223,18 @@ section { } #pagination { + .pagination a { background: $media-gray-light; padding: 3px 8px; color: $media-text-color; margin-right: 4px; + &.active { border-color: darken($media-gray, 20%); background: $media-gray; } + &:hover { border-color: darken($media-gray, 10%); background: darken($media-gray-light, 5%); @@ -250,6 +274,7 @@ section { font-size: .8em; margin-top: 18px; margin-left: 30px; + a { color: #CE1312; } diff --git a/docgen/src/examples/tourism/main.scss b/docgen/src/examples/tourism/main.scss index ca6a7c5e7f..6e71a7ccbe 100644 --- a/docgen/src/examples/tourism/main.scss +++ b/docgen/src/examples/tourism/main.scss @@ -33,12 +33,14 @@ body { padding: 0; border-bottom: 1px solid $aisdemo-color-gray-light; position: relative; + .is-logo { display: inline-block; position: relative; top: -8px; left: 16px; } + .logo { display: inline-block; padding: 14px 22px; @@ -65,9 +67,8 @@ body { width: 33%; &--reset { - fill: #bfc7d8; + fill: #BFC7D8; top: calc(50% - 12px / 2); - right: 0; right: 13px; } @@ -78,6 +79,7 @@ body { height: 40px; border: 0; box-shadow: none; + &:focus { outline: none; box-shadow: none; @@ -117,13 +119,15 @@ body { border-radius: 0; background: transparent; appearance: none; + &:focus { outline: none; } } .guests-caret { - &:before { + + &::before { line-height: 1; position: absolute; top: 0; @@ -138,6 +142,7 @@ body { } #room_types { + .ais-refinement-list--count { display: none; } @@ -145,6 +150,7 @@ body { .ais-refinement-list--item { display: inline-block; cursor: pointer; + label { font-size: .8em; font-weight: normal; @@ -166,14 +172,17 @@ body { border: 1px solid $aisdemo-color-gray-light; background: #FFFFFF; appearance: none; + &:focus { outline: none; } } .ais-refinement-list--item__active { + .ais-refinement-list--checkbox { - &:before { + + &::before { font-size: .85em; position: absolute; width: 1.25em; @@ -186,6 +195,7 @@ body { } #price { + .ais-range-slider--target { margin: 30px 9px 18px; } @@ -199,6 +209,7 @@ body { } .ais-range-slider--tooltip { + &:last-child { right: 0; } @@ -237,12 +248,16 @@ body { } #hits { + .hit { + .pictures-wrapper { position: relative; + .picture { width: 100%; } + .profile { position: absolute; bottom: -16px; @@ -252,6 +267,7 @@ body { border-radius: 30px; } } + .infos { height: 90px; padding: 16px 20px; @@ -299,6 +315,7 @@ body { } .pagination > li > a, .pagination > li > span { + &:focus, &:hover { color: $aisdemo-color-white; border-color: $aisdemo-primary-color; @@ -311,6 +328,7 @@ body { .thank-you { text-align: center; font-size: .8em; + a { color: #FF585B; } diff --git a/docgen/src/stylesheets/components/_code-highlighting.scss b/docgen/src/stylesheets/components/_code-highlighting.scss index 16032f4dd6..332c432ae2 100644 --- a/docgen/src/stylesheets/components/_code-highlighting.scss +++ b/docgen/src/stylesheets/components/_code-highlighting.scss @@ -7,41 +7,142 @@ The mdn-like theme is inspired on the displayed code examples at: https://developer.mozilla.org/en-US/docs/Web/CSS/animation */ -.cm-s-mdn-like.CodeMirror { color: #999; background-color: #fff; } -.cm-s-mdn-like div.CodeMirror-selected { background: #cfc; } -.cm-s-mdn-like .CodeMirror-line::selection, .cm-s-mdn-like .CodeMirror-line > span::selection, .cm-s-mdn-like .CodeMirror-line > span > span::selection { background: #cfc; } -.cm-s-mdn-like .CodeMirror-line::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span > span::-moz-selection { background: #cfc; } - -.cm-s-mdn-like .CodeMirror-gutters { background: #f8f8f8; border-left: 6px solid rgba(0,83,159,0.65); color: #333; } -.cm-s-mdn-like .CodeMirror-linenumber { color: #aaa; padding-left: 8px; } -.cm-s-mdn-like .CodeMirror-cursor { border-left: 2px solid #222; } - -.cm-s-mdn-like .cm-keyword { color: #6262FF; } -.cm-s-mdn-like .cm-atom { color: #F90; } -.cm-s-mdn-like .cm-number { color: #ca7841; } -.cm-s-mdn-like .cm-def { color: #8DA6CE; } -.cm-s-mdn-like span.cm-variable-2, .cm-s-mdn-like span.cm-tag { color: #690; } -.cm-s-mdn-like span.cm-variable-3, .cm-s-mdn-like span.cm-def, .cm-s-mdn-like span.cm-type { color: #07a; } - -.cm-s-mdn-like .cm-variable { color: #07a; } -.cm-s-mdn-like .cm-property { color: #905; } -.cm-s-mdn-like .cm-qualifier { color: #690; } - -.cm-s-mdn-like .cm-operator { color: #cda869; } -.cm-s-mdn-like .cm-comment { color:#777; font-weight:normal; } -.cm-s-mdn-like .cm-string { color:#07a; font-style:italic; } -.cm-s-mdn-like .cm-string-2 { color:#bd6b18; } /*?*/ -.cm-s-mdn-like .cm-meta { color: #000; } /*?*/ -.cm-s-mdn-like .cm-builtin { color: #9B7536; } /*?*/ -.cm-s-mdn-like .cm-tag { color: #997643; } -.cm-s-mdn-like .cm-attribute { color: #d6bb6d; } /*?*/ -.cm-s-mdn-like .cm-header { color: #FF6400; } -.cm-s-mdn-like .cm-hr { color: #AEAEAE; } -.cm-s-mdn-like .cm-link { color:#ad9361; font-style:italic; text-decoration:none; } -.cm-s-mdn-like .cm-error { border-bottom: 1px solid red; } - -div.cm-s-mdn-like .CodeMirror-activeline-background { background: #efefff; } -div.cm-s-mdn-like span.CodeMirror-matchingbracket { outline:1px solid grey; color: inherit; } - -.cm-s-mdn-like .cm-positive {color: #690; background: #efe; } -.cm-s-mdn-like .cm-negative {color: red; background: #fee} +// sass-lint:disable class-name-format, force-pseudo-nesting, no-vendor-prefixes +.cm-s-mdn-like.CodeMirror { + color: #999; + background-color: #FFF; +} + +.cm-s-mdn-like .CodeMirror-selected { + background: #CFC; +} + +.cm-s-mdn-like .CodeMirror-line::selection, .cm-s-mdn-like .CodeMirror-line > span::selection, .cm-s-mdn-like .CodeMirror-line > span > span::selection { + background: #CFC; +} + +.cm-s-mdn-like .CodeMirror-line::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span::-moz-selection, .cm-s-mdn-like .CodeMirror-line > span > span::-moz-selection { + background: #CFC; +} + +.cm-s-mdn-like .CodeMirror-gutters { + background: #F8F8F8; + border-left: 6px solid rgba(0, 83, 159, 0.65); + color: #333; +} + +.cm-s-mdn-like .CodeMirror-linenumber { + color: #AAA; + padding-left: 8px; +} + +.cm-s-mdn-like .CodeMirror-cursor { + border-left: 2px solid #222; +} + +.cm-s-mdn-like .cm-keyword { + color: #6262FF; +} + +.cm-s-mdn-like .cm-atom { + color: #F90; +} + +.cm-s-mdn-like .cm-number { + color: #CA7841; +} + +.cm-s-mdn-like .cm-def { + color: #8DA6CE; +} + +.cm-s-mdn-like .cm-variable-2, .cm-s-mdn-like .cm-tag { + color: #690; +} + +.cm-s-mdn-like .cm-variable-3, .cm-s-mdn-like .cm-def, .cm-s-mdn-like .cm-type { + color: #07A; +} + +.cm-s-mdn-like .cm-variable { + color: #07A; +} + +.cm-s-mdn-like .cm-property { + color: #905; +} + +.cm-s-mdn-like .cm-qualifier { + color: #690; +} + +.cm-s-mdn-like .cm-operator { + color: #CDA869; +} + +.cm-s-mdn-like .cm-comment { + color: #777; + font-weight: normal; +} + +.cm-s-mdn-like .cm-string { + color: #07A; + font-style: italic; +} + +.cm-s-mdn-like .cm-string-2 { + color: #BD6B18; +} + +.cm-s-mdn-like .cm-meta { + color: #000; +} + +.cm-s-mdn-like .cm-builtin { + color: #9B7536; +} + +.cm-s-mdn-like .cm-tag { + color: #997643; +} + +.cm-s-mdn-like .cm-attribute { + color: #D6BB6D; +} + +.cm-s-mdn-like .cm-header { + color: #FF6400; +} + +.cm-s-mdn-like .cm-hr { + color: #AEAEAE; +} + +.cm-s-mdn-like .cm-link { + color: #AD9361; + font-style: italic; + text-decoration: none; +} + +.cm-s-mdn-like .cm-error { + border-bottom: 1px solid red; +} + +.cm-s-mdn-like .CodeMirror-activeline-background { + background: #EFEFFF; +} + +.cm-s-mdn-like .CodeMirror-matchingbracket { + outline: 1px solid grey; + color: inherit; +} + +.cm-s-mdn-like .cm-positive { + color: #690; + background: #EFE; +} + +.cm-s-mdn-like .cm-negative { + color: red; + background: #FEE; +} diff --git a/docgen/src/stylesheets/components/_code-snippets.scss b/docgen/src/stylesheets/components/_code-snippets.scss index c54f8fe6f0..21b8542763 100644 --- a/docgen/src/stylesheets/components/_code-snippets.scss +++ b/docgen/src/stylesheets/components/_code-snippets.scss @@ -19,7 +19,6 @@ pre { &.al-snippet { box-sizing: border-box; - line-height: initial; word-break: initial; word-wrap: initial; border-radius: 5px; @@ -32,7 +31,7 @@ pre { font-size: $size; white-space: pre-line; - &:before { + &::before { content: '1 2 3 4 5 6 7 8'; display: block; padding: $padding*2 0 !important; @@ -51,7 +50,7 @@ pre { line-height: $line-height*1.08; font-size: $line-number-size*1.11; text-align: center; - color: #bbbbbb; + color: #BBBBBB; } code { @@ -65,7 +64,7 @@ pre { // Theme &[data-snippet-theme="light"] { - border: solid 1px #d7d9de !important; + border: solid 1px #D7D9DE !important; background-color: $white !important; // Main text color @@ -75,7 +74,7 @@ pre { // Namespace : sn- @each $name, $color in $light-theme { .sn-#{$name} { - color: #{$color} + color: #{$color}; } } } @@ -84,5 +83,5 @@ pre { * { - background: red !important -} \ No newline at end of file + background: red !important; +} diff --git a/docgen/src/stylesheets/components/_colored-tiles.scss b/docgen/src/stylesheets/components/_colored-tiles.scss index 9149248b21..e361126d86 100644 --- a/docgen/src/stylesheets/components/_colored-tiles.scss +++ b/docgen/src/stylesheets/components/_colored-tiles.scss @@ -23,40 +23,41 @@ } &.block-green, - &.tile-green{ - background-image: linear-gradient(322deg, #29c9b2, #b7da46); + &.tile-green { + background-image: linear-gradient(322deg, #29C9B2, #B7DA46); } &.block-blue, &.tile-blue { - background-image: linear-gradient(135deg, #53ddec, #463d9d); + background-image: linear-gradient(135deg, #53DDEC, #463D9D); } &.block-orange, &.tile-orange { - background-image: linear-gradient(140deg, #ffc003, #f02b2b); + background-image: linear-gradient(140deg, #FFC003, #F02B2B); } &.block-red, - &.tile-red{ - background-image: linear-gradient(315deg, #ec4918, #e25d8d); + &.tile-red { + background-image: linear-gradient(315deg, #EC4918, #E25D8D); } &.block-yellow, &.tile-yellow { - background-image: linear-gradient(134deg, #fad961, #f76b1c); + background-image: linear-gradient(134deg, #FAD961, #F76B1C); } &.block-purple, &.tile-purple { - background-image: linear-gradient(138deg, #af84e3, #5071c7); + background-image: linear-gradient(138deg, #AF84E3, #5071C7); } &.block-seaweed, &.tile-seaweed { - background-image: linear-gradient(135deg, #13c4a5, #10a4b8); + background-image: linear-gradient(135deg, #13C4A5, #10A4B8); } + &.tile-lime { - background-image: linear-gradient(45deg, #5f8e3d 0%, #94be46 100%); + background-image: linear-gradient(45deg, #5F8E3D 0%, #94BE46 100%); } } diff --git a/docgen/src/stylesheets/components/_dropdown.scss b/docgen/src/stylesheets/components/_dropdown.scss index c5d2ab3a53..5cd5651797 100644 --- a/docgen/src/stylesheets/components/_dropdown.scss +++ b/docgen/src/stylesheets/components/_dropdown.scss @@ -2,10 +2,10 @@ @function detectLightness($color) { @if (lightness($color) > 60) { @return mix($color, #000, 90%); - } @else { - @return mix($color, $white, 90%); - } + } @else { + @return mix($color, $white, 90%); } +} // Spacing @function spacing($type) { @@ -14,8 +14,7 @@ } @if $type == 'spacious' { @return 22px; - } - @else { + } @else { @return 16px; } } @@ -24,8 +23,7 @@ @function desc($display) { @if $display == false { @return none; - } - @else { + } @else { @return block; } } @@ -69,7 +67,7 @@ // 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) ; + 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); @@ -84,7 +82,7 @@ $background-color: $white, $border-radius: 4, $border-width: 1, - $border-color: #d9d9d9, + $border-color: #D9D9D9, $box-shadow: light, $branding-position: bottom, $font-size: normal, @@ -110,9 +108,7 @@ $title-size: .8em; $text-size: .75em; $subtitle-size: .8em; - } - - @else if $font-size == 'large' { + } @else if $font-size == 'large' { $header-size: 1.1em; $title-size: 1em; $text-size: .9em; @@ -134,14 +130,15 @@ float: right; font-size: 0; 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; @@ -158,21 +155,19 @@ padding: 0; text-align: left; height: auto; - position: relative; background: transparent; - border: none; + border: 0; @include layout-type($layout-type); @include alignment-type($layout-alignment); @include shadow-type($box-shadow); // Arrow - &:before { + &::before { position: absolute; content: ''; width: 14px; height: 14px; background: $background-color; - z-index: 0; top: -7px; border-top: $border-width+px solid $border-color; border-right: $border-width+px solid $border-color; @@ -181,8 +176,7 @@ z-index: 999; @if $layout-alignment == 'center' { display: none; - } - @else { + } @else { display: block; #{$layout-alignment}: 48px; } @@ -217,9 +211,10 @@ overflow: hidden; &--highlight { - color: darken($main-color,10%); - background-color: rgba($main-color,.08); - .algolia-docsearch-suggestion--category-header &{ + color: darken($main-color, 10%); + background-color: rgba($main-color, .08); + + .algolia-docsearch-suggestion--category-header & { background: inherit; } } @@ -232,24 +227,25 @@ padding: $padding/3 0 $padding/3 $padding/1.5; cursor: pointer; - .aa-cursor &{ + .aa-cursor & { background: rgba(black, .03); } - &:before { + + &::before { content: ''; position: absolute; display: block; top: 0; height: 100%; width: 1px; - background: #ddd; + background: #DDD; left: -1px; } } &--category-header { position: relative; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #DDD; display: none; padding: $padding/4 0; font-size: $header-size; @@ -279,14 +275,14 @@ font-size: $subtitle-size; word-wrap: break-word; - &:before { + &::before { content: ''; position: absolute; display: block; top: 0; height: 100%; width: 1px; - background: #ddd; + background: #DDD; right: 0; } @@ -313,13 +309,13 @@ color: $text-color; } - &--no-results{ + &--no-results { width: 100%; padding: $padding/2 0; text-align: center; font-size: 1.2em; - &::before{ + &::before { display: none; } } @@ -327,10 +323,11 @@ code { padding: 1px 5px; font-size: 90%; - border: none; + border: 0; color: #222222; background-color: #EBEBEB; border-radius: 3px; + .algolia-docsearch-suggestion--highlight { background: none; } diff --git a/docgen/src/stylesheets/components/_examples.scss b/docgen/src/stylesheets/components/_examples.scss index 435efeddbe..9287b6db51 100644 --- a/docgen/src/stylesheets/components/_examples.scss +++ b/docgen/src/stylesheets/components/_examples.scss @@ -1,28 +1,29 @@ .examples-container { - padding: 40px 0 ; + padding: 40px 0; .flex-it-2 { @include small-mq { - flex: 0 1 100% !important + flex: 0 1 100% !important; } } .example-tile { margin-bottom: 4em; - background: #fefefe; - border: 1px solid #ebebeb; + background: #FEFEFE; + border: 1px solid #EBEBEB; position: relative; text-align: center; overflow: hidden; a { - color: #fff; + color: #FFF; line-height: 5; padding: 0 1em; @include small-mq { + figcaption { white-space: nowrap; overflow: hidden; @@ -39,6 +40,7 @@ figure { + img { width: 100%; } @@ -48,13 +50,12 @@ width: 100%; height: 100%; text-indent: 0; - color: inherit; left: 0; background: darken($accent-color, 0.95); text-transform: uppercase; font-size: 1.6em; font-weight: bold; - color: #fff; + color: #FFF; transform: scale(0); z-index: 2; line-height: 18; @@ -74,15 +75,13 @@ } } - - .form-control { width: 100%; box-sizing: border-box; padding-left: 16px; line-height: 40px; height: 40px; - border: 1px solid #cccccc; + border: 1px solid #CCCCCC; border-radius: 3px; outline: none; } @@ -106,18 +105,19 @@ z-index: 0; } +body.example { // sass-lint:disable-line no-qualifying-elements -body.example { .cm-navigation { z-index: 99999; top: 0; - border-bottom: 1px solid darken(#1d2f40, 10%); + border-bottom: 1px solid darken(#1D2F40, 10%); } aside { float: left; top: 130px; } + .content-wrapper { top: 60px; } @@ -126,20 +126,23 @@ body.example { min-height: 60px; } - .btn{ + .btn { color: black; } } #examples { - ul { - margin-top: 20px; - } - ul > li { - clear: none; - } - h2 { - clear: both; - } -} \ No newline at end of file + + ul { + margin-top: 20px; + } + + ul > li { + clear: none; + } + + h2 { + clear: both; + } +} diff --git a/docgen/src/stylesheets/components/_light-switcher.scss b/docgen/src/stylesheets/components/_light-switcher.scss index d02ba4acd9..dbad34129b 100644 --- a/docgen/src/stylesheets/components/_light-switcher.scss +++ b/docgen/src/stylesheets/components/_light-switcher.scss @@ -1,26 +1,23 @@ .light-switcher { - -webkit-appearance: none; - -moz-appearance: none; appearance: none; padding: 8px 16px; padding-left: 32px; border: 1px solid $portage; font-size: 16px; - color: #7f8b9d; + color: #7F8B9D; line-height: 24px; display: inline-block; min-width: 236px; &--light { border-radius: 0; - border: none; + border: 0; border-bottom: solid 2px $shamrock; color: white; } &.location-switch { - background: url(image_path("pricing/icon-pin.svg"))no-repeat center left 8px, - url(image_path("pricing/icon-up-down.svg"))no-repeat center right 8px; + background: url(image_path("pricing/icon-pin.svg"))no-repeat center left 8px, url(image_path("pricing/icon-up-down.svg"))no-repeat center right 8px; background-size: 19px, 8px; } } diff --git a/docgen/src/stylesheets/components/_modal-hint.scss b/docgen/src/stylesheets/components/_modal-hint.scss index 98e7f59c87..80a481b3c5 100644 --- a/docgen/src/stylesheets/components/_modal-hint.scss +++ b/docgen/src/stylesheets/components/_modal-hint.scss @@ -11,7 +11,7 @@ text-align: center; border-radius: 6px; box-shadow: 0 16px 32px 0 rgba($bunting, 0.2); - border: 1px solid rgba(0,0,0,0.1); + border: 1px solid rgba(0, 0, 0, 0.1); will-change: opacity, transform; opacity: 0; z-index: -1; @@ -68,42 +68,14 @@ padding: 8px; path { - fill: #667492 + fill: #667492; } } &:hover { svg path { - fill: #FF2060 + fill: #FF2060; } } } } - - -/// ANIMATION -.animated { - -webkit-animation-duration: 0.75s; - animation-duration: 0.75s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -@keyframes bounceInRight { - 0%, 60%, 75%, 90%, 100% { - transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - - 0% { - opacity: 0; - transform: translate3d(3000px, 0, 0); - } - - 100% { - transform: none; - } -} - -.bounceInRight { - animation-name: bounceInRight; -} \ No newline at end of file diff --git a/docgen/src/stylesheets/components/_quotes.scss b/docgen/src/stylesheets/components/_quotes.scss index d9efb211e0..859c8cba8d 100644 --- a/docgen/src/stylesheets/components/_quotes.scss +++ b/docgen/src/stylesheets/components/_quotes.scss @@ -5,6 +5,7 @@ * */ .quotes-holder { + .quote { display: block; font-size: 26px; @@ -16,7 +17,8 @@ color: $deep-cove; } } - footer { + + footer { margin: 16px 0; p { diff --git a/docgen/src/stylesheets/components/_switcher.scss b/docgen/src/stylesheets/components/_switcher.scss index 7b9b5e4cdd..3edcb5d0d6 100644 --- a/docgen/src/stylesheets/components/_switcher.scss +++ b/docgen/src/stylesheets/components/_switcher.scss @@ -11,14 +11,14 @@ label { width: 48px; height: 24px; - background: #2b97c5; + background: #2B97C5; display: inline-block; border-radius: 12px; cursor: pointer; margin: 0 12px; font-weight: 400; - &:after { + &::after { width: 16px; height: 16px; display: block; @@ -32,37 +32,43 @@ } } - input:checked ~ label[for="switch-plan"]:after { + input:checked ~ label[for="switch-plan"]::after { // sass-lint:disable-line force-pseudo-nesting force-attribute-nesting no-qualifying-elements left: 28px; } - .label-1, - .label-2 { - position: absolute; - } + .label-1, + .label-2 { + position: absolute; + } .label-1 { float: left; left: -55px; } + .label-2 { float: right; right: -40px; } - label[for="switch-plan"]:not(.checked) { - .label-2 { + label[for="switch-plan"]:not(.checked) { // sass-lint:disable-line force-pseudo-nesting force-attribute-nesting no-qualifying-elements + + .label-2 { opacity: 0.5; } } - label[for="switch-plan"].checked { - &:after { + + label[for="switch-plan"].checked {// sass-lint:disable-line force-attribute-nesting no-qualifying-elements + + &::after { left: 28px; } - .label-1 { + + .label-1 { opacity: 0.5; } - .label-2 { + + .label-2 { opacity: 1; } } diff --git a/src/css/default/_clear-all.scss b/src/css/default/_clear-all.scss index 94473499b3..00f89a2fed 100644 --- a/src/css/default/_clear-all.scss +++ b/src/css/default/_clear-all.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_current-refined-values.scss b/src/css/default/_current-refined-values.scss index c3beb8f56a..a9fb58f4bf 100644 --- a/src/css/default/_current-refined-values.scss +++ b/src/css/default/_current-refined-values.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_hierarchical-menu.scss b/src/css/default/_hierarchical-menu.scss index e745c1952e..bc53110bc0 100644 --- a/src/css/default/_hierarchical-menu.scss +++ b/src/css/default/_hierarchical-menu.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_hits.scss b/src/css/default/_hits.scss index a473853de3..a6a02dd9f3 100644 --- a/src/css/default/_hits.scss +++ b/src/css/default/_hits.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_menu.scss b/src/css/default/_menu.scss index 9bb8867bc7..2cec0b7a0d 100644 --- a/src/css/default/_menu.scss +++ b/src/css/default/_menu.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_pagination.scss b/src/css/default/_pagination.scss index 56e3f1af4d..0c2bcd2a7a 100644 --- a/src/css/default/_pagination.scss +++ b/src/css/default/_pagination.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_price-ranges.scss b/src/css/default/_price-ranges.scss index 84f92d323e..c0e7373f83 100644 --- a/src/css/default/_price-ranges.scss +++ b/src/css/default/_price-ranges.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_range-slider.scss b/src/css/default/_range-slider.scss index 0fc0fbe798..ae014cdc49 100644 --- a/src/css/default/_range-slider.scss +++ b/src/css/default/_range-slider.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; @@ -40,7 +41,7 @@ $range-slider-handle-bg: $white; .rheostat-horizontal { .rheostat-background { height: 6px; - top: 0px; + top: 0; width: 100%; } @@ -63,15 +64,15 @@ $range-slider-handle-bg: $white; } .rheostat-handle { - &:before, - &:after { + &::before, + &::after { top: 7px; height: 10px; width: 1px; } - &:before { left: 10px; } - &:after { left: 13px; } + &::before { left: 10px; } + &::after { left: 13px; } } } diff --git a/src/css/default/_refinement-list.scss b/src/css/default/_refinement-list.scss index c101102539..3c603b4330 100644 --- a/src/css/default/_refinement-list.scss +++ b/src/css/default/_refinement-list.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_refinement-searchbox.scss b/src/css/default/_refinement-searchbox.scss index 7c8b7cac7a..575318cc71 100644 --- a/src/css/default/_refinement-searchbox.scss +++ b/src/css/default/_refinement-searchbox.scss @@ -1,4 +1,5 @@ -$config-sffv:( +// sass-lint:disable no-vendor-prefixes +$config-sffv: ( input-width: 100%, input-height: 25px, border-width: 1px, @@ -78,11 +79,8 @@ $config-sffv:( box-shadow: inset 0 0 0 $border-width $input-border-color; background: $input-background; 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))); + 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; @@ -190,13 +188,13 @@ $config-sffv:( } } - &__input:valid ~ &__reset { + &__input:valid ~ &__reset { // sass-lint:disable-line force-pseudo-nesting display: block; animation-name: sbx-reset-in; animation-duration: .15s; } - @at-root{ + @at-root { @keyframes sbx-reset-in { 0% { transform: translate3d(-20%, 0, 0); @@ -211,7 +209,7 @@ $config-sffv:( } } -.sbx-sffv{ +.sbx-sffv { @include searchbox($config-sffv...); } diff --git a/src/css/default/_search-box.scss b/src/css/default/_search-box.scss index f98b00c6a8..514724f278 100644 --- a/src/css/default/_search-box.scss +++ b/src/css/default/_search-box.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_sort-by-selector.scss b/src/css/default/_sort-by-selector.scss index 80ca7c835a..37d512fafd 100644 --- a/src/css/default/_sort-by-selector.scss +++ b/src/css/default/_sort-by-selector.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_star-rating.scss b/src/css/default/_star-rating.scss index 6921eaa755..a045ff0557 100644 --- a/src/css/default/_star-rating.scss +++ b/src/css/default/_star-rating.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; @@ -28,7 +29,8 @@ $stars-color-disabled: #C9C9C9; display: inline-block; width: 1em; height: 1em; - &:before { + + &::before { content: '\2605'; color: $stars-color; } @@ -38,7 +40,8 @@ $stars-color-disabled: #C9C9C9; display: inline-block; width: 1em; height: 1em; - &:before { + + &::before { content: '\2606'; color: $stars-color; } @@ -49,12 +52,12 @@ $stars-color-disabled: #C9C9C9; @include modifier(disabled) { /* disabled list item */ @include bem(star-rating, star) { - &:before { + &::before { color: $stars-color-disabled; } } @include bem(star-rating, star, empty) { - &:before { + &::before { color: $stars-color-disabled; } } diff --git a/src/css/default/_stats.scss b/src/css/default/_stats.scss index fa86987ae6..6b52baf24c 100644 --- a/src/css/default/_stats.scss +++ b/src/css/default/_stats.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/default/_toggle.scss b/src/css/default/_toggle.scss index 9f3583afb4..8e63c8edcf 100644 --- a/src/css/default/_toggle.scss +++ b/src/css/default/_toggle.scss @@ -1,3 +1,4 @@ +// sass-lint:disable no-empty-rulesets @import "../base"; @import "variables"; diff --git a/src/css/theme/_base.scss b/src/css/theme/_base.scss index 75ee57fe6f..745faf43ab 100644 --- a/src/css/theme/_base.scss +++ b/src/css/theme/_base.scss @@ -16,12 +16,12 @@ @import 'toggle'; @import 'menu-select'; -[class^=ais-] { +[class^="ais-"] { box-sizing: border-box; & > *, - & > *:after, - & > *:before { + & > *::after, + & > *::before { box-sizing: border-box; } } diff --git a/src/css/theme/_clear-all.scss b/src/css/theme/_clear-all.scss index 789e84867f..d9f0558e87 100644 --- a/src/css/theme/_clear-all.scss +++ b/src/css/theme/_clear-all.scss @@ -11,7 +11,7 @@ &:hover { text-decoration: none; color: $white; - Background: $dark-blue; + background: $dark-blue; } } diff --git a/src/css/theme/_hierarchical-menu.scss b/src/css/theme/_hierarchical-menu.scss index 5bf8e87c6d..fe417412f3 100644 --- a/src/css/theme/_hierarchical-menu.scss +++ b/src/css/theme/_hierarchical-menu.scss @@ -5,7 +5,7 @@ &__active > div > .ais-hierarchical-menu--link { font-weight: bold; - &:after { + &::after { transform: rotate(90deg); } } @@ -15,7 +15,7 @@ @extend .ais-current-refined-values--link; position: relative; - &:after { + &::after { background: url("data:image/svg+xml;utf8,") no-repeat center center/contain; content: ' '; display: block; diff --git a/src/css/theme/_hits-per-page.scss b/src/css/theme/_hits-per-page.scss index fadb97764c..202a64cff0 100644 --- a/src/css/theme/_hits-per-page.scss +++ b/src/css/theme/_hits-per-page.scss @@ -1,6 +1,4 @@ -select.ais-hits-per-page-selector { - -webkit-appearance: none; - -moz-appearance: none; +select.ais-hits-per-page-selector { // sass-lint:disable-line no-qualifying-elements appearance: none; background: $white url("data:image/svg+xml;utf8,") no-repeat center right 16px/10px; diff --git a/src/css/theme/_menu-select.scss b/src/css/theme/_menu-select.scss index 03c0ab7c60..abfb9e7dde 100644 --- a/src/css/theme/_menu-select.scss +++ b/src/css/theme/_menu-select.scss @@ -1,3 +1,3 @@ -select.ais-menu-select--select { - @extend select.ais-hits-per-page-selector; +select.ais-menu-select--select { // sass-lint:disable-line no-qualifying-elements + @extend select.ais-hits-per-page-selector; // sass-lint:disable-line no-qualifying-elements } diff --git a/src/css/theme/_menu.scss b/src/css/theme/_menu.scss index 62eac0bdf8..d87cb58352 100644 --- a/src/css/theme/_menu.scss +++ b/src/css/theme/_menu.scss @@ -17,7 +17,7 @@ button { background: transparent; - border: none; + border: 0; cursor: pointer; font-size: $font-size - 1px; } diff --git a/src/css/theme/_numeric-selector.scss b/src/css/theme/_numeric-selector.scss index 3e1befd25d..48dfbbba3c 100644 --- a/src/css/theme/_numeric-selector.scss +++ b/src/css/theme/_numeric-selector.scss @@ -1,3 +1,3 @@ -select.ais-numeric-selector { - @extend select.ais-hits-per-page-selector; +select.ais-numeric-selector { // sass-lint:disable-line no-qualifying-elements + @extend select.ais-hits-per-page-selector; // sass-lint:disable-line no-qualifying-elements } diff --git a/src/css/theme/_price-ranges.scss b/src/css/theme/_price-ranges.scss index 98da7fe2cb..94e079440d 100644 --- a/src/css/theme/_price-ranges.scss +++ b/src/css/theme/_price-ranges.scss @@ -26,7 +26,7 @@ &--button { @extend .ais-clear-all--link; - border: none; + border: 0; outline: none; margin-left: 5px; position: relative; diff --git a/src/css/theme/_refinement-list.scss b/src/css/theme/_refinement-list.scss index 205ba530c7..dfb7af98e7 100644 --- a/src/css/theme/_refinement-list.scss +++ b/src/css/theme/_refinement-list.scss @@ -12,8 +12,8 @@ @extend .ais-current-refined-values--link; cursor: pointer; - input[type="radio"], - input[type="checkbox"] { + input[type="radio"], // sass-lint:disable-line no-qualifying-elements force-attribute-nesting + input[type="checkbox"] { // sass-lint:disable-line no-qualifying-elements force-attribute-nesting margin-right: 5px; } } @@ -24,7 +24,7 @@ div > button { background: transparent; - border: none; + border: 0; cursor: pointer; font-size: $font-size - 1px; } diff --git a/src/css/theme/_sort-by-selector.scss b/src/css/theme/_sort-by-selector.scss index 7a66b70e56..66ca5344b1 100644 --- a/src/css/theme/_sort-by-selector.scss +++ b/src/css/theme/_sort-by-selector.scss @@ -1,3 +1,3 @@ -select.ais-sort-by-selector { - @extend select.ais-hits-per-page-selector; +select.ais-sort-by-selector { // sass-lint:disable-line no-qualifying-elements + @extend select.ais-hits-per-page-selector; // sass-lint:disable-line no-qualifying-elements }