No notes defined.
<form class="viewModeSwitcher">
<ul class="viewModeSwitcher__list">
<li class="viewModeSwitcher__item">
<input type="radio" name="viewModeSwitcher__radio" id="viewModeSwitcher__grid" value="grid">
<label class="viewModeSwitcher__label" for="viewModeSwitcher__grid" aria-label="View as grid" title="View as grid">
<i class="icon icon--heart" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 16 16" fill="#999" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H7.2V7.2H0V0Z" />
<path d="M0 8.8H7.2V16H0V8.8Z" />
<path d="M8.8 0H16V7.2H8.8V0Z" />
<path d="M8.8 8.8H16V16H8.8V8.8Z" />
</svg>
</i>
<b class="visually-hidden">View as grid</b>
</label>
</li>
<li class="viewModeSwitcher__item">
<input type="radio" name="viewModeSwitcher__radio" id="viewModeSwitcher__list" value="list">
<label class="viewModeSwitcher__label" for="viewModeSwitcher__list" aria-label="View as list" title="View as list">
<i class="icon icon--heart" aria-hidden="true">
<svg width="17" height="16" viewBox="0 0 17 16" fill="#999" xmlns="http://www.w3.org/2000/svg">
<path d="M0.629395 0H3.67701V3.2H0.629395V0Z" />
<path d="M5.20082 0H16.6294V3.2H5.20082V0Z" />
<path d="M0.629395 6.4H3.67701V9.6H0.629395V6.4Z" />
<path d="M5.20082 6.4H16.6294V9.6H5.20082V6.4Z" />
<path d="M0.629395 12.8H3.67701V16H0.629395V12.8Z" />
<path d="M5.20082 12.8H16.6294V16H5.20082V12.8Z" />
</svg>
</i>
<b class="visually-hidden">View as list</b>
</label>
</li>
</ul>
</form>
<form class="viewModeSwitcher">
<ul class="viewModeSwitcher__list">
<li class="viewModeSwitcher__item">
<input type="radio" name="viewModeSwitcher__radio" id="viewModeSwitcher__grid" {{ viewMode == 'grid' ? 'checked="checked"' }} value="grid">
<label class="viewModeSwitcher__label" for="viewModeSwitcher__grid" aria-label="View as grid" title="View as grid">
<i class="icon icon--heart" aria-hidden="true">
{% include '@icon--tiles' %}
</i>
<b class="visually-hidden">View as grid</b>
</label>
</li>
<li class="viewModeSwitcher__item">
<input type="radio" name="viewModeSwitcher__radio" id="viewModeSwitcher__list" {{ viewMode == 'list' ? 'checked="checked"' }} value="list">
<label class="viewModeSwitcher__label" for="viewModeSwitcher__list" aria-label="View as list" title="View as list">
<i class="icon icon--heart" aria-hidden="true">
{% include '@icon--list' %}
</i>
<b class="visually-hidden">View as list</b>
</label>
</li>
</ul>
</form>
.viewModeSwitcher {
&__list {
list-style: none;
margin: 0 0 $spacing-sm;
padding: 0;
display: flex;
gap: $spacing-xs;
}
a {
color: $grey;
}
.icon {
@include typescale('2xl');
}
label {
cursor: pointer;
}
input[type='radio'] {
@include visually-hidden;
&:focus,
&:hover {
+ label {
.icon {
svg {
fill: rgba($tertiary, 0.5);
}
}
}
}
&:checked {
+ label {
.icon {
svg {
fill: $tertiary;
}
}
}
}
}
}