{% set mainNavbarBreakpoint = "lg" %} // // Variables // $main-navbar-search-height: 40px !default; $main-navbar-search-bg: $white !default; $main-navbar-search-color: $gray-900 !default; $main-navbar-search-placeholder-color: $gray-600 !default; $main-navbar-search-border-radius: 50rem !default; // // Main navbar // .main-navbar { .dropdown-toggle { display: flex; align-items: center; } .dropdown-toggle::after { width: .75em; height: .75em; margin-left: .255em; background-repeat: no-repeat; background-size: .75em; border: 0; transition: transform .2s ease-in-out; } .show > .dropdown-toggle::after { transform: rotate(-180deg); } // Search .navbar-search { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: $zindex-fixed; width: 100%; height: 100%; transform: translateY(-100%); visibility: hidden; opacity: 0; transition: transform .3s ease-in-out, visibility .3s ease-in-out, opacity .3s ease-in-out; @include media-breakpoint-up(md) { right: $grid-gutter-width * .5; left: $grid-gutter-width * .5; // stylelint-disable-next-line function-calc-no-invalid width: calc(100% - #{$grid-gutter-width}); } @include media-breakpoint-up(lg) { left: calc(50% - 250px); width: 500px; } &.open { transform: translateY(0); visibility: visible; opacity: 1; } .navbar-search-form { width: 100%; height: $main-navbar-search-height; background-color: $main-navbar-search-bg; @include border-radius($main-navbar-search-border-radius); @include box-shadow($box-shadow-sm); .form-control { width: 100%; height: $main-navbar-search-height; color: $main-navbar-search-color; line-height: $main-navbar-search-height; background-color: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; &::placeholder { color: $main-navbar-search-placeholder-color; } } &.row > :first-child > :first-child { @include border-left-radius($main-navbar-search-border-radius); } &.row > :last-child > :last-child { @include border-right-radius($main-navbar-search-border-radius); } } } &.navbar-search-open { .navbar-brand, .navbar-search-toggler, .navbar-collapse-toggler, .navbar-collapse { visibility: hidden; opacity: 0; transition: visibility .3s ease-in-out, opacity .3s ease-in-out; } } &.navbar-search-hidden { .navbar-brand, .navbar-search-toggler, .navbar-collapse-toggler, .navbar-collapse { visibility: visible; opacity: 1; transition: visibility .3s ease-in-out, opacity .3s ease-in-out; transition-delay: .3s; } } // Themes &.navbar-light { .dropdown-toggle::after { background-image: escape-svg(url("data:image/svg+xml,")); } .dropdown-toggle:hover::after { background-image: escape-svg(url("data:image/svg+xml,")); } .dropdown-toggle.active::after, .show > .dropdown-toggle::after { background-image: escape-svg(url("data:image/svg+xml,")); } .btn-link { color: $navbar-light-color; } .btn-link:hover, .btn-link:focus { color: $navbar-light-hover-color; } } &.navbar-dark { .dropdown-toggle::after { background-image: escape-svg(url("data:image/svg+xml,")); } .dropdown-toggle:hover::after { background-image: escape-svg(url("data:image/svg+xml,")); } .dropdown-toggle.active::after, .show > .dropdown-toggle::after { background-image: escape-svg(url("data:image/svg+xml,")); } .btn-link { color: $navbar-dark-color; } .btn-link:hover, .btn-link:focus { color: $navbar-dark-hover-color; } } } const mainNavbar = document.querySelector('#mainNavbar'); const mainNavbarSearch = document.querySelector('#mainNavbarSearch'); const mainNavbarSearchOpen = document.querySelector('#mainNavbarSearchOpen'); const mainNavbarSearchClose = document.querySelector('#mainNavbarSearchClose'); if (mainNavbar !== null) { mainNavbarSearchOpen.addEventListener('click', () => { mainNavbar.classList.remove('navbar-search-hidden'); mainNavbar.classList.add('navbar-search-open'); $('#mainNavbarCollapse').collapse('hide'); mainNavbarSearch.classList.add('open'); }); mainNavbarSearchClose.addEventListener('click', () => { mainNavbarSearch.classList.remove('open'); mainNavbar.classList.remove('navbar-search-open'); mainNavbar.classList.add('navbar-search-hidden'); setTimeout(() => { mainNavbar.classList.remove('navbar-search-hidden'); }, 500); }); }