com.phloxui/styles/component/dataview/input/ToggleSwitch.less

PhloxUI Ng2+ Framework

.ua-safari{
	.phx-switch {
		padding-top: 8pt;
	}
}

.phx-switch {
	display: inline-block;
	margin: 0pt 5pt;

  & input.toggle {
		max-height: 0;
		max-width: 0;
		opacity: 0;
		display: none;
	}

	& input.toggle + label {
		display: block;
		position: relative;
		box-shadow: inset 0 0 0pt 1px extract(@CLR_1, 7);
		text-indent: -5000pt;
		height: @TOGGLE_SWITCH_HEIGHT;
		width: @TOGGLE_SWITCH_WIDTH;
		border-radius: 15pt;
		background: extract(@CLR_1, 7);
	}

	& input.toggle + label:before {
		content: "";
		position: absolute;
		display: block;
		height: @TOGGLE_SWITCH_HEIGHT;
		width: @TOGGLE_SWITCH_HEIGHT;
		top: 0;
		left: 0;
		border-radius: 15pt;
		background: extract(@CLR_BRAND_HUE, 5);
		-moz-transition: .25s ease-in-out;
		-webkit-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	& input.toggle + label:after {
		content: "";
		position: absolute;
		display: block;
		height: @TOGGLE_SWITCH_HEIGHT;
		width: @TOGGLE_SWITCH_HEIGHT;
		top: 0;
		left: 0pt;
		border-radius: 15pt;
		background: extract(@CLR_1, 9);
		box-shadow: inset 0 0 0 1px extract(@CLR_1, 7), 0 2px 4px extract(@CLR_1, 7);
		-moz-transition: .25s ease-in-out;
		-webkit-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}

	& input.toggle:checked + label:before {
		width: @TOGGLE_SWITCH_WIDTH;
		background: extract(@CLR_BRAND_HUE, 5);
	}

	& input.toggle:checked + label:after {
		left: @TOGGLE_SWITCH_AFTER_TOGGLE_LEFT;
		box-shadow: inset 0 0 0 1px extract(@CLR_BRAND_HUE, 5), 0 2px 4px rgba(0, 0, 0, .2);
	}
}