Changeset View
Changeset View
Standalone View
Standalone View
src/resources/themes/menu.scss
#header-menu { | #header-menu { | ||||
background-color: $menu-bg-color; | background-color: $menu-bg-color; | ||||
padding: 0; | padding: 0; | ||||
line-height: 85px; | line-height: 85px; | ||||
.navbar { | |||||
padding-right: 0; | |||||
} | |||||
.navbar-brand { | .navbar-brand { | ||||
padding: 0; | padding: 0 0.5rem; | ||||
outline: 0; | outline: 0; | ||||
margin: 0; | |||||
> img { | > img { | ||||
display: inline; | display: inline; | ||||
vertical-align: middle; | vertical-align: middle; | ||||
} | } | ||||
} | } | ||||
.nav-link { | .nav-link { | ||||
color: #202020; | color: #202020; | ||||
line-height: 85px; | line-height: 85px; | ||||
padding: 0 0 0 25px; | padding: 0 0.5rem 0 0.5rem; | ||||
background: transparent; | background: transparent; | ||||
&:focus { | &:focus { | ||||
text-decoration: underline; | text-decoration: underline; | ||||
outline: 0; | outline: 0; | ||||
} | } | ||||
&:hover { | &:hover { | ||||
Show All 9 Lines | |||||
#footer-menu { | #footer-menu { | ||||
color: $menu-footer-color; | color: $menu-footer-color; | ||||
background-color: $menu-footer-bg-color; | background-color: $menu-footer-bg-color; | ||||
height: 100px; | height: 100px; | ||||
overflow: hidden; | overflow: hidden; | ||||
padding: 0; | padding: 0; | ||||
.navbar { | .container { | ||||
padding-right: 0; | flex-wrap: nowrap; | ||||
} | |||||
.navbar-nav { | |||||
display: flex; | |||||
flex-direction: row; | |||||
} | } | ||||
.navbar-brand { | .navbar-brand { | ||||
margin: 0; | margin: 0; | ||||
padding: 0 0.5rem; | |||||
img { | img { | ||||
width: 170px; | width: 170px; | ||||
} | } | ||||
} | } | ||||
.footer { | .footer { | ||||
text-align: right; | text-align: right; | ||||
font-size: 0.75rem; | font-size: 0.75rem; | ||||
padding: 0 0.5rem; | padding: 0 0.5rem; | ||||
} | } | ||||
} | } | ||||
#language-selector { | #language-selector { | ||||
margin: 2em 0; | margin: 2em 0; | ||||
.dropdown-toggle { | .dropdown-toggle { | ||||
padding-left: 20px; | |||||
line-height: 30px; | line-height: 30px; | ||||
font-weight: lighter; | font-weight: lighter; | ||||
} | } | ||||
.dropdown-item { | .dropdown-item { | ||||
line-height: initial; | line-height: initial; | ||||
} | } | ||||
} | } | ||||
@include media-breakpoint-up(lg) { | @include media-breakpoint-up(lg) { | ||||
#header-menu { | #header-menu { | ||||
a.menulogin { | a.menulogin { | ||||
text-transform: uppercase; | text-transform: uppercase; | ||||
border: 2px solid $main-color; | border: 2px solid $main-color; | ||||
border-radius: 21px; | border-radius: 21px; | ||||
line-height: 21px; | line-height: 21px; | ||||
letter-spacing: 1px; | letter-spacing: 1px; | ||||
padding: 6px 34px; | padding: 6px 34px; | ||||
margin: 25px 0 25px 25px; | margin: 25px 0.5rem 25px 0.5rem; | ||||
&:focus, | &:focus, | ||||
&:hover { | &:hover { | ||||
text-decoration: none; | text-decoration: none; | ||||
background-color: $main-color; | background-color: $main-color; | ||||
color: #fff; | color: #fff; | ||||
font-weight: normal; | font-weight: normal; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.navbar { | |||||
.navbar { | |||||
justify-content: flex-end; | |||||
} | |||||
} | |||||
#footer-menu { | |||||
.navbar { | |||||
flex-direction: column; | |||||
align-items: flex-end; | |||||
} | |||||
} | |||||
} | } | ||||
@include media-breakpoint-down(md) { | @include media-breakpoint-down(lg) { | ||||
#header-menu { | #header-menu { | ||||
.navbar-nav { | .navbar-nav { | ||||
padding-bottom: 1em; | display: block; | ||||
width: 100%; | |||||
padding: 0; | |||||
li { | |||||
border-top: 1px solid #eee; | |||||
} | |||||
} | } | ||||
.nav-link { | .nav-link { | ||||
line-height: 45px; | line-height: 45px; | ||||
padding: 0; | padding: 0; | ||||
} | } | ||||
} | } | ||||
#language-selector { | |||||
margin: 0; | |||||
} | |||||
} | |||||
@include media-breakpoint-down(md) { | |||||
#footer-menu { | #footer-menu { | ||||
height: 80px; | height: 80px; | ||||
.navbar { | |||||
padding-left: 0; | |||||
} | |||||
.navbar-nav { | .navbar-nav { | ||||
display: none; | display: none; | ||||
} | } | ||||
.container { | .container { | ||||
flex-wrap: nowrap; | flex-wrap: nowrap; | ||||
} | } | ||||
} | } | ||||
#language-selector { | |||||
margin: 0; | |||||
.dropdown-toggle:after { | |||||
display: none; | |||||
} | |||||
} | |||||
} | } | ||||
@include media-breakpoint-down(sm) { | @include media-breakpoint-down(sm) { | ||||
#header-menu { | #header-menu { | ||||
padding: 0 1em; | padding: 0 1em; | ||||
.navbar-nav { | |||||
display: block; | |||||
width: 100%; | |||||
padding: 0; | |||||
li { | |||||
border-top: 1px solid #eee; | |||||
} | |||||
} | |||||
} | } | ||||
#footer-menu { | #footer-menu { | ||||
.container { | .container { | ||||
flex-direction: column; | flex-direction: column; | ||||
} | } | ||||
.navbar-brand { | |||||
padding: 0.5rem; | |||||
} | |||||
#footer-company { | #footer-company { | ||||
display: none; | display: none; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
@media (max-width: 340px) { | @media (max-width: 340px) { | ||||
#header-menu { | #header-menu { | ||||
.navbar-brand img { | .navbar-brand img { | ||||
width: 160px; | width: 160px; | ||||
} | } | ||||
} | } | ||||
} | } |