Changeset View
Changeset View
Standalone View
Standalone View
src/resources/sass/menu.scss
| Show All 34 Lines | #header-menu { | ||||
| } | } | ||||
| } | } | ||||
| #footer-menu { | #footer-menu { | ||||
| background-color: $main-color; | background-color: $main-color; | ||||
| height: 100px; | height: 100px; | ||||
| .navbar-brand { | .navbar-brand { | ||||
| margin: 0; | |||||
| img { | img { | ||||
| width: 170px; | width: 170px; | ||||
| } | } | ||||
| } | } | ||||
| .footer { | |||||
| text-align: right; | |||||
| color: #fff; | |||||
| font-size: 0.75rem; | |||||
| padding: 0 0.5rem; | |||||
| } | |||||
| } | } | ||||
| @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 25px 25px; | ||||
| &: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; | ||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| #footer-menu { | |||||
| .navbar { | |||||
| flex-direction: column; | |||||
| align-items: flex-end; | |||||
| } | |||||
| } | |||||
| .navbar { | .navbar { | ||||
| .navbar { | .navbar { | ||||
| justify-content: flex-end; | justify-content: flex-end; | ||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @include media-breakpoint-down(md) { | @include media-breakpoint-down(md) { | ||||
| #header-menu { | #header-menu { | ||||
| .navbar-nav { | .navbar-nav { | ||||
| padding-bottom: 1em; | padding-bottom: 1em; | ||||
| } | } | ||||
| .nav-link { | .nav-link { | ||||
| line-height: 45px; | line-height: 45px; | ||||
| padding: 0; | padding: 0; | ||||
| } | } | ||||
| } | } | ||||
| #footer-menu { | |||||
| .navbar-nav { | |||||
| display: none; | |||||
| } | |||||
| .container { | |||||
| flex-wrap: nowrap; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| @include media-breakpoint-down(sm) { | @include media-breakpoint-down(sm) { | ||||
| #header-menu { | #header-menu { | ||||
| padding: 0 1em; | padding: 0 1em; | ||||
| } | } | ||||
| #footer-menu { | |||||
| height: 80px; | |||||
| .container { | |||||
| flex-direction: column; | |||||
| } | |||||
| #footer-company { | |||||
| display: none; | |||||
| } | |||||
| } | |||||
| } | } | ||||
| @media (max-width: 340px) { | @media (max-width: 340px) { | ||||
| #header-menu { | #header-menu { | ||||
| .navbar-brand img { | .navbar-brand img { | ||||
| width: 160px; | width: 160px; | ||||
| } | } | ||||
| } | } | ||||
| } | } | ||||