mapillary-js/styles/SliderComponent.css
Oscar Lorentzon d11f278d43 Simplify z-index approach.
Interactive (e.g. navigation, attribution) element have z-index 10.
Overlayed elements (slider, route bubble) have z-index 20.
Filling elements have z-index -1 to 9.
Cover have z-index 100.
Special elements (debug) have z-index 50.

Do not change z-index in server cssnano plugin (z-index are not
changed when built from npm script).
2016-08-26 13:22:25 -04:00

50 lines
1004 B
CSS

.SliderWrapper {
text-align: center;
position: absolute;
bottom: 40px;
left: 0;
right: 0;
z-index: 20;
}
.SliderControl {
max-width: 60%;
padding: 4px;
box-sizing: border-box;
display: block;
width: 100%;
margin: 0 auto;
marginTop: 10px;
cursor: pointer;
color: inherit;
background-color: rgba(255, 255, 255, 0.20);
background-clip: 'content-box';
border-radius: 999px;
-webkit-appearance: none;
appearance: none;
}
.SliderControl::-webkit-slider-thumb {
width: 22px;
height: 22px;
background: #474A4E;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
border: 2px solid white;
border-radius: 999px;
-webkit-appearance: none;
}
.SliderControl::-moz-range-thumb {
width: 22px;
height: 22px;
background: #474A4E;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
border: 2px solid white;
border-radius: 999px;
appearance: none;
}
.SliderControl:focus {
outline: none;
}