mirror of
https://github.com/gwenhael-le-moine/ledgerrb.git
synced 2025-01-29 08:34:30 +01:00
210 lines
6 KiB
CSS
210 lines
6 KiB
CSS
/*!
|
|
* Angular Material Design
|
|
* https://github.com/angular/material
|
|
* @license MIT
|
|
* v0.7.1
|
|
*/
|
|
@-webkit-keyframes sliderFocusThumb {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); }
|
|
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1; }
|
|
|
|
100% {
|
|
opacity: 0; } }
|
|
|
|
@keyframes sliderFocusThumb {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); }
|
|
|
|
50% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1; }
|
|
|
|
100% {
|
|
opacity: 0; } }
|
|
|
|
md-slider {
|
|
height: 48px;
|
|
position: relative;
|
|
display: block;
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
/**
|
|
* 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-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 {
|
|
transition: width 0.05s linear; }
|
|
md-slider .md-track-ticks {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%; }
|
|
md-slider .md-thumb-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
transition: -webkit-transform 0.1s linear;
|
|
transition: transform 0.1s linear; }
|
|
md-slider .md-thumb {
|
|
z-index: 1;
|
|
position: absolute;
|
|
left: -19px;
|
|
top: 5px;
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 38px;
|
|
-webkit-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
transition: all 0.1s linear; }
|
|
md-slider .md-thumb:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 3px;
|
|
top: 3px;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 32px;
|
|
border: 3px solid; }
|
|
md-slider .md-sign {
|
|
/* Center the children (slider-thumb-text) */
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: -14px;
|
|
top: -20px;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 28px;
|
|
-webkit-transform: scale(0.4) translate3d(0, 70px, 0);
|
|
transform: scale(0.4) translate3d(0, 70px, 0);
|
|
transition: all 0.2s ease-in-out;
|
|
/* 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: 16px solid;
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -8px, 0);
|
|
transform: translate3d(0, -8px, 0);
|
|
transition: all 0.2s ease-in-out; }
|
|
md-slider .md-sign .md-thumb-text {
|
|
z-index: 1;
|
|
font-size: 12px;
|
|
font-weight: bold; }
|
|
md-slider .md-focus-thumb {
|
|
position: absolute;
|
|
left: -24px;
|
|
top: 0px;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 48px;
|
|
display: none;
|
|
opacity: 0;
|
|
background-color: #C0C0C0;
|
|
-webkit-animation: sliderFocusThumb 0.4s linear;
|
|
animation: sliderFocusThumb 0.4s linear; }
|
|
md-slider .md-focus-ring {
|
|
position: absolute;
|
|
left: -24px;
|
|
top: 0px;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 48px;
|
|
border: 2px solid #D6D6D6;
|
|
background-color: transparent;
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
transition: all 0.2s linear; }
|
|
md-slider .md-disabled-thumb {
|
|
position: absolute;
|
|
left: -22px;
|
|
top: 2px;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 44px;
|
|
-webkit-transform: scale(0.35);
|
|
transform: scale(0.35);
|
|
border: 6px solid;
|
|
display: none; }
|
|
md-slider.md-min .md-thumb:after {
|
|
background-color: white; }
|
|
md-slider.md-min .md-sign {
|
|
opacity: 0; }
|
|
md-slider:focus {
|
|
outline: none; }
|
|
md-slider.dragging .md-thumb-container, md-slider.dragging .md-track-fill {
|
|
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]):hover .md-thumb {
|
|
-webkit-transform: scale(0.6);
|
|
transform: scale(0.6); }
|
|
md-slider:not([md-discrete]):not([disabled]):focus .md-focus-thumb, md-slider:not([md-discrete]):not([disabled]).active .md-focus-thumb {
|
|
display: block; }
|
|
md-slider:not([md-discrete]):not([disabled]):focus .md-focus-ring, md-slider:not([md-discrete]):not([disabled]).active .md-focus-ring {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
md-slider:not([md-discrete]):not([disabled]):focus .md-thumb, md-slider:not([md-discrete]):not([disabled]).active .md-thumb {
|
|
-webkit-transform: scale(0.85);
|
|
transform: scale(0.85); }
|
|
md-slider[md-discrete] {
|
|
/* Hide the focus thumb in discrete mode */ }
|
|
md-slider[md-discrete] .md-focus-thumb, md-slider[md-discrete] .md-focus-ring {
|
|
display: none; }
|
|
md-slider[md-discrete]:not([disabled]):focus .md-sign, md-slider[md-discrete]:not([disabled]):focus .md-sign:after, md-slider[md-discrete]:not([disabled]).active .md-sign, md-slider[md-discrete]:not([disabled]).active .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-sign {
|
|
display: none; }
|
|
md-slider[disabled] .md-thumb {
|
|
-webkit-transform: scale(0.35);
|
|
transform: scale(0.35); }
|
|
md-slider[disabled] .md-disabled-thumb {
|
|
display: block; }
|