checkbox.less

@checkbox-cursor: pointer;
@checkbox-position: relative;
@checkbox-size: 18px;

@checkbox-input-display: none;

@checkbox-box-border-radius: 3px;
@checkbox-box-box-sizing: border-box;
@checkbox-box-position: absolute;
@checkbox-box-size: 18px;
@checkbox-label-spacing: @checkbox-box-size;
@checkbox-box-transform-origin: 40% 90%;
@checkbox-box-transform: rotate(0deg) scale(1);

@checkbox-check-fix-left: 4px;
@checkbox-check-fix-bottom: 6px;
@checkbox-check-height: 10px;
@checkbox-check-position: absolute;
@checkbox-check-transform-origin: 40% 100%;
@checkbox-check-transform: rotate(-45deg) scale(0);
@checkbox-check-width: 15px;

@checkbox-checked-box-transform: rotate(45deg) scale(0);

@checkbox-checked-check-height: 10px;
@checkbox-checked-check-transform: rotate(-45deg) scale(1);
@checkbox-checked-check-transition-delay: .1s;
@checkbox-checked-check-width: 18px;

.mui-checkbox {
	.ease-out;
	cursor: @checkbox-cursor;
	height: @checkbox-size;
	position: @checkbox-position;
	width: @checkbox-size;

	input {
		display: @checkbox-input-display;
	}

	.mui-checkbox-label {
		position: relative;
		left: @checkbox-label-spacing;
		padding: 0 5px;
	}

	.mui-checkbox-box {
		.ease-out;
		background-color: @checkbox-box-background-color;
		border: 2px solid @checkbox-box-border-color;
		border-radius: @checkbox-box-border-radius;
		box-sizing: @checkbox-box-box-sizing;
		height: @checkbox-box-size;
		position: @checkbox-box-position;
		.lh-transform(@checkbox-box-transform);
		transform-origin: @checkbox-box-transform-origin;
		width: @checkbox-box-size;
	}

	.mui-checkbox-check {
		.ease-out;
		border-bottom: 2px solid @checkbox-check-color;
		border-left: 2px solid @checkbox-check-color;
		bottom: @checkbox-check-fix-left;
		height: @checkbox-check-height;
		left: @checkbox-check-fix-left;
		position: @checkbox-check-position;
		.lh-transform(@checkbox-check-transform);
		transform-origin: @checkbox-check-transform-origin;
		width: @checkbox-check-height;
	}

	&.mui-checked {
		.mui-checkbox-box {
			.ease-out;
			.lh-transform(rotate(45deg) scale(0));
		}

		.mui-checkbox-check {
			.ease-out;
			height: @checkbox-checked-check-height;
			.lh-transform(@checkbox-checked-check-transform);
			transition-delay: @checkbox-checked-check-transition-delay;
			width: @checkbox-checked-check-width;
		}
	}
}