com.phloxui/styles/lib/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);
		cursor: pointer;
	}

	& 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);
	}

	button {
    &.fake{
      opacity: 0;
      width: 10pt;
      height: 10pt;
      position: absolute;
      margin-left: -1.5px;
      margin-top: -13.44px;
      z-index: -1;
    }
    &.fake:focus {
      & + input + label {
      	outline: @CLR_BRAND solid 1px;

      }
    }
  }
}

phx-switch {
	&.disabled, &.read-only {
		.phx-switch {
			& input.toggle + label {
				cursor: default;
			}
		}
	}
}