/* dojox.mobile.Switch */
|
/* Switch - common */
|
@mbl-switch-height: 27px;
|
//
|
.mblSwitch {
|
margin: 0;
|
position: relative;
|
display: inline-block;
|
height: @mbl-switch-height;
|
line-height: @mbl-switch-height + 2;
|
overflow: hidden;
|
text-align: left;
|
.tap-highlight-color(rgba(255,255,255,0));
|
}
|
.mblListItem .mblSwitch {
|
position: absolute;
|
right: 12px;
|
top: (@mbl-list-item-height - @mbl-switch-height) / 2;
|
}
|
.mblSwitchInner {
|
position: absolute;
|
top: 0;
|
height: @mbl-switch-height;
|
}
|
.mblSwitchAnimation .mblSwitchInner {
|
.transition-property(left);
|
.transition-duration(.1s);
|
}
|
.mblSwitchOn .mblSwitchInner {
|
left: 0;
|
}
|
.mblSwitchBg {
|
position: absolute;
|
top: 0;
|
width: 94px;
|
height: @mbl-switch-height;
|
font-family: Helvetica;
|
font-size: 16px;
|
font-weight: bold;
|
line-height: @mbl-switch-height + 2;
|
.box-sizing(border-box);
|
.mblSwitchBg-styles;
|
}
|
.mblSwitchBgLeft {
|
left: 0;
|
color: white;
|
background-color: #3f84eb;
|
.mbl-switch-bg-left-background-image();
|
}
|
.mblSwitchBgRight {
|
color: #7f7f7f;
|
.mbl-switch-bg-right-background-image();
|
}
|
.mblSwitchKnob {
|
position: absolute;
|
top: 0;
|
height: @mbl-switch-height;
|
.mbl-switch-knob-background-image();
|
font-size: 1px;
|
.box-sizing(border-box);
|
.mblSwitchKnob-styles;
|
}
|
.mblSwitchText {
|
position: relative;
|
top: 0;
|
width: 53px;
|
height: @mbl-switch-height;
|
padding: 0;
|
line-height: 28px;
|
text-align: center;
|
}
|
.mblSwitchTextLeft {
|
left: 0;
|
}
|
.mblSwitchTextRight {
|
left: 40px;
|
}
|
|
/* Square Shape */
|
.mblSwSquareShape-styles () {
|
width: 94px;
|
&.mblSwitchOff .mblSwitchInner {
|
left: -53px;
|
}
|
.mblSwitchBg {
|
border-radius: @mbl-switch-square-border-radius;
|
}
|
.mblSwitchBgRight {
|
left: 53px;
|
}
|
.mblSwitchKnob {
|
left: 53px;
|
width: 41px;
|
border-radius: @mbl-switch-square-border-radius;
|
}
|
.mblSwitchText {
|
width: 53px;
|
}
|
.mblSwitchTextRight {
|
left: 40px;
|
}
|
}
|
.mblSwSquareShape {
|
.mblSwSquareShape-styles;
|
}
|
|
/* Round Shape1 */
|
.mblSwRoundShape1-styles () {
|
width: 77px;
|
&.mblSwitchOff .mblSwitchInner {
|
left: -50px;
|
}
|
.mblSwitchBg {
|
width: 77px;
|
border-radius: 14px;
|
}
|
.mblSwitchBgRight {
|
left: 50px;
|
}
|
.mblSwitchKnob {
|
left: 50px;
|
width: 27px;
|
border-radius: 13px;
|
}
|
.mblSwitchText {
|
width: 50px;
|
}
|
.mblSwitchTextRight {
|
left: 26px;
|
}
|
}
|
.mblSwRoundShape1 {
|
.mblSwRoundShape1-styles;
|
}
|
|
/* Round Shape2 */
|
.mblSwRoundShape2-styles () {
|
width: 94px;
|
&.mblSwitchOff .mblSwitchInner {
|
left: -51px;
|
}
|
.mblSwitchBg {
|
border-radius: 14px;
|
}
|
.mblSwitchBgRight {
|
left: 51px;
|
}
|
.mblSwitchKnob {
|
left: 51px;
|
width: 43px;
|
border-radius: 13px;
|
}
|
.mblSwitchText {
|
width: 51px;
|
}
|
.mblSwitchTextRight {
|
left: 42px;
|
}
|
}
|
.mblSwRoundShape2 {
|
.mblSwRoundShape2-styles;
|
}
|
|
/* Arc Shape1 */
|
.mblSwArcShape1-styles () {
|
width: 77px;
|
&.mblSwitchOff .mblSwitchInner {
|
left: -50px;
|
}
|
.mblSwitchBg {
|
width: 77px;
|
border-radius: ~"5px/14px";
|
}
|
.mblSwitchBgRight {
|
left: 50px;
|
}
|
.mblSwitchKnob {
|
left: 50px;
|
width: 27px;
|
border-radius: ~"5px/13px";
|
}
|
.mblSwitchText {
|
width: 50px;
|
}
|
.mblSwitchTextRight {
|
left: 26px;
|
}
|
}
|
.mblSwArcShape1 {
|
.mblSwArcShape1-styles;
|
}
|
|
/* Arc Shape2 */
|
.mblSwArcShape2-styles () {
|
width: 94px;
|
&.mblSwitchOff .mblSwitchInner {
|
left: -51px;
|
}
|
.mblSwitchBg {
|
border-radius: ~"5px/14px";
|
}
|
.mblSwitchBgRight {
|
left: 51px;
|
}
|
.mblSwitchKnob {
|
left: 51px;
|
width: 43px;
|
border-radius: ~"5px/13px";
|
}
|
.mblSwitchText {
|
width: 51px;
|
}
|
.mblSwitchTextRight {
|
left: 42px;
|
}
|
}
|
.mblSwArcShape2 {
|
.mblSwArcShape2-styles;
|
}
|
