// // navbar.scss // Extended from Bootstrap // #conv-nav { .navbar { transition: $transition-base; transition-property: background-color, color; z-index: $zindex-fixed; &.blured { // // background: $opacity-gray-9; -webkit-backdrop-filter: $backdrop-filter; backdrop-filter: $backdrop-filter; background: $opacity-gray-9; } } // Dark version .navbar-dark { @include media-breakpoint-down(md) { .navbar-nav .nav-item .nav-link { color: $navbar-light-color; &:hover, &:focus { color: $navbar-light-hover-color; } } .navbar-nav .nav-item.active .nav-link, .navbar-nav .nav-item .nav-link.active { color: $navbar-light-active-color; } .navbar-collapse .navbar-toggler { color: $navbar-light-color; } } } // Contaner .navbar > .container, .navbar > .container-fluid { padding-left: $grid-gutter-width / 2 !important; padding-right: $grid-gutter-width / 2 !important; } // Brand .navbar-brand { font-weight: $navbar-brand-font-weight; } .navbar-brand-img { max-height: $navbar-brand-height; width: auto; } .navbar-dark .navbar-brand { filter: brightness(0) invert(1); } // change nav links and logo color if shouldStayTransparent class .navbar-dark.shouldStayTransparent { .navbar-nav .nav-link { filter: brightness(0.1) invert(1); } .navbar-brand { filter: brightness(1) invert(1); } } // Button .navbar-btn { @include media-breakpoint-down(md) { width: 100%; padding: $btn-padding-y $btn-padding-x; border-top-left-radius: 0; border-top-right-radius: 0; font-size: $btn-font-size; } } // Navigation .navbar-nav .nav-link { font-weight: $navbar-nav-link-font-weight; @include hover-focus { outline: none; } } // Boxed layout .navbar-dark.fixed-top > .container { position: relative; &::after { content: ''; position: absolute; right: 0; bottom: -$navbar-padding-y; left: 0; border-top: $border-width solid fade-out($white, 0.8); } } // Collapse @include media-breakpoint-down(md) { .navbar-collapse { position: fixed; top: $spacer; left: $spacer; height: auto; max-height: calc(100% - #{$spacer * 2}) !important; width: calc(100% - #{$spacer * 2}); background-color: $dropdown-bg; border-radius: $dropdown-border-radius; box-shadow: $box-shadow-dark-lg; overflow-x: hidden; overflow-y: scroll; } // Animation .navbar-collapse.show, .navbar-collapse.collapsing { transition: $transition-base; transition-property: opacity, transform, -webkit-transform; transform-origin: top right; } .navbar-collapse.show { opacity: 1; transform: scale(1); } .navbar-collapse.collapsing { opacity: 0; transform: scale(0.9); } } // Toggler .navbar .navbar-toggler { margin-left: auto; } .navbar-collapse .navbar-toggler { position: absolute; top: $spacer; right: $spacer; z-index: 1; @include media-breakpoint-up(lg) { display: none; } } // Navigation .navbar-collapse .navbar-nav .nav-item { @include media-breakpoint-down(md) { padding: $navbar-nav-item-spacing; + .nav-item { border-top: $border-width solid $gray-200; } } } .navbar-collapse .navbar-nav .nav-link { @include media-breakpoint-down(md) { padding-top: 0; padding-bottom: 0; } } // Dropdown menu .navbar-nav .dropdown-menu { box-shadow: none; @include media-breakpoint-up(lg) { box-shadow: $box-shadow-dark-lg; } } .navbar-collapse .navbar-nav .dropdown-menu { @include media-breakpoint-down(md) { min-width: 0; padding: 0; } } .navbar-collapse .navbar-nav .dropdown > .dropdown-menu { @include media-breakpoint-down(md) { display: block !important; } } .navbar-collapse .navbar-nav .dropright > .dropdown-menu { @include media-breakpoint-down(md) { padding-top: $spacer; padding-bottom: $spacer; padding-left: $spacer / 2; } } // Dropdown item .navbar-collapse .navbar-nav .dropdown-item, .navbar-collapse .navbar-nav .dropdown-header { @include media-breakpoint-down(md) { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } // Dropdown toggle .navbar-nav .dropdown > .dropdown-toggle { &::after { display: none; } } .navbar-collapse .navbar-nav .dropdown > .dropdown-toggle { @include media-breakpoint-down(md) { margin-bottom: $navbar-dropdown-toggle-margin-bottom; pointer-events: none; } } .navbar-nav .dropright > .dropdown-toggle { display: flex; &::after { margin-left: auto; } } .navbar-collapse .navbar-nav .dropright > .dropdown-toggle { @include media-breakpoint-down(md) { &::after { content: '\e92e'; } &[aria-expanded='true']::after { transform-origin: center center; transform: rotate(180deg); } } } // Dropdown image .navbar-nav .dropdown-img-left { height: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; padding: $dropdown-padding-y $dropdown-padding-x; background: no-repeat center center / cover; border-top-left-radius: $border-radius; border-bottom-left-radius: $border-radius; @include media-breakpoint-up(lg) { display: flex; } // Overlay &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: fade-out($primary, 0.2); border-radius: inherit; } // Content * { position: relative; } } .navbar-nav .dropdown-menu-lg .dropdown-img-left, .navbar-nav .dropdown-menu-xl .dropdown-img-left { @include media-breakpoint-up(lg) { padding: $dropdown-padding-y-lg $dropdown-padding-x-lg; } } // Dropdown body .navbar-nav .dropdown-body { @include media-breakpoint-up(lg) { padding: $dropdown-padding-y $dropdown-padding-x; } } .navbar-nav .dropdown-menu-lg .dropdown-body, .navbar-nav .dropdown-menu-xl .dropdown-body { @include media-breakpoint-up(lg) { padding: $dropdown-padding-y-lg $dropdown-padding-x-lg; } } // Dropdown list group .navbar-nav .dropdown-menu .list-group-item { display: flex; align-items: center; padding-top: $spacer; padding-bottom: $spacer; color: inherit; @include hover { text-decoration: none; } } // Toggle dropdown on hover @include media-breakpoint-up(lg) { .navbar-nav .dropdown-menu { display: none; opacity: 0; transition: $transition-base; transition-property: opacity, transform, -webkit-transform; } .navbar-nav .dropright > .dropdown-menu { transform: translateY(10px); } .navbar-nav .dropdown > .dropdown-menu { left: 50%; transform: translate(-50%, 10px); } .navbar-nav .dropdown-menu.showing { display: block; } .navbar-nav .dropdown-menu.show { display: block; opacity: 1; } .navbar-nav .dropright > .dropdown-menu.show { transform: translateY(0); } .navbar-nav .dropdown > .dropdown-menu.show { transform: translate(-50%, 0); } } }