css checkbox

checkbox.scss

.input-checkbox {
	border              : 1px solid map-get($colors, 'ocean');
	position            : relative;
	transition-duration : 200ms;
	-webkit-appearance  : none;
	appearance          : none;
	width               : 24px;
	height              : 24px;
	&::after {
		transition-duration : 100ms;
		content             : "";
		display             : block;
		box-sizing          : border-box;
		position            : absolute;
		left                : 3px;
		top                 : 0;
		width               : 8px;
		height              : 12px;
		border-width        : 0 0 0 0;
		border-style        : solid;
		transform-origin    : bottom left;
		@include transform(rotate(45deg));
	}
	&:checked {
		border-color : map-get($colors, 'active');
		&::after {
			border-width : 0 2px 2px 0;
			top          : -4px;
			height       : 15px;
			width        : 9px;
		}
	}
}