<input type="checkbox" id="language-status" class="d-none">
<div class="m-lang language-for-open">
<ul class="m-lang__list">
<li class="m-lang__item m-lang__item--active">
<a hreflang="cs-CZ" href="./cz" rel="alternate" class="m-lang__link">
<span class="m-lang__name">CZ</span>
</a>
</li>
<li class="m-lang__item">
<a hreflang="en-EN" href="./en" rel="alternate" class="m-lang__link">
<span class="m-lang__name">EN</span>
</a>
</li>
<li class="m-lang__item">
<a hreflang="sk-SK" href="./sk" rel="alternate" class="m-lang__link">
<span class="m-lang__name">SK</span>
</a>
</li>
</ul>
<label for="language-status" class="m-lang__link m-lang__control">
<span class="m-lang__name">CZ</span>
<i class="m-lang__caret" aria-hidden="true"></i>
</label>
</div>
.m-lang {
$self: &;
$status: '#language-status:checked + .language-for-open';
display: inline-block;
vertical-align: middle;
@media(min-width: breakpoint-min($menu-breakpoint)) {
position: relative;
}
&__list {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
@media(min-width: breakpoint-min($menu-breakpoint)) {
background: color('white');
box-shadow: 0 0 em(8px) color('shadow');
left: 0;
max-height: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: max-height $base-transition ease-in, box-shadow $base-transition;
z-index: 2;
}
}
&__item {
border-left: 1px solid color('gray');
display: inline-block;
margin: 0 0 0 15px;
padding: 0 0 0 15px;
@media(min-width: breakpoint-min($menu-breakpoint)) {
border: 0;
display: block;
margin: 0;
padding: 0;
&--active {
visibility: hidden;
}
}
}
&__control {
display: none;
@media(min-width: breakpoint-min($menu-breakpoint)) {
position: relative;
z-index: 3;
}
}
&__caret {
display: none;
@media(min-width: breakpoint-min($menu-breakpoint)) {
$caret-width: em(3px);
@include caret($caret-width, down);
display: inline-block;
margin-left: $caret-width * .85;
&:after {
transition: transform $base-transition;
}
}
}
&__link {
@include font-size(normal);
@include text-underline(none);
cursor: pointer;
line-height: line-height(large);
&,
&:hover,
&:focus {
color: color('black');
}
@media(min-width: breakpoint-min($menu-breakpoint)) {
display: block;
margin: 5px 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (hover: none) {
@at-root {
#{$status} {
#{$self}__list {
height: auto;
max-height: 160px;
transition: max-height $base-transition ease-out, box-shadow $base-transition;
}
#{$self}__caret {
&:after {
transform: rotate(-180deg);
}
}
}
}
}
@media (hover: hover), all and (-ms-high-contrast: none) {// sass-lint:disable-line no-vendor-prefixes
&:hover {
#{$self}__list {
height: auto;
max-height: 160px;
transition: max-height $base-transition ease-out, box-shadow $base-transition;
}
#{$self}__caret {
&:after {
transform: rotate(-180deg);
}
}
}
}
}