<div class="language-switch">
<button class="header-button button--white language-switch__link popup-trigger" data-popuptrigger="popup-language-switch" aria-label="vechtsportonline.nl">
NL
<svg class="icon icon button__icon" role="img">
<title>angle down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<dialog class="js--popup language-switch__dialog" data-popup="popup-language-switch" role="alertdialog">
<a class="language-switch__dialog--link" href="fightsportonline.com" aria-label="fightsportonline.com">
ENG
</a>
<a class="language-switch__dialog--link" href="kampfsportonline.de" aria-label="kampfsportonline.de">
DE
</a>
</dialog>
</div>
<div class="language-switch">
<button class="header-button button--white language-switch__link popup-trigger" data-popuptrigger="popup-language-switch" aria-label="{{ language_ariaLabel }}">
{{ languageText }}
{{ render '@icon' icon }}
</button>
<dialog class="js--popup language-switch__dialog" data-popup="popup-language-switch" role="alertdialog">
{{#each languages as |language| }}
<a class="language-switch__dialog--link" href="{{ language.link }}" aria-label="{{ language.link }}">
{{ language.text }}
</a>
{{/each}}
</dialog>
</div>
{
"languageText": "NL",
"language_ariaLabel": "vechtsportonline.nl",
"icon": {
"id": "angle-down",
"title": "angle down",
"class": "icon button__icon"
},
"languages": [
{
"link": "fightsportonline.com",
"text": "ENG",
"class": "fightsportonline_com"
},
{
"link": "kampfsportonline.de",
"text": "DE",
"class": "kampfsportonline_de"
}
]
}
.language-switch {
position: relative;
margin: 0 5px;
display: none;
@include mq($screen-s) {
display: block;
}
&__link {
padding: 0 0.5rem;
color: $gray-button;
font-weight: 500;
border: 0;
border-bottom: 1px solid transparent;
font-family: $font-family-saira;
font-style: normal;
width: auto;
& .icon {
fill: $gray;
width: 14px;
height: 14px;
transform: rotate(0);
transition-duration: 0.3s;
}
}
&.popup--active {
& .language-switch__link {
display: flex;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-color: $gray;
}
& .button--white {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
& .icon {
transform: rotate(180deg);
}
}
&__dialog {
margin: 0;
padding: 9px $spacer--05;
border: 0;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
width: 100%;
box-shadow: 0 4px 6px 0 rgba(51, 51, 51, 0.3);
z-index: 2;
display: none;
&--link {
display: block;
color: $gray;
}
}
}
.popup--active {
.language-switch__dialog {
display: block;
position: absolute;
background: #fff;
}
}
There are no notes for this item.