trustarc switch skin

by ian_smithz

HTML

<div class="switch">

  <span class="gwt-InlineHTML on active" aria-hidden="false" style=""></span><span class="gwt-InlineHTML off" aria-hidden="false" style=""></span>

</div>

CSS

body {
  font-family: Arial, Universe, "Helvetica Neue", Helvetica, sans-serif;font-size: 12px;line-height: 20px;}

/* we exist */
.switch {
  float: right;
  box-shadow: 1px 1px 0 #fff;
  position: relative;
}

.switch span {
  background-image: none;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}


 /* new  */
.switch span:before,
.switch span:after {
	border: 1px solid #565656;
  content: "";
	position: absolute;
}  
  
.switch span:after {
	background: #fff;
	border-radius: 100%;
	height: 1.5em;
	right: 1.5em;
	transition: right .1825s ease-in-out;
	width: 1.5em;
}
  
.switch span:before {
  background: #eee;
	border-radius: 1.75em;
	height: 1.75em;
	right: .25em;
	transition: background .2s ease-in-out;
	width: 2.75em;
}


/* change the position of the knob to indicate it has been checked*/
.switch span.active:after {
	right: .25em;
}

/* update the color of the "container" to further visually indicate state */
.switch span.active:before {
	background: #2196f3;
}

JavaScript

// mimic trustarc js - just for demo

$('.switch span').click(function() {


    $(this).toggleClass("active");

});