<div class="minicart">
<button class="header-button button--minicart minicart__link popup-trigger" data-popuptrigger="popup-minicart" aria-label="">
<svg class="icon button__icon" role="img">
<title>custom cart</title>
<use xlink:href="/images/icons-sprite.svg#custom-cart"></use>
</svg>
<span class="counter qty minicart__counter">
<span class="counter-number minicart__counter--qty">
10
</span>
</span>
</button>
</div>
<div class="minicart">
<button class="header-button button--minicart minicart__link popup-trigger" data-popuptrigger="popup-minicart" aria-label="{{ minicart_ariaLabel }}">
{{ render '@icon' icon }}
<span class="counter qty minicart__counter">
<span class="counter-number minicart__counter--qty">
10
</span>
</span>
</button>
</div>
{
"icon": {
"id": "custom-cart",
"title": "custom cart",
"class": "button__icon"
}
}
.minicart {
& .button--minicart {
position: relative;
margin: 0 0 0 5px;
}
&__link {
border: 0;
&.popup-button--active {
display: flex;
}
}
&__counter {
position: absolute;
right: -7px;
top: -7px;
&--qty {
display: block;
padding: 0.3rem;
background-color: $gray-button;
border-radius: 12px;
color: $white;
font-size: 0.857rem;
font-weight: 500;
min-width: 20px;
height: 20px;
}
&--hidden {
@include visually-hidden();
}
}
}
There are no notes for this item.