abkommen60jahre.de/navigation.css
2021-10-08 19:22:33 +02:00

142 lines
2.4 KiB
CSS

.navigation {
--mobile-side-margin: 2vw;
position: fixed;
top: 0;
left: var(--mobile-side-margin);
right: var(--mobile-side-margin);
display: flex;
flex-direction: column;
padding: 0 calc(var(--side-padding) - var(--mobile-side-margin));
z-index: 1000;
background-color: var(--primary);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@media print {
.navigation {
display: none;
}
}
@media screen and (min-width: 1024px) {
.navigation {
background-color: transparent;
flex-direction: row;
}
}
.navigation-toggle {
background: transparent;
cursor: pointer;
border: 0;
position: absolute;
right: 6px;
top: 6px;
bottom: 0;
height: 45px;
width: 45px;
padding: 0px;
}
@media screen and (min-width: 1024px) {
.navigation-toggle {
display: none;
}
}
.navigation-toggle-line {
width: 32px;
height: 3px;
border-radius: 1.5px;
background-color: var(--primary-font);
margin: 7px;
position: relative;
transition-property: transform, opacity;
transition-duration: 0.1s;
transition-timing-function: ease;
}
.navigation_open .navigation-toggle-line:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
.navigation_open .navigation-toggle-line:nth-child(2) {
opacity: 0;
}
.navigation_open .navigation-toggle-line:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
.navigation-link,
.navigation-link:visited {
color: var(--primary-font);
text-decoration: none;
display: flex;
align-items: center;
padding: 12px 0px;
}
.navigation-link:hover {
text-decoration: none;
}
@media screen and (min-width: 1024px) {
.navigation-link {
padding: 12px 24px;
}
}
.logo {
margin-right: auto;
background-color: var(--primary);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.logo-image {
height: 35px;
}
.menu {
list-style: none;
display: none;
margin: 0;
padding: 0;
flex-direction: column;
}
.navigation_open .menu {
display: flex;
}
@media screen and (min-width: 1024px) {
.menu {
flex-direction: row;
}
}
@media screen and (min-width: 1024px) {
.menu {
display: flex;
}
}
.menu-item {
background-color: var(--primary);
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@media screen and (min-width: 1024px) {
.menu-item {
margin-left: 12px;
justify-content: center;
}
}