refactor: ♻️ use more of the webc feature set proper
This commit is contained in:
Sebin Nyshkim
parent
c0b42b82d0
commit
aa410f916a
21 changed files with 678 additions and 723 deletions
|
|
@ -1,28 +1,28 @@
|
|||
<nav class="character-nav" :aria-label="label">
|
||||
<nav :aria-label="label" webc:root="override">
|
||||
<label for="nav-toggle">
|
||||
<icon icon="bars" webc:nokeep></icon>
|
||||
<icon icon="bars"></icon>
|
||||
</label>
|
||||
<input type="checkbox" id="nav-toggle" />
|
||||
<template
|
||||
webc:nokeep
|
||||
@html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
|
||||
listClass: 'list',
|
||||
listItemClass: 'item',
|
||||
listItemHasChildrenClass: 'hasChildren',
|
||||
activeListItemClass: 'item-active',
|
||||
listClass: 'list',
|
||||
listItemClass: 'item',
|
||||
listItemHasChildrenClass: 'hasChildren',
|
||||
activeListItemClass: 'item-active',
|
||||
|
||||
anchorClass: 'link',
|
||||
activeAnchorClass: 'link-active',
|
||||
anchorClass: 'link',
|
||||
activeAnchorClass: 'link-active',
|
||||
|
||||
activeKey: $data.eleventyNavigation.key,
|
||||
activeKey: $data.eleventyNavigation.key,
|
||||
|
||||
showExcerpt: false
|
||||
})"
|
||||
showExcerpt: false
|
||||
})"
|
||||
></template>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.character-nav {
|
||||
<style webc:scoped="character-nav">
|
||||
:host {
|
||||
--nav-spacing: 1em;
|
||||
--nav-background-color: var(--clr-nav-background);
|
||||
--nav-border: var(--border-thin) solid var(--clr-box-border);
|
||||
|
|
@ -48,99 +48,97 @@
|
|||
@media (min-width: 64em) {
|
||||
--nav-spacing: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(#nav-toggle:checked) {
|
||||
& .list {
|
||||
opacity: 1;
|
||||
}
|
||||
:host:has(#nav-toggle:checked) .list {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
& .item {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
:host:has(#nav-toggle:checked) .item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& label[for='nav-toggle'] {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin-block: 0.75em;
|
||||
margin-inline: 1em;
|
||||
:host label[for='nav-toggle'] {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin-block: 0.75em;
|
||||
margin-inline: 1em;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 35em) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& #nav-toggle {
|
||||
@media (min-width: 35em) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .list {
|
||||
--nav-items-position: absolute;
|
||||
--nav-items-orientation: column nowrap;
|
||||
:host label[for='nav-toggle']:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
position: var(--nav-items-position);
|
||||
top: 3em;
|
||||
:host #nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-flow: var(--nav-items-orientation);
|
||||
:host .list {
|
||||
--nav-items-position: absolute;
|
||||
--nav-items-orientation: column nowrap;
|
||||
|
||||
text-align: end;
|
||||
list-style: none;
|
||||
position: var(--nav-items-position);
|
||||
top: 3em;
|
||||
|
||||
background-color: var(--clr-nav-background);
|
||||
display: flex;
|
||||
flex-flow: var(--nav-items-orientation);
|
||||
|
||||
margin: 0;
|
||||
border: var(--border-thin) solid var(--clr-nav-border);
|
||||
border-block-start: none;
|
||||
border-inline-end: none;
|
||||
border-end-start-radius: 0.75em;
|
||||
padding-inline: var(--nav-spacing);
|
||||
text-align: end;
|
||||
list-style: none;
|
||||
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
background-color: var(--clr-nav-background);
|
||||
|
||||
@media (min-width: 35em) {
|
||||
--nav-items-position: static;
|
||||
--nav-items-orientation: row nowrap;
|
||||
align-items: start;
|
||||
gap: 1em;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
margin: 0;
|
||||
border: var(--border-thin) solid var(--clr-nav-border);
|
||||
border-block-start: none;
|
||||
border-inline-end: none;
|
||||
border-end-start-radius: 0.75em;
|
||||
padding-inline: var(--nav-spacing);
|
||||
|
||||
& .item {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height 0.4s ease-in-out;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
|
||||
@media (min-width: 35em) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .link {
|
||||
display: block;
|
||||
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--clr-nav-link, inherit);
|
||||
|
||||
padding-block: calc(var(--nav-spacing) / 2);
|
||||
|
||||
transition: color 0.4s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-nav-link-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& .link-active {
|
||||
color: var(--clr-nav-link-active);
|
||||
@media (min-width: 35em) {
|
||||
--nav-items-position: static;
|
||||
--nav-items-orientation: row nowrap;
|
||||
align-items: start;
|
||||
gap: 1em;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:host .item {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
transition: height 0.4s ease-in-out;
|
||||
|
||||
@media (min-width: 35em) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:host .link {
|
||||
display: block;
|
||||
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--clr-nav-link, inherit);
|
||||
|
||||
padding-block: calc(var(--nav-spacing) / 2);
|
||||
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
:host .link:hover {
|
||||
color: var(--clr-nav-link-hover);
|
||||
}
|
||||
|
||||
:host .link-active {
|
||||
color: var(--clr-nav-link-active);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue