You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
439 lines
14 KiB
439 lines
14 KiB
/*!
|
|
* Angular Material Design
|
|
* https://github.com/angular/material
|
|
* @license MIT
|
|
* v1.1.1
|
|
*/
|
|
@-webkit-keyframes sliderFocusThumb {
|
|
0% {
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7); }
|
|
30% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
100% {
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7); } }
|
|
|
|
@keyframes sliderFocusThumb {
|
|
0% {
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7); }
|
|
30% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
100% {
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7); } }
|
|
|
|
@-webkit-keyframes sliderDiscreteFocusThumb {
|
|
0% {
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7); }
|
|
50% {
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8); }
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); } }
|
|
|
|
@keyframes sliderDiscreteFocusThumb {
|
|
0% {
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7); }
|
|
50% {
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8); }
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); } }
|
|
|
|
@-webkit-keyframes sliderDiscreteFocusRing {
|
|
0% {
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7);
|
|
opacity: 0; }
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1; }
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); } }
|
|
|
|
@keyframes sliderDiscreteFocusRing {
|
|
0% {
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7);
|
|
opacity: 0; }
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1; }
|
|
100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); } }
|
|
|
|
md-slider {
|
|
height: 48px;
|
|
min-width: 128px;
|
|
position: relative;
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
padding: 0;
|
|
display: block;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
flex-direction: row;
|
|
/**
|
|
* Track
|
|
*/
|
|
/**
|
|
* Slider thumb
|
|
*/
|
|
/* The sign that's focused in discrete mode */
|
|
/**
|
|
* The border/background that comes in when focused in non-discrete mode
|
|
*/
|
|
/* Don't animate left/right while panning */ }
|
|
md-slider *, md-slider *:after {
|
|
box-sizing: border-box; }
|
|
md-slider .md-slider-wrapper {
|
|
outline: none;
|
|
width: 100%;
|
|
height: 100%; }
|
|
md-slider .md-slider-content {
|
|
position: relative; }
|
|
md-slider .md-track-container {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 23px;
|
|
height: 2px; }
|
|
md-slider .md-track {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%; }
|
|
md-slider .md-track-fill {
|
|
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
-webkit-transition-property: width, height;
|
|
transition-property: width, height; }
|
|
md-slider .md-track-ticks {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%; }
|
|
md-slider .md-track-ticks canvas {
|
|
width: 100%;
|
|
height: 100%; }
|
|
md-slider .md-thumb-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
-webkit-transform: translate3d(-50%, -50%, 0);
|
|
transform: translate3d(-50%, -50%, 0);
|
|
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
-webkit-transition-property: left, right, bottom;
|
|
transition-property: left, right, bottom; }
|
|
[dir=rtl] md-slider .md-thumb-container {
|
|
left: auto;
|
|
right: 0; }
|
|
md-slider .md-thumb {
|
|
z-index: 1;
|
|
position: absolute;
|
|
left: -10px;
|
|
top: 14px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 20px;
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7);
|
|
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
|
|
[dir=rtl] md-slider .md-thumb {
|
|
left: auto;
|
|
right: -10px; }
|
|
md-slider .md-thumb:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 20px;
|
|
border-width: 3px;
|
|
border-style: solid;
|
|
-webkit-transition: inherit;
|
|
transition: inherit; }
|
|
md-slider .md-sign {
|
|
/* Center the children (slider-thumb-text) */
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: -14px;
|
|
top: -17px;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 28px;
|
|
-webkit-transform: scale(0.4) translate3d(0, 67.5px, 0);
|
|
transform: scale(0.4) translate3d(0, 67.5px, 0);
|
|
-webkit-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
|
|
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
|
|
/* The arrow pointing down under the sign */ }
|
|
md-slider .md-sign:after {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0px;
|
|
border-radius: 16px;
|
|
top: 19px;
|
|
border-left: 14px solid transparent;
|
|
border-right: 14px solid transparent;
|
|
border-top-width: 16px;
|
|
border-top-style: solid;
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -8px, 0);
|
|
transform: translate3d(0, -8px, 0);
|
|
-webkit-transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1);
|
|
transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1); }
|
|
[dir=rtl] md-slider .md-sign:after {
|
|
left: auto;
|
|
right: 0px; }
|
|
md-slider .md-sign .md-thumb-text {
|
|
z-index: 1;
|
|
font-size: 12px;
|
|
font-weight: bold; }
|
|
md-slider .md-focus-ring {
|
|
position: absolute;
|
|
left: -17px;
|
|
top: 7px;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 34px;
|
|
-webkit-transform: scale(0.7);
|
|
transform: scale(0.7);
|
|
opacity: 0;
|
|
-webkit-transition: all 0.35s cubic-bezier(0.35, 0, 0.25, 1);
|
|
transition: all 0.35s cubic-bezier(0.35, 0, 0.25, 1); }
|
|
[dir=rtl] md-slider .md-focus-ring {
|
|
left: auto;
|
|
right: -17px; }
|
|
md-slider .md-disabled-thumb {
|
|
position: absolute;
|
|
left: -14px;
|
|
top: 10px;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 28px;
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
border-width: 4px;
|
|
border-style: solid;
|
|
display: none; }
|
|
[dir=rtl] md-slider .md-disabled-thumb {
|
|
left: auto;
|
|
right: -14px; }
|
|
md-slider.md-min .md-sign {
|
|
opacity: 0; }
|
|
md-slider:focus {
|
|
outline: none; }
|
|
md-slider.md-dragging .md-thumb-container,
|
|
md-slider.md-dragging .md-track-fill {
|
|
-webkit-transition: none;
|
|
transition: none; }
|
|
md-slider:not([md-discrete]) {
|
|
/* Hide the sign and ticks in non-discrete mode */ }
|
|
md-slider:not([md-discrete]) .md-track-ticks,
|
|
md-slider:not([md-discrete]) .md-sign {
|
|
display: none; }
|
|
md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper .md-thumb:hover {
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8); }
|
|
md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper.md-focused .md-focus-ring {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1; }
|
|
md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper.md-focused .md-thumb {
|
|
-webkit-animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1);
|
|
animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1); }
|
|
md-slider:not([md-discrete]):not([disabled]).md-active .md-slider-wrapper .md-thumb {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-focus-ring {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
-webkit-animation: sliderDiscreteFocusRing 0.5s cubic-bezier(0.35, 0, 0.25, 1);
|
|
animation: sliderDiscreteFocusRing 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
|
|
md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-thumb {
|
|
-webkit-animation: sliderDiscreteFocusThumb 0.5s cubic-bezier(0.35, 0, 0.25, 1);
|
|
animation: sliderDiscreteFocusThumb 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
|
|
md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-thumb, md-slider[md-discrete]:not([disabled]).md-active .md-thumb {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); }
|
|
md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-sign,
|
|
md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-sign:after, md-slider[md-discrete]:not([disabled]).md-active .md-sign,
|
|
md-slider[md-discrete]:not([disabled]).md-active .md-sign:after {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0) scale(1);
|
|
transform: translate3d(0, 0, 0) scale(1); }
|
|
md-slider[md-discrete][disabled][readonly] .md-thumb {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); }
|
|
md-slider[md-discrete][disabled][readonly] .md-sign,
|
|
md-slider[md-discrete][disabled][readonly] .md-sign:after {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0) scale(1);
|
|
transform: translate3d(0, 0, 0) scale(1); }
|
|
md-slider[disabled] .md-track-fill {
|
|
display: none; }
|
|
md-slider[disabled] .md-track-ticks {
|
|
opacity: 0; }
|
|
md-slider[disabled]:not([readonly]) .md-sign {
|
|
opacity: 0; }
|
|
md-slider[disabled] .md-thumb {
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5); }
|
|
md-slider[disabled] .md-disabled-thumb {
|
|
display: block; }
|
|
md-slider[md-vertical] {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
min-height: 128px;
|
|
min-width: 0; }
|
|
md-slider[md-vertical] .md-slider-wrapper {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
width: 48px;
|
|
-webkit-align-self: center;
|
|
align-self: center;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center; }
|
|
md-slider[md-vertical] .md-track-container {
|
|
height: 100%;
|
|
width: 2px;
|
|
top: 0;
|
|
left: calc(50% - (2px / 2)); }
|
|
md-slider[md-vertical] .md-thumb-container {
|
|
top: auto;
|
|
margin-bottom: 23px;
|
|
left: calc(50% - 1px);
|
|
bottom: 0; }
|
|
md-slider[md-vertical] .md-thumb-container .md-thumb:after {
|
|
left: 1px; }
|
|
md-slider[md-vertical] .md-thumb-container .md-focus-ring {
|
|
left: -16px; }
|
|
md-slider[md-vertical] .md-track-fill {
|
|
bottom: 0; }
|
|
md-slider[md-vertical][md-discrete] .md-sign {
|
|
left: -40px;
|
|
top: 9.5px;
|
|
-webkit-transform: scale(0.4) translate3d(67.5px, 0, 0);
|
|
transform: scale(0.4) translate3d(67.5px, 0, 0);
|
|
/* The arrow pointing left next the sign */ }
|
|
md-slider[md-vertical][md-discrete] .md-sign:after {
|
|
top: 9.5px;
|
|
left: 19px;
|
|
border-top: 14px solid transparent;
|
|
border-right: 0;
|
|
border-bottom: 14px solid transparent;
|
|
border-left-width: 16px;
|
|
border-left-style: solid;
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -8px, 0);
|
|
transform: translate3d(0, -8px, 0);
|
|
-webkit-transition: all 0.2s ease-in-out;
|
|
transition: all 0.2s ease-in-out; }
|
|
md-slider[md-vertical][md-discrete] .md-sign .md-thumb-text {
|
|
z-index: 1;
|
|
font-size: 12px;
|
|
font-weight: bold; }
|
|
md-slider[md-vertical][md-discrete].md-active .md-sign:after,
|
|
md-slider[md-vertical][md-discrete] .md-focused .md-sign:after, md-slider[md-vertical][md-discrete][disabled][readonly] .md-sign:after {
|
|
top: 0; }
|
|
md-slider[md-vertical][disabled][readonly] .md-thumb {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); }
|
|
md-slider[md-vertical][disabled][readonly] .md-sign,
|
|
md-slider[md-vertical][disabled][readonly] .md-sign:after {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0) scale(1);
|
|
transform: translate3d(0, 0, 0) scale(1); }
|
|
md-slider[md-invert]:not([md-vertical]) .md-track-fill {
|
|
left: auto;
|
|
right: 0; }
|
|
[dir=rtl] md-slider[md-invert]:not([md-vertical]) .md-track-fill {
|
|
left: 0; }
|
|
[dir=rtl] md-slider[md-invert]:not([md-vertical]) .md-track-fill {
|
|
right: auto; }
|
|
md-slider[md-invert][md-vertical] .md-track-fill {
|
|
bottom: auto;
|
|
top: 0; }
|
|
|
|
md-slider-container {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
flex-direction: row; }
|
|
md-slider-container > *:first-child:not(md-slider),
|
|
md-slider-container > *:last-child:not(md-slider) {
|
|
min-width: 25px;
|
|
max-width: 42px;
|
|
height: 25px;
|
|
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
-webkit-transition-property: color, max-width;
|
|
transition-property: color, max-width; }
|
|
md-slider-container > *:first-child:not(md-slider) {
|
|
margin-right: 16px; }
|
|
[dir=rtl] md-slider-container > *:first-child:not(md-slider) {
|
|
margin-right: auto;
|
|
margin-left: 16px; }
|
|
md-slider-container > *:last-child:not(md-slider) {
|
|
margin-left: 16px; }
|
|
[dir=rtl] md-slider-container > *:last-child:not(md-slider) {
|
|
margin-left: auto;
|
|
margin-right: 16px; }
|
|
md-slider-container[md-vertical] {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column; }
|
|
md-slider-container[md-vertical] > *:first-child:not(md-slider),
|
|
md-slider-container[md-vertical] > *:last-child:not(md-slider) {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
text-align: center; }
|
|
md-slider-container md-input-container input[type="number"] {
|
|
text-align: center;
|
|
padding-left: 15px;
|
|
height: 50px;
|
|
margin-top: -25px; }
|
|
[dir=rtl] md-slider-container md-input-container input[type="number"] {
|
|
padding-left: 0;
|
|
padding-right: 15px; }
|
|
|
|
@media screen and (-ms-high-contrast: active) {
|
|
md-slider.md-default-theme .md-track {
|
|
border-bottom: 1px solid #fff; } }
|