_forms-custom-radioscheckboxes.scss

/**
 * Custom Checkboxes and radios
 *
 * IE9+
 *
 * --------------------------------
 *
 * Checkbox button example HTML
 *
 *	<label class="control control--custom" for="checkbox1">
 *		<input class="control--custom-input" type="checkbox" id="checkbox1" name="myCheckbox" value="A value"/>
 *		<span class="control-indicator control-indicator--checkbox"></span>
 *		My Checkbox Label Text
 *	</label>
 *
 * -------------------------------
 *
 * Radio button example HTML
 *
 *	<label class="control control--custom" for="radio1">
 *		<input class="control--custom-input" type="radio" id="radio1" name="myRadioBtn" value="A value"/>
 *		<span class="control-indicator control-indicator--radio"></span>
 *		My Radio Button Label Text
 * 	</label>
 *
 * ================================= */
// $custom-input-color: $color-primary;
$custom-input-color: $color-primary;
$custom-input-selected-color: $color-bg;
$checkbox-indicator-width: .1em;

.control--custom {
	position: relative;
	display: block;
	cursor: pointer;
	user-select: none;
}

// Give inline elements some space to the right
.control--custom--inline {
	display: inline-block;
	padding-right: 2em;
}

// The hidden input
.control--custom-input {
	position: absolute;
	opacity: 0;
	z-index: -1; // Put the input behind the label so it doesn't overlay text
}

// The new checkbox/radio
.control-indicator {
	position: relative;
	display: inline-block;
	width: 1em;
	height: 1em;
	transition: $default-transition;
	border: $checkbox-indicator-width solid $custom-input-color;
	background-color: $custom-input-color;
	vertical-align: middle;
	margin-top: -.2em;
	box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; // Used to animate from when element is in :focus
}

// :focus styles
.control--custom-input:focus ~ .control-indicator {
	box-shadow: 0 0 0 2px $color-bg, 0 0 0 3px $input-borderColor--focus;
}

// Checkbox modifiers
.control-indicator--checkbox,
.control-indicator--tickbox {
	border-radius: .2em;

	&:before,
	&:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 90%;
		display: block;
		opacity: 0; // indicator will be faded out when deselected
		transition: all 250ms ease-in-out;
	}
}

.control-indicator--checkbox {

	&:before,
	&:after {
		top: 50%;
		width: 90%;
		height: $checkbox-indicator-width;
		background-color: $custom-input-selected-color;
	}

	&:before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	&:after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}

.control-indicator--tickbox {

	&:before {
		top: 0;
		transform: translateX(-50%) rotate(45deg);
		border: $checkbox-indicator-width solid $custom-input-selected-color;
		background-color: transparent;
		width: 40%;
		height: 80%;
		border-top: 0;
		border-left: 0;
	}

	&:after {
		display: none;
	}
}

.control--custom-input:checked ~ .control-indicator--checkbox,
.control--custom-input:checked ~ .control-indicator--tickbox {
	// Uncomment to make checkboxes circular when checked
	// border-radius: 50%;

	&:before,
	&:after {
		opacity: 1;
	}
}


// Radio modifiers
.control-indicator--radio {
	border-radius: 50%;
}

.control--custom-input:checked ~ .control-indicator--radio {
	background-color: $custom-input-selected-color;
	border: .3em solid $custom-input-color;
}