lucid-ui/src/components/Switch/Switch.less

A UI component library from AppNexus.

@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@Switch-height: 22px;
@Switch-width: 50px;
@Switch-animation-timing: 0.1s linear;
@Switch-selected-transform: translate(16px, 0);

@Switch-container-height: 16px;
@Switch-container-offset: @size-XXS;
@Switch-container-width: 32px;

@Switch-glow-offset: 5px;
@Switch-glow-radius: @size-S;
@Switch-glow-scale: scale(1.556);

@Switch-handle-offset: @size-XS;
@Switch-handle-radius: 5px;
@Switch-handle-scale: scale(1.125);

@Switch-disabled-color: fade(@color-neutral-9, 4%);
@Switch-disabled-border-color: fade(@color-neutral-9, 15%);

.@{prefix}-Switch {
	cursor: pointer;
	display: inline-block;
	height: @Switch-height;
	position: relative;
	user-select: none;
	width: @Switch-width;

	&-is-disabled {
		cursor: not-allowed;
	}

	&-native {
		opacity: 0;
	}

	&-visualization-container {
		.box-sizing();

		border-radius: @Switch-container-height / 2;
		border: 1px solid @color-transparent-gray-30-new;
		height: @Switch-container-height;
		left: @Switch-container-offset;
		position: absolute;
		top: @Switch-container-offset;
		// transition: @Switch-animation-timing;
		width: @Switch-container-width;
	}

	&-visualization-handle {
		.box-sizing();

		background-color: @color-white;
		border-radius: @Switch-handle-radius;
		border: 1px solid @color-transparent-gray-30-new;
		height: @Switch-handle-radius * 2;
		left: @Switch-handle-offset;
		position: absolute;
		top: @Switch-handle-offset;
		// transition: @Switch-animation-timing;
		width: @Switch-handle-radius * 2;
	}

	&:hover &-visualization-handle {
		background-color: @color-white;
		border: 1px solid @color-primary;
	}

	&:hover &-visualization-container {
		border: 1px solid @color-primary;
	}

	&-is-selected {
		.@{prefix}-Switch-visualization-container {
			background-color: @color-white;
			border: 1px solid @color-primary;
		}

		.@{prefix}-Switch-visualization-handle {
			border: none;
			background-color: @color-primary;
			transform: @Switch-selected-transform;
		}

		&:hover {
			& > span.@{prefix}-Switch-visualization-container {
				opacity: .80;
			}

			& > span.@{prefix}-Switch-visualization-handle {
				border: none;
				background-color: @color-primary;
				opacity: .80;
			}
		}
	}

	&-is-disabled {

		& .@{prefix}-Switch-visualization-container {
			background-color: @Switch-disabled-color;
			border-color: @Switch-disabled-border-color;
		}

		& .@{prefix}-Switch-visualization-handle {
			background-color: transparent;
			border-color: @Switch-disabled-border-color;
		}

		&:hover {
			& .@{prefix}-Switch-visualization-container {
				background-color: @Switch-disabled-color;
				border-color: @Switch-disabled-border-color;
			}

			& .@{prefix}-Switch-visualization-handle {
				background-color: transparent;
				border-color: @Switch-disabled-border-color;
			}
		}
	}

	&-is-disabled.@{prefix}-Switch-is-selected {

		& .@{prefix}-Switch-visualization-container {
			background-color: @color-white;
			border-color: @color-primary;
			opacity: .50;
		}

		& .@{prefix}-Switch-visualization-handle {
			background-color: @color-primary;
			opacity: .50;
			border-color: transparent;
		}

		&:hover {
			& .@{prefix}-Switch-visualization-container {
				background-color: @color-white;
				border-color: @color-primary;
				opacity: .50;
			}

			& .@{prefix}-Switch-visualization-handle {
				background-color: @color-primary;
				opacity: .50;
				border-color: transparent;
			}
		}
	}

	&-is-include-exclude {

		.@{prefix}-Switch-visualization-handle {
			background-color: @color-secondary-1;
		}

		.@{prefix}-Switch-visualization-container {
			border-color: @color-secondary-1;
		}

		&.@{prefix}-Switch-is-selected {

			.@{prefix}-Switch-visualization-handle {
				background-color: @color-secondary-4;
				border: 0;
			}

			.@{prefix}-Switch-visualization-container {
				border-color: @color-secondary-4;
			}
		}

		&:hover {

			.@{prefix}-Switch-visualization-container,
			.@{prefix}-Switch-visualization-handle {
				border: 1px solid @color-secondary-1;
			}
		}


		&:hover.@{prefix}-Switch-is-selected {

			.@{prefix}-Switch-visualization-container,
			.@{prefix}-Switch-visualization-handle {
				border: 1px solid @color-secondary-4;
			}
		}

		&.@{prefix}-Switch-is-disabled:not(.@{prefix}-Switch-is-selected) {

			& .@{prefix}-Switch-visualization-container,
			& .@{prefix}-Switch-visualization-handle {
				background-color: @Switch-disabled-color;
				border-color: @Switch-disabled-border-color;
			}
		}

		&.@{prefix}-Switch-is-selected.@{prefix}-Switch-is-disabled {

			&:hover {
				.@{prefix}-Switch-visualization-handle {
					background-color: @color-secondary-4;
				}

				.@{prefix}-Switch-visualization-container {
					border-color: @color-secondary-4;
				}
			}

		}
	}

	&-is-selected:hover &-visualization-handle {
		// transform: @Switch-selected-transform @Switch-handle-scale;
		background-color: white;
		border: 1px solid @color-primary;
	}

}