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";
// 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);
input[type="range"] {
@ -26,11 +26,11 @@ _:-ms-input-placeholder, :root input[type="range"] {
-ms-appearance: none;
// 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.
height: 52px;
height: 32px;
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.
.Slider-IEContainer {
height: 18px;
@ -55,6 +55,13 @@ input[type=range]::-ms-tooltip {
.Slider-container {
position: relative;
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
@ -64,13 +71,15 @@ input[type=range]::-ms-tooltip {
position: absolute;
height: 2px;
width: calc(100% - 52px);
top: 12px;
top: 50%;
left: 0;
margin: 0 26px;
z-index: -1;
display: flex;
overflow: hidden;
border: 0;
padding: 0;
transform: translate(0, -1px);
}
// 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
}
// Some CSS magic to apply some tweaks on Firefox only.
_:-moz-tree-row(hover), .Slider-backgroundFlex {
top: 13px;
}
// Some CSS magic to disable track animations in Firefox, since the thumb
// doesn't animate.
_:-moz-tree-row(hover), .Slider-backgroundUpper {
transition: none;
}
@ -118,8 +125,7 @@ input[type="range"]::-ms-track {
color: transparent;
height: 2px;
width: 100%;
border-width: 25px 0;
border-color: transparent;
border: none;
}
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.
background: linear-gradient(to right,
transparent,
transparent 25px,
$default-range-color 25px,
transparent 16px,
$default-range-color 16px,
$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.
background: linear-gradient(to left,
transparent,
transparent 25px,
$default-range-bg-color 25px,
transparent 16px,
$default-range-bg-color 16px,
$default-range-bg-color 0);
}
@ -156,6 +162,7 @@ input[type="range"]::-webkit-slider-thumb {
border: none;
transition: transform 0.18s $animation-curve-default,
border 0.18s $animation-curve-default,
box-shadow 0.18s $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 {
background: radial-gradient(circle closest-side,
$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);
box-shadow: 0 0 0 10px rgba($default-range-color, 0.26);
}
input[type="range"]:focus:not(:active)::-moz-range-thumb {
background: radial-gradient(circle closest-side,
$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);
box-shadow: 0 0 0 10px rgba($default-range-color, 0.26);
}
input[type="range"]:active::-webkit-slider-thumb {
@ -210,12 +199,12 @@ input[type="range"]:active::-moz-range-thumb {
}
input[type="range"]::-ms-thumb {
width: 50px;
height: 50px;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: $default-range-color;
transform: scale(0.24);
transform: scale(0.375);
// -ms-thumb doesn't currently support transitions, but leaving this here in
// case support ever gets added.
transition: transform 0.18s $animation-curve-default,
@ -223,20 +212,17 @@ input[type="range"]::-ms-thumb {
}
input[type="range"]:focus:not(:active)::-ms-thumb {
transform: scale(1);
background: radial-gradient(circle closest-side,
$default-range-color 0px,
$default-range-color 6px,
rgba($default-range-color, 0.5) 7px,
rgba($default-range-color, 0.5) 18px,
transparent 19px,
transparent 24px,
$default-range-color 25px);
$default-range-color 0%,
$default-range-color 37.5%,
rgba($default-range-color, 0.26) 37.5%,
rgba($default-range-color, 0.26) 100%);
transform: scale(1);
}
input[type="range"]:active::-ms-thumb {
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 {
left: 5px;
left: 6px;
}
input[type="range"].zero:focus:not(:active)::-webkit-slider-thumb {
background: radial-gradient(circle closest-side,
transparent 0%,
transparent 16%,
$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);
border: 1.8px solid $default-range-bg-color;
transform: scale(1.33);
box-shadow: none;
}
input[type="range"].zero:focus:not(:active)::-moz-range-thumb {
background: radial-gradient(circle closest-side,
transparent 0%,
transparent 16%,
$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);
border: 1.8px solid $default-range-bg-color;
transform: scale(1.33);
box-shadow: none;
}
input[type="range"].zero:focus:not(:active) ~ .Slider-backgroundFlex > .Slider-backgroundUpper {
left: 8px;
}
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 {
left: 8px;
left: 9px;
}
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 {
transform: scale(1);
transform: scale(0.5);
background: radial-gradient(circle closest-side,
transparent 0px,
transparent 4px,
$default-range-bg-color 5px,
$default-range-bg-color 6px,
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);
transparent 0%,
transparent 75%,
$default-range-bg-color 75%,
$default-range-bg-color 100%);
}
input[type="range"].zero:active::-ms-thumb {
transform: scale(0.36);
transform: scale(0.5625);
background: radial-gradient(circle closest-side,
transparent 0%,
transparent 77.78%,
@ -341,10 +306,14 @@ input[type=range].zero::-ms-fill-upper {
margin-left: 6px;
}
input[type=range].zero:active::-ms-fill-upper {
input[type=range].zero:focus:not(:active)::-ms-fill-upper {
margin-left: 8px;
}
input[type=range].zero:active::-ms-fill-upper {
margin-left: 9px;
}
/* **** 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:active::-ms-thumb,
input[type="range"]:disabled::-ms-thumb {
transform: scale(0.16);
transform: scale(0.25);
background: $default-range-bg-color;
}
input[type="range"].zero:disabled:focus::-ms-thumb,
input[type="range"].zero:disabled:active::-ms-thumb,
input[type="range"].zero:disabled::-ms-thumb {
transform: scale(0.16);
transform: scale(0.25);
background: radial-gradient(circle closest-side,
transparent 0%,
transparent 50%,