| 1 |
@mixin give-checkbox { |
| 2 |
appearance: none; |
| 3 |
content: ''; |
| 4 |
flex-grow: 0; |
| 5 |
flex-shrink: 0; |
| 6 |
display: flex; |
| 7 |
justify-content: center; |
| 8 |
align-items: center; |
| 9 |
block-size: 1.25rem; |
| 10 |
aspect-ratio: 1; |
| 11 |
@supports not (aspect-ratio: 1) { |
| 12 |
inline-size: 1.25rem; |
| 13 |
} |
| 14 |
border: 0.0625rem solid #b4b9be; |
| 15 |
box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.25); |
| 16 |
background-color: #fff; |
| 17 |
|
| 18 |
&::after { |
| 19 |
content: '\f00c'; |
| 20 |
font-family: 'Font Awesome 5 Free'; |
| 21 |
font-weight: 900; |
| 22 |
opacity: 0; |
| 23 |
transition: opacity 200ms ease-in-out; |
| 24 |
color: var(--give-primary-color); |
| 25 |
} |
| 26 |
|
| 27 |
&:checked::after { |
| 28 |
opacity: 1; |
| 29 |
} |
| 30 |
} |
| 31 |
|
| 32 |
.form-row input[type='checkbox']='checkbox'] { |
| 33 |
@include give-checkbox; |
| 34 |
} |
| 35 |
|
