pkg-components
Version:
60 lines (53 loc) • 1.09 kB
CSS
.container {
display: grid;
align-items: center;
cursor: pointer;
position: relative;
transition: 1s cubic-bezier(0.4, 0, 0.23, 1);
}
.label {
display: flex;
align-items: center;
margin: 0.6em 0;
color: #9e9e9e;
position: relative;
transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
}
.label::before {
content: '';
display: inline-block;
margin-right: 1em;
width: 2em;
height: 2em;
min-width: 2em;
border-radius: 50%;
border: 2px solid #9e9e9e;
background: transparent;
transition: 200ms ease-in-out;
box-sizing: border-box;
position: relative;
}
.checked::before {
border: 10px solid var(--color-primary-red);
}
.checked::after {
content: '';
position: absolute;
left: 0.5em;
top: 0.5em;
width: 1em;
height: 1em;
border-radius: 50%;
background: white;
z-index: 1;
transition: background 250ms ease-in-out, transform 250ms ease-in-out;
}
.disabled {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
.input {
width: 0;
height: 0;
}