lacemi_v32/sapi/web/resources/css/ios7-switch.css

.iswitch {
	border-radius: 100px; width: 58px; height: 35px; display: inline-block; position: relative; backface-visibility: hidden; background-color: rgb(229, 229, 229);
}
.iswitch .background-fill {
	border-radius: 100px; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;
}
.iswitch .on-background {
	transition:0.3s 0.2s; z-index: 1; opacity: 0; background-image: linear-gradient(rgb(0, 228, 89), rgb(0, 225, 88)); -webkit-transition: .3s 0.2s; -o-transition: .3s 0.2s; -moz-transition: .3s 0.2s;
}
.iswitch .state-background {
	border-radius: 100px; border: 2px solid rgb(229, 229, 229); transition:0.4s; border-image: none; z-index: 2; box-sizing: border-box; transform: scale(1); background-image: linear-gradient(rgb(255, 255, 255), rgb(253, 253, 253)); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: .4s; -o-transition: .4s; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); -moz-transition: .4s; -o-box-sizing: border-box; -ms-box-sizing: border-box;
}
.iswitch .handle {
	border-radius: 20px; transition:transform 0.3s cubic-bezier(0.455, 0.03, 0.215, 1.33) 0.25s; left: 2px; top: 2px; width: 31px; height: 31px; position: absolute; z-index: 3; box-shadow: 0px 0px 3px 1px hsla(0, 0%, 0%, 0.075), 0px 3px 5px hsla(0, 0%, 0%, 0.15), 1px 2px 2px hsla(0, 0%, 0%, 0.05); background-color: white; -webkit-transition: transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330); -o-transition: transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330); -moz-transition: transform .3s 0.25s cubic-bezier(0.455, 0.030, 0.215, 1.330);
}
.iswitch.off .handle {
	animation:expand-off 0.3s 0.2s; transform: translate3d(0px, 0px, 0px); -webkit-animation: expand-off .3s 0.2s; -o-animation: expand-off .3s 0.2s; -webkit-transform: translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0px, 0, 0); -moz-animation: expand-off .3s 0.2s;
}
.iswitch.off .on-background {
	transition:0.3s; -webkit-transition: .3s 0s; -o-transition: .3s 0s; -moz-transition: .3s 0s;
}
.iswitch.off .state-background {
	transition:0.4s 0.25s; -webkit-transition: .4s 0.25s; -o-transition: .4s 0.25s; -moz-transition: .4s 0.25s;
}
.iswitch.on .handle {
	animation:expand-on 0.3s 0.2s; transform: translate3d(23px, 0px, 0px); -webkit-animation: expand-on .3s 0.2s; -o-animation: expand-on .3s 0.2s; -webkit-transform: translate3d(23px, 0, 0); -o-transform: translate3d(23px, 0, 0); -moz-transform: translate3d(23px, 0, 0); -moz-animation: expand-on .3s 0.2s;
}
.iswitch.on .on-background {
	opacity: 1;
}
.iswitch.on .state-background {
	transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0);
}