nicola/resumarkdown
1
0
Fork 0
Code

added focus/hover states to nav items

Browse Source
This commit is contained in:
Nicola Clark 2024-10-11 01:45:12 -05:00
parent defd5621bb
commit a24618a873
Signed by: nicola
GPG Key ID: 3E1710E7FF08956C
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/components/nav-item.svelte
View File

@ -3,6 +3,8 @@
export let destination: Pane; export let destination: Pane;
$: selected = destination === $pane;
function handleKey({ key }: KeyboardEvent) { function handleKey({ key }: KeyboardEvent) {
if (key === ' ' || key === 'Enter' || key === 'Spacebar') { if (key === ' ' || key === 'Enter' || key === 'Spacebar') {
navigate(); navigate();
@ -16,9 +18,10 @@
<li <li
aria-controls={`pane-${$pane}`} aria-controls={`pane-${$pane}`}
aria-selected={destination === $pane} aria-selected={selected}
role="tab" role="tab"
tabindex="0" tabindex="0"
class:selected
on:click={navigate} on:click={navigate}
on:keyup={handleKey} on:keyup={handleKey}
> >
@ -31,6 +34,16 @@
margin: 0; margin: 0;
padding: @padding-md; padding: @padding-md;
text-align: center; text-align: center;
transition: background-color 0.2s;
}
li.selected {
background-color: darken(@color-light, 20%);
}
li:focus,
li:hover {
background-color: darken(@color-light, 10%);
} }
li:not(:last-of-type) { li:not(:last-of-type) {