File: /home/e/x/h/exhehbu/www/wp-content/themes/revolution/assets/sass/_header.scss
.header {
display: flex;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
padding: 15px 0;
user-select: none;
@extend .admin-style;
@include transition(background .25s $transition, padding .25s $transition);
@include ie11() {
justify-content: center;
>.row {
width: 100%;
margin: 0;
flex: none !important;
}
}
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
@extend .quick-transition;
}
.fixed-header-on & {
position: fixed;
}
@include min-break($break-small) {
padding: 60px 0;
}
.row {
flex: 1;
.columns {
display: flex;
align-items: center;
}
}
.mobile-toggle-holder {
display: inline-flex;
}
.thb-borders-on & {
@include min-break($break-small) {
margin-top: 10px;
}
}
&.light-header {
@extend .white-header;
}
&.hide-header-items {
border-color: transparent !important;
.mobile-toggle-holder,
.full-menu,
.button,
.socials,
.thb-header-secondary,
.header-secondary-text,
#quick_cart,
.music_toggle {
opacity: 0 !important;
pointer-events: none;
}
}
&.hide-secondary-items {
.secondary-area {
opacity: 0 !important;
pointer-events: none;
}
}
&.fixed {
padding: 15px 0;
background: #fff;
margin-top: 0 !important;
@extend .quick-transition;
@include min-break($break-small) {
padding: 20px 0;
}
.open-search & {
background: transparent !important;
}
&.light-header {
background: $black;
}
&.thb-fixed-shadow-style1:before {
@include box-shadow(0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.15));
}
&.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));
}
&:not(.headroom--unpinned) {
&:before {
opacity: 1;
}
}
}
&.headroom--unpinned {
@include translateY(-100%);
.header-style1-open &,
.open-search & {
@include translateY(0);
}
}
}
.logolink {
display: flex;
position: relative;
.logoimg {
max-height: 40px;
@extend .quick-transition;
&.logo-light {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
&[src$=".svg"] {
max-height: 100%;
height: 40px;
}
}
}
.subheader + .header.style1 {
.header_overlay_menu {
@include translateY( calc( -100% - 40px ) );
}
}
.header {
&.style1 {
.logo-holder {
margin-right: 10%;
.rtl & {
margin-right: 0;
margin-left: 10%;
}
}
.mobile-toggle-holder {
flex-direction: row-reverse;
strong {
margin-left: 20px;
margin-right: 0;
@include min-break($break-small) {
margin-left: 30px;
}
.rtl & {
margin-left: 0;
margin-right: 20px;
@include min-break($break-small) {
margin-left: 0;
margin-right: 30px;
}
}
}
}
.style1-holder {
display: flex;
flex: 1;
justify-content: space-between;
}
.header_overlay_menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 80px 0 65px;
background: $black;
@include translateY(-100%);
.rtl & {
left: auto;
right: 0;
}
.header_overlay_padding {
padding-top: 40px;
.header-full-width-on & {
.row {
max-width: none;
}
}
}
.logo-holder {
visibility: hidden;
margin-right: 10%;
.rtl & {
margin-right: 0;
margin-left: 10%;
}
}
.header_overlay_menu_holder {
flex: 1;
}
.thb-secondary-menu-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 50px;
padding: 35px 0 0;
position: relative;
font-size: 14px;
.thb-secondary-line {
display: block;
height: 1px;
background: rgba(#fff,0.8);
position: absolute;
top: 0;
left: 0;
right: 0;
transform-origin: 0 0;
@include scale(0,1);
}
.menu {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
@include ie11() {
margin-right: auto;
}
li {
display: inline-flex;
margin-right: 20px;
a:not(:hover) {
color: rgba(#fff,0.6);
}
.rtl & {
margin-right: 0;
margin-left: 20px;
}
}
}
.thb-full-menu.socials {
a {
padding: 0;
&:not(:hover) {
color: rgba(#fff,0.6);
}
}
}
} /* End .thb-secondary-menu-container */
} // .header_overlay_menu
} /* Style 1 - End */
&.style2 {
.columns {
justify-content: space-between;
}
.mobile-toggle-holder {
@include min-break($break-medium) {
display: none;
}
}
} /* Style 2 - End */
&.style3 {
.columns {
justify-content: space-between;
>div:last-child {
flex: 1;
text-align: right;
.rtl & {
text-align: left;
}
}
}
#full-menu {
margin-right: 30px;
@include min-break($break-medium) {
visibility: hidden;
}
.thb-full-menu {
&>li {
opacity: 0;
}
}
}
} /* Style 3 - End */
&.style4 {
.columns {
justify-content: space-between;
position: relative;
}
#full-menu {
position: absolute;
top: 50%;
left: 50%;
@include translate3d(-50%, -50%, 0);
}
.mobile-toggle-holder {
display: inline-flex;
@include min-break($break-medium) {
display: none;
}
}
} /* Style 4 - End */
&.style5,
&.center-logo {
.columns {
justify-content: space-between;
position: relative;
}
.logo-holder {
@include min-break($break-medium) {
position: absolute;
top: 50%;
left: 50%;
@include translate3d(-50%, -50%, 0);
}
}
.mobile-toggle-holder {
display: inline-flex;
@include min-break($break-medium) {
display: none;
}
}
} /* Style 5 - End */
&.style6 {
.columns {
justify-content: space-between;
position: relative;
}
.logo-holder {
position: absolute;
top: 50%;
left: 50%;
@include translate3d(-50%, -50%, 0);
}
.mobile-toggle-holder {
display: inline-flex;
flex-direction: row-reverse;
strong {
margin-left: 30px;
margin-right: 0;
}
&.style2 .mobile-toggle span {
left: 0;
right: auto;
}
}
} /* Style 6 - End */
&.style7 {
.style7-label {
display: none;
}
.mobile-toggle-holder {
@include min-break($break-small) {
display: none;
}
}
.logo-holder {
display: inline-flex;
@include min-break($break-small) {
margin: 0 auto;
}
}
.secondary-area {
margin-left: auto;
}
@include min-break($break-small) {
left: 70px;
width: auto;
right: 0;
}
} /* Style 7 - End */
&.style8 {
padding: 20px 0;
align-items: center;
justify-content: center;
.open-cc & {
background: #fff;
}
.mobile-toggle-holder strong {
display: none;
}
@include min-break($break-small) {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 6vw;
}
} /* Style 8 - End */
&.style9 {
.columns {
justify-content: space-between;
div:last-child {
text-align: right;
}
}
} /* Style 9 - End */
&.style10 {
.small-12.columns {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-holder.style10-logo {
@include min-break($break-medium) {
visibility: hidden;
display: none;
}
}
.full-menu {
position: relative;
}
.thb-full-menu {
.logo-holder {
display: flex;
justify-content: center;
align-items: center;
.logolink {
display: block;
}
}
>li>a {
display: flex;
align-items: center;
}
}
.mobile-toggle-holder {
@include min-break($break-medium) {
display: none;
}
}
} /* Style 10 - End */
&.style11 {
.style11-content {
display: flex;
align-items: center;
.thb-full-menu {
margin-left: 40px;
@include min-break($break-medium) {
margin-left: 60px;
}
.rtl & {
margin-left: 0;
margin-right: 40px;
@include min-break($break-medium) {
margin-left: 0;
margin-right: 60px;
}
}
}
}
.columns {
justify-content: space-between;
}
.mobile-toggle-holder {
@include min-break($break-medium) {
display: none;
}
}
} /* Style 11 - End */
&.style12 {
flex-direction: column;
justify-content: center;
align-items: stretch;
>.row {
width: 100%;
>.columns {
justify-content: space-between;
}
&:first-child {
@include min-break($break-medium) {
padding-bottom: 25px;
}
.secondary-area {
@include min-break($break-medium) {
#quick_cart,
.thb-search-holder,
.mobile-toggle-holder {
display: none;
}
}
}
}
+ .row {
display: none;
position: relative;
padding-top: 5px;
@include min-break($break-medium) {
display: flex;
}
&:before {
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -50vw;
display: block !important;
width: 100vw;
height: 1px;
background: rgba(#000, 0.15);
}
}
}
&.fixed {
.row {
&:first-child {
padding-bottom: 15px;
}
}
.thb-full-menu>li>a:not(.logolink) {
padding: 10px 0;
}
.thb-full-menu.thb-underline>li>a:before {
top: calc(100% - 7px);
}
}
} /* Style 12 - End */
&.style1,
&.style2,
&.style3,
&.style4,
&.style5,
&.style6,
&.style9,
&.style10,
&.style11 {
.header-full-width-on & {
&>.row {
max-width: none;
}
}
}
}
.white-header {
.logoimg {
opacity: 0;
&.logo-light {
opacity: 1;
}
}
.mobile-toggle span,
.thb-full-menu.thb-underline>li>a:before,
.thb-full-menu.thb-line-through>li>a:before,
.music_toggle span {
background: #fff;
}
.mobile-toggle-holder.style4 .mobile-toggle>span:before,
.mobile-toggle-holder.style4 .mobile-toggle>span:after {
background: #fff;
}
.thb-full-menu>li>a:not(:hover),
.thb-full-menu.thb-underline>li>a:hover,
.thb-full-menu.thb-line-marker>li>a:hover,
.thb-full-menu.thb-line-through>li>a:hover {
color: #fff;
}
.header-secondary-text {
svg {
path,
circle,
rect,
ellipse {
stroke: #fff;
}
}
p {
color: #fff;
}
a {
color: #fff;
}
}
.secondary-text,
.mobile-toggle-holder strong,
#quick_cart {
color: #fff;
}
.thb-search-holder svg{
fill: #fff;
}
#quick_cart svg g {
stroke: #fff;
}
&.style12>.row+.row:before {
background: rgba(#fff, 0.15);
}
}
/* Overlay Menu */
.thb-header-menu {
display: inline-block;
margin: 5px 0 0;
padding: 0;
list-style: none;
line-height: 1;
position: relative;
li {
>a {
display: block;
white-space: nowrap;
@include transition(color .25s $transition);
&:not(:hover) {
color: rgba(#fff,0.6);
}
}
&.menu-item-has-children {
position: relative;
}
.sub-menu {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: 100%;
top: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
display: flex;
align-items: center;
a {
margin-right: 20px;
}
.rtl & {
left: auto;
right: 100%;
a {
margin-right: 0;
margin-left: 20px;
}
}
}
}
&>li {
padding: 15px 0;
&>a {
font-size: 26px;
min-width: 250px;
display: flex;
align-items: center;
}
&.menu-item-has-children {
padding-right: 30px;
.rtl & {
padding-right: 0;
padding-left: 30px;
}
&>a {
span {
display: inline-flex;
margin-left: 30px;
position: relative;
align-items: center;
@include transition(transform .25s $transition);
.rtl & {
margin-left: 0;
margin-right: 30px;
}
&:before {
content: '';
display: inline;
width: 30px;
height: 1px;
background: $color2;
opacity: 0;
@include transform-origin(0 0);
@include transform(scale(0,1) translateX(0px));
@extend .quick-transition;
}
&:after {
display: inline-flex;
content: "\f105";
font-family: FontAwesome;
vertical-align: middle;
font-size: 18px;
.rtl & {
content: "\f104";
}
}
}
} // a
&:hover>a,
&.sfHover>a {
color: $color2;
span {
@include translateX(4px);
&:after {
color: $color2;
}
.rtl & {
@include translateX(-4px);
}
}
span:before {
opacity: 1;
@include transform(scale(1,1) translateX(5px));
.rtl & {
@include transform(scale(1,1) translateX(-5px));
}
}
}
}
}
}
/* Full Menu */
.full-menu {
display: none;
vertical-align: middle;
@include min-break($break-medium) {
display: inline-flex;
}
}
.thb-full-menu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
&.thb-language-switcher {
margin-left: 20px;
@include max-break($break-medium) {
display: none;
}
>li>a {
text-transform: capitalize;
}
.rtl & {
margin-left: 0;
margin-right: 20px;
}
}
&.thb-standard {
&>li {
&.current-menu-item:not(.has-hash) {
&>a {
color: $color2;
}
}
}
}
&.thb-underline {
&>li {
>a {
position: relative;
&:before {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
top: calc(100% - 17px);
height: 1px;
background: $color1;
@include transform-origin(right,center);
@include scale(0,1);
@include transition(transform .25s $transition);
}
&:hover {
color: $black;
&:before {
@include transform-origin(left,center);
@include scale(1,1);
}
}
}
&.current-menu-item>a {
color: $black;
&:before {
@include transform-origin(left,center);
@include scale(1,1);
}
}
}
}
&.thb-line-through {
&>li {
>a {
position: relative;
&:before {
content: '';
display: block;
position: absolute;
left: -5px;
width: calc(100% + 10px);
top: calc(50% - 1px);
height: 2px;
background: $color1;
@include transform-origin(right,center);
@include scale(0,1);
@include transition(transform .25s $transition);
}
&:hover {
color: $black;
&:before {
@include transform-origin(left,center);
@include scale(1,1);
}
}
}
&.current-menu-item>a {
color: $black;
&:before {
@include transform-origin(left,center);
@include scale(1,1);
}
}
}
}
&.thb-line-marker {
&>li {
>a {
position: relative;
&:before {
content: '';
display: block;
position: absolute;
left: -2px;
width: calc(100% + 4px);
top: 50%;
height: 20%;
background: $color2;
z-index: -1;
@include transform-origin(0, 0);
@include scale(1,0);
@include transition(transform .25s $transition);
}
&:hover {
color: $black;
&:before {
@include transform-origin(0, 100%);
@include scale(1,1);
}
}
}
}
&.current-menu-item>a {
color: $black;
&:before {
@include transform-origin(0, 100%);
@include scale(1,1);
}
}
}
&.socials {
margin-left: 30px;
.rtl & {
margin-left: 0;
margin-right: 30px;
}
li {
& + li {
margin-left: 10px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
}
}
}
&>li {
display: inline-flex;
& + li {
margin-left: 30px;
.rtl & {
margin-left: 0;
margin-right: 30px;
}
}
a:not(.logolink) {
padding: 20px 0;
&[data-filter] {
&.active {
color: $color2;
}
}
}
&.logo-menu-item {
padding: 0 35px;
}
}
li {
margin: 0;
white-space: nowrap;
&.menu-item-has-children {
position: relative;
&:hover {
overflow: visible;
}
&>a {
&:after {
display: inline-flex;
content: "\f107";
font-family: FontAwesome;
margin-left: 10px;
font-size: 11px;
.rtl & {
margin-left: 0;
margin-right: 10px;
}
}
}
}
}
.sub-menu {
padding: 30px 0;
margin: 0;
list-style: none;
background: $black;
position: absolute;
text-align: left;
min-width: calc(100% + 60px);
top: 100%;
left: -30px;
opacity: 0;
visibility: hidden;
z-index: 2;
@include backface-visibility(hidden);
.rtl & {
left: auto;
right: -30px;
text-align: right;
}
li {
display: block;
padding: 0 30px;
margin-bottom: 15px;
font-size: 13px;
line-height: 1.1;
&:last-child {
margin-bottom: 0;
}
a {
display: block;
color: #fff;
padding: 0;
opacity: 0;
&:hover {
color: #bfbfbf;
}
}
&.menu-item-has-children {
position: relative;
>a:after {
content: "\f105";
.rtl & {
content: "\f104";
}
}
}
&.title-item {
&>a {
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
&:after {
display: none;
}
.thb-dropdown-style1 & {
padding-top: 10px;
}
.thb-dropdown-style3 & {
padding-top: 9px;
padding-bottom: 14px;
margin-bottom: 9px;
font-size: 14px;
text-transform: none;
font-weight: 400;
border-bottom: 1px solid rgba(#000, 0.13);
&:before {
display: none;
}
}
.thb-dropdown-color-dark.thb-dropdown-style2 & {
border-bottom: 1px solid rgba(#fff, 0.13);
}
}
} /* .title-item */
}
.sub-menu {
top: -30px;
left: 100%;
z-index: 10;
.rtl & {
left: 0;
right: 100%;
}
&.is_right {
left: auto;
right: 100%;
}
.sub-menu {
z-index: 15;
}
}
.thb-dropdown-color-light & {
background: #fff;
li {
a {
color: $color1;
}
}
}
.thb-dropdown-style2 & {
border-radius: 4px;
padding: 0;
left: 50%;
border: 1px solid rgba(#000,0.12);
@include box-shadow(0 4px 18px rgba(#000,0.06));
@include translateX(-50%);
&:after {
bottom: 100%;
left: 50%;
content: " ";
height: 12px;
width: 12px;
position: absolute;
pointer-events: none;
background: #fff;
border-radius: 2px;
border-top: 1px solid rgba(#000,0.12);
border-right: 1px solid rgba(#000,0.12);
@include transform(translate3d(-50%,50%, 0) rotate(-45deg));
}
>li {
display: block;
padding: 0;
margin: 0;
border-top: 1px solid rgba(#000,0.12);
a {
display: flex;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
padding: 0 24px;
min-height: 50px;
align-items: center;
}
&:first-child {
border-top-color: transparent;
}
}
.sub-menu {
top: 1px;
left: 100%;
@include translateX(0%);
&.is_right {
left: auto;
right: 100%;
}
&:after {
display: none;
}
li.menu-item-has-children {
display: flex;
}
}
} // .thb-dropdown-style2
.thb-dropdown-color-dark.thb-dropdown-style2 & {
border-color: rgba(#fff,0.1);
&:after {
background: $black;
border-color: rgba(#fff,0.1);
}
>li {
border-color: rgba(#fff,0.1);
}
} // .thb-dropdown-color-dark.thb-dropdown-style2
.thb-dropdown-style3 & {
left: 50%;
@include box-shadow(0 4px 18px rgba(#000,0.06));
@include translateX(-50%);
border-top: 3px solid $color2;
&:after {
bottom: 100%;
left: 50%;
content: '';
width: 0;
height: 0;
border-style: solid;
margin-left: -7px;
border-color: transparent;
border-bottom-color: $color2;
border-width: 7px;
position: absolute;
pointer-events: none;
z-index: -1;
}
>li {
overflow: visible;
a {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
position: relative;
line-height: 1.2;
}
}
.sub-menu {
top: -33px;
left: 100%;
@include translateX(0%);
&:after {
display: none;
}
&.is_right {
left: auto;
right: 100%;
}
}
} // .thb-dropdown-style3
} // .sub-menu
li.menu-item-mega-parent {
&>.sub-menu {
display: none;
flex-wrap: nowrap;
&>li {
flex: 1;
.thb-dropdown-style2 & {
border-top: 0;
}
+ li {
.thb-dropdown-style2 & {
border-left: 1px solid rgba(#000, 0.12);
}
.thb-dropdown-color-dark.thb-dropdown-style2 & {
border-left: 1px solid rgba(#fff, 0.1);
}
}
a {
opacity: 1;
}
&.menu-item-has-children {
&>.sub-menu {
padding-top: 20px;
padding-bottom: 0;
opacity: 1 !important;
position: static;
visibility: visible !important;
box-shadow: none;
min-width: 100%;
background: none;
.thb-dropdown-style2 &,
.thb-dropdown-style3 & {
padding: 0;
}
.thb-dropdown-style2 & {
border: 0;
border-radius: 0;
}
.thb-dropdown-style3 & {
border: 0;
margin-top: 15px;
}
.thb-dropdown-style2 & {
border-top: 1px solid rgba(#000, 0.12);
}
.thb-dropdown-color-dark.thb-dropdown-style2 & {
border-top: 1px solid rgba(#fff, 0.1);
}
&>li {
padding: 0;
&.menu-item-has-children {
&>a {
&:after {
content: "\f105";
}
}
}
}
}
}
&.mega-menu-title {
&>a {
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
&:after {
display: none;
}
.thb-dropdown-style3 & {
padding-bottom: 14px;
margin-bottom: 9px;
font-size: 14px;
text-transform: none;
font-weight: 400;
border-bottom: 1px solid rgba(#000, 0.13);
&:before {
display: none;
}
}
.thb-dropdown-color-dark.thb-dropdown-style3 & {
border-bottom: 1px solid rgba(#fff, 0.13);
}
}
} /* .mega-menu-title */
}
}
} //.menu-item-mega-parent
}
/* Secondary Area */
.secondary-area {
display: inline-flex;
align-items: center;
vertical-align: middle;
&>div + div,
&>ul + div,
&>ul + ul,
&>div + ul,
&>a + div {
margin-left: 20px;
.rtl & {
margin-left: 0;
margin-right: 20px;
}
}
.thb-header-button,
.thb-search-holder,
.socials,
.quick_cart,
.thb-header-secondary,
.header-secondary-text {
@include max-break($break-medium) {
display: none;
}
}
}
/* Secondary Text */
.header-secondary-text {
margin: 0 0 0 30px;
.rtl & {
margin: 0 30px 0 0;
}
li {
display: inline-flex;
align-items: center;
& + li {
margin-left: 20px;
@include min-break($break-medium) {
margin-left: 30px;
}
}
}
svg {
height: 32px;
width: auto;
margin-right: 15px;
path,
circle,
rect,
ellipse {
stroke: $black;
}
@include min-break($break-medium) {
margin-right: 20px;
}
.rtl & {
margin-right: 0;
margin-left: 15px;
@include min-break($break-medium) {
margin-right: 0;
margin-left: 20px;
}
}
}
div {
p {
color: $black;
font-weight: 500;
margin: 0;
line-height: 1;
&.smaller {
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
}
& + p.smaller {
margin-top: 5px;
}
}
}
& + .thb-full-menu.socials {
margin-left: 20px;
}
}
/* Header Button */
.thb-header-button {
margin-left: 20px;
.rtl & {
margin-left: 0;
margin-right: 20px;
}
}
/* Search */
.thb-search-holder {
display: inline-flex;
cursor: pointer;
position: relative;
margin-left: 20px;
.rtl & {
margin-left: 0;
margin-right: 20px;
}
span {
height: 1px;
display: block;
width: 16px;
position: absolute;
left: 0;
top: 50%;
background: #fff;
@include transform-origin(center);
&:nth-child(1) {
@include transform(rotateZ(45deg) scale(0,1));
}
&:nth-child(2) {
@include transform(rotateZ(-45deg) scale(0,1));
}
}
.hide-header-items & {
svg {
opacity: 0;
}
}
}
/* Search */
.thb-search-popup {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
color: #fff;
background: $black;
z-index: 90;
padding: 40px 0;
@include translateY(-100%);
@extend .admin-style;
@include min-break($break-small) {
padding: 100px 0;
}
.search-header-spacer {
display: block;
width: 100%;
pointer-events: none;
}
.row {
width: 100%;
}
.searchform {
position: relative;
.searchform-bar {
display: block;
height: 1px;
background: rgba(#fff,0.8);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 40;
transform-origin: 0 0;
@include scale(0,1);
}
}
fieldset {
opacity: 0;
margin-top: 40px;
}
.s {
font-size: 36px;
font-weight: 400;
border-top: 0;
border-left: 0;
border-right: 0;
padding-top: 0;
padding-bottom: 0;
height: 80px;
color: #fff;
background: transparent;
padding-left: 0;
border-radius: 0;
@include input-placeholder {
color: rgba(#fff, 0.4);
}
&:focus,
&:active {
background: transparent;
color: #fff;
}
}
.submit {
text-align: right;
svg {
fill: #fff;
}
}
.thb-header-style-style7 & {
@include min-break($break-small) {
left: 70px;
width: calc(100% - 70px);
}
}
}
/* Header Style 8 */
.header-style-8-content {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
height: auto;
@include ie11() {
height: 100%;
}
&>.row {
margin: 35px -10px 0;
padding: 0;
@include min-break($break-small) {
margin: 35px -15px 0;
}
@include min-break($break-medium) {
margin: 35px -20px 0;
}
}
.sub-menu {
display: none;
}
.mobile-menu-bottom {
flex: none !important;
}
}
/* Cart Icon */
#quick_cart {
display: inline-flex;
align-items: center;
cursor: pointer;
color: $color1;
margin-left: 20px;
.rtl & {
margin-left: 0;
margin-right: 20px;
}
svg {
display: block;
height: 22px;
width: 23px;
overflow: visible;
position: relative;
bottom: 2px;
g {
stroke-width: 4;
}
}
.float_count {
font-size: 14px;
margin-left: 4px;
font-weight: 500;
.rtl & {
margin-left: 0;
margin-right: 4px;
}
}
}
/* Music Toggle */
.music_toggle {
display: inline-flex;
width: 20px;
height: 14px;
justify-content: center;
align-items: flex-end;
margin-left: 20px;
.rtl & {
margin-left: 0;
margin-right: 20px;
}
span {
display: inline-flex;
margin: 0 1px;
width: 2px;
height: 7px;
background: $black;
&:nth-child(1) {
height: 10px;
}
&:nth-child(2) {
height: 6px;
}
&:nth-child(3) {
height: 13px;
}
&:nth-child(4) {
height: 8px;
}
}
&.on {
span {
&:nth-child(1) {
@include animation(music-bar 2s 1s ease-out alternate infinite);
}
&:nth-child(2) {
@include animation(music-bar 2s 0.5s ease-out alternate infinite);
}
&:nth-child(3) {
@include animation(music-bar 2s 1.5s ease-out alternate infinite);
}
&:nth-child(4) {
@include animation(music-bar 2s 0.25s ease-out alternate infinite);
}
}
}
}
@include keyframes(music-bar) {
0% { height:6px; }
10% { height:10px; }
20% { height:6px; }
30% { height:14px; }
40% { height:18px; }
50% { height:6px; }
60% { height:16px; }
70% { height:10px; }
80% { height:12px; }
90% { height:4px; }
100% { height:18px; }
}