/* Navigation
--------------------------------------------- */
@import "navbar";
/* Top Header
--------------------------------------------- */
@import "top-header";
/* Logo
--------------------------------------------- */
@import "site-logo";
/* Search
--------------------------------------------- */
@import "search";
/* Social Icons
--------------------------------------------- */
@import "social";
$logo-scroll-height: 34px;
.site-header {
transition: transform 300ms;
width: 100%;
z-index: 9999;
border-bottom: 1px solid rgba(13,14,13,0.15);
.scroll-logo {
display: none;
}
.header-logo {
width: 100%;
z-index: 999;
transition: all 300ms;
}
.navbar-toggler {
padding: 0;
&:hover, &:active {
border: none;
}
}
.search-toggler {
position: relative;
z-index: 8;
}
.header-wrap {
position: relative;
.navbar-brand, .bastet-header-social {
z-index: 2;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
&.show {
width: 100%;
z-index: 999;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
.header-logo-wrap {
min-height: 80px;
}
.site-logo {
display: none;
&.scroll-logo {
display: block;
}
}
}
&.fixed-mode {
width: 100%;
z-index: 99;
}
&.smart-mode {
width: 100%;
top:0; left: 0;
z-index: 2;
&.show {
.site-logo {
display: none;
&.scroll-logo {
display: block;
}
}
.header-logo {
padding: 0;
.site-logo {
max-height: $logo-scroll-height;
}
}
}
}
&.is-watching {
.header-logo {
transform: translate3d(0,-100%,0);
padding: 9px 0;
.site-logo {
max-height: $logo-scroll-height;
}
}
}
}
.site-header.transparent {
position: absolute;
width: 100%;
top: 0; left: 0;
z-index: 9;
&.show {
.header-logo {
padding: 0;
position: fixed;
top: 0;
.site-logo {
max-height: $logo-scroll-height;
}
}
}
}
.site-header.light {
&.show {
.header-logo {
padding: 0;
position: fixed;
top: 0;
.site-logo {
max-height: $logo-scroll-height;
}
}
}
}
.site-header.solid {
.d-flex {
align-items: center;
}
&.with-search {
.empty {
display: none;
}
}
&.is-watching, &.show {
.header-logo {
top: 0;
}
}
}
.search .site-header.light {
margin-bottom: 0;
}
.admin-bar {
.site-header {
&.transparent,&.show, &.is-init {
top: 32px;
}
&.transparent.show {
.header-logo {
top: 32px;
}
}
&.solid.is-watching, &.solid.show {
.header-logo {
top: 32px;
}
}
}
.site-header.light.show {
.header-logo {
top: 32px;
}
}
}
.header--spacing {
.site-header {
margin-bottom: 60px;
}
}
.header--divider {
.site-header {
border-bottom-color: rgba(0, 0, 0, 0.15);
}
}
.header--shadow {
.site-header {
box-shadow: $box-shadow__main;
}
}
.header--dark {
.site-header {
background-color: #000;
}
}
/* Light Header
--------------------------------------------- */
@import "light";
/* Large Header
--------------------------------------------- */
@import "large";