.mblSwitch { margin: 0; position: relative; display: inline-block; height: 27px; line-height: 29px; overflow: hidden; text-align: left; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .mblListItem .mblSwitch { position: absolute; right: 12px; top: 8px; } .mblSwitchInner { position: absolute; top: 0; height: 27px; } .mblSwitchAnimation .mblSwitchInner { -webkit-transition-property: left; -webkit-transition-duration: .1s; } .mblSwitchOn .mblSwitchInner { left: 0; } .mblSwitchBg { position: absolute; top: 0; width: 94px; height: 27px; font-family: Helvetica; font-size: 16px; font-weight: bold; line-height: 29px; -webkit-box-sizing: border-box; border-width: 1px; border-style: solid; border-color: #939393 #aaaaaa #cbcbcb #767676; } .mblSwitchBgLeft { left: 0; color: white; background-color: #3f84eb; background-image: -webkit-gradient(linear, left top, left bottom, from(#2859b1), to(#75acfb), color-stop(0.5, #3f84eb), color-stop(0.5, #4c8eee)); } .mblSwitchBgRight { color: #7f7f7f; background-image: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#fdfdfd), color-stop(0.5, #eeeeee), color-stop(0.5, #f8f8f8)); } .mblSwitchKnob { position: absolute; top: 0; height: 27px; background-image: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#fafafa)); font-size: 1px; -webkit-box-sizing: border-box; border-width: 1px; border-style: solid; border-color: #5e5e5e #9e9e9e #828282 #797979; } .mblSwitchText { position: relative; top: 0; width: 53px; height: 27px; padding: 0; line-height: 28px; text-align: center; } .mblSwitchTextLeft { left: 0; } .mblSwitchTextRight { left: 40px; } .mblSwSquareShape { width: 94px; } .mblSwSquareShape.mblSwitchOff .mblSwitchInner { left: -53px; } .mblSwSquareShape .mblSwitchBg { border-radius: 5px; } .mblSwSquareShape .mblSwitchBgRight { left: 53px; } .mblSwSquareShape .mblSwitchKnob { left: 53px; width: 41px; border-radius: 5px; } .mblSwSquareShape .mblSwitchText { width: 53px; } .mblSwSquareShape .mblSwitchTextRight { left: 40px; } .mblSwRoundShape1 { width: 77px; } .mblSwRoundShape1.mblSwitchOff .mblSwitchInner { left: -50px; } .mblSwRoundShape1 .mblSwitchBg { width: 77px; border-radius: 14px; } .mblSwRoundShape1 .mblSwitchBgRight { left: 50px; } .mblSwRoundShape1 .mblSwitchKnob { left: 50px; width: 27px; border-radius: 13px; } .mblSwRoundShape1 .mblSwitchText { width: 50px; } .mblSwRoundShape1 .mblSwitchTextRight { left: 26px; } .mblSwRoundShape2 { width: 94px; } .mblSwRoundShape2.mblSwitchOff .mblSwitchInner { left: -51px; } .mblSwRoundShape2 .mblSwitchBg { border-radius: 14px; } .mblSwRoundShape2 .mblSwitchBgRight { left: 51px; } .mblSwRoundShape2 .mblSwitchKnob { left: 51px; width: 43px; border-radius: 13px; } .mblSwRoundShape2 .mblSwitchText { width: 51px; } .mblSwRoundShape2 .mblSwitchTextRight { left: 42px; } .mblSwArcShape1 { width: 77px; } .mblSwArcShape1.mblSwitchOff .mblSwitchInner { left: -50px; } .mblSwArcShape1 .mblSwitchBg { width: 77px; border-radius: 5px/14px; } .mblSwArcShape1 .mblSwitchBgRight { left: 50px; } .mblSwArcShape1 .mblSwitchKnob { left: 50px; width: 27px; border-radius: 5px/13px; } .mblSwArcShape1 .mblSwitchText { width: 50px; } .mblSwArcShape1 .mblSwitchTextRight { left: 26px; } .mblSwArcShape2 { width: 94px; } .mblSwArcShape2.mblSwitchOff .mblSwitchInner { left: -51px; } .mblSwArcShape2 .mblSwitchBg { border-radius: 5px/14px; } .mblSwArcShape2 .mblSwitchBgRight { left: 51px; } .mblSwArcShape2 .mblSwitchKnob { left: 51px; width: 43px; border-radius: 5px/13px; } .mblSwArcShape2 .mblSwitchText { width: 51px; } .mblSwArcShape2 .mblSwitchTextRight { left: 42px; } .mblSwDefaultShape { width: 77px; } .mblSwDefaultShape.mblSwitchOff .mblSwitchInner { left: -50px; } .mblSwDefaultShape .mblSwitchBg { width: 77px; border-radius: 14px; } .mblSwDefaultShape .mblSwitchBgRight { left: 50px; } .mblSwDefaultShape .mblSwitchKnob { left: 50px; width: 27px; border-radius: 13px; } .mblSwDefaultShape .mblSwitchText { width: 50px; } .mblSwDefaultShape .mblSwitchTextRight { left: 26px; }