google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #819 from google/slider-tweaks 

Slider tweaks for focus and active states at 0-value.
master
Addy Osmani 2015-07-08 07:44:51 +01:00
parent 9a689a3c0b 62ae42df7b
commit 33c46adbb9
2 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/_variables.scss
View File

@ -232,6 +232,7 @@ $card-border-color: rgba(0,0,0,0.1) !default;
$range-bg-color: unquote("rgba(#{$color-black}, 0.26)") !default;
$range-color: unquote("rgb(#{$color-primary})") !default;
$range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
$range-bg-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
/* ========== Progress ========== */
$progress-main-color: unquote("rgb(#{$color-primary})") !default;

33
src/slider/_slider.scss
View File

@ -190,24 +190,17 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
}
&.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
border: 1.8px solid $range-bg-color;
transform: scale(1.33);
box-shadow: none;
box-shadow: 0 0 0 10px $range-bg-focus-color;
background: $range-bg-focus-color;
}
&.is-lowest-value:focus:not(:active)::-moz-range-thumb {
border: 1.8px solid $range-bg-color;
transform: scale(1.33);
box-shadow: none;
}
&.is-lowest-value:focus:not(:active) ~
.mdl-slider__background-flex > .mdl-slider__background-upper {
left: 8px;
box-shadow: 0 0 0 10px $range-bg-focus-color;
background: $range-bg-focus-color;
}
&.is-lowest-value:active::-webkit-slider-thumb {
border: 1.5px solid $range-bg-color;
border: 1.6px solid $range-bg-color;
transform: scale(1.5);
}
@ -230,12 +223,14 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
}
&.is-lowest-value:focus:not(:active)::-ms-thumb {
transform: scale(0.5);
background: radial-gradient(circle closest-side,
transparent 0%,
transparent 75%,
$range-bg-color 75%,
$range-bg-color 100%);
$range-bg-focus-color 0%,
$range-bg-focus-color 25%,
$range-bg-color 25%,
$range-bg-color 37.5%,
$range-bg-focus-color 37.5%,
$range-bg-focus-color 100%);
transform: scale(1);
}
&.is-lowest-value:active::-ms-thumb {
@ -255,10 +250,6 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
margin-left: 6px;
}
&.is-lowest-value:focus:not(:active)::-ms-fill-upper {
margin-left: 8px;
}
&.is-lowest-value:active::-ms-fill-upper {
margin-left: 9px;
}