mirror of
https://github.com/glitch-soc/mastodon.git
synced 2026-03-29 11:11:11 +02:00
83 lines
2.6 KiB
SCSS
83 lines
2.6 KiB
SCSS
.checkbox {
|
|
--size: 16px;
|
|
--border-width: 1px;
|
|
|
|
appearance: none;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: inline-flex;
|
|
margin: 0;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
vertical-align: top;
|
|
border-radius: calc(var(--size) / 4);
|
|
border: var(--border-width) solid var(--color-border-primary);
|
|
background-color: var(--color-bg-primary);
|
|
transition: 0.15s ease-out;
|
|
transition-property: background-color, border-color;
|
|
cursor: pointer;
|
|
|
|
/* Increase clickable area, prevents misclicks and covers gap between control and label */
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
--spread: calc(var(--border-width) + var(--form-field-label-gap, 8px));
|
|
|
|
inset-inline: calc(-1 * var(--spread));
|
|
inset-block: calc(-0.75 * var(--spread));
|
|
}
|
|
|
|
&:disabled {
|
|
background: var(--color-bg-tertiary);
|
|
border: none;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Tick icon */
|
|
&::before {
|
|
content: '';
|
|
opacity: 0;
|
|
background-color: var(--color-text-on-brand-base);
|
|
display: block;
|
|
margin: auto;
|
|
width: calc(var(--size) * 0.625);
|
|
height: calc(var(--size) * 0.5);
|
|
mask-image: url("data:image/svg+xml;utf8,<svg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.29289 0.292893C8.68342 -0.0976311 9.31643 -0.0976311 9.70696 0.292893C10.0975 0.683418 10.0975 1.31643 9.70696 1.70696L4.20696 7.20696C3.81643 7.59748 3.18342 7.59748 2.79289 7.20696L0.292893 4.70696C-0.0976311 4.31643 -0.0976311 3.68342 0.292893 3.29289C0.683418 2.90237 1.31643 2.90237 1.70696 3.29289L3.49992 5.08586L8.29289 0.292893Z' fill='black'/></svg>");
|
|
mask-position: center;
|
|
mask-size: 100%;
|
|
mask-repeat: no-repeat;
|
|
}
|
|
|
|
/* 'Minus' icon */
|
|
&:indeterminate::before {
|
|
width: calc(var(--size) * 0.5);
|
|
height: calc(var(--size) * 0.125);
|
|
mask-image: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.11111 0C7.60203 0 8 0.447715 8 1C8 1.55228 7.60203 2 7.11111 2H0.888889C0.397969 2 0 1.55228 0 1C0 0.447715 0.397969 0 0.888889 0H7.11111Z' fill='black'/></svg>");
|
|
}
|
|
|
|
&:checked,
|
|
&:indeterminate {
|
|
background-color: var(--color-bg-brand-base);
|
|
border-color: var(--color-bg-brand-base);
|
|
|
|
&:disabled {
|
|
border: none;
|
|
background-color: var(--color-text-disabled);
|
|
|
|
&::before {
|
|
background-color: var(--color-bg-tertiary);
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--outline-focus-default);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|