| DIR: /home/otwalrll/karismamodernkitchen.com/wp-content/themes/martfury/css/ |
| Current File : /home/otwalrll/karismamodernkitchen.com/wp-content/themes/martfury/css/header.scss |
.top-promotion {
.promotion-content {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
.close {
margin-left: 25px;
font-size: 16px;
display: block;
cursor: pointer;
&:hover {
color: $dark;
}
}
.promo-link {
display: flex;
align-items: center;
}
.link {
background-color: #f14705;
color: #fff;
padding: 0 17px;
transition: all 0.5s;
font-weight: 600;
text-align: center;
border: none;
height: 35px;
line-height: 35px;
border-radius: 4px;
font-size: 14px;
display: block;
}
}
.promo-inner {
display: flex;
align-items: center;
}
.promo-left {
display: flex;
align-items: center;
margin-right: 80px;
.percent {
margin: 0 15px 0 0;
line-height: 1;
font-weight: 300;
font-size: 48px;
color: #f14705;
}
h3 {
font-weight: 400;
font-size: 24px;
margin: 0;
line-height: 1;
}
}
.promo-right {
h4 {
margin: 0;
font-weight: 400;
font-size: 18px;
color: #f14705;
}
}
&.style-2 {
.promotion-content {
padding: 12px 0;
}
.promo-left {
margin-right: 25px;
.percent {
-webkit-text-stroke: 1.5px #fff;
color: #f92300;
font-size: 48px;
font-weight: 700;
letter-spacing: -3px;
text-shadow: 0px 5px 3px rgba(0, 0, 0, 0.3);
}
.label {
-webkit-text-stroke: 1px #3078a6;
color: #ffff;
text-transform: uppercase;
font-weight: 700;
}
h3 {
color: #0f5887;
font-size: 26px;
font-weight: 600;
text-transform: uppercase;
}
}
.promo-right {
background-color: #ffc119;
padding: 5px 10px;
border: 1px dashed #9f8232;
.label {
font-weight: 500;
color: #0f5887;
line-height: 1;
}
h4 {
color: #5b8800;
font-size: 18px;
font-weight: 600;
}
}
.promotion-content {
.link {
background-color: #669900;
}
.close {
color: #0f5887;
}
}
}
}
.topbar {
color: var(--mf-gray-color);
background-color: var(--mf-background-light-color);
a {
color: var(--mf-gray-color);
&:hover {
color: var(--mf-dark-color);
}
}
.topbar-row {
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
&:before,
&:after {
display: none;
}
}
.topbar-sidebar {
padding-top: 17px;
padding-bottom: 17px;
display: flex;
flex-wrap: wrap;
align-items: center;
width: auto;
}
.widget {
margin-bottom: 0;
line-height: 1;
padding: 0 20px;
position: relative;
p {
margin-bottom: 0;
}
&:after {
background-color: #e1e1e1;
width: 2px;
height: 14px;
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
&:last-child {
padding-right: 0;
&:after {
display: none;
}
}
&:first-child {
padding-left: 0;
}
}
.topbar-mobile {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
.widget {
&:last-child {
padding-right: 0;
&:after {
display: none;
}
}
}
}
#lang_sel,
.lang_sel {
& > ul {
> li {
margin-bottom: 0;
a,
a:visited {
text-transform: none;
padding-right: 20px;
display: block;
}
ul {
width: 100%;
border-top: 19px solid transparent;
border-bottom: 1px solid #e7e7e7;
min-width: 120px;
left: -15px;
white-space: nowrap;
li {
border-left: 1px solid #e7e7e7;
border-right: 1px solid #e7e7e7;
padding: 4px 15px !important;
margin-bottom: 0;
background-color: #fff;
&:first-child {
border-top: 1px solid #e7e7e7;
padding-top: 10px !important;
}
&:last-child {
padding-bottom: 10px !important;
}
}
}
}
}
}
.mf-currency-widget ul li a {
color: var(--mf-gray-color);
}
ul.menu {
& > li {
display: inline-block;
padding: 0 5px;
position: relative;
& > a {
color: var(--mf-gray-color);
&:hover {
color: var(--mf-gray-color);
}
}
&.menu-item-has-children {
& > a {
position: relative;
padding-right: 20px;
&:after {
content: "\e93a";
display: inline-block;
font: normal normal normal 14px/1 linearicons;
padding-left: 5px;
color: #000;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
}
}
}
&:hover {
& > ul {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
top: 100%;
}
}
}
ul {
top: 150%;
z-index: 99999;
height: auto;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
position: absolute;
margin: 0;
padding: 0;
border: 0;
-webkit-transition: top 0.35s;
transition: top 0.35s;
border-top: 18px solid transparent;
border-bottom: 1px solid #e7e7e7;
min-width: 120px;
left: 0;
background-color: transparent;
li {
padding: 0 15px;
background-color: #fff;
border-left: 1px solid #e7e7e7;
border-right: 1px solid #e7e7e7;
&:first-child {
padding-top: 15px;
border-top: 1px solid #e7e7e7;
}
&:last-child {
padding-bottom: 15px;
}
a {
color: #666 !important;
white-space: nowrap;
display: inline-block;
padding: 8px 0;
&:hover {
color: $dark;
}
}
}
ul {
display: none;
}
}
}
&.topbar-dark {
--mf-gray-color: #000;
}
&.topbar-light {
--mf-gray-color: #fff;
--mf-dark-color: #fff;
}
}
.topbar-right {
.widget_nav_menu {
&:last-child {
ul.menu {
ul {
right: 0;
left: auto;
}
}
}
}
}
.header-bar {
display: flex;
align-items: center;
min-height: 50px;
color: var(--mf-dark-color);
justify-content: flex-end;
background-color: transparent;
a {
color: var(--mf-dark-color);
}
ul.menu {
ul {
right: 0;
width: auto;
left: auto;
min-width: 170px;
border-radius: 0;
box-shadow: none;
font-size: 14px;
border-top: none;
ul {
transition: right 0.3s ease 0s, opacity 0.3s;
right: 110%;
left: auto;
top: 0;
box-shadow: none;
display: block;
}
}
li {
padding: 18px 0;
text-align: left;
margin: 0;
& > a {
color: var(--mf-dark-color);
&:hover {
color: var(--mf-dark-color);
}
}
li {
text-align: left;
display: block;
padding: 0 20px;
position: relative;
a {
font-size: 14px;
text-transform: none;
transition: 0.5s;
position: relative;
background-color: transparent;
white-space: nowrap;
line-height: 1;
}
&:hover > ul {
top: -10px;
right: 100%;
transform: scaleX(1);
li {
a:hover {
&:before {
left: -30px;
}
}
}
}
}
}
}
#lang_sel a.lang_sel_sel, .lang_sel a.lang_sel_sel {
color: var(--mf-dark-color);
}
.widget-woocommerce-currency-switcher {
.woocommerce-currency-switcher-form {
.wSelect-option-icon {
color: var(--mf-dark-color);
&.wSelect-selected {
&:after {
color: var(--mf-dark-color);
}
}
}
}
}
}
body:not(.rtl) {
.header-bar {
.widget {
&:last-child {
padding-right: 0 !important;
}
}
}
}
.site-header {
background-color: var(--mf-background-light-color);
position: relative;
.site-title,
.site-description {
margin: 0;
line-height: 0;
text-indent: -9999px;
}
.primary-nav {
float: left;
& > ul {
& > li {
padding-top: 17px;
padding-bottom: 17px;
&:first-child {
padding-left: 0;
}
& > a {
font-size: 16px;
color: var(--mf-dark-color);
line-height: 1;
display: flex;
align-items: flex-end;
i {
padding-right: 8px;
font-size: 17px;
line-height: 1;
}
.mf-svg-icon {
padding-right: 8px;
line-height: 1;
}
&:hover {
color: var(--mf-gray-color);
}
}
&.menu-item-has-children {
& > a {
position: relative;
margin-right: 22px;
&:after {
@include icon('\e93a');
position: absolute;
right: -22px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
}
&:before {
content: "";
position: absolute;
top: 120%;
left: calc(50% - 5px);
width: 13px;
height: 13px;
transform: rotate(45deg);
border-left: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background-color: $light;
z-index: -1;
padding: 0;
margin: 11px -7px 0 0;
transition: top 0.3s ease 0s, opacity 0.1s;
opacity: 0;
}
}
&:hover {
& > a:before {
top: 100%;
opacity: 1;
z-index: 9999;
}
}
}
&.current-menu-parent > a,
&.current-menu-item > a,
&.current-menu-ancestor > a {
color: var(--mf-gray-color);
}
}
}
}
.products-cats-menu {
.cats-menu-title {
color: var(--mf-dark-color);
font-size: 16px;
font-weight: 600;
margin: 0;
line-height: 1;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
.text {
color: var(--mf-dark-color);
}
i {
display: inline-block;
font-size: 30px;
margin-right: 0;
}
}
.toggle-product-cats {
position: absolute;
top: 120%;
left: 0;
z-index: -999;
width: 100%;
opacity: 0;
transition: top 0.5s;
transform: scaleX(0);
.menu {
border: 1px solid #d3d3d3;
background-color: $light;
width: 100%;
}
}
&.open,
&.mf-closed:hover {
.toggle-product-cats {
opacity: 1;
z-index: 991;
top: 100%;
transform: scaleX(1);
}
}
.menu {
padding: 0;
margin: 0;
position: relative;
& > li {
margin: 0;
padding: 0 17px 0 20px;
position: relative;
display: block;
&:first-child {
padding-top: 10px;
}
&:last-child {
padding-bottom: 10px;
}
& > a {
line-height: 1;
color: $dark;
padding: 9px 0;
display: flex;
align-items: center;
& > i {
font-size: 18px;
color: $dark;
margin-right: 20px;
}
.toggle-children {
display: none;
}
}
&.menu-item-has-children {
& > a {
&:after {
@include icon('\e93c');
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
color: #999;
font-size: 11px;
font-weight: 600;
}
}
}
&:hover {
& > a {
color: var(--mf-primary-color);
&:after {
color: $dark;
}
}
}
}
li {
margin-bottom: 0;
list-style: none;
&:hover > ul {
opacity: 1;
z-index: 9999;
top: 0;
left: 100%;
transform: scaleX(1);
margin-top: -1px;
}
&:first-child {
> ul {
left: 120%;
}
&:hover > ul {
left: 100%;
}
}
&.is-mega-menu {
position: static;
.dropdown-submenu {
left: 120%;
right: auto;
border: 1px solid #cccccc;
transform: scale(0);
}
&:hover {
.dropdown-submenu {
left: 100%;
transform: scale(1);
}
}
& > ul {
min-height: 100%;
.sub-menu {
li:hover {
a {
padding-left: 5px;
}
}
}
}
}
.mega-menu-content {
.mr-col {
&.col-md-6 {
&:nth-child( 2n+1 ) {
clear: both;
}
}
}
}
ul {
padding: 10px 0;
transition: left 0.3s ease 0s, opacity 0.3s;
left: 110%;
top: 0;
}
}
}
}
.recently-viewed {
.mf-recently-products {
position: absolute;
top: 120%;
left: 15px;
right: 15px;
z-index: -999;
opacity: 0;
-webkit-transition: top 0.5s;
transition: top 0.5s;
transform: scaleX(0);
background-color: $light;
border: 1px solid #ccc;
&.no-products {
.recently-header {
display: none;
}
}
.mf-loading {
height: 100px;
&:before {
top: 33%;
}
}
& > .container {
padding-left: 0;
padding-right: 0;
}
.product-list {
padding-bottom: 30px;
margin-bottom: 40px;
&.no-products {
margin-bottom: 0;
}
}
.slick-arrow {
z-index: 9999;
}
}
.recently-header {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
justify-content: center;
}
&:hover {
.mf-recently-products {
top: 100%;
transform: scaleX(1);
z-index: 9999;
opacity: 1;
}
.recently-title:after {
transform: rotate(180deg) translateY(50%);
}
}
.recently-title {
font-size: 16px;
font-weight: 400;
margin: 0;
line-height: 1;
position: relative;
padding: 18px 20px 18px 0;
cursor: pointer;
a {
color: #000;
}
&:after {
@include icon('\e93a');
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: 700;
transition: 0.2s;
}
}
}
.header-main {
padding-top: 20px;
padding-bottom: 20px;
background-color: var(--mf-background-light-color);
.sticky-logo {
display: none;
}
}
.header-row {
align-items: center;
display: flex;
&:after,
&:before {
display: none;
}
}
.header-logo {
width: 22.5%;
display: flex;
align-items: stretch;
justify-content: space-between;
.d-department {
display: flex;
align-items: center;
}
.products-cats-menu {
position: relative;
.cats-menu-title {
line-height: 25px;
margin: 0;
min-width: 30px;
cursor: pointer;
&:after {
content: "";
position: absolute;
top: 40px;
right: 22px;
width: 13px;
height: 13px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background-color: #fff;
z-index: 9999;
padding: 0;
margin: 18px -7px 0 0;
transition: top 0.5s;
opacity: 0;
}
}
&:hover {
.cats-menu-title:after,
.toggle-product-cats {
top: 100%;
opacity: 1;
}
}
.toggle-product-cats {
left: -225px;
padding-top: 25px;
top: 40px;
min-width: 270px;
margin-left: 15px;
}
}
}
.header-extras {
width: 77.5%;
display: flex;
align-items: center;
justify-content: space-between;
}
.product-extra-search {
width: 100%;
.psearch-content {
display: flex;
width: 100%;
}
.product-cat {
width: auto;
float: left;
position: relative;
height: 42px;
line-height: 42px;
cursor: pointer;
&.active:hover {
.cats-search {
opacity: 1;
z-index: 9998;
top: 100%;
transform: scaleX(1);
}
.product-cat-label:before {
z-index: 9999;
opacity: 1;
top: 100%;
}
}
}
.cats-search {
-webkit-transition: top 0.3s;
transition: top 0.3s;
position: absolute;
left: 0;
top: 110%;
width: auto;
min-width: 200px;
opacity: 0;
z-index: -1;
transform: scaleX(0);
background-color: $light;
padding: 0;
margin: 0;
border-top: 15px solid transparent;
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
li.product_cat {
max-height: 450px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #ccc;
margin: 0;
padding: 15px 0;
& > a {
color: #999;
white-space: nowrap;
padding: 0 15px;
&:hover {
color: $dark;
}
}
}
ul {
margin: 0;
padding: 0;
}
li {
padding: 5px 15px;
margin-bottom: 0;
list-style: none;
line-height: 1;
a {
color: #999;
white-space: nowrap;
&:hover {
color: $dark;
}
}
ul {
padding-left: 0;
margin-top: 7px;
li {
border: none;
}
li:last-child {
padding-bottom: 0;
}
}
}
}
.hot-words-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 10px;
}
.hot-words__heading {
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
margin: -2px 18px 0 0;
}
.hot-words {
margin: 0 -7px;
padding: 0;
list-style: none;
li {
display: inline-block;
padding: 0 7px;
margin-bottom: 0;
a {
color: #666;
&:hover {
color: $dark;
}
}
}
}
.products-search {
width: 100%;
&.actived {
.search-wrapper .search-results {
top: 100%;
transform: scaleX(1);
z-index: 9999;
}
}
&.searching {
.search-wrapper {
&:before {
border-width: 1px;
border-color: #666 #666 #666 transparent;
border-radius: 50%;
border-style: solid;
-webkit-animation: mf-spin-fast 1s linear infinite;
animation: mf-spin-fast 1s linear infinite;
content: "";
width: 13px;
height: 13px;
font-weight: 400;
position: absolute;
top: 15px;
right: 19px;
z-index: 999;
}
}
.search-submit:before {
opacity: 0;
}
}
}
.search-wrapper {
width: 100%;
display: flex;
position: relative;
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
.search-results {
position: absolute;
top: 110%;
left: -1px;
right: 0;
border: 1px solid #cccccc;
border-top: none;
background-color: $light;
z-index: -1;
padding: 0 20px;
transform: scaleX(0);
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
ul {
margin: 15px 0 0;
padding: 0;
list-style: none;
li {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
img {
max-width: 60px;
margin-right: 10px;
}
.title-item {
font-size: 14px;
font-weight: 400;
line-height: 1;
}
.star-rating {
float: none;
}
.price-item {
font-size: 16px;
color: $dark;
line-height: 1;
margin-top: 5px;
}
del {
font-size: 14px;
color: #999;
padding-left: 10px;
}
ins {
text-decoration: none;
color: #ff3300;
}
}
.search-item {
display: flex;
align-items: center;
}
}
}
}
.product-cat-label {
padding-right: 30px;
padding-left: 18px;
border: 1px solid #ccc;
color: $dark;
border-radius: 5px 0 0 5px;
position: relative;
height: 100%;
white-space: nowrap;
background-color: $light;
&.no-cats {
width: 0;
padding: 0;
overflow: hidden;
border-left: none;
}
&:after {
@include icon('\e93a');
font-size: 10px;
color: $dark;
position: absolute;
top: 17px;
right: 12px;
}
&:before {
content: "";
position: absolute;
top: 110%;
left: 40%;
width: 13px;
height: 13px;
transform: rotate(45deg) translateY(-50%);
border-left: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background-color: #fff;
z-index: -1;
padding: 0;
margin: 14px 0 0;
opacity: 0;
-webkit-transition: top 0.3s;
transition: top 0.3s;
}
}
.product-cat-dd {
position: absolute;
top: 0;
left: 0;
opacity: 0;
height: 100%;
cursor: pointer;
min-height: 42px;
width: 100%;
z-index: 10;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-left: 10px;
}
.search-field {
float: left;
height: 42px;
line-height: 1;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: none;
border-right: none;
padding-right: 20px;
padding-left: 20px;
position: relative;
width: 100%;
&:focus {
outline: none;
}
}
::-webkit-input-placeholder {
color: $gray;
}
::-moz-placeholder {
color: $gray;
}
:-ms-input-placeholder {
color: $gray;
}
:-moz-placeholder {
color: $gray;
}
.search-submit {
float: right;
height: 42px;
line-height: 42px;
padding-left: 20px;
padding-right: 20px;
min-width: 100px;
padding-top: 0;
padding-bottom: 0;
border: none;
font-weight: 700;
border-radius: 0 5px 5px 0;
white-space: nowrap;
}
}
&.has-hot-words {
.header-extras {
align-items: flex-start;
}
.header-main {
padding-bottom: 10px;
.header-row {
align-items: flex-start;
}
}
.extras-menu {
margin-top: 4px;
}
.header-logo {
margin-top: 6px;
}
}
.extras-menu {
margin: 0 0 0 40px;
padding: 0;
position: relative;
display: flex;
align-items: center;
& > li {
list-style: none;
float: right;
margin-bottom: 0;
padding: 0 20px;
& > a {
color: var(--mf-dark-color);
display: block;
position: relative;
.mini-item-counter {
@include background-primary();
position: absolute;
bottom: -3px;
right: -4px;
font-size: 12px;
font-weight: 700;
border-radius: 50%;
min-width: 18px;
padding: 0 5px;
height: 18px;
text-align: center;
line-height: 18px;
}
&:after {
content: "";
position: absolute;
top: 110%;
right: 16px;
width: 13px;
height: 13px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 1px solid #cccccc;
border-top: 1px solid #cccccc;
background-color: #fff;
z-index: -1;
padding: 0;
margin: 19px -7px 0 0;
opacity: 0;
transition: top 0.3s;
}
}
&:last-child {
padding-right: 0;
}
.extra-icon {
font-size: 30px;
line-height: 1;
}
}
.menu-item-account {
min-height: 30px;
& > a {
padding-left: 42px;
line-height: 1.2;
font-weight: 700;
position: relative;
white-space: nowrap;
img {
border-radius: 50%;
}
}
.extra-icon {
position: absolute;
top: 1px;
left: 0;
}
&.logined {
position: relative;
.extra-icon {
position: static;
}
& > a {
padding-left: 0;
width: 32px;
}
&:hover {
& > ul {
opacity: 1;
z-index: 9998;
top: 100%;
transform: scaleX(1);
}
& > a:after {
z-index: 9999;
opacity: 1;
top: 100%;
}
}
}
& > ul {
transition: top 0.3s;
position: absolute;
right: 0;
top: 110%;
width: auto;
min-width: 250px;
opacity: 0;
z-index: -1;
border-top: 25px solid transparent;
transform: scaleX(0);
display: block;
border-radius: 0;
box-shadow: none;
li {
text-align: left;
display: block;
padding: 3px 20px;
float: none;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: $light;
margin-bottom: 0;
ul {
border: none;
padding: 0;
li {
border: none;
padding-right: 0;
padding-left: 0;
&:first-child {
border-top: none;
}
&:last-child {
border-bottom: none;
}
}
}
&:first-child {
border-top: 1px solid #ccc;
}
&:last-child {
border-bottom: 1px solid #ccc;
}
a {
color: #666666;
text-transform: none;
transition: 0.5s;
display: inline-block;
position: relative;
background-color: transparent;
white-space: nowrap;
line-height: 1;
border-bottom: 1px solid transparent;
&:hover {
color: $dark;
border-bottom-color: $dark;
}
}
&.line-space {
padding-top: 13px;
position: relative;
&:before {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
height: 1px;
content: "";
}
}
&.logout {
padding-top: 10px;
padding-bottom: 10px;
}
& > h3 {
font-size: 16px;
font-weight: 600;
line-height: 1;
margin: 16px 0 10px;
color: $dark;
}
}
}
}
.menu-item-cart {
& > a {
position: relative;
&:after {
margin: 17px -7px 0 0;
}
}
&:hover {
& > .mini-cart-content {
opacity: 1;
z-index: 9998;
top: 100%;
transform: scaleX(1);
}
& > a:after {
opacity: 1;
z-index: 9999;
top: 100%;
}
}
.mini-cart-content {
transition: top 0.3s ease 0s, opacity 0.3s;
position: absolute;
right: 0;
top: 110%;
min-width: 370px;
opacity: 0;
z-index: -1;
border-top: 23px solid transparent;
transform: scaleX(0);
display: block;
border-radius: 0;
box-shadow: none;
.woocommerce-mini-cart__empty-message {
margin: 15px 0;
}
.widget_shopping_cart_content {
padding-top: 0;
}
.product_list_widget {
max-height: 490px;
padding-left: 20px;
padding-right: 20px;
margin-left: -20px;
margin-right: -20px;
overflow-y: auto;
overflow-x: hidden;
}
::-webkit-scrollbar {
background: transparent;
width: 7px;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
}
}
.menu-item-wishlist {
& > a:after {
display: none;
}
.mini-item-counter {
right: 0;
}
}
.menu-item-hotline {
display: flex;
align-items: center;
& > a {
display: flex;
align-items: center;
}
.extra-icon {
font-size: 26px;
margin-right: 15px;
color: var(--mf-dark-color);
}
.hotline-content {
white-space: nowrap;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: var(--mf-dark-color);
label {
display: block;
font-size: 14px;
color: var(--mf-gray-color);
font-weight: 400;
}
}
}
}
.main-menu {
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
}
.col-header-menu {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
flex-wrap: wrap;
}
.martfury-container {
.header-logo,
.mr-extra-department {
width: 300px;
}
.header-extras,
.mr-header-menu {
width: 83.4%;
}
}
.header-bottom-feature {
background-repeat: repeat-x;
background-position: left center;
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 10;
}
&.header-dark {
.mf-background-primary,
.mini-item-counter {
--mf-background-primary-color: #000;
--mf-background-primary-text-color: #fff;
}
--mf-gray-color: #000;
}
&.header-light {
--mf-dark-color: #fff;
--mf-gray-color: #fff;
}
}
.header-department-bot {
.header-logo {
.d-department {
display: none;
}
}
.mr-extra-department {
.products-cats-menu {
position: relative;
padding-top: 14px;
padding-bottom: 14px;
min-height: 50px;
display: flex;
align-items: center;
&:before {
position: absolute;
top: -1px;
left: 50%;
content: "";
height: 2px;
width: 0;
background-color: var(--mf-background-primary-color);
transition: 0.5s;
}
&.open,
&.mf-closed:hover {
&:before {
width: 100%;
left: 0;
right: 0;
}
.cats-menu-title:after {
transform: rotate(180deg) translateY(50%);
}
}
}
.cats-menu-title {
padding-left: 22px;
padding-right: 20px;
i {
display: none;
}
&:after {
@include icon('\e93a');
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: 700;
transition: 0.2s;
}
}
}
}
.header-department-top {
.header-logo {
.d-department {
.text {
display: none;
}
&.mf-close {
.products-cats-menu .cats-menu-title:after,
.toggle-product-cats {
display: none;
}
}
}
.products-cats-menu {
&:hover {
.toggle-product-cats {
z-index: 9998;
padding-top: 24px !important;
}
}
}
.logo {
margin-right: 15px;
}
.d-logo {
max-width: calc(100% - 30px);
}
&.hide-department {
.d-logo {
max-width: 100%;
}
.logo {
margin-right: 0;
}
}
}
.main-menu {
.d-department-sticky {
.cats-menu-title {
display: none;
}
.toggle-product-cats {
left: 0 !important;
width: 270px;
}
}
}
}
.header-layout-1 {
.header-bar,
.header-bar #lang_sel a.lang_sel_sel,
.header-bar .lang_sel a.lang_sel_sel {
font-size: 16px;
}
.header-department-bot {
.header-logo {
.d-department {
display: none;
.cats-menu-title {
position: relative;
padding-right: 22px;
i {
display: none;
}
&:after {
@include icon('\e93a');
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
font-weight: 700;
transition: 0.2s;
background-color: transparent;
margin: 0;
border: none;
opacity: 1;
}
}
}
.products-cats-menu {
&:hover {
.cats-menu-title:after {
top: 50%;
transform: rotate(180deg) translateY(50%);
}
}
}
}
}
&.sticky-header .site-header.minimized .header-main .products-cats-menu .cats-menu-title:after {
display: block;
}
}
.header-layout-2 {
.topbar {
background-color: #eff1f2;
}
.site-header {
.header-main {
background-color: var(--mf-background-light-color);
}
.main-menu {
background-color: var(--mf-background-primary-color);
border-color: var(--mf-background-primary-color);
border-bottom: none;
}
.primary-nav {
& > ul {
& > li {
padding-top: 18px;
padding-bottom: 18px;
padding-left: 18px;
padding-right: 18px;
&:first-child {
padding-left: 0;
& > ul {
left: 0;
border-top: none;
}
}
&:last-child {
padding-right: 0;
}
&.menu-item-has-children > a {
margin-right: 0;
&:before {
border-left: none;
border-top: none;
margin-top: 13px;
transition-delay: 0.05s;
}
&:after {
display: none;
}
}
& > a {
font-weight: 600;
text-transform: uppercase;
color: var(--mf-background-primary-text-color);
&:hover {
opacity: 0.7;
}
i {
font-size: 20px;
}
}
&.current-menu-parent > a,
&.current-menu-item > a,
&.current-menu-ancestor > a {
opacity: 0.7;
}
}
}
}
}
}
.header-layout-3,
.header-layout-4 {
.topbar:not(.header-bar) {
background-color: #dba500;
.widget:after {
background-color: #a37000;
}
}
.header-bar .widget:after {
background-color: #654a00;
}
.site-header {
background-color: var(--mf-background-primary-color);
.col-nav-menu {
position: static;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.header-main {
padding-top: 25px;
padding-bottom: 25px;
background-color: var(--mf-background-primary-color);
}
&.has-hot-words .header-main {
padding-bottom: 10px;
}
.main-menu {
border-color: rgba(0, 0, 0, 0.15);
border-bottom: none;
}
.header-row {
position: relative;
}
.product-extra-search .search-field,
.product-extra-search .product-cat-label {
border-color: transparent;
}
.product-extra-search .product-cat-label {
border-right-color: #ccc;
}
.primary-nav {
& > ul {
& > li {
&.current-menu-parent > a,
&.current-menu-item > a,
&.current-menu-ancestor > a {
color: rgba(0, 0, 0, 0.7);
}
}
}
}
}
.aws-container {
.aws-search-form {
background-color: transparent;
.aws-form-btn {
border: none;
}
.aws-search-field {
background-color: #fff;
border: none;
border-right: 1px solid #ccc;
}
.aws-search-btn {
background-color: #000;
.aws-search-btn_icon {
color: #fff;
}
&:hover {
background-color: #000;
}
}
}
&[data-buttons-order="3"] {
.aws-search-form {
.aws-search-field {
border-right: none;
border-left: 1px solid #ccc;
}
}
}
&[data-buttons-order="4"] {
.aws-search-form {
.aws-search-field {
border-right: none;
border-left: 1px solid #ccc;
}
}
}
&[data-buttons-order="6"] {
.aws-search-form {
.aws-search-field {
border-right: none;
border-left: 1px solid #ccc;
}
}
}
}
}
.header-layout-3 {
.site-header {
.products-cats-menu {
.menu > li {
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
& > a {
padding-top: 11px;
padding-bottom: 11px;
transition: none;
}
&:hover {
background-color: var(--mf-background-primary-color);
& > a {
color: var(--mf-background-primary-text-color);
}
}
&.menu-item-has-children > a:after {
right: -10px;
}
}
}
}
.header-department-bot .mr-extra-department {
.products-cats-menu {
min-height: 52px;
}
.cats-menu-title {
i {
display: block;
font-size: 24px;
}
&:after {
display: none;
}
}
}
}
.header-layout-5 {
--mf-background-light-color: #022335;
.site-header {
.product-extra-search .search-field,
.product-extra-search .product-cat-label {
border-color: transparent;
}
.product-extra-search .product-cat-label {
border-right-color: #ccc;
}
.main-menu {
border-color: transparent;
}
.primary-nav > ul > li {
& > a {
font-weight: 600;
text-transform: uppercase;
i {
margin-right: 3px;
}
}
&.menu-item-has-children > a {
margin-right: 0;
&:before {
border-left: none;
border-top: none;
margin-top: 13px;
transition-delay: 0.05s;
}
&:after {
display: none;
}
}
}
}
.aws-container {
.aws-search-form {
background-color: transparent;
.aws-form-btn {
border: none;
}
.aws-search-field {
background-color: #fff;
border: none;
border-right: 1px solid #ccc;
}
}
&[data-buttons-order="3"] {
.aws-search-form {
.aws-search-field {
border-right: none;
border-left: 1px solid #ccc;
}
}
}
&[data-buttons-order="4"] {
.aws-search-form {
.aws-search-field {
border-right: none;
border-left: 1px solid #ccc;
}
}
}
&[data-buttons-order="6"] {
.aws-search-form {
.aws-search-field {
border-right: none;
border-left: 1px solid #ccc;
}
}
}
}
}
.header-layout-6 {
.site-header {
.main-menu__wrapper {
position: relative;
}
.main-menu {
background-color: #f0f0f0;
border-top: none;
}
.primary-nav {
float: left;
& > ul {
& > li {
& > a {
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
&:hover {
color: var(--mf-primary-color);
}
}
&.current-menu-parent > a,
&.current-menu-item > a,
&.current-menu-ancestor > a {
color: var(--mf-primary-color);
}
}
}
}
}
}
.header-layout-8 {
.site-header {
.product-extra-search {
.search-field,
.product-cat-label {
background-color: #f9f9f9;
}
}
.menu-item-hotline .hotline-content span {
color: var(--mf-primary-color);
}
.primary-nav {
& > ul {
& > li {
& > a {
&:hover {
color: var(--mf-primary-color);
}
}
&.current-menu-parent > a,
&.current-menu-item > a,
&.current-menu-ancestor > a {
color: var(--mf-primary-color);
}
}
}
}
}
}
.header-layout-9 {
.site-header {
.header-main {
padding-top: 10px;
padding-bottom: 15px;
}
.product-extra-search {
.search-wrapper {
max-width: 520px;
}
.product-cat-label {
text-transform: uppercase;
font-weight: 700;
border-right: none;
}
.search-submit {
text-transform: uppercase;
border-radius: 5px;
margin-left: 10px;
min-width: 130px;
}
.search-field {
padding-left: 10px;
border-radius: 0 5px 5px 0;
}
.hot-words {
li {
a {
position: relative;
padding-right: 4px;
font-size: 16px;
&:before {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 1px;
background-color: $light;
transition: .3s;
}
&:after {
content: ',';
position: absolute;
right: 0;
bottom: -2px;
}
&:hover {
&:before {
width: 100%;
}
}
}
&:last-child {
a {
padding-right: 0;
&:after {
display: none;
}
}
}
}
}
}
.extras-menu {
.menu-item-hotline {
padding-right: 53px;
}
}
.primary-nav {
> ul {
> li {
position: relative;
&:before {
content: '';
position: absolute;
left: 22px;
top: -2px;
height: 2px;
width: 0;
background-color: $light;
transition: .3s;
}
&:first-child {
&:before {
left: 0;
}
}
&:hover {
&:before {
width: calc( 100% - 44px );
}
&:first-child {
&:before {
width: calc( 100% - 22px );
}
}
}
> a {
text-transform: uppercase;
}
}
}
}
.col-header-extras {
position: static;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
.recently-viewed {
.recently-title {
text-transform: uppercase;
padding-left: 25px;
&:after {
@include icon('\e8da');
font-size: 16px;
position: absolute;
right: auto;
left: 0;
}
}
}
.header-wishlist {
padding: 0 0 0 25px;
margin: 0;
list-style: none;
font-size: 16px;
li {
margin: 0;
}
i {
position: relative;
top: 2px;
}
.mini-item-counter--wishlist {
display: none;
}
.header-wishlist-text {
font-size: 16px;
text-transform: uppercase;
margin-left: 3px;
}
}
}
.topbar {
.widget{
&:after {
opacity: .25;
height: 12px;
}
}
}
.topbar-right {
a {
text-transform: uppercase;
}
}
}
.sticky-header {
.site-header {
&.minimized {
.extras-menu .menu-item-account ul {
border-top-width: 15px;
}
.extras-menu .menu-item-cart .mini-cart-content {
border-top-width: 14px;
}
.extras-menu > li > a:after {
margin-top: 8px;
}
.header-main {
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 9999;
animation-name: fadeInDown;
animation-duration: .25s;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e1e1e1;
.d-logo {
display: none;
}
.d-department {
display: block;
}
.products-cats-menu {
padding: 0;
&:before {
display: none;
}
.toggle-product-cats {
padding-top: 16px !important;
margin-left: 0;
top: 120%;
left: 0 !important;
}
.cats-menu-title {
padding-left: 0;
.text {
transition: none;
}
&:after {
display: none;
}
}
&:hover {
.toggle-product-cats {
top: 100%;
}
}
}
}
&.sticky-header-logo {
.header-main {
.d-department {
display: none;
}
.d-logo {
display: block;
}
.site-logo {
display: none;
}
.sticky-logo {
display: block;
}
}
}
&.header-department-top {
.header-logo .d-department .text {
display: block;
}
.header-logo .products-cats-menu {
.toggle-product-cats {
padding-top: 16px !important;
margin-left: 0;
top: 120%;
left: 0 !important;
display: block;
}
&:hover {
.toggle-product-cats {
top: 100%;
}
}
}
}
}
}
&.admin-bar {
.site-header {
&.minimized .header-main {
top: 32px;
}
}
}
&.header-no-department {
.site-header.minimized .header-main .d-logo {
display: block;
img {
max-height: 70px;
width: auto;
}
}
}
}
body.display-mobile-menu {
overflow: hidden;
max-height: 100vh;
}
.display-mobile-menu {
.primary-mobile-nav {
transform: translate3d(475px, 0, 0);
z-index: 999999;
}
.martfury-off-canvas-layer {
display: block;
z-index: 9999;
}
}
.martfury-off-canvas-layer {
background-color: rgba(0, 0, 0, 0.85);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
display: none;
&.opened {
display: block;
z-index: 999;
}
}
.primary-mobile-nav {
width: 475px;
background-color: $light;
position: fixed;
left: -475px;
top: 0;
overflow: auto;
height: 100%;
color: #aaa;
z-index: -999999;
transition: transform 0.35s ease;
display: none;
.close-canvas-mobile-panel {
font-size: 24px;
color: $dark;
}
.mobile-nav-header {
background-color: var(--mf-background-primary-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
h2,
.mobile-nav-header__title {
font-size: 18px;
font-weight: 600;
margin: 0;
line-height: 1;
color: var(--mf-background-primary-text-color);
a {
color: var(--mf-background-primary-text-color);
}
}
.close-mobile-nav {
font-size: 18px;
color: var(--mf-background-primary-text-color);
line-height: 1;
display: none;
}
}
ul.menu {
padding: 0;
li {
list-style: none;
margin-bottom: 0;
&.menu-item-has-children {
.toggle-menu-children {
font-size: 14px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
}
& > a {
color: #666;
position: relative;
transition: none;
}
&.active {
& > a {
color: $dark;
.toggle-menu-children > i:before {
content: "\e937";
}
}
}
}
ul {
padding-left: 0;
display: none;
padding-top: 10px;
li {
padding: 5px 0;
a {
font-size: 14px;
display: block;
&:after {
font-size: 14px;
}
}
}
ul {
padding-left: 10px;
}
}
& > li {
border-bottom: 1px solid #dedede;
padding: 14px 15px 13px;
&:last-child {
border-bottom: none;
}
&.active {
background-color: #f6f6f6;
}
& > a {
display: block;
padding-right: 20px;
color: $dark;
}
}
}
}
.primary-user-nav {
width: 375px;
background-color: $light;
position: fixed;
right: -375px;
top: 0;
overflow: auto;
height: 100%;
color: #aaa;
z-index: 99999;
transition: transform 0.35s ease;
.close-canvas-mobile-panel {
font-size: 24px;
color: $dark;
}
.mobile-user-content {
padding: 30px;
}
ul.extra-account {
padding: 0;
li {
list-style: none;
margin-bottom: 0;
&.extra-menu-item {
& > a {
display: none;
}
}
& > a {
color: #999;
position: relative;
transition: none;
&:hover {
color: $dark;
}
}
}
ul {
padding-top: 10px;
padding-left: 0;
li {
padding: 8px 0;
&.line-space {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
padding-top: 0;
}
a {
font-size: 14px;
display: block;
&:after {
font-size: 14px;
}
}
h3 {
font-size: 18px;
font-weight: 600;
line-height: 1;
margin: 16px 0 0;
}
}
}
}
}
.display-user-mobile {
.primary-user-nav {
transform: translate3d(-375px, 0, 0);
z-index: 99999;
}
.martfury-off-canvas-layer {
display: block;
z-index: 9999;
}
} |