kopia lustrzana https://github.com/wagtail/wagtail
63 wiersze
1.4 KiB
SCSS
63 wiersze
1.4 KiB
SCSS
|
@use 'sass:math';
|
||
|
|
|
||
|
|
$size: 30;
|
||
|
|
$marker-size: 18;
|
||
|
|
$marker-offset: math.div($size - $marker-size, 2) - 1;
|
||
|
|
$radio-checkbox-label-gap: theme('spacing.[2.5]');
|
||
|
|
$radio-checkbox-line-gap: theme('spacing.[2.5]');
|
||
|
|
|
||
|
|
// Both input types are very similar in appearance and layout.
|
||
|
|
@mixin radio-checkbox-base() {
|
||
|
|
@include input-base();
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
height: rem($size);
|
||
|
|
width: rem($size);
|
||
|
|
cursor: pointer;
|
||
|
|
margin-inline-end: $radio-checkbox-label-gap;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: rem($marker-offset);
|
||
|
|
inset-inline-start: rem($marker-offset);
|
||
|
|
width: rem($marker-size);
|
||
|
|
height: rem($marker-size);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:checked::before {
|
||
|
|
background: $color-teal;
|
||
|
|
|
||
|
|
@media (forced-colors: active) {
|
||
|
|
background: Highlight;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type='radio'] {
|
||
|
|
@include radio-checkbox-base();
|
||
|
|
display: inline-block;
|
||
|
|
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');
|
||
|
|
// Legacy alignment for checkboxes, particularly within listings.
|
||
|
|
vertical-align: bottom;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
// Checkboxes look better with a slightly larger offset.
|
||
|
|
top: rem($marker-offset + 1);
|
||
|
|
inset-inline-start: rem($marker-offset + 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:checked::before {
|
||
|
|
mask-image: url('#{$images-root}icons/tick.svg');
|
||
|
|
}
|
||
|
|
}
|