<ul class="c-languages" aria-label="Seleziona la lingua del sito">
<li>
<a href="#" aria-label="ita">
<img src="../../images/svgs/flag_it.svg" class="c-language__img" alt="Lingua italiana" aria-hidden="true" />
ita
</a>
</li>
<li>
<a href="#" aria-label="eng">
<img src="../../images/svgs/flag_en.svg" class="c-language__img" alt="English language" aria-hidden="true" />
eng
</a>
</li>
</ul>
<ul class="c-languages" aria-label="Seleziona la lingua del sito">
{{#each languages}}
<li>
<a href="{{ this.url }}" aria-label="{{ this.aria-label }}">
{{#if this.img-path}}
<img src="{{ path this.img-path }}" class="c-language__img" alt="{{ this.img-alt }}" aria-hidden="true" />
{{/if}}
{{ this.text }}
</a>
</li>
{{/each}}
</ul>
{
"languages": [
{
"text": "ita",
"url": "#",
"aria-label": "ita",
"img-path": "/images/svgs/flag_it.svg",
"img-alt": "Lingua italiana"
},
{
"text": "eng",
"url": "#",
"aria-label": "eng",
"img-path": "/images/svgs/flag_en.svg",
"img-alt": "English language"
}
]
}
.c-languages {
li {
display: inline-block;
margin-right: remify(16px);
&:last-child {
margin-right: 0;
}
}
a {
text-transform: uppercase;
text-decoration: none;
font-size: remify(14px);
img {
vertical-align: middle;
position: relative;
top: remify(-2px);
}
}
}
.c-languages__dropdown {
display: none;
position: relative;
@include min-screen(bp(tablet-p)) {
display: inline-block;
}
input,
ul {
display: none;
}
label {
display: flex;
align-items: center;
}
ul.c-languages__dropdown-content {
background: primary(sky, 20);
padding: remify(12px) remify(12px);
border-radius: remify(12px);
line-height: 2;
position: absolute;
z-index: $z-Index-dropdown-lang;
left: remify(2px);
top: remify(32px);
}
input[type="checkbox"]:checked ~ label ul {
display: block;
}
a,
label {
text-transform: uppercase;
color: inherit;
}
input[type="checkbox"]:checked ~ label .chevron--down,
.chevron--up {
display: none;
}
input[type="checkbox"]:checked ~ label .chevron--up,
.chevron--down {
display: inline-block;
}
svg {
fill: currentColor;
// position: relative;
// top: remify(6px);
// right: remify(6px);
}
}
No notes defined.