on-off slide indicator

on-off-slide.less

.on-off-slide-mixin(@glow-selector: glow, @glow-color: #444, @unglow-color: rgba(255,255,255,.2)) {
	position:relative;
	padding: 0;
	width: 1.5em;

	box-sizing: content-box;
	border-radius: .5em;
	border-width: .1em;
	border-style: solid;
	border-color: @unglow-color;
	color: @unglow-color;
	font-family:monospace;
	transition: color .4s, border-color .4s, box-shadow .4s;

	&:before {
		content: '';
		font-family: monospace;
		display: block;
		left: 0;
		position: relative;
		border-radius: .5em;
		width:.8em;
		height:.8em;
		margin:.1em;
		background-color: @unglow-color;

		transition: left .4s, bakcground-color .4s, box-shadow .4s;
	}

	&.@{glow-selector} {
		text-shadow: 0 0 1em #ffffff;
		border-color: @glow-color;
		box-shadow: inset 0 0 5px 0px fade(@glow-color,60), 0 0 5px 0px fade(@glow-color,60);
		&:before {
			background-color: @glow-color;
			left: .5em;
			box-shadow: 0 0 1em 0px @glow-color;
		}
	}

	&:Hover {
		cursor: pointer;
	}

}

.on-off-slide {
	font-size:32px;
	.on-off-slide-mixin(glow);
}