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

Some fixes to the slider element, after UX review: 

- Updating focus states to new visuals
- Improving rendering in Webkit and Mozilla by reducing the usage of gradients
- Much improved vertical centering of the slider track, with subpixel accuracy
master
Sérgio Gomes 2014-11-06 10:56:24 +00:00
parent 3a9f25363f
commit 4f3604acf8
1 changed files with 57 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
app/styleguide/slider/_slider.scss
View File

@ -2,7 +2,7 @@
@import "../animation/animation"; @import "../animation/animation";
// Default Range Colors // Default Range Colors
$default-range-bg-color: nth($secondaryPalette, 5); $default-range-bg-color: rgba(0, 0, 0, 0.26);
$default-range-color: nth($primaryPalette, 6); $default-range-color: nth($primaryPalette, 6);
input[type="range"] { input[type="range"] {
@ -26,11 +26,11 @@ _:-ms-input-placeholder, :root input[type="range"] {
-ms-appearance: none; -ms-appearance: none;
// The thumb can't overflow the track or the rest of the control in IE, so we // The thumb can't overflow the track or the rest of the control in IE, so we
// need to make it tall enough to contain the largest version of the thumb. // need to make it tall enough to contain the largest version of the thumb.
height: 52px; height: 32px;
margin: 0; margin: 0;
} }
// Since we need to specify a height of 52px in IE, we add a class here for a // Since we need to specify a height of 32px in IE, we add a class here for a
// container that brings it back to a reasonable height. // container that brings it back to a reasonable height.
.Slider-IEContainer { .Slider-IEContainer {
height: 18px; height: 18px;
@ -55,6 +55,13 @@ input[type=range]::-ms-tooltip {
.Slider-container { .Slider-container {
position: relative; position: relative;
background: none; background: none;
display: flex;
flex-direction: row;
height: 18px;
}
.Slider-container > input[type="range"] {
align-self: center;
} }
// This one sets up a flex box for the styled upper and lower portions of the // This one sets up a flex box for the styled upper and lower portions of the
@ -64,13 +71,15 @@ input[type=range]::-ms-tooltip {
position: absolute; position: absolute;
height: 2px; height: 2px;
width: calc(100% - 52px); width: calc(100% - 52px);
top: 12px; top: 50%;
left: 0;
margin: 0 26px; margin: 0 26px;
z-index: -1; z-index: -1;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
border: 0; border: 0;
padding: 0; padding: 0;
transform: translate(0, -1px);
} }
// This one styles the lower part of the slider track. // This one styles the lower part of the slider track.
@ -92,10 +101,8 @@ input[type=range]::-ms-tooltip {
transition: left 0.18s $animation-curve-default transition: left 0.18s $animation-curve-default
} }
// Some CSS magic to apply some tweaks on Firefox only. // Some CSS magic to disable track animations in Firefox, since the thumb
_:-moz-tree-row(hover), .Slider-backgroundFlex { // doesn't animate.
top: 13px;
}
_:-moz-tree-row(hover), .Slider-backgroundUpper { _:-moz-tree-row(hover), .Slider-backgroundUpper {
transition: none; transition: none;
} }
@ -118,8 +125,7 @@ input[type="range"]::-ms-track {
color: transparent; color: transparent;
height: 2px; height: 2px;
width: 100%; width: 100%;
border-width: 25px 0; border: none;
border-color: transparent;
} }
input[type=range]::-ms-fill-lower { input[type=range]::-ms-fill-lower {
@ -127,8 +133,8 @@ input[type=range]::-ms-fill-lower {
// Margin on -ms-track doesn't work right, so we use gradients on the fills. // Margin on -ms-track doesn't work right, so we use gradients on the fills.
background: linear-gradient(to right, background: linear-gradient(to right,
transparent, transparent,
transparent 25px, transparent 16px,
$default-range-color 25px, $default-range-color 16px,
$default-range-color 0); $default-range-color 0);
} }
@ -137,8 +143,8 @@ input[type=range]::-ms-fill-upper {
// Margin on -ms-track doesn't work right, so we use gradients on the fills. // Margin on -ms-track doesn't work right, so we use gradients on the fills.
background: linear-gradient(to left, background: linear-gradient(to left,
transparent, transparent,
transparent 25px, transparent 16px,
$default-range-bg-color 25px, $default-range-bg-color 16px,
$default-range-bg-color 0); $default-range-bg-color 0);
} }
@ -156,6 +162,7 @@ input[type="range"]::-webkit-slider-thumb {
border: none; border: none;
transition: transform 0.18s $animation-curve-default, transition: transform 0.18s $animation-curve-default,
border 0.18s $animation-curve-default, border 0.18s $animation-curve-default,
box-shadow 0.18s $animation-curve-default,
background 0.28s $animation-curve-default; background 0.28s $animation-curve-default;
} }
@ -172,29 +179,11 @@ input[type="range"]::-moz-range-thumb {
} }
input[type="range"]:focus:not(:active)::-webkit-slider-thumb { input[type="range"]:focus:not(:active)::-webkit-slider-thumb {
background: radial-gradient(circle closest-side, box-shadow: 0 0 0 10px rgba($default-range-color, 0.26);
$default-range-color 0%,
$default-range-color 24%,
rgba($default-range-color, 0.5) 27%,
rgba($default-range-color, 0.5) 65%,
rgba($default-range-color, 0) 68%,
rgba($default-range-color, 0) 94%,
$default-range-color 96%,
$default-range-color 100%);
transform: scale(4.166);
} }
input[type="range"]:focus:not(:active)::-moz-range-thumb { input[type="range"]:focus:not(:active)::-moz-range-thumb {
background: radial-gradient(circle closest-side, box-shadow: 0 0 0 10px rgba($default-range-color, 0.26);
$default-range-color 0%,
$default-range-color 24%,
rgba($default-range-color, 0.5) 27%,
rgba($default-range-color, 0.5) 65%,
rgba($default-range-color, 0) 68%,
rgba($default-range-color, 0) 94%,
$default-range-color 96%,
$default-range-color 100%);
transform: scale(4.166);
} }
input[type="range"]:active::-webkit-slider-thumb { input[type="range"]:active::-webkit-slider-thumb {
@ -210,12 +199,12 @@ input[type="range"]:active::-moz-range-thumb {
} }
input[type="range"]::-ms-thumb { input[type="range"]::-ms-thumb {
width: 50px; width: 32px;
height: 50px; height: 32px;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: $default-range-color; background: $default-range-color;
transform: scale(0.24); transform: scale(0.375);
// -ms-thumb doesn't currently support transitions, but leaving this here in // -ms-thumb doesn't currently support transitions, but leaving this here in
// case support ever gets added. // case support ever gets added.
transition: transform 0.18s $animation-curve-default, transition: transform 0.18s $animation-curve-default,
@ -223,20 +212,17 @@ input[type="range"]::-ms-thumb {
} }
input[type="range"]:focus:not(:active)::-ms-thumb { input[type="range"]:focus:not(:active)::-ms-thumb {
transform: scale(1);
background: radial-gradient(circle closest-side, background: radial-gradient(circle closest-side,
$default-range-color 0px, $default-range-color 0%,
$default-range-color 6px, $default-range-color 37.5%,
rgba($default-range-color, 0.5) 7px, rgba($default-range-color, 0.26) 37.5%,
rgba($default-range-color, 0.5) 18px, rgba($default-range-color, 0.26) 100%);
transparent 19px, transform: scale(1);
transparent 24px,
$default-range-color 25px);
} }
input[type="range"]:active::-ms-thumb { input[type="range"]:active::-ms-thumb {
background: $default-range-color; background: $default-range-color;
transform: scale(0.36); transform: scale(0.5625);
} }
@ -253,39 +239,23 @@ input[type="range"].zero::-moz-range-thumb {
} }
input[type="range"].zero ~ .Slider-backgroundFlex > .Slider-backgroundUpper { input[type="range"].zero ~ .Slider-backgroundFlex > .Slider-backgroundUpper {
left: 5px; left: 6px;
} }
input[type="range"].zero:focus:not(:active)::-webkit-slider-thumb { input[type="range"].zero:focus:not(:active)::-webkit-slider-thumb {
background: radial-gradient(circle closest-side, border: 1.8px solid $default-range-bg-color;
transparent 0%, transform: scale(1.33);
transparent 16%, box-shadow: none;
$default-range-bg-color 17%,
$default-range-bg-color 24%,
rgba($default-range-bg-color, 0.5) 27%,
rgba($default-range-bg-color, 0.5) 65%,
rgba($default-range-bg-color, 0) 68%,
rgba($default-range-bg-color, 0) 94%,
$default-range-bg-color 96%,
$default-range-bg-color 100%);
border: none;
transform: scale(4.166);
} }
input[type="range"].zero:focus:not(:active)::-moz-range-thumb { input[type="range"].zero:focus:not(:active)::-moz-range-thumb {
background: radial-gradient(circle closest-side, border: 1.8px solid $default-range-bg-color;
transparent 0%, transform: scale(1.33);
transparent 16%, box-shadow: none;
$default-range-bg-color 17%, }
$default-range-bg-color 24%,
rgba($default-range-bg-color, 0.5) 27%, input[type="range"].zero:focus:not(:active) ~ .Slider-backgroundFlex > .Slider-backgroundUpper {
rgba($default-range-bg-color, 0.5) 65%, left: 8px;
rgba($default-range-bg-color, 0) 68%,
rgba($default-range-bg-color, 0) 94%,
$default-range-bg-color 96%,
$default-range-bg-color 100%);
border: none;
transform: scale(4.166);
} }
input[type="range"].zero:active::-webkit-slider-thumb { input[type="range"].zero:active::-webkit-slider-thumb {
@ -294,7 +264,7 @@ input[type="range"].zero:active::-webkit-slider-thumb {
} }
input[type="range"].zero:active ~ .Slider-backgroundFlex > .Slider-backgroundUpper { input[type="range"].zero:active ~ .Slider-backgroundFlex > .Slider-backgroundUpper {
left: 8px; left: 9px;
} }
input[type="range"].zero:active::-moz-range-thumb { input[type="range"].zero:active::-moz-range-thumb {
@ -311,21 +281,16 @@ input[type="range"].zero::-ms-thumb {
} }
input[type="range"].zero:focus:not(:active)::-ms-thumb { input[type="range"].zero:focus:not(:active)::-ms-thumb {
transform: scale(1); transform: scale(0.5);
background: radial-gradient(circle closest-side, background: radial-gradient(circle closest-side,
transparent 0px, transparent 0%,
transparent 4px, transparent 75%,
$default-range-bg-color 5px, $default-range-bg-color 75%,
$default-range-bg-color 6px, $default-range-bg-color 100%);
rgba($default-range-bg-color, 0.5) 7px,
rgba($default-range-bg-color, 0.5) 18px,
transparent 19px,
transparent 24px,
$default-range-bg-color 25px);
} }
input[type="range"].zero:active::-ms-thumb { input[type="range"].zero:active::-ms-thumb {
transform: scale(0.36); transform: scale(0.5625);
background: radial-gradient(circle closest-side, background: radial-gradient(circle closest-side,
transparent 0%, transparent 0%,
transparent 77.78%, transparent 77.78%,
@ -341,10 +306,14 @@ input[type=range].zero::-ms-fill-upper {
margin-left: 6px; margin-left: 6px;
} }
input[type=range].zero:active::-ms-fill-upper { input[type=range].zero:focus:not(:active)::-ms-fill-upper {
margin-left: 8px; margin-left: 8px;
} }
input[type=range].zero:active::-ms-fill-upper {
margin-left: 9px;
}
/* **** Disabled **** */ /* **** Disabled **** */
@ -394,14 +363,14 @@ input[type="range"].zero:disabled:active ~ .Slider-backgroundFlex > .Slider-back
input[type="range"]:disabled:focus::-ms-thumb, input[type="range"]:disabled:focus::-ms-thumb,
input[type="range"]:disabled:active::-ms-thumb, input[type="range"]:disabled:active::-ms-thumb,
input[type="range"]:disabled::-ms-thumb { input[type="range"]:disabled::-ms-thumb {
transform: scale(0.16); transform: scale(0.25);
background: $default-range-bg-color; background: $default-range-bg-color;
} }
input[type="range"].zero:disabled:focus::-ms-thumb, input[type="range"].zero:disabled:focus::-ms-thumb,
input[type="range"].zero:disabled:active::-ms-thumb, input[type="range"].zero:disabled:active::-ms-thumb,
input[type="range"].zero:disabled::-ms-thumb { input[type="range"].zero:disabled::-ms-thumb {
transform: scale(0.16); transform: scale(0.25);
background: radial-gradient(circle closest-side, background: radial-gradient(circle closest-side,
transparent 0%, transparent 0%,
transparent 50%, transparent 50%,