¨4.0.1¨

This commit is contained in:
¨NW¨
2023-12-03 14:07:47 +00:00
parent c08b36d1b6
commit f35052522d
1112 changed files with 43019 additions and 24987 deletions

View File

@@ -12,13 +12,14 @@
.banner {
position: relative;
display: block;
border-radius: $radius-default;
overflow: hidden;
z-index: 0;
&:before,
&:after {
position: absolute;
content: '';
content: "";
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.3);

View File

@@ -3,33 +3,70 @@
}
.top-brands {
padding: 35px 50px;
padding: 30px 50px;
border: 1px solid $border-color-lite;
border-radius: $radius-default;
white-space: nowrap;
overflow: hidden;
.slick-prev {
left: 25px;
&:hover {
.slick-arrow {
opacity: 1;
visibility: visible;
}
.slick-prev {
left: 25px;
}
.slick-next {
right: 25px;
}
}
.slick-next {
right: 25px;
.slick-arrow {
height: 25px;
width: 25px;
background: $color-default-transparent-lite;
background: var(--color-primary-transparent-lite);
border-radius: $radius-full;
opacity: 0;
visibility: hidden;
transition: $transition-default;
&:hover {
background: $color-default;
background: var(--color-primary);
opacity: 1;
}
&:before {
color: $color-white;
&:hover {
color: $color-white;
}
}
}
&.slick-prev {
left: -5px;
}
&.slick-next {
right: -5px;
}
.slick-prev,
.slick-next {
&:before {
font-weight: 900;
font-size: 12px;
}
}
.top-brand-image {
display: inline-flex;
height: 55px;
.top-brand-item {
height: 60px;
margin: 0 10px;
align-items: center;
justify-content: center;
border-radius: $radius-default;
&:hover {
> img {
@@ -45,16 +82,24 @@
}
}
@media screen and (max-width: $lg) {
.top-brands {
padding: 15px 40px;
}
}
@media screen and (max-width: $md) {
.top-brands {
padding: 35px;
padding: 15px 30px;
.slick-prev {
left: 15px;
}
&:hover {
.slick-prev {
left: 15px;
}
.slick-next {
right: 15px;
.slick-next {
right: 15px;
}
}
}
}

View File

@@ -1,77 +1,77 @@
.featured-categories-wrap {
margin-top: 50px;
margin-top: 50px;
.featured-categories-header {
display: flex;
}
.featured-categories-header {
display: flex;
}
}
.featured-categories-text {
padding-right: 30px;
padding-right: 30px;
.title {
font-weight: 400;
}
.title {
font-weight: 400;
}
.excerpt {
font-weight: 300;
line-height: 24px;
display: block;
margin-top: 10px;
color: $color-gray;
}
.excerpt {
font-weight: 300;
line-height: 24px;
display: block;
margin-top: 10px;
color: $color-gray;
}
}
.featured-categories-tabs {
display: flex;
display: flex;
.tab-item {
display: flex;
height: 160px;
width: 170px;
margin-left: 30px;
padding: 10px;
.tab-item {
display: flex;
height: 150px;
width: 160px;
margin-left: 20px;
padding: 10px;
text-align: center;
align-items: center;
justify-content: center;
flex-direction: column;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
align-items: center;
justify-content: center;
flex-direction: column;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
cursor: pointer;
z-index: 0;
transition: $transition-default;
transition: $transition-default;
&:first-child {
margin-left: 0;
}
&.active {
border-color: $color-default-transparent;
&.active {
border-color: $color-default-transparent;
border-color: var(--color-primary-transparent);
cursor: default;
}
}
&.loading {
border-color: $color-default-transparent-lite;
&.loading {
border-color: $color-default-transparent-lite;
border-color: var(--color-primary-transparent-lite);
cursor: default;
&:hover {
border-color: $color-default-transparent-lite;
&:hover {
border-color: $color-default-transparent-lite;
border-color: var(--color-primary-transparent-lite);
}
}
&:after {
height: 40px;
width: 40px;
}
}
}
&:hover {
border-color: $color-default-transparent;
&:hover {
border-color: $color-default-transparent;
border-color: var(--color-primary-transparent);
}
}
}
}
.featured-category-image {
position: relative;
@@ -105,69 +105,75 @@
}
@media screen and (max-width: 1800px) {
.featured-categories-wrap {
.tabs {
.tab-item {
height: 140px;
width: 150px;
}
}
}
.featured-categories-wrap {
.tabs {
.tab-item {
height: 140px;
width: 150px;
}
}
}
}
@media screen and (max-width: 1650px) {
.featured-categories-wrap {
.tabs {
.tab-item {
height: 130px;
width: 140px;
}
}
}
.featured-categories-wrap {
.tabs {
.tab-item {
height: 130px;
width: 140px;
}
}
}
}
@media screen and (max-width: 1600px) {
.featured-categories-wrap {
.tabs {
.tab-item {
height: 120px;
width: 130px;
}
}
}
.featured-categories-wrap {
.tabs {
.tab-item {
height: 120px;
width: 130px;
}
}
}
}
@media screen and (max-width: 1550px) {
.featured-categories-wrap {
.tabs {
.tab-item {
height: 110px;
width: 120px;
}
}
}
.featured-categories-wrap {
.tabs {
.tab-item {
height: 110px;
width: 120px;
}
}
}
}
@media screen and (max-width: 1300px) {
.featured-categories-wrap {
.featured-categories-header {
flex-wrap: wrap;
text-align: center;
justify-content: center;
}
.featured-categories-wrap {
.featured-categories-header {
flex-wrap: wrap;
text-align: center;
justify-content: center;
}
.tabs {
margin: 30px -15px -30px;
flex-wrap: wrap;
justify-content: center;
.tabs {
margin: 30px -10px -20px;
flex-wrap: wrap;
justify-content: center;
.tab-item {
margin: 0 15px 30px 15px;
&:last-child {
margin-right: 15px;
}
}
}
}
.tab-item {
margin: 0 10px 20px !important;
}
}
}
}
@media screen and (max-width: $lg) {
.featured-categories-wrap {
.tabs {
.tab-item {
margin: 0 7.5px 15px !important;
}
}
}
}

View File

@@ -12,6 +12,10 @@
}
.grid-products {
.slick-list {
padding: 23px 0 42px !important;
}
.arrow-prev.slick-arrow,
.arrow-next.slick-arrow {
top: -40px;
@@ -25,96 +29,40 @@
right: -3px;
}
.grid-products-inner {
display: flex;
flex-wrap: wrap;
padding: 0 15px;
}
.product-card {
.grid-products-item {
flex: 0 0 16.66666666666667%;
max-width: 16.66666666666667%;
margin: 0;
border-radius: 0;
border-left: none;
border-top: none;
padding: 10px;
&:nth-child(1),
&:nth-child(7) {
border-left: 1px solid $color-gray-lite;
}
&:nth-child(-n+6) {
border-top: 1px solid $color-gray-lite;
.product-card {
margin: 0;
height: 100%;
}
}
}
@media screen and (max-width: 1760px) {
.grid-products {
.product-card {
.grid-products-item {
flex: 0 0 20%;
max-width: 20%;
&:nth-child(6),
&:nth-child(11) {
border-left: 1px solid $color-gray-lite;
}
&:nth-child(6) {
border-top: none;
}
&:nth-child(7) {
border-left: none;
}
}
}
}
@media screen and (max-width: 1300px) {
.grid-products {
.product-card {
.grid-products-item {
flex: 0 0 25%;
max-width: 25%;
&:nth-child(5) {
border-top: none;
border-left: 1px solid $color-gray-lite;
}
&:nth-child(6),
&:nth-child(11) {
border-left: none;
}
&:nth-child(9) {
border-left: 1px solid $color-gray-lite;
}
}
}
}
@media screen and (max-width: 1050px) {
@media screen and (max-width: $lg) {
.grid-products {
.product-card {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
&:nth-child(4),
&:nth-child(7),
&:nth-child(10) {
border-left: 1px solid $color-gray-lite;
}
&:nth-child(4) {
border-top: none;
}
&:nth-child(5),
&:nth-child(9) {
border-left: none;
}
.grid-products-item {
padding: 7.5px;
}
}
}
@@ -130,39 +78,28 @@
.tab-item {
display: inline-block;
float: none;
float: none !important;
}
}
}
.grid-products {
.slick-list {
margin: 0 -15px -50px;
.slick-dots {
margin-top: 27px;
}
.grid-products-item {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
}
}
@media screen and (max-width: 620px) {
@media screen and (max-width: $sm) {
.grid-products {
.product-card {
.grid-products-item {
flex: 0 0 50%;
max-width: 50%;
&:nth-child(3),
&:nth-child(5),
&:nth-child(9),
&:nth-child(11) {
border-left: 1px solid $color-gray-lite;
}
&:nth-child(3) {
border-top: none;
}
&:nth-child(4),
&:nth-child(10) {
border-left: none;
}
}
}
}

View File

@@ -1,6 +1,5 @@
.home-slider {
border-radius: $radius-default;
overflow: hidden;
&.slick-initialized {
.slide {
@@ -20,6 +19,44 @@
}
}
&[data-fade="true"] {
&:not(.slick-initialized) {
.slide {
.slider-image {
transform: scale(1);
}
}
}
.slide {
&.slick-active {
.slider-image {
transform: scale(1);
}
}
.slider-image {
transform: scale(1.2);
transition: transform 800ms cubic-bezier(0.7, 0, 0.3, 1);
}
}
}
&:hover {
.slick-arrow {
opacity: 1;
visibility: visible;
&.slick-prev {
left: 15px;
}
&.slick-next {
right: 15px;
}
}
}
.slide {
position: relative;
overflow: hidden;
@@ -92,61 +129,55 @@
font-size: 16px;
line-height: 26px;
color: $color-gray;
margin-top: 16px;
margin-top: 15px;
}
.btn-slider {
display: none;
margin-top: 37px;
padding: 10px 30px;
margin-top: 30px;
padding: 7px 20px;
}
}
.slick-arrow {
height: 50px;
width: 25px;
background: $color-default;
background: var(--color-primary);
opacity: 0.1;
height: 30px;
width: 30px;
background: $color-default-transparent-lite;
background: var(--color-primary-transparent-lite);
border-radius: $radius-full;
opacity: 0;
visibility: hidden;
transition: $transition-default;
&:hover {
background: $color-default;
background: var(--color-primary);
opacity: 1;
}
&.slick-prev {
left: 0;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
&:before {
color: $color-white;
&:before {
&:hover {
color: $color-white;
margin-right: 2px;
&:hover {
color: $color-white;
}
}
}
&.slick-next {
right: 0;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
&:before {
color: $color-white;
margin-left: 2px;
&:hover {
color: $color-white;
}
}
}
}
.slick-prev {
left: -15px;
right: auto;
}
.slick-next {
right: -15px;
left: auto;
}
.slick-dots {
bottom: 20px;
right: 20px;
bottom: 25px;
width: auto;
}
}
@@ -179,7 +210,7 @@
.caption-1 {
font-size: 38px;
line-height: 38px
line-height: 38px;
}
.caption-2 {
@@ -245,15 +276,24 @@
.slide-content {
&.align-left {
.captions {
margin: 0 35px 0 35px;
margin: 0 30px !important;
}
}
&.align-right {
.captions {
margin: 0 35px 0 35px;
margin: 0 30px !important;
}
}
.caption-1 {
font-size: 24px;
line-height: 24px;
}
.btn-slider {
margin-top: 20px;
}
}
}
}

View File

@@ -96,20 +96,23 @@
}
}
.daily-deals-countdown.is-countdown {
margin-bottom: 12px;
.daily-deals-countdown {
&.countdown {
margin-bottom: 12px;
.countdown-amount {
height: 40px;
width: 40px;
background: $color-white-lite;
}
.countdown-amount {
height: 40px;
width: 40px;
background: $color-white-lite;
border-radius: $radius-default;
}
.countdown-section {
margin-right: 15px;
.countdown-section {
margin-right: 15px;
&:last-child {
margin-right: 0;
&:last-child {
margin-right: 0;
}
}
}
}
@@ -148,6 +151,20 @@
}
@media screen and (max-width: $xl) {
.vertical-products-wrap {
&.flash-sale-enabled {
.row {
> div:not(:first-child) {
.vertical-products {
margin-top: 44px;
}
}
}
}
}
}
@media screen and (max-width: $lg) {
.vertical-products-wrap {
.row {
> div:not(:first-child) {