MAINHACK

Viewing / Editing File: checkbox.scss

@import "checkbox-api";

// checkbox label
.#{$eps-prefix}checkbox {
	appearance: none;
	border-radius: $eps-checkbox-border-radius;
	width: $eps-checkbox-size;
	height: $eps-checkbox-size;
	outline: 0;
	background-color: var(--checkbox-background-color);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--checkbox-border-color);

&::after {
		display: inline-block;
		margin-bottom: calc(#{$eps-checkbox-indicator-scale-unit} / 2 * 100%);
		content: " ";
		width: $eps-checkbox-indicator-size-unit;
		height: (2 * $eps-checkbox-indicator-size-unit);
		transform: rotate(45deg);
	}

&:hover {
		--checkbox-border-color: var(--checkbox-hover-border-color);
	}

&:active {
		--checkbox-border-color: var(--checkbox-active-border-color);
	}

&:checked {
		--checkbox-background-color: var(--checkbox-checked-background-color);
		--checkbox-border-color: var(--checkbox-checked-background-color);

&::after {
		  border: solid $eps-checkbox-indicator-color;
		  border-width: 0 $eps-checkbox-indicator-border-width $eps-checkbox-indicator-border-width 0;
		}

&:hover {
		  --checkbox-background-color: var(--checkbox-checked-hover-background-color);
		  --checkbox-border-color: var(--checkbox-checked-hover-background-color);
		}

&:active {
		  --checkbox-background-color: var(--checkbox-checked-active-background-color);
		  --checkbox-border-color: var(--checkbox-checked-active-background-color);
		}

&:disabled {
			--checkbox-background-color: var(--checkbox-checked-disabled-background-color);
			--checkbox-border-color: var(--checkbox-checked-disabled-background-color);
		}
	}

&--rounded {
		border-radius: 50%;
	}

&--indeterminate {
		&::after {
			display: inline-block;
			margin-bottom: 0;
			content: " ";
			width: $eps-checkbox-indeterminate-indicator-size-unit;
			height: 0;
			transform: rotate(0deg);
			border-top: $eps-checkbox-indicator-border-width solid $eps-checkbox-indicator-color;
		}

--checkbox-background-color: var(--checkbox-checked-background-color);
		--checkbox-border-color: var(--checkbox-checked-background-color);
	}

&--error,
	&--error:checked {
		&::before,
		&::after {
			display: inline-block;
			margin-bottom: 0;
			content: " ";
			width: $eps-checkbox-indeterminate-indicator-size-unit;
			height: 0;
			border: solid $eps-checkbox-indicator-color;
			border-width: $eps-checkbox-indicator-border-width 0 0 0;
			position: absolute;
		}

&::before {
			transform: rotate(45deg);
		}

&::after {
			transform: rotate(-45deg);
		}

&,
		&:hover {
			--checkbox-background-color: var(--checkbox-error-background-color);
			--checkbox-border-color: var(--checkbox-error-background-color);
		}
	}
}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: checkbox.scss

Server Info

System Features