Skip to content

Instantly share code, notes, and snippets.

@Tusko
Last active September 26, 2023 13:45
Show Gist options
  • Save Tusko/db4ebadb82b1661247bdce88ec24e61f to your computer and use it in GitHub Desktop.
Save Tusko/db4ebadb82b1661247bdce88ec24e61f to your computer and use it in GitHub Desktop.
css checkbox
.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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment