basant/src/assets/header.css

163 lines
2.7 KiB
CSS

@define-mixin menu {
position: absolute;
background: var(--background);
box-shadow: var(--shadow);
color: white;
border: 2px solid;
margin: 0;
padding: 10px;
list-style: none;
z-index: 99;
}
.header {
display: flex;
flex-direction: column;
position: relative;
@media print {
display: none;
}
&__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
&__logo {
display: flex;
flex: 1;
&:after {
content: '';
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
display: block;
width: 100%;
right: 10px;
}
a {
flex: 0 0 auto;
max-width: 100%;
text-decoration: none;
}
}
.menu {
--shadow-color: color-mod(var(--background) a(80%));
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
margin: 20px 1px;
@media (--phone) {
@mixin menu;
top: 50px;
right: 0;
}
&__inner {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
&--desktop {
@media (--phone) {
display: none;
}
}
&--mobile {
display: none;
@media (--phone) {
display: block;
}
}
li {
&:not(:last-of-type) {
margin-right: 20px;
margin-bottom: 10px;
flex: 0 0 auto;
}
}
@media (--phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
li {
margin: 0;
padding: 5px;
}
}
}
&__sub-inner {
position: relative;
list-style: none;
padding: 0;
margin: 0;
&:not(:only-child) {
margin-left: 20px;
}
&-more {
@mixin menu;
top: 35px;
left: 0;
&-trigger {
color: var(--accent);
user-select: none;
cursor: pointer;
}
li {
margin: 0;
padding: 5px;
white-space: nowrap;
}
}
}
.spacer {
flex-grow: 1;
}
.language-selector {
position: relative;
list-style: none;
margin: 0;
&-current {
list-style-type: none;
display: flex;
flex-direction: row;
color: var(--accent);
cursor: pointer;
margin: 0;
}
&__more {
@mixin menu;
top: 35px;
right: 0;
}
}
&-trigger {
color: var(--accent);
border: 2px solid;
margin-left: 10px;
height: 100%;
padding: 3px 8px;
position: relative;
}
}
}