touchstonejs-ui/less/components/Switch.less

React.js UI components for the TouchstoneJS platform http://touchstonejs.io

// 
// Switch
// ==============================

.Switch {
	display: inline-block;
	margin: -(@switch-hit-area-expansion + (@padding-base-vertical / 2)) -@switch-hit-area-expansion;
	padding: @switch-hit-area-expansion;
	pointer-events: auto;
	position: relative;
}
.Switch--default {
	.switch-variant(@switch-on-default-border, @switch-on-default-bg);
}

/* the track appearance when the switch is "off" */
.Switch__track {
	.transition( all @switch-transition-duration ease-in-out);
	background-color: @switch-off-bg-color;
	border-radius: @switch-border-radius;
	border: solid @switch-border-width @switch-off-border-color;
	box-sizing: border-box;
	content: ' ';
	cursor: pointer;
	display: inline-block;
	height: @switch-height;
	pointer-events: none;
	width: @switch-width;
	-webkit-background-clip: padding-box;
}

/* the handle (circle) thats inside the switch's track area */
/* also the handle's appearance when it is "off" */
.Switch__handle {
	.transition(@switch-transition-duration cubic-bezier(0, 1.1, 1, 1.1));
	background-color: @switch-handle-off-bg-color;
	border-radius: @switch-handle-radius;
	box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.15);
	display: block;
	height: @switch-handle-height;
	left: @switch-border-width + @switch-hit-area-expansion;
	position: absolute;
	top: @switch-border-width + @switch-hit-area-expansion;
	width: @switch-handle-width;

	&:before {
		// used to create a larger (but hidden) hit area to slide the handle
		content: " ";
		left: ( (@switch-handle-width / 2) * -1) - 8;
		padding: (@switch-handle-height / 2) + 5 (@switch-handle-width + 7);
		position: absolute;
		top: -4px;
	}
}

// the handle when the switch is "on"
.Switch.is-on .Switch__handle {
	.translate3d(@switch-width - @switch-handle-width - (@switch-border-width * 2), 0, 0);
	background-color: @switch-handle-on-bg-color;
}

// disable the switch
.Switch.is-disabled > .Switch__track {
	opacity: .6;
}