onny/web-wordpress-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

further work on language selector on mobile view

Browse source
This commit is contained in:
Jonas Heinrich 2020-04-29 15:48:29 +02:00
parent df552d5478
commit ace2f79fd5
5 changed files with 81 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

44
kit/css/header.css
View file

@ -146,10 +146,22 @@ header:not(.sticky-header) .header-button-container {
order: 2;
margin-left: 2rem;
display: none;
color: #333333;
}
.header-lang-small span:hover {
color: red;
.header-lang-small .icon {
margin-top: 0.05rem;
width: 1.5rem;
height: 1.5rem;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
mask: url('../img/ios-arrow-down.svg') no-repeat center / contain;
background-color: #333333;
}
.header-lang-small .icon.active {
mask: url('../img/ios-arrow-up.svg');
}
.header-lang-small li:not(.active) {
@ -162,11 +174,37 @@ header:not(.sticky-header) .header-button-container {
text-overflow: hidden;
max-width: 2.1ch;
font-weight: 500;
color: #333333;
margin-right: 5px;
text-transform: uppercase;
}
.header-lang-small .dropdown {
position: relative;
display: none;
}
.header-lang-small .dropdown .dropdown-content {
position: absolute;
top: 42px;
left: -120px;
padding: 15px;
background-color: white;
width: 120px;
text-align: right;
text-transform: uppercase;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.63);
}
.header-lang-small .dropdown .dropdown-content li:not(.active) {
display: block;
padding: 5px 0;
font-weight: 500;
}
.header-lang-small .dropdown .dropdown-content li.active {
display: none;
}
.header-lang {
position: absolute;
top: 5px;