dojox/mobile/themes/android/Switch.css

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.

/* dojox.mobile.Switch */
/* Switch - common */
.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: 18.5px;
}
.mblSwitchInner {
  position: absolute;
  top: 0;
  height: 27px;
}
.mblSwitchAnimation .mblSwitchInner {
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.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;
  box-sizing: border-box;
  border: rgba(176, 176, 176, 0.5) 1px inset;
}
.mblSwitchBgLeft {
  left: 0;
  color: white;
  background-color: #3f84eb;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#00a200), to(#00d300), color-stop(0.2, #00ba00), color-stop(0.2, #00ba00));
  background-image: linear-gradient(to bottom, #00a200 0%, #00ba00 20%, #00ba00 20%, #00d300 100%);
}
.mblSwitchBgRight {
  color: #7f7f7f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#bdbebd), to(#f7f3f7));
  background-image: linear-gradient(to bottom, #bdbebd 0%, #f7f3f7 100%);
}
.mblSwitchKnob {
  position: absolute;
  top: 0;
  height: 27px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#9c9a9c), to(#848284));
  background-image: linear-gradient(to bottom, #9c9a9c 0%, #848284 100%);
  font-size: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: rgba(157, 157, 157, 0.5) 1px outset;
}
.mblSwitchText {
  position: relative;
  top: 0;
  width: 53px;
  height: 27px;
  padding: 0;
  line-height: 28px;
  text-align: center;
}
.mblSwitchTextLeft {
  left: 0;
}
.mblSwitchTextRight {
  left: 40px;
}
/* Square Shape */
.mblSwSquareShape {
  width: 94px;
}
.mblSwSquareShape.mblSwitchOff .mblSwitchInner {
  left: -53px;
}
.mblSwSquareShape .mblSwitchBg {
  border-radius: 2px;
}
.mblSwSquareShape .mblSwitchBgRight {
  left: 53px;
}
.mblSwSquareShape .mblSwitchKnob {
  left: 53px;
  width: 41px;
  border-radius: 2px;
}
.mblSwSquareShape .mblSwitchText {
  width: 53px;
}
.mblSwSquareShape .mblSwitchTextRight {
  left: 40px;
}
/* Round Shape1 */
.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;
}
/* Round Shape2 */
.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;
}
/* Arc Shape1 */
.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;
}
/* Arc Shape2 */
.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;
}
/* Default Shape */
.mblSwDefaultShape {
  width: 94px;
}
.mblSwDefaultShape.mblSwitchOff .mblSwitchInner {
  left: -53px;
}
.mblSwDefaultShape .mblSwitchBg {
  border-radius: 2px;
}
.mblSwDefaultShape .mblSwitchBgRight {
  left: 53px;
}
.mblSwDefaultShape .mblSwitchKnob {
  left: 53px;
  width: 41px;
  border-radius: 2px;
}
.mblSwDefaultShape .mblSwitchText {
  width: 53px;
}
.mblSwDefaultShape .mblSwitchTextRight {
  left: 40px;
}