first upload all files
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
.banner-wrap {
|
||||
margin-top: 50px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
|
||||
&.m-t-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
animation: effect-height 700ms ease-in;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
&:after {
|
||||
animation: effect-width 700ms ease-in;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
> img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
border-radius: $radius-default;
|
||||
transform: scale(1);
|
||||
transition: 800ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.three-column-full-width-banner {
|
||||
.row {
|
||||
> div {
|
||||
&:first-child {
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.two-column-banner {
|
||||
.row {
|
||||
> .col-md-9 {
|
||||
&:last-child {
|
||||
.banner {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.three-column-banner {
|
||||
.row {
|
||||
> .col-md-6 {
|
||||
&:first-child {
|
||||
.banner {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes effect-height {
|
||||
0% {
|
||||
height: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes effect-width {
|
||||
0% {
|
||||
width: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
.blog-wrap {
|
||||
margin-top: 44px;
|
||||
|
||||
.blog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
|
||||
.section-title {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
margin-top: 2px;
|
||||
color: $color-gray-dark;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post {
|
||||
width: calc(33.33333333333333% - 30px);
|
||||
margin: 0 15px;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
box-shadow: 2.5px 4.33px 50px 5px rgba(11, 28, 42, 0.15);
|
||||
|
||||
.blog-image {
|
||||
.image-placeholder {
|
||||
border-color: #f6f7f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
position: relative;
|
||||
margin: -1px -1px 0 -1px;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
border-radius: $radius-default $radius-default 0 0;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
display: flex;
|
||||
height: 227px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f6f7f8;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-bottom: none;
|
||||
border-radius: $radius-default $radius-default 0 0;
|
||||
transition: $transition-default;
|
||||
|
||||
> img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-date {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
height: 55px;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $color-default-transparent;
|
||||
background: var(--color-primary-transparent);
|
||||
border-radius: $radius-default;
|
||||
|
||||
> span {
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-meta {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
|
||||
> li {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: $color-gray;
|
||||
margin-left: 25px;
|
||||
cursor: default;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 5px;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-body {
|
||||
padding: 26px 20px 30px;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
font-weight: 400;
|
||||
margin-bottom: 13px;
|
||||
|
||||
> a {
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-description {
|
||||
font-weight: 300;
|
||||
line-height: 22px;
|
||||
max-height: 66px;
|
||||
margin-bottom: 29px;
|
||||
color: $color-gray;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.blog-post {
|
||||
.blog-image {
|
||||
.image-placeholder {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.blog-post {
|
||||
width: calc(50% - 30px);
|
||||
|
||||
&:last-child {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.blog-post {
|
||||
width: 100%;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
.top-brands-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.top-brands {
|
||||
padding: 35px 50px;
|
||||
border: 1px solid $border-color-lite;
|
||||
border-radius: $radius-default;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
.slick-prev {
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
&:before {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
.top-brand-image {
|
||||
display: inline-flex;
|
||||
height: 55px;
|
||||
margin: 0 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
> img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
transition: $transition-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.top-brands {
|
||||
padding: 35px;
|
||||
|
||||
.slick-prev {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
.featured-categories-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.featured-categories-header {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-categories-text {
|
||||
padding-right: 30px;
|
||||
|
||||
.title {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
font-weight: 300;
|
||||
line-height: 24px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-categories-tabs {
|
||||
display: flex;
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
height: 160px;
|
||||
width: 170px;
|
||||
margin-left: 30px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
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;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $color-default-transparent;
|
||||
border-color: var(--color-primary-transparent);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
border-color: $color-default-transparent-lite;
|
||||
border-color: var(--color-primary-transparent-lite);
|
||||
cursor: default;
|
||||
|
||||
&: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;
|
||||
border-color: var(--color-primary-transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-category-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 50%;
|
||||
|
||||
> img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-category-name {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1800px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.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;
|
||||
|
||||
.tab-item {
|
||||
margin: 0 15px 30px 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
.features-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.features {
|
||||
padding-bottom: 30px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
.feature-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.single-feature {
|
||||
position: relative;
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
margin-top: 30px;
|
||||
padding: 0 15px;
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 42px;
|
||||
width: 1px;
|
||||
background: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.features-wrap {
|
||||
.single-feature {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
justify-content: flex-start;
|
||||
padding: 0 30px;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
.features-wrap {
|
||||
.single-feature {
|
||||
flex: 0 0 33.33333333333333%;
|
||||
max-width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 780px) {
|
||||
.features-wrap {
|
||||
.single-feature {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.features-wrap {
|
||||
.single-feature {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
.grid-products-wrap {
|
||||
margin-top: 30px;
|
||||
|
||||
.tabs {
|
||||
.tab-item {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
padding: 15px 3px;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-products {
|
||||
.arrow-prev.slick-arrow,
|
||||
.arrow-next.slick-arrow {
|
||||
top: -40px;
|
||||
}
|
||||
|
||||
.arrow-prev {
|
||||
right: 69px;
|
||||
}
|
||||
|
||||
.arrow-next {
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.grid-products-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
flex: 0 0 16.66666666666667%;
|
||||
max-width: 16.66666666666667%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(7) {
|
||||
border-left: 1px solid $color-gray-lite;
|
||||
}
|
||||
|
||||
&:nth-child(-n+6) {
|
||||
border-top: 1px solid $color-gray-lite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1760px) {
|
||||
.grid-products {
|
||||
.product-card {
|
||||
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 {
|
||||
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) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.grid-products-wrap {
|
||||
margin-bottom: 0;
|
||||
|
||||
.tabs {
|
||||
display: block;
|
||||
text-align: center;
|
||||
float: none !important;
|
||||
|
||||
.tab-item {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-products {
|
||||
.slick-list {
|
||||
margin: 0 -15px -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 620px) {
|
||||
.grid-products {
|
||||
.product-card {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
@import '_slider';
|
||||
|
||||
.home-section-wrap {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-section-inner {
|
||||
display: flex;
|
||||
width: calc(100% - 293px);
|
||||
margin-left: 293px;
|
||||
|
||||
.home-slider-wrap {
|
||||
width: 66.85%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.home-banner-wrap {
|
||||
width: 33.15%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1650px) {
|
||||
.home-section-inner {
|
||||
.home-slider-wrap {
|
||||
width: 66.66%;
|
||||
}
|
||||
|
||||
.home-banner-wrap {
|
||||
width: 33.34%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.home-section-inner {
|
||||
width: calc(100% - 276px);
|
||||
margin-left: 276px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1255px) {
|
||||
.home-section-inner {
|
||||
.home-slider-wrap {
|
||||
width: 66.90%;
|
||||
}
|
||||
|
||||
.home-banner-wrap {
|
||||
width: 33.10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.home-section-inner {
|
||||
.home-slider-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home-banner-wrap {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.home-section-wrap {
|
||||
.home-section-inner {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.landscape-tab-products-wrap {
|
||||
margin-top: 30px;
|
||||
|
||||
.section-title {
|
||||
margin-top: 13px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.landscape-left-tab-products {
|
||||
margin-bottom: -50px;
|
||||
|
||||
.arrow-prev.slick-arrow,
|
||||
.arrow-next.slick-arrow {
|
||||
top: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.landscape-tab-products-wrap {
|
||||
.tab-products-header {
|
||||
text-align: center;
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 10px;
|
||||
padding-top: 15px;
|
||||
float: none !important;
|
||||
|
||||
&:after {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
float: none !important;
|
||||
|
||||
.tab-item {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
.home-slider {
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
&.slick-initialized {
|
||||
.slide {
|
||||
&:not(:first-child) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
.caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-slider {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: $radius-default;
|
||||
|
||||
&:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slider-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
opacity: 1 !important;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
&.align-left {
|
||||
left: 0;
|
||||
justify-content: flex-start;
|
||||
|
||||
.captions {
|
||||
margin-left: 100px;
|
||||
text-align: left;
|
||||
|
||||
.caption-2 {
|
||||
margin-right: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
right: 0;
|
||||
justify-content: flex-end;
|
||||
|
||||
.captions {
|
||||
margin-right: 100px;
|
||||
text-align: right;
|
||||
|
||||
.caption-2 {
|
||||
margin-left: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.captions {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.caption-1 {
|
||||
font-size: 48px;
|
||||
font-weight: 300;
|
||||
line-height: 48px;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.caption-2 {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
color: $color-gray;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.btn-slider {
|
||||
display: none;
|
||||
margin-top: 37px;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-arrow {
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
opacity: 0.1;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.slick-prev {
|
||||
left: 0;
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
|
||||
&:before {
|
||||
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-dots {
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.home-slider {
|
||||
.slide-content {
|
||||
&.align-left {
|
||||
.captions {
|
||||
margin-left: 80px;
|
||||
|
||||
.caption-2 {
|
||||
margin-right: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
.captions {
|
||||
margin-right: 80px;
|
||||
|
||||
.caption-2 {
|
||||
margin-left: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.captions {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.caption-1 {
|
||||
font-size: 38px;
|
||||
line-height: 38px
|
||||
}
|
||||
|
||||
.caption-2 {
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
margin-top: 13px;
|
||||
}
|
||||
|
||||
.btn-slider {
|
||||
font-size: 14px;
|
||||
margin-top: 32px;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.home-slider {
|
||||
.slide-content {
|
||||
&.align-left {
|
||||
.captions {
|
||||
margin: 0 50px 0 40px;
|
||||
|
||||
.caption-2 {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
.captions {
|
||||
margin: 0 40px 0 50px;
|
||||
|
||||
.caption-2 {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.caption-1 {
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.caption-2 {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-slider {
|
||||
font-size: 13px;
|
||||
margin-top: 27px;
|
||||
padding: 6px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.home-slider {
|
||||
.slide-content {
|
||||
&.align-left {
|
||||
.captions {
|
||||
margin: 0 35px 0 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&.align-right {
|
||||
.captions {
|
||||
margin: 0 35px 0 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoomInImage {
|
||||
animation-name: zoomInImage;
|
||||
}
|
||||
|
||||
@keyframes zoomInImage {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1.05, 1.05, 1.05);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
.vertical-products-wrap {
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
.daily-deals-wrap {
|
||||
.daily-deals-header {
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 400;
|
||||
padding-bottom: 13px;
|
||||
|
||||
b {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.daily-deals {
|
||||
border-radius: $radius-default;
|
||||
border: 1px solid $color-gray-lite;
|
||||
|
||||
.arrow-prev.slick-arrow,
|
||||
.arrow-next.slick-arrow {
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.arrow-prev {
|
||||
left: 36px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.arrow-next {
|
||||
right: 36px;
|
||||
}
|
||||
|
||||
.daily-deals-inner {
|
||||
padding: 20px 40px 40px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 320px;
|
||||
margin-bottom: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: block;
|
||||
margin-bottom: 23px;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
h6 {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
max-height: 48px;
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: $transition-default;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: flex;
|
||||
margin-bottom: 25px;
|
||||
padding: 10px 0 8px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid $color-gray-lite;
|
||||
border-bottom: 1px solid $color-gray-lite;
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
.rating-count {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.daily-deals-countdown.is-countdown {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.countdown-amount {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: $color-white-lite;
|
||||
}
|
||||
|
||||
.countdown-section {
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deal-progress {
|
||||
margin-bottom: 21px;
|
||||
|
||||
.deal-stock {
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stock-available,
|
||||
.stock-sold {
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
color: $color-gray-dark;
|
||||
|
||||
> span {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 10px;
|
||||
background: $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.progress-bar {
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.vertical-products-wrap {
|
||||
.row {
|
||||
> div:not(:first-child) {
|
||||
.vertical-products {
|
||||
margin-top: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.vertical-products-wrap {
|
||||
.vertical-products {
|
||||
.vertical-products-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.vertical-product-card {
|
||||
margin-bottom: 34px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
margin-bottom: 12px;
|
||||
|
||||
h6 {
|
||||
line-height: 24px;
|
||||
max-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.daily-deals {
|
||||
.daily-deals-inner {
|
||||
padding: 20px 30px 40px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
height: auto;
|
||||
padding-bottom: 80%;
|
||||
|
||||
> img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user