mars-interface/src/components/common/Checkbox/Checkbox.module.scss
2023-01-31 16:46:56 +01:00

37 lines
753 B
SCSS

@import 'src/styles/master';
.container {
display: flex;
align-items: center;
cursor: pointer;
.checkbox {
appearance: none;
margin-right: space(3);
cursor: pointer;
font: inherit;
width: 1rem;
height: 1rem;
border: 1.5px solid $alphaWhite40;
border-radius: $borderRadiusXS;
display: grid;
place-content: center;
&::before {
content: '';
width: 0.5rem;
height: 0.5rem;
clip-path: polygon(14% 44%, 0% 65%, 40% 95%, 100% 26%, 85% 10%, 38% 62%);
transform: scale(0);
transform-origin: center center;
transition: 100ms transform ease-in-out;
box-shadow: inset 1rem 1rem $colorWhite;
}
&:checked::before {
transform: scale(1);
}
}
}