diff --git a/.sass-lint.yml b/.sass-lint.yml index 4cd148a..4fe35db 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -23,7 +23,7 @@ rules: - breakpoint - mq border-zero: - - none + - 2 - convention: none no-warn: 1 @@ -31,24 +31,24 @@ rules: no-ids: 0 no-important: 2 hex-notation: - - 2 + - 1 - style: lowercase indentation: - 2 - size: 2 - property-sort-order: + no-qualifying-elements: - 1 - - order: - - display - - margin - ignore-custom-properties: true - variable-for-property: + allow-element-with-attribute: true + allow-element-with-class: true + allow-element-with-id: true + no-selector-vendor-prefix: - 2 - - properties: - - margin - - content - + include: false + no-transition-all: + - 2 + - + include: false diff --git a/src/sass/mup.sass b/src/sass/mup.sass index a06a917..03456dd 100644 --- a/src/sass/mup.sass +++ b/src/sass/mup.sass @@ -20,6 +20,7 @@ $slider-thumb-border-radius: 15px width: 100% margin: 0 padding: 0 + &:focus, &:active outline: none @@ -50,10 +51,12 @@ $slider-thumb-border-radius: 15px .mup-control display: inline-block color: $text-color-white + &:not(:last-child) margin-right: 10px - .mup-progress-bar, .mup-progress-fill + .mup-progress-bar, + .mup-progress-fill margin: 0 padding: 0 border: none @@ -82,6 +85,7 @@ $slider-thumb-border-radius: 15px font-size: 16px font-weight: bold transition: all 200ms ease-in-out + &:hover background: lighten($control-background-light, 10%) color: $text-color-dark @@ -95,6 +99,7 @@ $slider-thumb-border-radius: 15px padding: 0 background: none border: none + //# Chromium-based and Safari browser styles &::-webkit-slider-runnable-track width: 100% @@ -106,6 +111,7 @@ $slider-thumb-border-radius: 15px border-radius: 25px border: none overflow: hidden + &::-webkit-slider-thumb box-shadow: -100px 0 0 90px $main-color border: none @@ -116,8 +122,10 @@ $slider-thumb-border-radius: 15px cursor: pointer -webkit-appearance: none margin-top: -2.4px + &:focus::-webkit-slider-runnable-track background: $slider-track-color + //# Mozilla browser styles for range &::-moz-range-track width: 100% @@ -128,10 +136,12 @@ $slider-thumb-border-radius: 15px background: $slider-track-color border-radius: 25px border: none + &::-moz-range-progress height: 100% background: $main-color border-radius: $slider-thumb-border-radius + &::-moz-range-thumb box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color border: none @@ -140,6 +150,7 @@ $slider-thumb-border-radius: 15px border-radius: $slider-thumb-border-radius background: $main-color cursor: pointer + //# Microsoft browser styles for range &::-ms-track width: 100% @@ -150,14 +161,17 @@ $slider-thumb-border-radius: 15px border-color: transparent border-width: 39px 0 color: transparent + &::-ms-fill-lower, &::-ms-fill-upper background: $slider-track-color border: none border-radius: 50px box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color + &::-ms-fill-lower background: $slider-thumb-color + &::-ms-thumb box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color border: none @@ -166,6 +180,7 @@ $slider-thumb-border-radius: 15px border-radius: $slider-thumb-border-radius background: $main-color cursor: pointer + &:focus &::-ms-fill-lower, &::-ms-fill-upper background: $main-color