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

working on mobile lang selector

Browse source
This commit is contained in:
Jonas Heinrich 2020-04-29 11:39:02 +02:00
parent 4b401a4623
commit df552d5478
6 changed files with 65 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

57
kit/css/header.css
View file

@ -44,6 +44,7 @@ header .header-logo-container {
color: #333333;
line-height: 1;
flex-grow: 0;
order: 1;
}
header .header-logo-container::after {
@ -51,11 +52,13 @@ header .header-logo-container::after {
}
header .header-button-container {
order: 4;
margin-left: 3.33333rem;
}
header nav {
flex-grow: 1;
order: 3;
}
header:not(.sticky-header) nav {
@ -137,6 +140,33 @@ header:not(.sticky-header) .header-button-container {
z-index: 1;
}
.header-lang-small {
display: flex;
flex-direction: row;
order: 2;
margin-left: 2rem;
display: none;
}
.header-lang-small span:hover {
color: red;
}
.header-lang-small li:not(.active) {
display: none;
}
.header-lang-small li.active {
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
max-width: 2.1ch;
font-weight: 500;
color: #333333;
margin-right: 5px;
text-transform: uppercase;
}
.header-lang {
position: absolute;
top: 5px;
@ -150,7 +180,7 @@ header:not(.sticky-header) .header-button-container {
border-left: 1px solid #333333;
line-height: 1;
display: inline;
padding: 0 8px;
padding: 0 5px 0 8px;
}
.header-lang li:first-child {
@ -158,7 +188,6 @@ header:not(.sticky-header) .header-button-container {
}
.header-lang li span {
line-height: 1rem;
transition: color .3s;
}
@ -229,17 +258,27 @@ header:not(.sticky-header) .header-button-container {
display: block;
margin-top: 4.44444rem;
}
header .header-logo-container {
flex-grow: 1;
}
.header-lang-small {
display: flex;
order: 3;
}
.header-lang {
position: static;
padding: 0.72222rem 0;
margin-right: 10px;
font-size: 18px;
}
.header-lang li {
line-height: initial;
display: none;
}
.header-search {
display: block;
order: 2;
}
.header-button-container {
order: 4;
}
}