Files
web/components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css

114 lines
1.7 KiB
CSS

.desktop {
display: none;
}
.container {
position: relative;
font-family:
Helvetica Neue,
Helvetica,
Arial,
sans-serif;
}
.toggle {
display: flex;
color: #fff;
padding: 3px 15px;
font-size: 14px;
border: none;
background-color: transparent;
margin: 0 auto;
cursor: pointer;
gap: 4px;
align-items: center;
}
.hiddenAccessible {
display: block;
position: absolute;
left: -100000em;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 5px dashed;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.icon {
width: 18px;
height: 18px;
vertical-align: -4px;
margin-right: 3px;
fill: #fff;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 100;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 16px;
text-align: left;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
.li {
cursor: pointer;
}
.dropdown.isOpen {
display: block;
}
.link {
clear: both;
color: grey;
display: block;
font-weight: 400;
padding: 3px 20px;
white-space: nowrap;
text-decoration: none;
}
.link:hover {
background-color: #f5f5f5;
color: #737373;
text-decoration: none;
}
.active > .link {
background-color: #00838e;
color: #fff;
outline: 0;
text-decoration: none;
}
@media (min-width: 950px) {
.desktop {
display: block;
}
}