.navbar-primary {
@extend .navbar; @extend .navbar-expand-lg; @extend .navbar-dark; background-color: theme-color("secondary"); height: 53px; box-shadow: $navbar-shadow; @include media-breakpoint-up(md) { height: 80px; } .navbar-nav:not(.navbar-icon) { @include media-breakpoint-down(md) { padding: 0 30px; .nav-item + .nav-item { border-top: 1px solid rgba(127, 145, 165, 0.5); } } .nav-link { font-size: 1rem; font-weight: 500; height: 100%; padding-left: $nav-link-padding-x; padding-right: $nav-link-padding-x; display: flex; align-items: center; position: relative; text-transform: capitalize; @include media-breakpoint-down(md) { padding: 0.75rem; font-size: 1.125rem; width: fit-content; } &:after { position: absolute; content: ""; left: $nav-link-padding-x; right: $nav-link-padding-x; bottom: 0; border-bottom: 4px solid theme-color("primary"); width: 0; -webkit-transition: width cubic-bezier(0.83, 0.01, 0.68, 1) 0.3s; -o-transition: width cubic-bezier(0.83, 0.01, 0.68, 1) 0.3s; transition: width cubic-bezier(0.83, 0.01, 0.68, 1) 0.3s; @include media-breakpoint-down(md) { left: 0.75rem; right: 0.75rem; bottom: 12px; } } &:focus:not(.active), &:hover:not(.active) { color: theme-color("primary"); } &.active { color: $white; font-weight: 700; &:after { width: calc(100% - 2.5rem); @include media-breakpoint-down(md) { width: calc(100% - 1.5rem); } } } } } .container { height: 100%; }
}
.navbar-secondary {
&.fixed { position: absolute; z-index: 10; top: 80px; left: 0; right: 0; } .navbar-nav { margin-left: -$nav-secondary-link-padding-x; .nav-link { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; height: 100%; padding: $nav-secondary-link-padding-y $nav-secondary-link-padding-x; position: relative; &:after { display: block; content: attr(title); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; } } .nav-link { &.active, &:focus, &:hover { font-weight: 700; } } }
}
.btn-login {
align-self: stretch; display: flex; align-items: center; padding: 0.7825rem 2rem; text-transform: uppercase; font-weight: 500; font-size: 0.75rem; .icon-user { padding-right: 1.5rem; } @include media-breakpoint-down(md) { background-color: transparent; border-color: transparent; position: absolute; bottom: 54px; right: 0; }
}
.navbar-icon {
@extend .flex-row; @extend .ml-md-auto; @extend .d-flex; padding-right: 1.25rem; @include media-breakpoint-down(md) { position: absolute; bottom: 62px; left: 25px; } .nav-link-icon { color: theme-color("primary"); font-weight: 500; text-transform: uppercase; padding-left: 0.625rem; padding-right: 0; display: -webkit-flex; display: -ms-flex; display: flex; &:hover { opacity: 0.8; } @include media-breakpoint-down(md) { svg { height: 19px; width: auto; } } svg { margin-right: 5px; &.icon-search { margin-right: 10px; } } small { font-weight: 500; font-size: 85.75%; line-height: 0.8; align-self: center; @include media-breakpoint-down(md) { display: none; } } }
}
.navbar-toggler {
border-width: 0;
}
.navbar-brand {
margin-right: 70px; @include media-breakpoint-down(md) { padding-top: 0; margin-right: 0; img { width: 100px; } }
}
.mobile-buttons-group {
display: flex; align-items: center;
}
.navbar-search {
display: flex; padding-right: 1.25rem; background-color: transparent; border: transparent; @include media-breakpoint-up(lg) { display: none; }
}
.navbar-collapse {
@include media-breakpoint-down(md) { background-color: theme-color("secondary"); position: fixed; display: block !important; top: 0; right: 0; bottom: 0; width: 315px; z-index: 2000; height: 100vh; transform: translateX(340px); transition: transform 0.2s ease-in-out; overflow: scroll; -webkit-overflow-scrolling: touch; &.show { transform: translateX(0px); } }
}
.navbar-collapse-header {
height: 53px; display: flex; justify-content: flex-end; padding: 0 1.25rem; @include media-breakpoint-up(lg) { display: none; }
}
.overlay {
background-color: $navy-50; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 1000; display: none; &.show { display: block; }
}
.navbar-collapse-inner {
@include media-breakpoint-down(md) { min-height: 450px; height: 100vh; position: relative; } @include media-breakpoint-up(lg) { width: 100%; display: flex !important; flex-basis: auto; height: 100%; align-items: center; }
} // navs
.nav-tabs {
margin-left: -$nav-tabs-link-padding-x; margin-bottom: 40px; .nav-link { font-size: 0.75rem; font-weight: 500; padding: 12px 0; text-transform: uppercase; position: relative; color: $white; &:after { position: absolute; content: ""; left: $nav-tabs-link-padding-x; right: $nav-tabs-link-padding-x; bottom: 0; border-bottom: 4px solid theme-color("primary"); width: 0; @include transition(width cubic-bezier(0.83, 0.01, 0.68, 1) 0.3s); } &.active, &:focus, &:hover { &:after { width: calc(100% - 1.875rem); @include media-breakpoint-down(xs) { width: 100%; } } } }
}
.nav-tabs.nav-fill {
@include media-breakpoint-down(xs) { .nav-item { width: 100%; } }
}
.dropdown-menu .dropdown-item {
font-size: 12px;
}
dropdown-container {
top: 7px !important; left: -100% !important;
}