mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 11:41:20 +01:00
58 lines
1.2 KiB
SCSS
58 lines
1.2 KiB
SCSS
@use 'sass:math';
|
|
|
|
// 24px input widget size.
|
|
$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]');
|
|
|
|
// Both input types are very similar in appearance and layout.
|
|
@mixin radio-checkbox-base() {
|
|
@include input-base();
|
|
display: inline-block;
|
|
position: relative;
|
|
height: $size;
|
|
width: $size;
|
|
cursor: pointer;
|
|
margin-inline-end: $radio-checkbox-label-gap;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: $marker-offset;
|
|
inset-inline-start: $marker-offset;
|
|
width: $marker-size;
|
|
height: $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;
|
|
|
|
&:checked::before {
|
|
mask-image: url('#{$images-root}icons/tick.svg');
|
|
}
|
|
}
|