iOS checkboxes

_ios-checkbox.scss

@mixin linear-gradient($a, $b: false, $c: false, $d: false, $e: false, $f: false, $g: false) {
	$value: $a;
	@each $var in $b, $c, $d, $e, $f, $g {
		@if $var {
			$value: $value + ', ' + $var;
		}
	}
	$value: unquote($value);
	@include value-prefix('background', "linear-gradient(" + $value + ")");
}

@mixin value-prefix($property, $value) {
	$property: unquote($property);
	$value: unquote($value);

	#{$property}: -webkit-#{$value};
	#{$property}: -moz-#{$value};
	#{$property}: -ms-#{$value};
	#{$property}: -o-#{$value};
	#{$property}: #{$value};
}

@mixin ios-checkbox($on-color: #367ff7, $off-color: #ddd, $font-size: 11pt, $font-family: sans-serif, $width: 80px, $height: 25px, $radius: 5px) {
	display: none;

	$on-text-color: #fff;
	@if lightness($on-color) > 60% {
		$on-text-color: #666;
	}
	
	$off-text-color: #fff;
	@if lightness($off-color) > 60% {
		$off-text-color: #666;
	}

	// default stylign for the label
	& + label {
		display: block;
		cursor: pointer;
		width: $width;
		height: $height;
		border-width: 1px;
		border-style: solid;
		border-radius: $radius;
		box-shadow: inset 0 0 1px #fff, inset 0 2px 5px 2px rgba(0,0,0,0.5);

		@include linear-gradient(top, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.2) 100%);


		.false, .true {
			width: $width * 0.55;
			height: $height;
			line-height: $height + 3px;
			text-align: center;
			text-transform: uppercase;
			font-size: $font-size;
			font-weight: bold;
			font-family: $font-family;
		}

		&::before {
			content: ' ';
			position: absolute;
			width: $width * 0.45;
			height: $height;
			margin: -1px 0 0 -1px;
			border: 1px solid #aaa;
			border-radius: $radius;
			box-shadow: inset 0 0 0 1px #fff;
			@include linear-gradient("top, #ddd, #fff");
		}
	}

	// the "Off" state
	& + label {
		background-color: $off-color;
		border-color: darken($off-color, 15%);

		.false {
			display: block;
			float: right;
			color: $off-text-color;
			text-shadow: 0 -1px 1px darken($off-color, 30%);
		}
		.true {
			display: none;
		}
	}

	// the "On" state
	&:checked + label {
		background-color: $on-color;
		border-color: darken($on-color, 30%);

		.true {
			display: block;
			float: left;
			color: $on-text-color;
			text-shadow: 0 -1px 1px darken($on-color, 30%);
		}
		.false {
			display: none;
		}

		&::before {
			margin-left: $width * 0.55;
		}
	}
}

input[type=checkbox].ios {
	@include ios-checkbox();
}