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

A UI component library from Xandr.

@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';
@Checkbox-size: 22px;
@Checkbox-animation-timing: 0.1s linear;
@Checkbox-borderRadius: @size-XXS;
@Checkbox-borderColor: rgba(33, 31, 31, 0.3);

@Checkbox-container-size: @Checkbox-size - @size-XS;
@Checkbox-container-offset: @size-XXS;

@Checkbox-glow-offset: @size-XXS;
@Checkbox-glow-scale: scale(1.375);

@Checkbox-disabled-backgroundColor: #f4f2f2;
@Checkbox-disabled-borderColor: #e8e6e6;

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

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

	&-native {
		opacity: 0;
	}

	&-native:focused {
		.opacity(0.8);
	}

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

		background-color: white;
		border: solid 1px @Checkbox-borderColor;
		height: @Checkbox-container-size;
		left: @Checkbox-container-offset;
		position: absolute;
		top: @Checkbox-container-offset;
		width: @Checkbox-container-size;
	}

	&-visualization-indeterminate {
		opacity: 0;
		width: @Checkbox-size;
		height: @Checkbox-size;
		transform: rotate(0deg);
		top: 0;
		left: 0;
		position: absolute;
	}

	&-visualization-indeterminate-line {
		top: 10px;
		left: 7px;
		width: 8px;
		height: 2px;
		background-color: white;
		position: absolute;
	}

	&-visualization-checkmark {
		opacity: 0;
		width: @Checkbox-size;
		height: @Checkbox-size;
		transform: rotate(-45deg);
		top: 0;
		left: 0;
		position: absolute;
	}

	&-visualization-checkmark-stem {
		top: 11px;
		left: 7px;
		width: 10px;
		height: 2px;
		background-color: white;
		position: absolute;
	}

	&-visualization-checkmark-kick {
		top: 7px;
		left: 7px;
		width: 2px;
		height: 5px;
		background-color: white;
		position: absolute;
	}

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

		background-color: @color-primary;
		height: @Checkbox-container-size;
		left: @Checkbox-glow-offset;
		opacity: 0;
		position: absolute;
		top: @Checkbox-glow-offset;
		transition: @Checkbox-animation-timing;
		width: @Checkbox-container-size;
	}

	&:hover &-visualization-container,
	&-native:focus ~ &-visualization-container {
		border-color: @color-primary;
		transition: @Checkbox-animation-timing;
		border: @size-borderWidthFocused solid @color-primary;
	}

	&:hover &-visualization-glow {
		border: @size-borderWidthFocused solid @color-primary;
	}

	&-is-disabled &-visualization-container,
	&-is-disabled:hover &-visualization-container {
		background-color: @Checkbox-disabled-backgroundColor;
		border-color: @Checkbox-disabled-borderColor;
	}

	&-is-disabled:hover &-visualization-glow {
		opacity: 0;
		transform: none;
	}

	&-is-disabled&-is-selected &-visualization-container {
		opacity: 0.5;
	}

	&:hover&-is-disabled&-is-selected &-visualization-container {
		opacity: 0.5;
	}

	&-is-disabled&-is-selected:hover &-visualization-container,
	&-is-selected &-visualization-container,
	&:active &-visualization-container {
		background-color: @color-primary;
		border-color: @color-primary;
	}

	&-is-disabled:active &-visualization-container {
		background-color: @Checkbox-disabled-backgroundColor;
		border-color: @Checkbox-disabled-borderColor;
	}

	&-is-selected &-visualization-checkmark,
	&-visualization-indeterminate {
		opacity: 1;
		transition: @Checkbox-animation-timing;
	}

	&-native:focus ~ &-visualization-glow {
		border: @size-borderWidth solid @color-primary;
	}

	&-native:focus ~ &-visualization-container {
		.opacity(0.8);
	}
}