File: /www/wwwroot/www.cytocare.cn/wp-content/themes/peakshops/assets/sass/header/_header.scss
.logo-holder {
display: inline-flex;
flex-shrink: 0;
.logolink {
display: inline-flex;
position: relative;
align-items: center;
}
.logoimg {
max-height: 40px;
object-fit: contain;
@include min-break($break-small) {
max-height: 40px;
}
}
}
.header {
display: flex;
align-items: center;
flex-wrap: wrap;
top: 0;
left: 0;
width: 100%;
user-select: none;
background: #fff;
@extend .admin-style;
// Header Margins
.woocommerce-account &,
.woocommerce-cart &,
.woocommerce-checkout & {
margin-bottom: 20px;
@include min-break($break-medium) {
margin-bottom: 40px;
}
}
.header-logo-row {
width: 100%;
padding: 15px 0;
>.row {
width: 100%;
>.columns {
display: flex;
align-items: center;
}
}
}
.header-menu-row {
width: 100%;
display: none;
>.row>.columns {
display: flex;
align-items: center;
&.text-right {
justify-content: flex-end;
}
}
}
&.mobile-header-style1 {
@include max-break($break-medium - 1) {
.thb-secondary-area {
.thb-secondary-item {
&:not(.thb-quick-cart) {
display: none;
}
+.thb-secondary-item {
margin: 0;
}
svg {
height: 24px;
}
}
}
}
.mobile-logo-column {
display: flex;
align-items: center;
@include max-break($break-medium - 1) {
text-align: center;
.logo-holder,
.fixed-logo-holder {
margin: 0 auto;
}
}
}
.header-menu-row>.row>.columns {
@include max-break($break-medium - 1) {
display: flex;
}
}
}
&:not(.fixed) {
.thb-header-border-on & {
.header-menu-row {
position: relative;
&:after {
content: '';
display: block;
width: 100%;
height: 1px;
max-width: 1170px;
position: absolute;
background: rgba(#000,0.07);
left: 50%;
bottom: 0;
@include translateX(-50%);
}
}
}
}
&.header-full-width {
&>.row {
max-width: 100%;
padding: 0 10px;
}
}
&.thb-header-full-width-on {
.header-logo-row,
.header-menu-row {
&>.row {
max-width: 100%;
padding: 0 10px;
@include min-break($break-medium) {
padding: 0 15px;
}
}
}
}
&.style1 {
&.dark-header {
border-bottom: 0;
}
.header-menu-row {
padding: 10px 0;
position: relative;
>.row>.columns {
justify-content: space-between;
}
}
.thb-header-inline-search {
margin-left: 50px;
.rtl & {
margin-left: 0;
margin-right: 50px;
}
}
@include min-break($break-medium) {
.header-menu-row {
display: block;
}
.header-logo-row {
padding: 30px 0 10px;
}
}
} // .style1
&.style2 {
@include min-break($break-medium) {
.header-menu-row {
display: block;
}
.logo-holder {
margin: 0 auto;
}
.header-logo-row {
padding: 25px 0;
}
}
.header-menu-row {
text-align: center;
padding: 5px 0;
.thb-header-border-on & {
&:before {
content: '';
display: block;
width: 100%;
height: 1px;
max-width: 1170px;
position: absolute;
background: rgba(#000,0.07);
left: 50%;
top: 0;
@include translateX(-50%);
}
}
}
&.thb-header-full-width-on {
.header-menu-row {
.thb-header-border-on & {
&:before {
max-width: 100%;
}
}
}
}
.thb-navbar {
display: inline-flex;
margin: 0 auto;
}
} // .style2
&.style3 {
@include min-break($break-medium) {
.thb-navbar {
display: inline-flex;
}
.logo-holder {
margin: 0 auto;
}
.header-logo-row {
padding: 25px 0;
}
}
.thb-header-border-on & {
border-bottom: 1px solid rgba(#000,0.07);
}
&.dark-header {
.thb-header-border-on & {
border-bottom-color: rgba(#fff,0.1);
}
}
} // .style3
&.style4 {
.thb-navbar {
margin-left: 35px;
display: none;
@include min-break($break-medium) {
display: inline-flex;
}
.rtl & {
margin-left: 0;
margin-right: 35px;
}
}
@include min-break($break-medium) {
.header-logo-row {
padding: 25px 0;
}
}
.thb-header-border-on & {
border-bottom: 1px solid rgba(#000,0.07);
}
&.dark-header {
.thb-header-border-on & {
border-bottom-color: rgba(#fff,0.1);
}
}
} // .style4
&.style5 {
.header-logo-row {
>.row {
>.columns {
display: flex;
justify-content: space-between;
}
}
}
.thb-header-inline-search {
max-width: none;
display: none;
.woocommerce-product-search {
max-width: none;
}
@include min-break($break-medium) {
display: inline-flex;
margin: 0 30px;
}
}
.thb-style5-logo-wrapper {
display: inline-flex;
align-items: center;
flex-shrink: 0;
.mobile-toggle-holder {
display: none;
@include min-break($break-medium) {
display: inline-flex;
margin-right: 20px;
.rtl & {
margin-right: 0;
margin-left: 20px;
}
}
}
}
.thb-secondary-area {
white-space: nowrap;
}
.thb-header-border-on & {
border-bottom: 1px solid rgba(#000,0.07);
}
&.dark-header {
.thb-header-border-on & {
border-bottom-color: rgba(#fff,0.1);
}
}
} // .style5
&.style6 {
@include min-break($break-medium) {
.header-menu-row {
display: block;
}
.header-logo-row {
padding: 30px 0;
}
}
.thb-right-column {
display: flex;
flex-direction: column;
align-items: flex-end;
.thb-header-inline-search {
margin-top: 10px;
margin-left: auto;
.woocommerce-product-search {
width: auto;
max-width: none;
margin-left: auto;
}
}
}
} // .style6
&.fixed {
background: #fff;
position: fixed;
z-index: 150;
padding: 15px 0;
@include transition(transform .5s $transition);
@include translateY(-100%);
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
pointer-events: none;
@extend .quick-transition;
}
.header-menu-row {
display: block;
}
.thb-navbar {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.fixed-logo-holder {
display: inline-flex;
align-items: center;
.logo-holder {
@include min-break($break-medium) {
margin-left: 20px;
}
.rtl & {
margin-left: 0;
margin-right: 20px;
}
}
.mobile-toggle-holder {
display: none;
@include min-break($break-medium) {
display: flex;
}
}
}
&.fixed-style1 {
.thb-header-inline-search {
margin-left: 50px;
.rtl & {
margin-left: 0;
margin-right: 50px;
}
}
}
&.fixed-style2 {
.thb-navbar {
display: none;
margin-left: 35px;
.thb-full-menu .sub-menu {
top: 100%;
}
@include min-break($break-medium) {
display: inline-flex;
}
.rtl & {
margin-left: 0;
margin-right: 35px;
}
}
}
&.fixed-enabled:not(.headroom--unpinned) {
@include translateY(0%);
.open-cc & {
@include translateY(-100%);
}
}
&.thb-fixed-shadow-style1:before {
@include box-shadow(0 2px 5px rgba(0,0,0,0.07));
}
&.thb-fixed-shadow-style2:before {
@include box-shadow(0 9px 38px rgba(0,0,0,0.05), 0 5px 12px rgba(0,0,0,0.1));
}
&.thb-fixed-shadow-style3:before {
@include box-shadow(0 19px 38px rgba(0,0,0,0.1), 0 5px 22px rgba(0,0,0,0.15));
}
&.headroom--not-top.headroom--pinned {
&:before {
opacity: 1;
}
}
&.light-header {
&:after {
content: '';
height: 1px;
width: 100%;
background: rgba(#000,0.08);
position: absolute;
bottom: 0;
left: 0;
pointer-events: none;
}
}
} // .fixed
}
// Dark Header.
.header.dark-header {
background: $black;
.mobile-toggle-holder {
strong {
color: #fff;
}
.mobile-toggle span {
background: #fff;
}
.mobile-toggle>span:before,
.mobile-toggle>span:after {
background: #fff;
}
}
.thb-full-menu {
>.menu-item {
>a {
color: #fff;
}
}
}
.thb-header-border-on & {
.header-menu-row {
&:after {
background: rgba(#fff,0.1);
}
}
}
.woocommerce-product-search {
background: #fff;
border-color: #fff;
}
.thb-secondary-area {
.thb-secondary-item {
.thb-item-text,
.thb-cart-amount .amount {
color: #fff;
}
svg {
fill: #fff;
&.thb-cart-icon {
&.thb-cart-icon-style1 {
stroke: #fff;
fill: transparent;
}
&.thb-cart-icon-style5,
&.thb-cart-icon-style6 {
path {
stroke: #fff;
}
}
}
}
}
}
}