Spaces:
Running
Running
File size: 1,524 Bytes
77fd7a1 cf9641a 77fd7a1 cf9641a 77fd7a1 cf9641a 77fd7a1 cf9641a 77fd7a1 cf9641a 77fd7a1 cf9641a 77fd7a1 cf9641a 77fd7a1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | @import '../_variables.css';
.checkboxWrapper {
display: flex;
align-items: center;
margin-bottom: 0;
}
.checkboxLabel {
display: flex;
align-items: center;
cursor: pointer;
font-family: 'Inter', sans-serif;
color: var(--text-color-secondary);
}
.checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.customCheckbox {
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--border-color-default);
border-radius: 3px;
background-color: transparent;
transition: background-color 0.15s ease-in-out, border-color 0.3s ease-in-out;
margin-right: 4px;
box-sizing: border-box;
}
.checkboxLabel:hover .customCheckbox {
border-color: var(--text-color-hover);
}
.checkboxLabel:hover .labelText {
color: var(--text-color-hover);
}
.checkbox:checked + .customCheckbox {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.checkbox:not(:checked) + .customCheckbox {
transition: background-color 0.15s ease-in-out 0.3s, border-color 0.15s ease-in-out 0.3s;
}
.checkmarkIcon {
width: 100%;
height: 100%;
}
.checkmarkPath {
stroke-dasharray: 30;
stroke-dashoffset: 30;
transition: stroke-dashoffset 0.2s ease-out 0.15s;
}
.checkbox:checked + .customCheckbox .checkmarkPath {
stroke-dashoffset: 0;
}
.labelText {
color: var(--text-color-secondary);
transition: color 0.4s ease-in-out;
}
.checkbox:checked ~ .labelText {
color: var(--text-color-primary);
} |