/* 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; }