| // |
| // Main navbar |
| // |
| $primary: #fff; |
| .td-navbar-cover { |
| background: $primary; |
| &.navbar-bg-onscroll .nav-link { |
| text-shadow: none; |
| } |
| } |
| |
| .td-navbar { |
| background: $primary; |
| min-height: 4rem; |
| margin: 0; |
| z-index: 199; |
| display: flex; |
| justify-content: space-between; |
| .navbar-nav-wrapper{ |
| .nav-item { |
| &:last-child{ |
| .nav-link{ |
| &::before{ |
| content:'CN'; |
| background: #F8F9FA; |
| border-radius: 8px; |
| display: inline-block; |
| padding: 1px 3px; |
| margin-right: 4px; |
| } |
| } |
| |
| } |
| } |
| } |
| |
| @include media-breakpoint-up(md) { |
| position: fixed; |
| top: 0; |
| width: 100%; |
| } |
| .navbar-brand { |
| text-transform: none; |
| .nav-link { |
| display: inline-block; |
| margin-right: -30px; |
| } |
| svg { |
| display: inline-block; |
| margin: 0 10px; |
| } |
| img { |
| display: inline-block; |
| margin: 0 10px; |
| } |
| |
| } |
| .nav-link { |
| text-transform: none; |
| font-weight: $font-weight-bold; |
| color: $fontColor; |
| } |
| .td-search-input { |
| border: none; |
| @include placeholder { |
| color: $navbar-dark-color; |
| } |
| } |
| .search-input-box { |
| width: 250px; |
| .link { |
| height: 36px; |
| line-height: 36px; |
| padding-left: 16px; |
| float: right; |
| .link-name { |
| color: #909094; |
| } |
| } |
| } |
| |
| .dropdown { |
| &:hover { |
| .dropdown-menu { |
| visibility: visible; |
| opacity: 1; |
| transform: scaleX(1); |
| } |
| } |
| &-menu { |
| box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12); |
| padding: 15px; |
| border: 0; |
| left: -225px; |
| top: 36px; |
| border-radius: 0; |
| display: block; |
| visibility: hidden; |
| transition: .3s ease; |
| opacity: 0; |
| transform: scale(.8); |
| background: white; |
| &:hover { |
| color: blue; |
| background: white; |
| } |
| &:focus { |
| color: blue; |
| } |
| } |
| } |
| @include media-breakpoint-down(md) { |
| padding-right: .5rem; |
| padding-left: .75rem; |
| .td-navbar-nav-scroll { |
| max-width: 100%; |
| height: 2.5rem; |
| font-size: .875rem; |
| .nav-link { |
| padding-right: .25rem; |
| padding-left: 0; |
| } |
| .navbar-nav { |
| white-space: nowrap; |
| -webkit-overflow-scrolling: touch; |
| } |
| } |
| } |
| } |
| |
| @supports (backdrop-filter:none) or (-webkit-backdrop-filter:none) { |
| .td-navbar { |
| -webkit-backdrop-filter: blur(10px); |
| backdrop-filter: blur(15px); |
| background: hsla(0, 0%, 100%, .8); |
| } |
| } |