dojox/mobile/themes/common/Switch.less

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