87 lines
1.6 KiB
Text
87 lines
1.6 KiB
Text
---
|
|
export interface Props {
|
|
isCorrect?: boolean;
|
|
}
|
|
|
|
const { isCorrect } = Astro.props as Props;
|
|
---
|
|
|
|
<li>
|
|
<label>
|
|
<input type="radio" disabled data-is-correct={isCorrect} /><span><slot /></span>
|
|
{
|
|
Astro.slots.has('feedback') && (
|
|
<template>
|
|
<slot name="feedback" />
|
|
</template>
|
|
)
|
|
}
|
|
</label>
|
|
</li>
|
|
|
|
<style>
|
|
label {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
border-radius: 1rem;
|
|
margin-inline: -0.5rem;
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
label:hover {
|
|
background-color: var(--sl-color-accent-low);
|
|
}
|
|
|
|
input[type='radio'] {
|
|
appearance: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type='radio'] ~ * {
|
|
color: var(--sl-color-text-accent);
|
|
}
|
|
|
|
input[type='radio']:checked ~ * {
|
|
color: var(--sl-color-white);
|
|
}
|
|
|
|
input[type='radio']:focus::after {
|
|
outline: 3px solid var(--sl-color-text-accent);
|
|
outline-offset: 0.5rem;
|
|
}
|
|
|
|
input[type='radio']:focus,
|
|
input[type='radio']:not(:focus-visible)::after {
|
|
outline: none;
|
|
}
|
|
|
|
input[type='radio']::after {
|
|
display: block;
|
|
content: '';
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: 1em;
|
|
font-weight: 900;
|
|
border: 2px solid var(--sl-color-accent-high);
|
|
border-radius: 100%;
|
|
color: var(--sl-color-white);
|
|
box-shadow: -3px 3px var(--theme-shade-subtle);
|
|
}
|
|
|
|
input[type='radio']:checked::after {
|
|
color: hsl(var(--color-base-white), 100%);
|
|
background-image: radial-gradient(var(--sl-color-white) 50%, transparent 0%, transparent);
|
|
border-color: var(--sl-color-white);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
input[type='radio']:checked::after {
|
|
background-color: Highlight;
|
|
}
|
|
}
|
|
</style>
|