123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- @use 'sass:math';
- @use '../../settings' as *;
- @use './input-base' as *;
- $size: 1.5rem;
- $marker-size: 1rem;
- $px: 0.0625rem;
- $marker-offset: math.div($size - $marker-size, 2) - $px;
- $radio-checkbox-label-gap: theme('spacing.[2.5]');
- @mixin radio-checkbox-base() {
- display: inline-block;
- position: relative;
- height: $size;
- width: $size;
- cursor: pointer;
- margin-inline-end: $radio-checkbox-label-gap;
-
- flex-shrink: 0;
- @include input-base();
- &::before {
- content: '';
- position: absolute;
- top: $marker-offset;
- inset-inline-start: $marker-offset;
- width: $marker-size;
- height: $marker-size;
- }
- &:checked::before {
- background: theme('colors.border-button-outline-default');
- @media (forced-colors: active) {
- background: Highlight;
- }
- }
- }
- input[type='radio'] {
- @include radio-checkbox-base();
-
- & {
- border-radius: theme('borderRadius.full');
- }
- &:checked::before {
- mask-image: url('#{$images-root}icons/radio-full.svg');
- }
- }
- input[type='checkbox'] {
- @include radio-checkbox-base();
-
- & {
- border-radius: theme('borderRadius.sm');
-
- vertical-align: bottom;
- }
- &:checked::before {
- mask-image: url('#{$images-root}icons/check.svg');
- }
- }
|