/**=====================
Header scss
==========================**/
.onhover-category-box {
position: absolute;
top: 0;
left: 100%;
background: $white;
box-shadow: 0 0 8px #ddd;
padding: 20px 25px;
border-radius: 5px;
width: 520px;
height: 100%;
overflow: auto;
display: grid;
grid-template-columns: auto auto;
opacity: 0;
visibility: hidden;
margin-left: 14px;
transition: all 0.3s ease-in-out;
[dir="rtl"] & {
margin-left: unset;
margin-right: 14px;
left: unset;
right: 100%;
}
@include mq-max(xl) {
grid-template-columns: auto;
display: block;
width: 100%;
.list-2 {
margin-top: 15px;
}
}
@include mq-max(md) {
position: relative;
top: 0;
left: 0;
display: block;
width: 100%;
box-shadow: none;
padding: 12px 11px;
margin-top: 7px;
opacity: 1;
visibility: visible;
margin-left: 0;
}
.category-title-box {
margin-bottom: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
display: flex;
align-items: center;
h5 {
font-weight: 600;
}
}
ul {
@include flex_wrap($dis: flex,
$wrap: wrap,
$gap: calc(4px + (11 - 4) * ((100vw - 320px) / (1920 - 320))));
li {
position: relative;
&::after {
@include pos;
@include center(vertical);
left: 0;
width: 5px;
height: 5px;
background-color: $content-color;
border-radius: 100%;
}
a {
margin-left: 13px;
}
}
~.category-title-box {
margin-top: 15px !important;
}
}
}
header {
&.active {
.sticky-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: $white;
color: $title-color;
box-shadow: 0 8px 10px rgba($title-color, 0.05);
z-index: 9;
padding: calc(15px + (24 - 15) * ((100vw - 320px) / (1920 - 320))) 0;
&-2 {
background-color: var(--theme-color);
padding: 14px 0;
}
&-3 {
padding: 14px 0;
}
}
}
.timer-notification {
color: $white;
text-align: center;
transition: all 0.3s ease-in-out;
position: relative;
@media (max-width: 1399px) {
text-align: left;
}
h6 {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
a {
text-decoration: underline;
font-weight: 600;
display: inline-block;
margin-left: 5px;
}
}
}
.header-notification {
position: relative;
&.remove {
display: none;
}
.notification-slider {
.timer-notification {
@include mq-max(md) {
width: 80%;
margin: 0 auto;
}
}
}
.close-notification {
@include center(vertical);
position: absolute;
right: 11px;
padding: 0;
color: $white;
font-size: 14px;
font-weight: 700;
@include mq-max(sm) {
top: 10px;
transform: none;
}
span {
@include mq-max(sm) {
display: none;
}
}
i {
margin-left: 5px;
margin-top: 1px;
}
}
}
.onhover-category-list {
&:hover {
.onhover-category-box {
opacity: 1;
visibility: visible;
margin-left: 0;
[dir="rtl"] & {
margin-left: unset;
margin-right: 0;
}
}
}
.list-1 {
@include mq-max(md) {
margin-bottom: 21px;
}
}
.onhover-category-box {
position: absolute;
top: 0;
left: 100%;
background: $white;
box-shadow: 0 0 8px #ddd;
padding: 20px 25px;
border-radius: 5px;
width: 520px;
height: 100%;
overflow: auto;
display: grid;
grid-template-columns: auto auto;
opacity: 0;
visibility: hidden;
margin-left: 14px;
transition: all 0.3s ease-in-out;
[dir="rtl"] & {
margin-left: unset;
margin-right: 14px;
}
@include mq-max(lg) {
grid-template-columns: auto;
display: block;
width: 100%;
.list-2 {
margin-top: 15px;
}
}
@include mq-max(md) {
position: relative;
top: 0;
left: 0;
display: block;
width: 100%;
box-shadow: none;
padding: 12px 11px;
margin-top: 7px;
opacity: 1;
visibility: visible;
margin-left: 0;
}
.category-title-box {
margin-bottom: calc(8px + (20 - 8) * ((100vw - 320px) / (1920 - 320)));
display: flex;
align-items: center;
h5 {
font-weight: 600;
}
}
ul {
@include flex_wrap($dis: flex,
$wrap: wrap,
$gap: calc(4px + (11 - 4) * ((100vw - 320px) / (1920 - 320))));
li {
position: relative;
&::after {
@include pos;
@include center(vertical);
left: 0;
width: 5px;
height: 5px;
background-color: $content-color;
border-radius: 100%;
[dir="rtl"] & {
left: unset;
right: 0;
}
}
a {
margin-left: 13px;
[dir="rtl"] & {
margin-left: 0;
margin-right: 13px;
}
}
}
}
}
}
.header-top {
padding: 10px 0;
background-color: var(--theme-color);
&-2 {
background-color: $title-color;
}
.top-left-header {
display: flex;
align-items: center;
height: 100%;
i {
font-size: 18px;
margin-right: 5px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 5px;
}
}
span {
margin-top: 1px;
font-weight: 500;
}
}
.about-list {
@include flex_common($dis: flex, $align: center, $justify: flex-end);
height: 100%;
[dir="rtl"] & {
padding-left: unset;
padding-right: 0;
}
li {
display: flex;
align-items: center;
i {
font-size: 18px;
margin-right: 5px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 5px;
}
}
span {
margin-top: 1px;
font-weight: 500;
}
+li {
margin-left: 25px;
position: relative;
[dir="rtl"] & {
margin-left: unset;
margin-right: 25px;
}
&::after {
@include pos;
@include pseudowh($width: 2px, $height: 90%);
top: 0;
left: -13px;
background-color: rgba($white, 0.3);
[dir="rtl"] & {
left: unset;
right: -13px;
}
}
}
.theme-form-select {
padding: 0;
background-color: transparent;
color: $white;
border: none;
background-image: none;
position: relative;
&::before {
content: unset;
}
.dropdown-toggle {
font-size: 14px;
font-weight: 500;
color: $white;
padding: 0 18px 0 0;
img {
width: 20px;
margin-right: 10px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 10px;
}
}
&::after {
content: none;
}
&:focus {
box-shadow: none;
}
&::before {
@include pos($pos: absolute, $content: "\f107");
@include font;
@include center(vertical);
right: 0;
color: $white;
}
}
.dropdown-menu {
&.sm-dropdown-menu {
min-width: 100%;
}
li {
+li {
margin-left: 0;
[dir="rtl"] & {
margin-left: unset;
margin-right: 0;
}
}
.dropdown-item {
display: flex;
align-items: center;
&:hover,
&:focus {
background-color: transparent;
}
&.active,
&:active {
color: $title-color;
background-color: transparent;
}
img {
width: 20px;
margin-right: 10px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 10px;
}
}
}
}
}
}
}
}
}
.nav-about {
padding: 10px 0;
background-color: var(--theme-color);
&-2 {
background-color: $title-color;
}
}
.top-nav {
padding: 24px 0;
@include mq-max(md) {
padding: 24px 0 0;
}
.navbar-top {
@include flex_common($dis: flex, $align: center, $justify: space-between);
position: relative;
@include mq-max(xl) {
justify-content: normal;
}
@include mq-max(md) {
justify-content: space-between;
}
.web-logo {
img {
@include pseudowh($width: calc(120px + (162 - 120) * ((100vw - 320px) / (1920 - 320))),
$height: auto);
object-fit: contain;
@include mq-max(md) {
margin: 0 auto;
}
}
}
.middle-box {
display: flex;
align-items: center;
@include mq-max(md) {
display: none;
}
.location-box {
border-radius: 5px;
border: 1px solid $border-color;
display: flex;
align-items: center;
padding: 7px;
padding-right: 20px;
margin-right: 13px;
position: relative;
[dir="rtl"] & {
margin-right: unset;
margin-left: 13px;
padding-right: 7px;
padding-left: 20px;
}
@include mq-max(xl) {
margin-right: unset;
margin-left: 13px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 13px;
}
}
@media (max-width: 1556px) {
padding-right: 7px;
[dir="rtl"] & {
padding-right: 7px;
padding-left: 7px;
}
}
@include mq-max(md) {
display: none;
}
button {
display: flex;
align-items: center;
padding: 0;
&:focus {
box-shadow: none;
}
.location-arrow {
@include pseudowh($width: 35px, $height: 35px);
@include flex_common;
color: $content-color;
background-color: #f3f5f9;
border-radius: 5px;
margin-right: 12px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 12px;
}
@media (max-width: 1300px) {
margin-right: 0;
[dir="rtl"] & {
margin-right: unset;
margin-left: 0;
}
}
.feather {
@include pseudowh($width: 16px, $height: 16px);
}
}
.locat-name {
font-size: 16px;
font-weight: 600;
color: var(--theme-color);
@media (max-width: 1300px) {
display: none;
}
}
i {
margin-left: 17px;
color: $content-color;
[dir="rtl"] & {
margin-left: unset;
margin-right: 17px;
}
@media (max-width: 1300px) {
display: none;
}
}
}
}
.search-box {
@include mq-max(xl) {
display: none;
}
.input-group {
::placeholder {
font-size: 16px;
font-weight: 400;
}
.form-control {
width: 577px;
border-radius: 5px 0 0 5px;
border-color: $border-color;
[dir="rtl"] & {
border-radius: 0 5px 5px 0;
}
@media (max-width: 1812px) {
width: 466px;
}
&:focus {
border-color: var(--theme-color);
background-color: $white;
}
}
button {
background-color: #ffa53b;
color: $white;
padding: 14px 20px;
border-radius: 5px;
border: 1px solid #ffa53b;
&.bg-theme {
background-color: var(--theme-color);
border-color: var(--theme-color);
}
&.search-button-2 {
background-color: var(--theme-color);
border-color: var(--theme-color);
}
[dir="rtl"] & {
border-radius: 5px 0 0 5px !important;
}
.feather {
@include pseudowh($width: 20px, $height: 20px);
}
}
}
}
}
.rightside-box {
@include mq-max(xl) {
margin-left: auto;
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
}
@include mq-max(md) {
margin-left: unset;
[dir="rtl"] & {
margin-left: unset;
margin-right: unset;
}
}
.right-side-menu {
display: flex;
align-items: center;
[dir="rtl"] & {
padding-left: unset;
padding-right: 0;
}
.right-side {
position: relative;
padding-right: 32px;
[dir="rtl"] & {
padding-right: unset;
padding-left: 32px;
}
@include mq-max(md) {
display: none;
&:last-child {
display: block;
}
}
&:first-child {
display: none;
@include mq-max(xl) {
display: block;
}
@include mq-max(md) {
display: none;
}
}
&:last-child {
padding-right: 0;
[dir="rtl"] & {
padding-right: unset;
padding-left: 0;
}
&::before {
content: none;
}
}
&::before {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 24px);
right: 14px;
background-color: rgba($content-color, 0.5);
[dir="rtl"] & {
right: unset;
left: 14px;
}
}
.delivery-login-box {
display: flex;
align-items: center;
cursor: default;
.delivery-icon {
.feather {
color: $title-color;
margin-right: 14px;
stroke-width: 1.5;
[dir="rtl"] & {
margin-right: unset;
margin-left: 14px;
}
@include mq-max(4xl) {
margin-right: 0;
[dir="rtl"] & {
margin-right: unset;
margin-left: 0;
}
}
}
}
.delivery-detail {
@include mq-max(4xl) {
display: none;
}
h6 {
color: $content-color;
margin-bottom: 3px;
}
h5 {
font-weight: 500;
color: $title-color;
}
}
}
.header-badge {
padding-right: 9px;
}
.header-wishlist {
.feather {
stroke-width: 1.5;
color: $content-color;
@include mq-max(4xl) {
color: $title-color;
}
}
&:focus {
box-shadow: none;
}
span {
@include pseudowh($width: 18px, $height: 18px);
@include flex_common;
background-color: #ff7272;
font-size: 12px;
padding: 0;
border-radius: 2px;
[dir="rtl"] & {
right: 0 !important;
}
}
}
}
}
}
}
}
.onhover-dropdown {
position: relative;
&:hover {
.onhover-div {
opacity: 1;
top: 50px;
visibility: visible;
}
}
.onhover-div {
position: absolute;
top: 60px;
right: -10px;
background-color: $white;
z-index: 1001;
width: 320px;
border-radius: 10px;
padding: calc(14px + (30 - 14) * ((100vw - 320px) / (1920 - 320))) calc(11px + (20 - 11) * ((100vw - 320px) / (1920 - 320)));
box-shadow: -1px 0 10px 0 rgba($title-color, 0.07),
5px 20px 40px 0 rgba($title-color, 0.04);
opacity: 0;
transition: all 0.3s ease-in-out;
visibility: hidden;
[dir="rtl"] & {
right: unset;
left: 20px;
}
&-login {
right: 0;
width: 160px;
padding: 20px;
.user-box-name {
@include flex_wrap($dis: flex, $wrap: wrap, $gap: 5px);
align-items: center;
li {
display: block;
width: 100%;
a {
color: $title-color;
display: block;
position: relative;
&:hover {
&::after {
width: 40%;
}
}
&::after {
@include pos;
@include pseudowh($width: 0, $height: 4px);
bottom: 2px;
left: 0;
background-color: var(--theme-color);
opacity: 0.3;
border-radius: 50px;
transition: all 0.3s ease-in-out;
z-index: -1;
}
}
}
}
}
.cart-list {
@include flex_wrap($dis: flex,
$wrap: wrap,
$gap: calc(10px + (25 - 10) * ((100vw - 320px) / (1920 - 320))));
border-bottom: 1px solid $border-color;
padding-bottom: calc(12px + (22 - 12) * ((100vw - 320px) / (1920 - 320)));
[dir="rtl"] & {
padding-right: 0;
}
li {
margin: 0 !important;
&::after {
content: none !important;
}
.drop-cart {
@include flex_wrap($dis: flex, $wrap: nowrap, $gap: 15px);
align-items: center;
position: relative;
&::after {
content: none;
}
.drop-image {
img {
width: 87px;
background: $light-gray;
padding: 10px;
}
}
.drop-contain {
h5 {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
margin-bottom: 5px;
font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
color: var(--theme-color);
font-weight: 500;
}
h6 {
@include flex_wrap($dis: flex, $wrap: nowrap, $gap: 5px);
align-items: flex-end;
span {
margin-top: -2px;
color: $content-color;
}
}
.close-button {
position: absolute;
top: 0;
right: 0;
background-color: transparent;
border: none;
padding: 0;
color: $content-color;
[dir="rtl"] & {
right: unset;
left: 0;
}
}
}
}
}
}
.button-group {
@include flex_common($dis: flex,
$align: center,
$justify: space-between);
margin-top: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
.cart-button {
border: 2px solid var(--theme-color);
color: var(--theme-color);
padding: 6px 10px;
&:hover {
background-color: var(--theme-color);
color: $white;
}
}
}
.price-box {
@include flex_common($dis: flex,
$align: center,
$justify: space-between);
margin-top: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
}
}
}
.search-full {
@include pseudowh($width: 0, $height: 0);
background-color: $white;
position: absolute;
top: 0;
right: 0;
z-index: 2;
transform: scale(0);
transition: all 0.3s ease;
display: flex;
align-items: center;
.input-group {
border: 1px solid #f0f3f8;
.input-group-text {
background-color: transparent;
border: none;
&.close-search {
cursor: pointer;
}
svg {
height: 18px;
}
}
input {
border: none;
}
}
&.open {
@include pseudowh;
animation: zoomIn 0.5s ease-in-out;
transform: scale(1);
transition: all 0.3s ease;
}
&.show {
.search-suggestion {
padding: 10px;
border: 1px solid #f0f3f8;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
max-height: 500px;
transition: max-height 1000ms cubic-bezier(0.27, 0.7, 0, 0.99);
}
}
}
.header-nav {
@include flex_common($dis: flex, $align: center, $justify: space-between);
.header-nav-left {
position: relative;
.dropdown-category {
@include flex_common;
padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320)));
background: var(--theme-color2);
color: $white;
border-radius: 5px;
border: none;
@include mq-max(md) {
display: none;
}
&-2 {
background: linear-gradient(93.33deg, #222221 12.35%, #2f2f2d 99.38%);
}
.feather {
font-size: 23px;
margin-right: calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320)));
[dir="rtl"] & {
margin-right: unset;
margin-left: calc(9px + (16 - 9) * ((100vw - 320px) / (1920 - 320)));
}
}
span {
font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
font-weight: 600;
}
.dropdown {
display: inline-block;
&.custom-dropdown {
position: unset;
a {
display: block;
color: $white;
text-decoration: none;
transition: background 0.35s ease;
font-family: $public-sans;
font-weight: 500;
font-size: 18px;
}
.fa {
margin-top: 3px;
margin-left: 10px;
font-size: 14px;
color: var(--theme-color);
}
ul {
display: none;
border: 1px solid $border-color;
border-radius: 5px;
position: absolute;
top: 53px;
width: 100%;
left: 0;
background-color: $white;
box-shadow: 0px 3px 4px rgba($black, 0.14);
z-index: 999;
.show {
display: block;
}
@include mq-max(xl) {
position: fixed;
top: 0;
left: 0;
width: 320px;
}
li {
display: flex;
align-items: center;
padding: 12px 14px;
border-bottom: 1px solid $border-color;
cursor: pointer;
transition: background 0.35s ease;
color: $title-color;
img {
@include pseudowh($width: 25px, $height: 25px);
object-fit: contain;
margin-right: 6px;
}
&:last-child {
border-bottom: none;
}
&:focus,
&:hover {
background-color: $border-color;
}
}
}
}
}
}
&:hover {
.category-dropdown {
opacity: 1;
visibility: visible;
top: 63px;
}
}
.category-dropdown {
position: absolute;
top: 72px;
left: 0;
background-color: $white;
box-shadow: 0 0 8px #ddd;
z-index: 2;
width: 300px;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
[dir="rtl"] & {
left: unset;
right: 0;
}
@include mq-max(md) {
@include pseudowh($width: calc(300px + (320 - 300) * ((100vw - 320px) / (1920 - 320))),
$height: 100vh);
position: fixed;
top: 0;
left: -320px;
border-radius: 0;
z-index: 10;
padding: 0;
opacity: 1;
visibility: visible;
transition: all 0.3s ease-in-out;
box-shadow: none;
[dir="rtl"] & {
left: unset;
right: -320px;
}
&.show {
left: 0;
[dir="rtl"] & {
left: unset;
right: 0;
}
}
&:hover {
opacity: 1;
visibility: visible;
top: 0;
}
}
.category-title {
display: none;
@include mq-max(md) {
@include flex_common($dis: flex,
$align: center,
$justify: space-between);
padding: 20px 24px;
border-bottom: 1px solid #ececec;
box-shadow: 0 2px 10px -3px rgba($title-color, 0.1);
}
h5 {
color: var(--theme-color);
font-weight: 600;
}
}
.category-list {
@include flex_wrap($dis: flex, $wrap: wrap, $gap: 25px);
padding: 20px 25px;
li {
display: block;
width: 100%;
a {
@include flex_wrap($dis: flex, $wrap: wrap, $gap: 10px);
align-items: center;
color: $content-color;
&:hover {
h6 {
letter-spacing: 0.3px;
&::before {
width: 65px;
}
}
}
img {
@include pseudowh($width: 23px, $height: 23px);
object-fit: contain;
}
h6 {
font-size: 17px;
font-weight: 500;
position: relative;
transition: all 0.3s ease-in-out;
&:before {
@include pos;
@include pseudowh($width: 0, $height: 3px);
bottom: 0;
left: 0;
background-color: var(--theme-color);
opacity: 0.5;
transition: all 0.3s ease-in-out;
[dir="rtl"] & {
left: unset;
right: 0;
}
}
}
.according-menu {
margin-left: auto;
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
}
i {
margin-left: auto;
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
transform: rotate(180deg);
}
@include mq-max(md) {
display: none;
}
}
}
}
}
}
}
.header-nav-right {
@include mq-max(md) {
display: none;
}
.deal-button {
color: var(--theme-color);
padding: calc(6px + (15 - 6) * ((100vw - 320px) / (1920 - 320))) calc(11px + (20 - 11) * ((100vw - 320px) / (1920 - 320)));
position: relative;
border-radius: 5px;
overflow: hidden;
z-index: 0;
&::before {
@include pos;
@include pseudowh;
top: 0;
left: 0;
background-color: var(--theme-color);
opacity: 0.1;
z-index: -1;
}
.feather {
margin-right: 10px;
stroke-width: 1.5px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 10px;
}
@include mq-max(2xl) {
margin-right: 0;
[dir="rtl"] & {
margin-right: unset;
margin-left: 0;
}
}
}
span {
font-size: 16px;
font-weight: 600;
@include mq-max(2xl) {
display: none;
}
}
}
}
}
&.header-compact {
.top-nav {
.navbar-top {
justify-content: unset;
.rightside-box {
margin-left: auto;
display: flex;
align-items: center;
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
}
}
}
.location-box {
padding-right: 10px;
}
}
&.bg-theme {
.navbar-light {
.navbar-nav {
.nav-link {
color: $white !important;
&:hover {
color: $white !important;
}
}
}
}
.top-nav {
.navbar-top {
.rightside-box {
.right-side-menu {
.right-side {
&:before {
background-color: rgba($white, 0.5);
}
.header-wishlist {
.feather {
color: $white;
}
}
.delivery-login-box {
.delivery-detail {
h5 {
color: $white;
}
h6 {
color: rgba($white, 0.7);
}
}
.delivery-icon {
.feather {
color: $white;
}
}
}
}
}
}
}
}
.location-box {
border-color: rgba($white, 0.5);
button {
i {
color: $white;
}
.locat-name {
color: $white;
}
.location-arrow {
color: $white;
background-color: rgba($white, 0.24);
}
}
}
}
&.header-absolute {
position: absolute;
left: 0;
width: 100%;
top: 0;
z-index: 1;
&.bg-theme {
background-color: transparent;
}
.navbar-expand-xl {
.dropdown:hover {
.dropdown-menu-2 {
@media (min-width: 1200px) {
[dir="rtl"] & {
transform: translateX(-50%) translateY(0);
}
}
}
}
}
}
&.fixed-header {
position: fixed;
top: 0;
left: 0;
width: calc(100vw - 320px);
z-index: 1;
background-color: $white;
margin-left: 320px;
border-bottom: 1px solid #ececec;
[dir="rtl"] & {
left: unset;
right: 0;
margin-left: unset;
margin-right: 320px;
}
@include mq-max(xl) {
width: 100%;
margin-left: 0;
[dir="rtl"] & {
margin-left: unset;
margin-right: 0;
}
}
.top-nav {
padding: 18px 0;
}
}
.location-box {
border-radius: 5px;
border: 1px solid $border-color;
display: flex;
align-items: center;
padding: 7px;
padding-right: 20px;
margin-right: 13px;
position: relative;
[dir="rtl"] & {
margin-right: unset;
margin-left: 13px;
padding-right: 7px;
padding-left: 20px;
}
@include mq-max(xl) {
margin-right: unset;
margin-left: 13px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 13px;
}
}
@media (max-width: 1556px) {
padding-right: 7px;
[dir="rtl"] & {
padding-right: 7px;
padding-left: 7px;
}
}
@include mq-max(md) {
display: none;
}
button {
display: flex;
align-items: center;
padding: 0;
&:focus {
box-shadow: none;
}
.location-arrow {
@include pseudowh($width: 35px, $height: 35px);
@include flex_common;
color: $content-color;
background-color: #f3f5f9;
border-radius: 5px;
margin-right: 12px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 12px;
}
@media (max-width: 1300px) {
margin-right: 0;
[dir="rtl"] & {
margin-right: unset;
margin-left: 0;
}
}
.feather {
@include pseudowh($width: 16px, $height: 16px);
}
}
.locat-name {
font-size: 16px;
font-weight: 600;
color: var(--theme-color);
@media (max-width: 1300px) {
display: none;
}
}
i {
margin-left: 17px;
color: $content-color;
[dir="rtl"] & {
margin-left: unset;
margin-right: 17px;
}
@media (max-width: 1300px) {
display: none;
}
}
}
}
}
// mobile menu
.mobile-menu {
position: fixed;
bottom: 0;
padding: 10px;
width: 100%;
background-color: var(--theme-color);
z-index: 2;
overflow: hidden;
box-shadow: 0 -3px 10px 0px rgba($black, 0.08);
[dir="rtl"] & {
left: 0;
}
ul {
display: flex;
width: 70%;
margin: 0 auto;
@include mq-max(md) {
width: 80%;
}
@include mq-max(xs) {
width: 95%;
}
@include mq-max(2xs) {
width: 100%;
}
[dir="rtl"] & {
padding: 0;
}
li {
width: 100%;
text-align: center;
&.active {
transition: 0.3s ease;
position: relative;
&::before {
@include pos;
@include pseudowh($width: 10px, $height: 10px);
bottom: -15px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
background-color: $white;
border-radius: 100%;
}
}
a {
display: block;
img {
display: block;
margin: 0px auto;
}
&.active,
&:hover {
color: $title-color;
}
@include mq-max(2xs) {
font-size: 13px;
}
.icli {
display: inline-block;
margin: 0 auto;
font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (1920 - 320)));
color: $white;
}
span {
display: block;
color: $white;
}
}
}
}
}
.header-2 {
.navbar-top {
display: flex;
align-items: center;
@include mq-max(xs) {
justify-content: space-between;
}
.navbar-toggler {
&:focus {
box-shadow: none;
}
}
}
.search-box {
display: none;
@include mq-max(lg) {
display: block;
background-color: $white;
padding: 6px;
border-radius: 5px;
border: 1px solid $content-color;
text-align: right;
margin-left: auto;
a {
@include flex_common;
color: $black;
.icli {
font-size: 25px;
}
}
}
@include mq-max(xs) {
margin-left: unset;
}
}
.dropdown-list {
&.drop-state {
margin-right: 20px;
width: 100%;
display: flex;
align-items: center;
@include mq-max(xl) {
margin-right: 0;
}
}
@include mq-max(lg) {
background-color: transparent;
margin: 0;
}
.location-icon {
margin-right: 8px;
display: flex;
.iconly-Location {
font-size: 25px;
}
}
.dropdown {
@include flex_common;
.dropdown-toggle {
padding-left: 0;
font-size: 16px;
display: flex;
align-items: center;
font-weight: 500;
letter-spacing: 0.5px;
position: relative;
margin-top: 4px;
&::after {
display: none;
}
i {
color: $black;
margin-left: 5px;
}
}
.dropdown-menu {
min-width: 100%;
li {
display: block;
}
}
}
}
.form-select {
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 0;
font-family: $public-sans;
color: $title-color;
&:focus {
border-color: transparent;
box-shadow: none;
}
}
.top-nav {
padding: 14px 0;
border-bottom: 1px solid $border-color;
@include mq-max(md) {
border-bottom: unset;
padding-bottom: 0;
}
&-color {
background-color: #ffe03e;
}
span {
color: $title-color;
.icli {
font-size: 25px;
}
}
.nav-logo {
display: flex;
font-size: calc(28px + (35 - 28) * ((100vw - 320px) / (1920 - 320)));
color: var(--theme-color);
font-weight: bolder;
font-family: $public-sans;
span {
color: $title-color;
}
}
.search-full {
@include pseudowh($width: 0, $height: 0);
background-color: $white;
position: absolute;
top: 40px;
right: 0;
z-index: 1;
transform: scale(0);
transition: all 0.3s ease;
display: flex;
align-items: center;
@include mq-max(2xs) {
right: -5px;
}
.input-group {
border: 1px solid #f0f3f8;
box-shadow: 0px 3px 4px rgba($black, 0.14);
.input-group-text {
background-color: $white;
border: none;
color: $content-color;
&.close-search {
cursor: pointer;
}
}
input {
border: none;
height: 50px;
}
}
&.open {
width: 100%;
animation: zoomIn 0.5s ease-in-out;
transform: scale(1);
transition: all 0.3s ease;
padding: 0 30px;
@include mq-max(sm) {
padding: 0 25px;
}
@include mq-max(xs) {
padding: 0 15px;
}
@include mq-max(2xs) {
@include center(horizontal);
padding: 0;
width: 95%;
}
}
&.show {
.search-suggestion {
padding: 10px;
border: 1px solid #f0f3f8;
height: max-content;
max-height: 500px;
transition: max-height 1000ms cubic-bezier(0.27, 0.7, 0, 0.99);
}
}
}
.middle-box {
display: inline-block;
margin-left: calc(16px + (29 - 16) * ((100vw - 320px) / (1920 - 320)));
[dir="rtl"] & {
margin-left: unset;
margin-right: calc(16px + (29 - 16) * ((100vw - 320px) / (1920 - 320)));
}
@include mq-max(2xl) {
@include flex_common($dis: flex,
$align: center,
$justify: space-between);
margin-left: 25px;
float: right;
}
@include mq-max(xl) {
margin-left: 15px;
}
@include mq-max(lg) {
display: none;
}
.center-box {
display: flex;
align-items: center;
@include mq-max(lg) {
display: none;
}
}
.searchbar-box {
position: relative;
@include mq-max(lg) {
display: none;
}
.search-button {
@include center(vertical);
@include flex_common;
position: absolute;
padding: 0 19px;
right: 0;
height: 100%;
cursor: pointer;
[dir="rtl"] & {
right: unset;
left: 0;
}
.iconly-Search {
font-size: calc(18px + (25 - 18) * ((100vw - 320px) / (1920 - 320)));
color: #4a5568;
}
}
input {
@include pseudowh($width: 685px, $height: 45px);
padding: 8px 60px 8px 18px;
color: $title-color;
border-color: #d3d3d3;
font-size: 16px;
[dir="rtl"] & {
padding: 8px 18px 8px 60px;
}
@media (max-width: 1754px) {
width: 630px;
}
@media (max-width: 1678px) {
width: 580px;
}
@media (max-width: 1604px) {
width: 529px;
}
@media (max-width: 1332px) {
width: 483px;
}
@media (max-width: 1270px) {
width: 436px;
}
@media (max-width: 1235px) {
width: 415px;
}
&:focus {
box-shadow: 0px 3px 4px rgba($black, 0.14);
}
&::placeholder {
color: $content-color;
font-size: 16px;
}
}
}
.location-box-2 {
display: flex;
align-items: center;
margin-right: 20px;
position: relative;
[dir="rtl"] & {
margin-right: unset;
margin-left: 20px;
}
@include mq-max(xl) {
margin-right: unset;
margin-left: 0;
}
@include mq-max(md) {
display: none;
}
button {
display: flex;
align-items: center;
padding: 0;
&:focus {
box-shadow: none;
}
.icli {
margin-right: 9px;
font-size: 22px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 9px;
}
@media (max-width: 1556px) {
margin-right: 0;
}
}
span {
font-size: 16px;
@media (max-width: 1556px) {
display: none;
}
}
.down-arrow {
margin-left: 10px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 10px;
}
@media (max-width: 1556px) {
display: none;
}
}
}
}
}
}
.rightside-menu {
display: flex;
align-items: center;
margin-left: auto;
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
.dropdown-dollar {
display: flex;
align-items: center;
margin-right: 22px;
@include mq-max(lg) {
display: none;
}
.dropdown {
position: relative;
z-index: 1;
.dropdown-toggle {
font-size: 16px;
display: flex;
align-items: center;
font-weight: 500;
position: relative;
border: none;
background-color: transparent;
padding: 0;
i {
margin-left: 8px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 8px;
}
}
&::after {
display: none;
}
}
+.dropdown {
margin-left: 23px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 23px;
}
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 25px);
left: -10px;
background-color: $border-color;
[dir="rtl"] & {
left: unset;
right: -10px;
}
}
}
.dropdown-menu {
min-width: 100%;
li {
display: block;
}
}
}
}
.wishlist-box {
display: flex;
align-items: center;
.header-icon {
@include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
$height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
@include flex_common;
font-size: 18px;
border: 1px solid $border-color;
background-color: $white;
border-radius: 100%;
padding: 10px;
position: relative;
+.header-icon {
margin-left: 38px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 100%);
left: -50%;
background-color: $border-color;
}
}
&.swap-icon {
margin-left: 0;
&::after {
content: none;
}
}
&.bag-icon {
display: block;
@include mq-max(xs) {
display: none;
}
}
&.search-icon,
&.user-icon {
display: none;
@include mq-max(xl) {
display: flex;
+.header-icon {
margin-left: 38px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 100%);
left: -50%;
background-color: $border-color;
}
}
}
}
.badge-number {
@include pseudowh($width: 18px, $height: 18px);
@include flex_common;
position: absolute;
top: -10px;
right: 0;
background: var(--theme-color2);
font-weight: 600;
color: $white;
border-radius: 100%;
font-size: 10px;
}
.icli {
color: $black;
font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
&.iconly-Swap {
transform: rotate(90deg);
}
}
}
}
.option-list {
>ul {
display: flex;
[dir="rtl"] & {
padding-right: 0;
}
>li {
position: relative;
&:nth-of-type(5n-3) {
display: none;
+li {
margin-left: 0;
&::after {
content: none;
}
}
}
@include mq-max(xl) {
&:nth-of-type(5n-3) {
display: block;
+li {
margin-left: 22px;
&::after {
content: "";
}
}
}
}
@include mq-max(md) {
&:not(:nth-last-of-type(5n-5)) {
display: none;
}
}
+li {
margin-left: 37px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 37px;
}
@include mq-max(3xl) {
margin-left: 22px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 22px;
}
}
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 80%);
left: -20px;
background-color: $border-color;
[dir="rtl"] & {
left: unset;
right: -20px;
}
@include mq-max(3xl) {
left: -13px;
[dir="rtl"] & {
left: unset;
right: -13px;
}
}
}
}
.header-icon {
@include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
$height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
@include flex_common;
font-size: 18px;
border: 1px solid $border-color;
background-color: $white;
border-radius: 100%;
padding: 10px;
position: relative;
+.header-icon {
margin-left: 38px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 100%);
left: -50%;
background-color: $border-color;
}
}
&.swap-icon {
margin-left: 0;
&::after {
content: none;
}
}
&.bag-icon {
@include mq-max(xs) {
display: none;
}
}
&.search-icon,
&.user-icon {
display: none;
@include mq-max(xl) {
display: flex;
+.header-icon {
margin-left: 38px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 100%);
left: -50%;
background-color: $border-color;
}
}
}
}
.badge-number {
@include pseudowh($width: 18px, $height: 18px);
@include flex_common;
position: absolute;
top: -10px;
right: 0;
background-color: var(--theme-color);
font-weight: 600;
color: $white;
border-radius: 100%;
font-size: 10px;
}
.icli {
color: $black;
font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
&.iconly-Swap {
transform: rotate(90deg);
}
}
}
}
}
}
.option-list-2 {
display: flex;
li {
position: relative;
.header-icon {
@include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
$height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
@include flex_common;
font-size: 18px;
border: 1px solid $border-color;
background-color: $white;
border-radius: 100%;
padding: 10px;
position: relative;
+.header-icon {
margin-left: 38px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 100%);
left: -50%;
background-color: $border-color;
}
}
.badge-number {
@include pseudowh($width: 18px, $height: 18px);
@include flex_common;
position: absolute;
top: -10px;
right: 0;
background-color: var(--theme-color);
font-weight: 600;
color: $white;
border-radius: 100%;
font-size: 10px;
}
.icli {
color: $black;
font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
&.iconly-Swap {
transform: rotate(90deg);
}
}
}
.user-box {
@include flex_wrap($dis: flex, $wrap: nowrap, $gap: 12px);
align-items: center;
&:hover {
.user-name {
h4 {
color: var(--theme-color);
}
}
}
.user-name {
@media (max-width: 1660px) {
display: none;
}
}
}
+li {
margin-left: 37px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 37px;
}
@include mq-max(4xl) {
margin-left: 22px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 22px;
}
}
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 80%);
left: -20px;
background-color: $border-color;
[dir="rtl"] & {
left: unset;
right: -20px;
}
@include mq-max(4xl) {
left: -13px;
[dir="rtl"] & {
left: unset;
right: -13px;
}
}
}
}
}
}
.mobile-app {
border: 1px solid var(--theme-color);
border-radius: 5px;
padding: 16px 18px;
display: flex;
align-items: center;
margin-left: 18px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 18px;
}
.mobile-image {
margin-right: 11px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 11px;
}
img {
@include pseudowh($width: 15px, $height: auto);
}
}
}
.dropdown-user {
display: flex;
align-items: center;
.user-detail {
margin-left: 15px;
@include mq-max(2xl) {
display: none;
}
h6 {
color: $content-color;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
h5 {
color: $title-color;
font-size: 16px;
margin-bottom: 0;
}
}
}
}
.right-nav {
float: right;
display: flex;
align-items: center;
margin-left: auto;
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
@include mq-max(2xl) {
display: none;
}
.nav-number {
display: flex;
align-items: center;
@include mq-max(4xl) {
display: none;
}
img {
@include pseudowh($width: 32px, $height: 32px);
}
span {
font-size: calc(18px + (27 - 18) * ((100vw - 320px) / (1920 - 320)));
font-weight: 500;
margin-bottom: 0;
margin-left: 8px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 8px;
}
}
}
.fire-button {
display: flex;
align-items: center;
padding: 11px 38px;
overflow: hidden;
span {
color: $white;
margin-left: 7px;
font-size: 16px;
font-weight: 500;
[dir="rtl"] & {
margin-left: unset;
margin-right: 7px;
}
}
.fire {
position: relative;
@include pseudowh($width: 20px, $height: 20px);
background-color: transparent;
z-index: 1;
img {
margin-top: -11px;
}
.fire-main {
@include pseudowh;
position: absolute;
animation: scaleUpDown 3s ease-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
.main-fire {
@include pseudowh;
position: absolute;
background-image: radial-gradient(farthest-corner at 10px 0,
$white 0%,
#ddd 95%);
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
}
.particle-fire {
@include pseudowh($width: 10px, $height: 10px);
position: absolute;
top: 60%;
left: 45%;
background-color: $white;
border-radius: 50%;
animation: particleUp 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
}
.fire-right {
@include pseudowh;
position: absolute;
animation: shake 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
.main-fire {
@include pseudowh($width: 80%, $height: 80%);
position: absolute;
top: 15%;
right: -25%;
background-color: $white;
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
.particle-fire {
@include pseudowh($width: 15px, $height: 15px);
position: absolute;
top: 45%;
left: 50%;
background-color: $white;
transform: scaleX(0.8) rotate(45deg);
border-radius: 50%;
animation: particleUp 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
}
}
.fire-left {
@include pseudowh;
position: absolute;
animation: shake 3s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
.main-fire {
@include pseudowh($width: 80%, $height: 80%);
position: absolute;
top: 15%;
left: -20%;
background-color: $white;
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
.particle-fire {
@include pseudowh($width: 10%, $height: 10%);
position: absolute;
top: 10%;
left: 20%;
background-color: $white;
border-radius: 50%;
animation: particleUp 3s infinite ease-out 0;
animation-fill-mode: both;
}
}
}
}
}
}
.header-nav-left {
position: relative;
.dropdown-category {
@include flex_common;
border: none;
background-color: transparent;
padding: 9px calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320))) 9px 0;
position: relative;
[dir="rtl"] & {
padding: 9px 0 9px calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320)));
}
@include mq-max(md) {
display: none;
}
&::after {
@include pos;
@include pseudowh($width: 1px, $height: 100%);
top: 0;
right: 0;
background-color: $border-color;
[dir="rtl"] & {
right: unset;
left: 0;
}
}
.icli {
font-size: 23px;
color: var(--theme-color);
margin-right: 10px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 10px;
}
}
span {
font-size: 16px;
margin-top: 4px;
}
}
&:hover {
.category-dropdown {
opacity: 1;
visibility: visible;
top: 63px;
}
}
.category-dropdown {
position: absolute;
top: 72px;
left: 0;
background-color: $white;
box-shadow: 0 0 8px #ddd;
z-index: 2;
width: 270px;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
@include mq-max(md) {
@include pseudowh($width: calc(300px + (320 - 300) * ((100vw - 320px) / (1920 - 320))),
$height: 100vh);
position: fixed;
top: 0;
left: -320px;
border-radius: 0;
z-index: 10;
padding: 0;
opacity: 1;
visibility: visible;
transition: all 0.3s ease-in-out;
box-shadow: none;
[dir="rtl"] & {
left: unset;
right: -320px;
}
&.show {
left: 0;
[dir="rtl"] & {
left: unset;
right: 0;
}
}
&:hover {
opacity: 1;
visibility: visible;
top: 0;
}
}
.category-title {
display: none;
@include mq-max(md) {
@include flex_common($dis: flex,
$align: center,
$justify: space-between);
padding: 20px 24px;
border-bottom: 1px solid #ececec;
box-shadow: 0 2px 10px -3px rgba($title-color, 0.1);
}
h5 {
color: var(--theme-color);
font-weight: 600;
}
}
.category-list {
@include flex_wrap($dis: flex, $wrap: wrap, $gap: 25px);
padding: 20px 25px;
li {
display: block;
width: 100%;
.category-name {
display: flex;
align-items: center;
color: $content-color;
&:hover {
h6 {
letter-spacing: 0.3px;
&::before {
width: 65px;
}
}
}
img {
width: 22px;
height: 22px;
object-fit: contain;
}
h6 {
font-size: 17px;
font-weight: 500;
position: relative;
margin-left: 10px;
transition: all 0.3s ease-in-out;
&:before {
@include pos;
@include pseudowh($width: 0, $height: 3px);
bottom: 0;
left: 0;
background-color: var(--theme-color);
opacity: 0.5;
transition: all 0.3s ease-in-out;
}
}
i {
margin-left: auto;
@include mq-max(md) {
display: none;
}
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
}
.according-menu {
margin-left: auto;
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
}
}
a {
display: flex;
align-items: center;
color: $content-color;
&:hover {
h6 {
letter-spacing: 0.3px;
&::before {
width: 65px;
}
}
}
img {
width: 22px;
height: 22px;
object-fit: contain;
}
h6 {
font-size: 17px;
font-weight: 500;
position: relative;
margin-left: 10px;
transition: all 0.3s ease-in-out;
&:before {
@include pos;
@include pseudowh($width: 0, $height: 3px);
bottom: 0;
left: 0;
background-color: var(--theme-color);
opacity: 0.5;
transition: all 0.3s ease-in-out;
}
}
i {
margin-left: auto;
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
}
}
}
}
}
}
.dropdown-list {
@include flex_common;
font-family: $public-sans;
@include mq-max(md) {
display: none;
}
li {
&:last-child {
margin-right: 0;
}
+li {
.dropdown {
margin-left: 20px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 80%);
left: -12px;
background-color: rgba($white, 0.4);
}
}
}
&:first-child {
&::after {
content: none;
}
}
.dropdown {
.dropdown-toggle {
width: auto;
display: block;
background-color: transparent;
border-radius: 5px;
font-weight: 500;
font-size: unset;
&:after {
content: none;
}
span {
font-weight: 400;
}
.fa-chevron-down {
margin-left: 10px;
}
}
.dropdown-menu {
.dropdown-list {
display: block;
+.dropdown-list {
margin-top: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
}
.about-list {
font-family: $public-sans;
@include mq-max(lg) {
display: none;
}
li {
position: relative;
margin-left: 15px;
font-size: 12px;
font-weight: 500;
&:first-child {
margin-left: 0;
&::after {
content: none;
}
}
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 70%);
left: -8px;
background-color: rgba($white, $alpha: 0.4);
}
}
}
}
.header-3 {
.navbar-top {
display: flex;
align-items: center;
@include mq-max(xs) {
justify-content: space-between;
}
.navbar-toggler {
&:focus {
box-shadow: none;
}
}
.support-box {
@include flex_wrap($dis: flex, $wrap: nowrap, $gap: 9px);
align-items: flex-start;
@media (max-width: 1432px) {
display: none;
}
.support-image {
img {
@include pseudowh($width: 33px, $height: auto);
}
}
.support-number {
text-align: right;
h2 {
font-size: 25px;
color: $white;
}
h4 {
color: $white;
margin-top: 4px;
font-weight: 500;
font-size: 16px;
}
}
}
}
.search-box {
display: none;
@include mq-max(lg) {
display: block;
background-color: $white;
padding: 6px;
border-radius: 5px;
border: 1px solid $content-color;
text-align: right;
margin-left: auto;
a {
@include flex_common;
color: $black;
.icli {
font-size: 25px;
}
}
}
@include mq-max(xs) {
margin-left: unset;
}
}
.dropdown-list {
&.drop-state {
margin-right: 20px;
width: 100%;
display: flex;
align-items: center;
@include mq-max(xl) {
margin-right: 0;
}
}
@include mq-max(lg) {
background-color: transparent;
margin: 0;
}
.location-icon {
margin-right: 8px;
display: flex;
.iconly-Location {
font-size: 25px;
}
}
.dropdown {
@include flex_common;
.dropdown-toggle {
padding-left: 0;
font-size: 16px;
display: flex;
align-items: center;
font-weight: 500;
letter-spacing: 0.5px;
position: relative;
margin-top: 4px;
&::after {
display: none;
}
i {
color: $black;
margin-left: 5px;
}
}
.dropdown-menu {
min-width: 100%;
li {
display: block;
}
}
}
}
.form-select {
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 0;
font-family: $public-sans;
color: $title-color;
&:focus {
border-color: transparent;
box-shadow: none;
}
}
.top-nav {
padding: 14px 0;
background-color: var(--theme-color);
@include mq-max(xl) {
border-bottom: unset;
}
.navbar-top {
@include mq-max(md) {
justify-content: normal;
}
}
span {
color: $title-color;
.icli {
font-size: 25px;
margin-top: 2px;
color: $white;
-webkit-text-fill-color: $white;
}
}
.nav-logo {
display: flex;
font-size: calc(28px + (35 - 28) * ((100vw - 320px) / (1920 - 320)));
color: var(--theme-color);
font-weight: bolder;
font-family: $public-sans;
span {
color: $title-color;
}
}
.search-full {
@include pseudowh($width: 0, $height: 0);
background-color: $white;
position: absolute;
top: 40px;
right: 0;
z-index: 1;
transform: scale(0);
transition: all 0.3s ease;
display: flex;
align-items: center;
@include mq-max(2xs) {
right: -5px;
}
.input-group {
border: 1px solid #f0f3f8;
box-shadow: 0px 3px 4px rgba($black, 0.14);
.input-group-text {
background-color: $white;
border: none;
color: $content-color;
&.close-search {
cursor: pointer;
}
}
input {
border: none;
height: 50px;
}
}
&.open {
width: 100%;
animation: zoomIn 0.5s ease-in-out;
transform: scale(1);
transition: all 0.3s ease;
padding: 0 30px;
@include mq-max(sm) {
padding: 0 25px;
}
@include mq-max(xs) {
padding: 0 15px;
}
@include mq-max(2xs) {
@include center(horizontal);
padding: 0;
width: 95%;
}
}
&.show {
.search-suggestion {
padding: 10px;
border: 1px solid #f0f3f8;
height: max-content;
max-height: 500px;
transition: max-height 1000ms cubic-bezier(0.27, 0.7, 0, 0.99);
}
}
}
.middle-box {
display: inline-block;
margin-left: calc(16px + (29 - 16) * ((100vw - 320px) / (1920 - 320)));
[dir="rtl"] & {
margin-left: unset;
margin-right: calc(16px + (29 - 16) * ((100vw - 320px) / (1920 - 320)));
}
@include mq-max(2xl) {
@include flex_common($dis: flex,
$align: center,
$justify: space-between);
margin-left: 25px;
float: right;
}
@include mq-max(xl) {
margin-left: 15px;
}
@include mq-max(lg) {
margin-left: auto;
}
.center-box {
display: flex;
align-items: center;
}
@include mq-max(md) {
display: block !important;
}
.searchbar-box-2 {
position: relative;
display: flex;
align-items: stretch;
width: 853px;
border: 1px solid var(--theme-color);
border-radius: 5px;
overflow: hidden;
@media (max-width: 1742px) {
width: 800px;
}
@media (max-width: 1668px) {
width: 760px;
}
@media (max-width: 1610px) {
width: 710px;
}
@media (max-width: 1544px) {
width: 670px;
}
@include mq-max(lg) {
display: none;
}
.search-button {
background-color: #ffb803;
font-weight: 500;
}
.search-icon {
font-size: 27px;
background-color: $white;
padding-left: 16px;
padding-right: 5px;
[dir="rtl"] & {
padding-left: 5px;
padding-right: 16px;
}
i {
color: var(--theme-color);
}
}
input {
height: 55px;
padding: 8px;
color: $title-color;
border: none;
font-size: 16px;
z-index: 0;
&:focus {
box-shadow: 0px 3px 4px rgba($black, 0.14);
}
&::placeholder {
color: $content-color;
font-size: 16px;
}
}
}
.location-box-2 {
display: flex;
align-items: center;
margin-right: 20px;
position: relative;
[dir="rtl"] & {
margin-right: unset;
margin-left: 20px;
}
@include mq-max(xl) {
margin-right: unset;
margin-left: 0;
}
button {
display: flex;
align-items: center;
padding: 0;
&:focus {
box-shadow: none;
}
.icli {
margin-right: 9px;
font-size: 22px;
color: $white;
[dir="rtl"] & {
margin-right: unset;
margin-left: 9px;
}
@include mq-max(lg) {
@include flex_common;
@include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
$height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
margin-right: 0;
}
}
span {
font-size: 16px;
color: $white;
@include mq-max(lg) {
display: none;
}
}
.down-arrow {
margin-left: 10px;
color: $white;
[dir="rtl"] & {
margin-left: unset;
margin-right: 10px;
}
@include mq-max(lg) {
display: none;
}
}
}
}
}
}
.rightside-menu {
display: flex;
align-items: center;
margin-left: auto;
&.support-sidemenu {
@media (max-width: 1432px) {
display: none;
}
}
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
@include mq-max(xl) {
position: absolute;
top: -49px;
right: 0;
[dir="rtl"] & {
right: unset;
left: 0;
}
}
@include mq-max(lg) {
top: -53px;
right: 78px;
}
@include mq-max(md) {
top: -51px;
}
@include mq-max(xs) {
top: -49px;
right: 58px;
}
@include mq-max(2xs) {
right: 64px;
}
.dropdown-dollar {
display: flex;
align-items: center;
margin-right: 22px;
@include mq-max(lg) {
display: none;
}
.dropdown {
position: relative;
z-index: 0;
.dropdown-toggle {
font-size: 16px;
display: flex;
align-items: center;
font-weight: 500;
position: relative;
border: none;
background-color: transparent;
padding: 0;
i {
margin-left: 8px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 8px;
}
}
&::after {
display: none;
}
}
+.dropdown {
margin-left: 23px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 23px;
}
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 25px);
left: -10px;
background-color: $border-color;
[dir="rtl"] & {
left: unset;
right: -10px;
}
}
}
.dropdown-menu {
min-width: 100%;
li {
display: block;
}
}
}
}
.wishlist-box {
display: flex;
align-items: center;
.header-icon {
@include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
$height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
@include flex_common;
font-size: 18px;
border: 1px solid $border-color;
background-color: $white;
border-radius: 100%;
padding: 10px;
position: relative;
+.header-icon {
margin-left: 38px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 100%);
left: -50%;
background-color: $border-color;
}
}
&.swap-icon {
margin-left: 0;
&::after {
content: none;
}
}
&.bag-icon {
display: block;
@include mq-max(xs) {
display: none;
}
}
&.search-icon,
&.user-icon {
display: none;
@include mq-max(xl) {
display: flex;
+.header-icon {
margin-left: 38px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 100%);
left: -50%;
background-color: $border-color;
}
}
}
}
.badge-number {
@include pseudowh($width: 18px, $height: 18px);
@include flex_common;
position: absolute;
top: -10px;
right: 0;
background: var(--theme-color2);
font-weight: 600;
color: $white;
border-radius: 100%;
font-size: 10px;
}
.icli {
color: $black;
font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
&.iconly-Swap {
transform: rotate(90deg);
}
}
}
}
.option-list-2 {
display: flex;
[dir="rtl"] & {
padding-right: 0;
}
li {
position: relative;
&:nth-of-type(5n-4) {
display: none;
+li {
margin-left: 0;
[dir="rtl"] & {
margin-left: unset;
margin-right: 0;
}
&::after {
content: none;
}
}
}
@include mq-max(xl) {
&:nth-of-type(5n-4) {
display: block;
+li {
margin-left: 22px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 22px;
}
&::after {
content: "";
}
}
}
}
@include mq-max(md) {
&:not(:nth-last-of-type(5n-5)) {
display: none;
}
}
.header-icon {
@include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
$height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
@include flex_common;
font-size: 18px;
border: 1px solid $border-color;
background-color: $white;
border-radius: 100%;
padding: 10px;
position: relative;
@include mq-max(xl) {
border: none;
background-color: transparent;
}
+.header-icon {
margin-left: 38px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 100%);
left: -50%;
background-color: $border-color;
}
}
.badge-number {
@include pseudowh($width: 18px, $height: 18px);
@include flex_common;
position: absolute;
top: -10px;
right: 0;
background-color: var(--theme-color);
font-weight: 600;
color: $white;
border-radius: 100%;
font-size: 10px;
}
.badge-light {
@include mq-max(xl) {
background-color: $white;
color: var(--theme-color);
top: -3px;
}
}
.icli {
color: $black;
font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
&.iconly-Swap {
transform: rotate(90deg);
}
@include mq-max(xl) {
color: $white;
}
}
}
+li {
margin-left: 37px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 37px;
}
@include mq-max(4xl) {
margin-left: 22px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 22px;
}
}
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 80%);
left: -20px;
background-color: $border-color;
[dir="rtl"] & {
left: unset;
right: -20px;
}
@include mq-max(4xl) {
left: -13px;
[dir="rtl"] & {
left: unset;
right: -13px;
}
}
@include mq-max(xl) {
background-color: rgba($white, 0.2);
}
}
}
}
}
.user-box {
@include flex_wrap($dis: flex, $wrap: nowrap, $gap: 12px);
align-items: center;
margin-left: 37px;
position: relative;
[dir="rtl"] & {
margin-left: unset;
margin-right: 37px;
}
@include mq-max(4xl) {
margin-left: 22px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 22px;
}
}
@include mq-max(md) {
margin-left: 0;
[dir="rtl"] & {
margin-left: unset;
margin-right: 0;
}
}
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 80%);
left: -20px;
background-color: $border-color;
[dir="rtl"] & {
left: unset;
right: -20px;
}
@include mq-max(4xl) {
left: -13px;
[dir="rtl"] & {
left: unset;
right: -13px;
}
}
@include mq-max(xl) {
background-color: rgba($white, 0.2);
}
@include mq-max(md) {
content: none;
}
}
.header-icon {
@include pseudowh($width: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))),
$height: calc(35px + (46 - 35) * ((100vw - 320px) / (1920 - 320))));
@include flex_common;
font-size: 18px;
border: 1px solid $border-color;
background-color: $white;
border-radius: 100%;
padding: 10px;
position: relative;
@include mq-max(xl) {
border: none;
background-color: transparent;
}
.badge-number {
@include pseudowh($width: 18px, $height: 18px);
@include flex_common;
position: absolute;
top: -10px;
right: 0;
background-color: var(--theme-color);
font-weight: 600;
color: $white;
border-radius: 100%;
font-size: 10px;
}
.icli {
color: $black;
font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1920 - 320)));
@include mq-max(xl) {
color: $white;
}
}
}
&:hover {
.user-name {
h4 {
color: var(--theme-color);
}
}
}
.user-name {
@media (max-width: 1660px) {
display: none;
}
}
}
.mobile-app {
position: relative;
border-radius: 5px;
padding: 16px 18px;
display: flex;
overflow: hidden;
align-items: center;
margin-left: 18px;
color: var(--theme-color);
&::before {
@include pos;
@include pseudowh;
top: 0;
left: 0;
background-color: var(--theme-color);
opacity: 0.1;
z-index: -1;
}
[dir="rtl"] & {
margin-left: unset;
margin-right: 18px;
}
.mobile-image {
margin-right: 11px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 11px;
}
img {
@include pseudowh($width: 15px, $height: auto);
}
}
}
.dropdown-user {
display: flex;
align-items: center;
.user-detail {
margin-left: 15px;
@include mq-max(2xl) {
display: none;
}
h6 {
color: $content-color;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
h5 {
color: $title-color;
font-size: 16px;
margin-bottom: 0;
}
}
}
}
.right-nav {
float: right;
display: flex;
align-items: center;
margin-left: auto;
[dir="rtl"] & {
margin-left: unset;
margin-right: auto;
}
@include mq-max(2xl) {
display: none;
}
.nav-number {
display: flex;
align-items: center;
@include mq-max(4xl) {
display: none;
}
img {
@include pseudowh($width: 32px, $height: 32px);
}
span {
font-size: calc(18px + (27 - 18) * ((100vw - 320px) / (1920 - 320)));
font-weight: 500;
margin-bottom: 0;
margin-left: 8px;
[dir="rtl"] & {
margin-left: unset;
margin-right: 8px;
}
}
}
.fire-button {
display: flex;
align-items: center;
padding: 11px 38px;
overflow: hidden;
span {
color: $white;
margin-left: 7px;
font-size: 16px;
font-weight: 500;
[dir="rtl"] & {
margin-left: unset;
margin-right: 7px;
}
}
.fire {
@include pseudowh($width: 20px, $height: 20px);
position: relative;
background-color: transparent;
z-index: 1;
.fire-main {
@include pseudowh;
position: absolute;
animation: scaleUpDown 3s ease-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
.main-fire {
@include pseudowh;
position: absolute;
background-image: radial-gradient(farthest-corner at 10px 0,
$white 0%,
#ddd 95%);
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
}
.particle-fire {
@include pseudowh($width: 10px, $height: 10px);
position: absolute;
top: 60%;
left: 45%;
background-color: $white;
border-radius: 50%;
animation: particleUp 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
}
.fire-right {
@include pseudowh;
position: absolute;
animation: shake 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
.main-fire {
@include pseudowh($width: 80%, $height: 80%);
position: absolute;
top: 15%;
right: -25%;
background-color: $white;
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
.particle-fire {
@include pseudowh($width: 15px, $height: 15px);
position: absolute;
top: 45%;
left: 50%;
background-color: $white;
transform: scaleX(0.8) rotate(45deg);
border-radius: 50%;
animation: particleUp 2s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
}
}
.fire-left {
@include pseudowh;
position: absolute;
animation: shake 3s ease-out 0;
animation-iteration-count: infinite;
animation-fill-mode: both;
.main-fire {
@include pseudowh($width: 80%, $height: 80%);
position: absolute;
top: 15%;
left: -20%;
background-color: $white;
transform: scaleX(0.8) rotate(45deg);
border-radius: 0 40% 60% 40%;
.particle-fire {
@include pseudowh($width: 10%, $height: 10%);
position: absolute;
top: 10%;
left: 20%;
background-color: $white;
border-radius: 50%;
animation: particleUp 3s infinite ease-out 0;
animation-fill-mode: both;
}
}
}
}
}
}
.dropdown-category {
@include flex_common;
border: none;
background-color: transparent;
padding: 9px calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320))) 9px 0;
position: relative;
[dir="rtl"] & {
padding: 9px 0 9px calc(16px + (31 - 16) * ((100vw - 320px) / (1920 - 320)));
}
@include mq-max(xl) {
display: none;
}
&::after {
@include pos;
@include pseudowh($width: 1px, $height: 100%);
top: 0;
right: 0;
background-color: $border-color;
[dir="rtl"] & {
right: unset;
left: 0;
}
}
.icli {
font-size: 23px;
color: var(--theme-color);
margin-right: 10px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 10px;
}
}
span {
font-size: 16px;
margin-top: 4px;
}
}
.dropdown-list {
@include flex_common;
font-family: $public-sans;
@include mq-max(md) {
display: none;
}
li {
&:last-child {
margin-right: 0;
}
+li {
.dropdown {
margin-left: 20px;
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 80%);
left: -12px;
background-color: rgba($white, 0.4);
}
}
}
&:first-child {
&::after {
content: none;
}
}
.dropdown {
.dropdown-toggle {
width: auto;
display: block;
background-color: transparent;
border-radius: 5px;
font-weight: 500;
font-size: unset;
&:after {
content: none;
}
span {
font-weight: 400;
}
.fa-chevron-down {
margin-left: 10px;
}
}
.dropdown-menu {
.dropdown-list {
display: block;
+.dropdown-list {
margin-top: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
}
.about-list {
font-family: $public-sans;
@include mq-max(lg) {
display: none;
}
li {
position: relative;
margin-left: 15px;
font-size: 12px;
font-weight: 500;
&:first-child {
margin-left: 0;
&::after {
content: none;
}
}
&::after {
@include pos;
@include center(vertical);
@include pseudowh($width: 1px, $height: 70%);
left: -8px;
background-color: rgba($white, $alpha: 0.4);
}
}
}
}
header {
&.header-gradient {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
.navbar-light {
.navbar-nav {
.nav-link {
color: $white;
}
}
}
.header-top {
background: linear-gradient(to right,
var(--theme-color),
var(--theme-color2));
}
.dropdown {
&::before {
color: $white;
}
}
.top-nav {
.navbar-top {
.rightside-box {
.right-side-menu {
.right-side {
.header-wishlist {
.feather {
color: $white;
}
}
.delivery-login-box {
.delivery-icon {
.feather {
color: $white;
}
}
.delivery-detail {
h6,
h5 {
color: rgba($white, 0.8);
}
}
}
}
}
}
}
}
}
} |