.navbar {
$bg-nav: rgb(227, 232, 238); $color-nav-primary: rgb(60, 66, 87); $color-nav-primary-ex: #101425; $color-nav: rgb(105, 115, 150); $color-nav-ex: #adb5d0; $color-nav-disabled: #adb5d0; display: flex; background-color: $bg-nav; font-size: 12px; padding: 8px 14px 8px 8px; @media (max-width: $screen-md) { display: block; .navbar-topbar { @include flex-center; } } &, a { color: $color-nav; } .navbar-brand { display: inline-block; color: $color-nav-primary; font-size: 16px; padding: 4px 14px; } .navbar-nav { display: flex; align-items: center; @media (max-width: $screen-md) { display: block; margin-bottom: 10px; .nav-link { display: block; padding: 7px 0; } } } .nav-item.js-active, .nav-item:hover { .nav-link { color: $color-nav-primary-ex; } } .nav-link { padding: 7px 14px; &.disabled { color: $color-nav-disabled; cursor: not-allowed; &:hover { color: $color-nav-ex; } } } &.js-collapse { @media (max-width: $screen-md) { top: 14px; left: 14px; right: 14px; position: fixed; z-index: 20; box-shadow: 0 0 0 1px rgba(136, 152, 170, .1), 0 15px 35px 0 rgba(49, 49, 93, .1), 0 5px 15px 0 rgba(0, 0, 0, .08); } } .navbar-collapse { display: flex; justify-content: space-between; flex-grow: 1; @media (max-width: $screen-md) { display: none; } &.js-collapse { display: flex; justify-content: space-between; flex-grow: 1; @media (max-width: $screen-md) { display: block; padding: 7px 14px 14px; } } } .navbar-toggler { display: none; @media (max-width: $screen-md) { display: block; } border: 0; background-color: transparent; position: relative; @include size(48px); .navbar-toggler-icon { @include absolute-center; &, &:before, &:after { transition: .3s all; background-color: $color-nav-primary; display: block; position: absolute; width: 24px; height: 1px; } &:before { content: ''; top: -7px; left: 0; right: 0; margin-left: auto; margin-right: auto; } &:after { content: ''; bottom: -7px; left: 0; right: 0; margin-left: auto; margin-right: auto; } } &.js-active .navbar-toggler-icon { & { background-color: transparent; } &:before { transform: rotate(45deg); top: 0; } &:after { transform: rotate(-45deg); bottom: 0; } } } &.navbar-type1 { $bg-nav-type1: #1a1f36; $color-nav-primary-type1: #fff; $color-nav-type1: #6c8eef; $color-nav-ex-type1: #b9d2ff; $color-nav-disabled-type1: #9193ce; background: $bg-nav-type1; &, & a { color: $color-nav-type1; } .navbar-brand { color: #fff; } .nav-item.js-active, .nav-item:hover { .nav-link { color: $color-nav-ex-type1; } } .nav-link.disabled, .nav-link.disabled:hover { color: $color-nav-disabled-type1; } .navbar-toggler-icon, .navbar-toggler-icon:before, .navbar-toggler-icon:after { background-color: $color-nav-primary-type1; } .search-input { box-shadow: none; } } &.navbar-type2 { $color-nav-primary-type2: #fff; $color-nav-type2: #e3e0e8; $color-nav-ex-type2: #fff; $color-nav-disabled-type2: #b5b6dc; background: rgb(84,73,255); background: linear-gradient(125deg, rgba(84,73,255,1) 0%, rgba(29,205,255,1) 80%, rgba(166,255,203,1) 100%); &, & a { color: $color-nav-type2; } .navbar-brand { color: $color-nav-primary-type2; } .nav-item.js-active, .nav-item:hover { .nav-link { color: $color-nav-ex-type2; } } .nav-link.disabled, .nav-link.disabled:hover { color: $color-nav-disabled-type2; } .navbar-toggler-icon, .navbar-toggler-icon:before, .navbar-toggler-icon:after { background-color: $color-nav-primary-type2; } .search-input { box-shadow: none; } }
}