No notes defined.
<nav class="sectionNav">
<div class="wrap">
<div class="sectionNav__inner">
<details class="" open>
<summary id="sectionNav__toggle" class="sectionNav__toggle" aria-controls="sectionNav__list" aria-expanded="false">In this section</summary>
<div>
<ul id="sectionNav__list" class="sectionNav__list">
<li><a href="">Level One Item</a></li>
<li class="current_page_item"><a href="">Selected Item</a></li>
<li><a href="">Level 1 Link</a></li>
<li><a href="">Link at Level one</a></li>
<li><a href="">Level one Item that is quite long</a></li>
<li><a href="">Level 1 Link</a></li>
<li><a href="">Link at Level One</a></li>
<li><a href="">Level One Item</a></li>
</ul>
</div>
</details>
</div>
</div>
</nav>
{% if items %}
<nav class="sectionNav">
<div class="wrap">
<div class="sectionNav__inner">
<details class="" open>
<summary id="sectionNav__toggle" class="sectionNav__toggle" aria-controls="sectionNav__list" aria-expanded="false">In this section</summary>
<div>
{% if title %}
<p class="sectionNav__title">Also in this section:</p>
{% endif %}
<ul id="sectionNav__list" class="sectionNav__list">
{{ items }}
</ul>
</div>
</details>
</div>
</div>
</nav>
{% endif %}
$sectionNav__fullBreakpoint: 40rem;
.sectionNav {
padding: $spacing-lg 0 0;
margin-bottom: $spacing-3xl;
@include line-height('normal');
a,
summary {
&:focus-visible {
outline: none;
box-shadow: inset 0 0 0 0.2rem $secondary;
}
}
&__title {
@include typescale('xs');
color: $grey;
margin: 0 0 $spacing-lg;
}
&__list {
max-width: none;
column-gap: $grid-gutter;
@media (min-width: $wrap-large-gutter-width) {
columns: 15em;
}
@media (min-width: 75em) {
columns: 20em;
}
li {
display: inline-table; // counteracts overflowing columns
margin: 0;
break-inside: avoid-column;
box-sizing: border-box;
width: 100%;
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg,
rgba($grey--light, 1) 80%,
rgba($grey--light, 0) 100%,
) 1; // NB: the '1' here is not a typo, it is critical for border-slice!
}
a {
display: flex;
color: $grey--dark;
padding: $spacing-xs $spacing-sm $spacing-xs 0;
text-decoration: none;
&:hover, &:focus {
text-decoration: underline;
}
&::before {
content: '';
flex: 0 0 1.2em;
display: inline-block;
vertical-align: middle;
width: 1.2em;
height: 1em;
background: center center / contain no-repeat url('#{$assets-directory}/img/rarr-secondary.svg');
margin-top: 0.25em;
margin-inline-end: 0.75em;
transition: transform 150ms ease-in-out;
}
&:hover, &:focus {
&::before {
transform: translateX(0.2em);
}
}
}
}
.current_page_item {
font-weight: bold;
}
&__toggle {
position: relative;
cursor: pointer;
margin: 0 0 $spacing-lg;
padding: $spacing-sm $spacing-xl $spacing-sm 0;
color: $primary;
text-transform: uppercase;
&::after {
content: '';
position: absolute;
top: 0;
right: $spacing-sm;
bottom: 0;
width: $spacing-md;
background: center center / contain no-repeat url('#{$assets-directory}/img/gt-secondary.svg');
transform: rotate(90deg);
transition: transform 200ms ease-in-out;
}
&::marker,
&::-webkit-details-marker {
content: '';
display: none;
}
@media (min-width: $sectionNav__fullBreakpoint) {
@include typescale('xs');
text-transform: none;
color: $grey;
background: none;
padding: 0;
list-style: none;
}
}
details[open] {
.sectionNav__toggle {
&::after {
transform: rotate(-90deg);
@media (min-width: $sectionNav__fullBreakpoint) {
display: none;
}
}
}
}
&__list.is-style-arrow-bullet-columns {
margin-bottom: 0;
}
}