angular-switcher.css

.switcher { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.switcher-label { font-size: .9em; }
.switcher-label.false { color: #e35144; }
.switcher-label,
.switcher-line { display: inline-block; vertical-align: middle; cursor: pointer; }
.switcher-line { position: relative; width: 40px; height: 2em; margin: 0 8px; }
.switcher-line:before { content: ''; display: block; vertical-align: middle; width: 100%; height: 6px; background: #8ca0ad;
	background-image: -webkit-linear-gradient(#8ca0ad, #cad6de); background-image: linear-gradient(#8ca0ad, #cad6de); }
.switcher-line:before,
.switcher-line:after { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; top: 50%; border-radius: 10em;
	-webkit-transition: all 300ms ease; -ms-transition: all 300ms ease; transition: all 300ms ease; }
.switcher-line:after { content: ''; display: block; width: 20px; height: 20px; background: #fff; border: 1px solid #c9d1d6; box-shadow: 0 1px 2px rgba(97, 126, 147, .5);
	left: 0; }
.switcher input { display: none !important; }

.switcher.active .switcher-line:after { left: 100%; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); }
.switcher.active .switcher-label.true { color: #4ecb32; }
.switcher.active .switcher-label.false { color: inherit; }

.switcher.disabled { opacity: .7; }