¨4.0.1¨
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user