dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
110 lines (109 loc) • 1.99 kB
CSS
/* dojox.mobile.Slider */
.mblSlider {
margin: 15px;
border-style: inset;
border-width: 1px;
border-radius: 0;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: none;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 0px;
margin-right: 0px;
}
.mblSliderH {
width: 200px;
height: 8px;
}
.mblSliderH .mblSliderProgressBar {
height: 100%;
}
.mblSliderH .mblSliderHandle {
top: 50%;
}
.mblSliderV {
height: 200px;
width: 8px;
}
.mblSliderV .mblSliderProgressBar {
width: 100%;
}
.mblSliderV .mblSliderHandle {
left: 50%;
}
.mblSliderProgressBar {
border-radius: 0;
}
.mblSliderHandle {
margin: -10px 0 0 -10px;
width: 18px;
height: 18px;
border-style: outset;
border-width: 1px;
border-radius: 0;
border: none;
background-color: #ffffff;
}
.mblSliderTransition {
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
}
.mblSliderTouchBox {
margin: 0;
padding: 12pt;
left: -12pt;
top: -12pt;
border: none;
width: 100%;
height: 100%;
background-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.mblSlider > div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #1f1f1f;
}
.mblSlider .mblSliderProgressBar {
background-color: Highlight;
}
.mblSlider .mblSliderTouchBox {
left: 0px;
top: -4px;
padding: 4px 0px;
}
.mblSlider[disabled] > div:before {
opacity: 0.5;
}
.mblSlider[disabled] .mblSliderProgressBar {
background-color: #808080;
}
.mblSliderV {
width: 0.5em ;
height: 100% ;
}
.mblSliderV > div {
min-height: 100px;
}
.mblSliderV .mblSliderHandle {
height: 0.5em;
width: 1.1em;
margin-top: -4px;
margin-left: -8px;
}
.mblSliderH {
min-width: 100px;
width: 100% ;
height: 0.5em ;
}
.mblSliderH .mblSliderHandle {
height: 1.1em;
width: 0.5em;
margin-top: -8px;
margin-left: -4px;
}