dojox/mobile/themes/iphone/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: 8px;
}
.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-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));
  background-image: linear-gradient(to bottom, #2859b1 0%, #3f84eb 50%, #4c8eee 50%, #75acfb 100%);
}
.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));
  background-image: linear-gradient(to bottom, #cecece 0%, #eeeeee 50%, #f8f8f8 50%, #fdfdfd 100%);
}
.mblSwitchKnob {
  position: absolute;
  top: 0;
  height: 27px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#fafafa));
  background-image: linear-gradient(to bottom, #cccccc 0%, #fafafa 100%);
  font-size: 1px;
  -webkit-box-sizing: border-box;
  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;
}
/* Square Shape */
.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;
}
/* 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: 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;
}
/* i0S 6 specific */
.dj_ios6 .mblSwitchBgLeft {
  background-color: #007fea;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0060b1), to(#73b3ea), color-stop(0.5, #007fea), color-stop(0.5, #218fec));
  background-image: linear-gradient(to bottom, #0060b1 0%, #007fea 50%, #218fec 50%, #73b3ea 100%);
}