diff options
| Commit | c811cb46631e66772a108c393f6ef53a83ca010b (patch) | |
|---|---|---|
| Author | 2017-09-01 15:34:29 +0800 | |
| Committer | 2017-09-01 15:34:29 +0800 | |
| Files | cc78dfa6f7398e9e77dd81d8865bcca939b9549d /src/_sliders.scss | |
| Spectre-Dark-Gruvbox-0.4.0.tar Spectre-Dark-Gruvbox-0.4.0.tar.gz Spectre-Dark-Gruvbox-0.4.0.zip | ||
| Parent | 66c492fd05c2d720c81e2be8d6845560b868e7ff (diff) | |
| Parent | cca094ecbf55e8a4f552e55219b37373d3c07d9e (diff) | |
Merge pull request #266 from picturepan2/0.4.0 v0.4.0
0.4.0
1 files changed, 93 insertions, 0 deletions
| -rw-r--r-- | src/_sliders.scss | 93 |
diff --git a/src/_sliders.scss b/src/_sliders.scss new file mode 100644 index 0000000..da80a83 --- /dev/null +++ b/src/_sliders.scss @@ -0,0 +1,93 @@ +// Sliders +// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ +.slider { + appearance: none; + background: transparent; + display: block; + width: 100%; + height: $unit-6; + + &:focus { + @include control-shadow(); + outline: none; + } + + // Slider Thumb + &::-webkit-slider-thumb { + -webkit-appearance: none; + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + margin-top: -($unit-3 - $unit-h) / 2; + transition: transform .2s ease; + width: $unit-3; + } + &::-moz-range-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s ease; + width: $unit-3; + } + &::-ms-thumb { + background: $primary-color; + border: 0; + border-radius: 50%; + height: $unit-3; + transition: transform .2s ease; + width: $unit-3; + } + + &:active { + &::-webkit-slider-thumb { + transform: scale(1.25); + } + &::-moz-range-thumb { + transform: scale(1.25); + } + &::-ms-thumb { + transform: scale(1.25); + } + } + + &:disabled, + &.disabled { + &::-webkit-slider-thumb { + background: $gray-color-light; + transform: scale(1); + } + &::-moz-range-thumb { + background: $gray-color-light; + transform: scale(1); + } + &::-ms-thumb { + background: $gray-color-light; + transform: scale(1); + } + } + + // Slider Track + &::-webkit-slider-runnable-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-moz-range-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-ms-track { + background: $bg-color-dark; + border-radius: $border-radius; + height: $unit-h; + width: 100%; + } + &::-ms-fill-lower { + background: $primary-color; + } +} |