autogenerating sidebar links
This commit is contained in:
parent
1546fa8199
commit
6f5cbd21aa
13 changed files with 522 additions and 34 deletions
87
src/components/Option.astro
Normal file
87
src/components/Option.astro
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
---
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue