first upload all files
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
.error-page-left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 26px;
|
||||
padding-bottom: 21px;
|
||||
}
|
||||
|
||||
> p {
|
||||
width: 350px;
|
||||
margin-bottom: 44px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.btn-back-to-home {
|
||||
align-self: flex-start;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.error-page-left {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
padding-bottom: 22px;
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-back-to-home {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
.error-page-left {
|
||||
> p {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.error-page-right {
|
||||
.error-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.error-page-right {
|
||||
margin-bottom: 43px;
|
||||
text-align: center;
|
||||
|
||||
.error-image {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.error-page-right {
|
||||
.error-image {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@import '404/_error-page-left',
|
||||
'404/_error-page-right';
|
||||
|
||||
.error-page-wrap {
|
||||
margin-top: 70px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-page {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.error-page {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
@import 'account/_my-orders',
|
||||
'account/_my-downloads',
|
||||
'account/_my-wishlist',
|
||||
'account/_my-reviews',
|
||||
'account/_my-addresses',
|
||||
'account/_my-profile';
|
||||
|
||||
%account-common-buttons {
|
||||
display: inline-flex;
|
||||
margin-top: -2px;
|
||||
padding: 0;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
> i {
|
||||
margin: 5px 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account-wrap {
|
||||
margin-top: 42px;
|
||||
|
||||
.account-left {
|
||||
min-width: 267px
|
||||
}
|
||||
|
||||
.account-right {
|
||||
width: 100%;
|
||||
margin-left: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.account-wrap-inner {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.account-sidebar {
|
||||
li {
|
||||
&.active {
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 17px;
|
||||
height: 15px;
|
||||
width: 7px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: $color-black;
|
||||
padding: 8px 0 8px 28px;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
> i {
|
||||
font-size: 24px;
|
||||
vertical-align: top;
|
||||
margin-top: 5px;
|
||||
margin: 5px 12px 0 0;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-wrap {
|
||||
.pagination {
|
||||
margin: 17px -13px -15px 0;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
padding: 64px 15px 63px;
|
||||
text-align: center;
|
||||
|
||||
> h3 {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.account-wrap {
|
||||
.account-left {
|
||||
min-width: 245px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.account-wrap {
|
||||
margin-top: 23px;
|
||||
|
||||
.account-left {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.account-right {
|
||||
margin: 29px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account-wrap-inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.all-brands-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.all-brands {
|
||||
.all-brands-inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -15px -30px;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 70%;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-default-transparent-lite;
|
||||
border-color: var(--color-primary-transparent-lite);
|
||||
|
||||
> img {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
height: 65px;
|
||||
width: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
|
||||
svg {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
path {
|
||||
stroke: $color-white;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 5px;
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
.all-categories-wrap {
|
||||
margin-top: 44px;
|
||||
|
||||
.empty-message {
|
||||
display: flex;
|
||||
padding: 40px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
path {
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-category {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
|
||||
> a {
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-category-list {
|
||||
column-count: 6;
|
||||
column-gap: 40px;
|
||||
column-fill: initial;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
color: $color-gray;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-category-list {
|
||||
margin-left: 10px;
|
||||
padding-top: 2px;
|
||||
|
||||
li {
|
||||
padding: 1px 0;
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.single-category-list {
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.single-category-list {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.single-category-list {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@import 'cart/_shopping-cart',
|
||||
'cart/_shopping-cart-table';
|
||||
@@ -0,0 +1,26 @@
|
||||
@import "checkout/_checkout-left", "checkout/_checkout-right";
|
||||
|
||||
.checkout-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.checkout {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.checkout-inner {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.checkout-inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.checkout {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
.compare-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.empty-message {
|
||||
display: flex;
|
||||
padding: 40px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
g {
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compare-table {
|
||||
margin-bottom: 0;
|
||||
|
||||
tr {
|
||||
&:first-child {
|
||||
td {
|
||||
position: relative;
|
||||
padding: 25px 30px;
|
||||
|
||||
&:not(:first-child) {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 20px 30px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
font-weight: 500;
|
||||
width: 261px;
|
||||
min-width: 261px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
min-width: 320px;
|
||||
max-width: 320px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 200px;
|
||||
width: 260px;
|
||||
display: flex;
|
||||
margin: 0 auto 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 10px 15px;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.rating-count {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wishlist,
|
||||
.btn-add-to-cart {
|
||||
font-size: 16px;
|
||||
display: inline-flex;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-default-transparent;
|
||||
border-color: var(--color-primary-transparent);
|
||||
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
&:hover {
|
||||
border-color: $color-gray-lite !important;
|
||||
|
||||
> i {
|
||||
color: $color-black !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wishlist {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
.animated {
|
||||
animation: zoomInOut 0.5s ease;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
&.disabled, &[disabled] {
|
||||
.animated {
|
||||
animation: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.compare-table {
|
||||
td {
|
||||
&:first-child {
|
||||
width: 245px;
|
||||
min-width: 245px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
.contact-wrap {
|
||||
margin: 90px 0;
|
||||
|
||||
.map-canvas {
|
||||
position: relative;
|
||||
height: 0;
|
||||
padding-bottom: 34%;
|
||||
overflow: hidden;
|
||||
border-radius: $radius-default;
|
||||
|
||||
> iframe {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-wrap {
|
||||
display: flex;
|
||||
margin-top: -12%;
|
||||
justify-content: center;
|
||||
|
||||
.contact-form-inner {
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
box-shadow: 0px 5px 28.5px 1.5px rgba(9, 6, 24, 0.1);
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-left {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
min-width: 350px;
|
||||
padding: 44px 60px 44px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
margin-bottom: 48px;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
li {
|
||||
color: $color-white;
|
||||
margin-bottom: 29px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $color-white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin: 45px 0 0 -8px;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $color-white;
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> svg {
|
||||
position: absolute;
|
||||
right: -35px;
|
||||
bottom: -45px;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
opacity: 0.15;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-right {
|
||||
width: 100%;
|
||||
padding: 44px 60px 50px;
|
||||
background: $color-white;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
.title {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.contact-wrap {
|
||||
margin: 70px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
.contact-form-wrap {
|
||||
.contact-form-inner {
|
||||
width: 90%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-left {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 34px 30px 34px;
|
||||
|
||||
.title {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
li {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin: 35px 0 -4px -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form-right {
|
||||
padding: 34px 30px 40px;
|
||||
|
||||
.title {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.contact-form-wrap {
|
||||
margin-top: 30px;
|
||||
|
||||
.contact-form-inner {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.custom-page-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.custom-page-content {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 23px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
margin-bottom: 9px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
b, strong, em {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: $color-default-hover;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import
|
||||
'home/_home-section',
|
||||
'home/_features',
|
||||
'home/_featured-categories',
|
||||
'home/_banner',
|
||||
'home/_landscape-tab-products',
|
||||
'home/_grid-products',
|
||||
'home/_brands',
|
||||
'home/_vertical-products',
|
||||
'home/_blog';
|
||||
@@ -0,0 +1,40 @@
|
||||
.login-wrap {
|
||||
.remember-me {
|
||||
margin-top: -1px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
margin-top: -1px;
|
||||
color: $color-gray;
|
||||
float: right;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sign-in {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.btn-create-account {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
.login-wrap {
|
||||
.remember-me,
|
||||
.forgot-password {
|
||||
display: block;
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.order-complete-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.order-complete {
|
||||
display: flex;
|
||||
padding: 40px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
|
||||
.checkmark {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 23px;
|
||||
border-radius: 50%;
|
||||
stroke: $color-default;
|
||||
stroke: var(--color-primary);
|
||||
stroke-width: 2.5;
|
||||
stroke-miterlimit: 10;
|
||||
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
|
||||
}
|
||||
|
||||
.checkmark-circle {
|
||||
stroke: $color-default;
|
||||
stroke: var(--color-primary);
|
||||
stroke-dasharray: 166;
|
||||
stroke-dashoffset: 166;
|
||||
stroke-width: 1.5;
|
||||
stroke-miterlimit: 10;
|
||||
fill: none;
|
||||
animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards;
|
||||
}
|
||||
|
||||
.checkmark-check {
|
||||
stroke-dasharray: 48;
|
||||
stroke-dashoffset: 48;
|
||||
transform-origin: 50% 50%;
|
||||
animation: stroke .3s cubic-bezier(0.650, 0.000, 0.450, 1.000) .8s forwards;
|
||||
}
|
||||
|
||||
@keyframes stroke {
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
0%, 100% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.1, 1.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@import 'order-details/_order-details-top',
|
||||
'order-details/_order-details-middle',
|
||||
'order-details/_order-details-bottom';
|
||||
|
||||
.order-details-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 34px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@import 'product-details/_product-details-top',
|
||||
'product-details/_product-image-gallery',
|
||||
'product-details/_product-details-info',
|
||||
'product-details/_product-details-bottom',
|
||||
'product-details/_product-description',
|
||||
'product-details/_product-specification',
|
||||
'product-details/_product-reviews';
|
||||
|
||||
.product-details-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import 'product-search/_product-search-left',
|
||||
'product-search/_product-search-right',
|
||||
'product-search/_category-menu',
|
||||
'product-search/_filter-section',
|
||||
'product-search/_search-result',
|
||||
'product-search/_grid-view-product',
|
||||
'product-search/_list-view-product';
|
||||
|
||||
.product-search-wrap {
|
||||
margin-top: 50px;
|
||||
|
||||
.product-search {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-search-wrap {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.product-search {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.register-wrap {
|
||||
.terms-and-conditions {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
> img {
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-create-account {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.btn-sign-in {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
.my-addresses {
|
||||
padding: 40px 30px;
|
||||
|
||||
.address-card-wrap {
|
||||
.btn-add-new-address {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.address-card {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 30px;
|
||||
padding: 15px 20px 12px;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
border-color: $color-default-transparent;
|
||||
border-color: var(--color-primary-transparent);
|
||||
}
|
||||
|
||||
.address-card-data {
|
||||
margin-bottom: 6px;
|
||||
|
||||
> span {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
|
||||
&:not(:first-child) {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-card-actions {
|
||||
display: flex;
|
||||
margin-left: -8px;
|
||||
|
||||
.btn {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.btn-edit-address {
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-delete-address {
|
||||
&:hover {
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-new-address-form {
|
||||
margin-top: -7px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.my-addresses {
|
||||
.address-card-wrap {
|
||||
.btn-add-new-address {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.add-new-address-form {
|
||||
.btn-cancel {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.btn-save-address {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.my-downloads-table {
|
||||
.btn-download {
|
||||
@extend %account-common-buttons;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.my-orders-table {
|
||||
margin-bottom: 5px;
|
||||
|
||||
thead {
|
||||
th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
white-space: nowrap;
|
||||
|
||||
&:first-child {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
@extend %account-common-buttons;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding: 23px 30px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
padding: 11px 0;
|
||||
color: $color-gray;
|
||||
|
||||
> i {
|
||||
font-size: 24px;
|
||||
margin-right: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
> span {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.my-profile {
|
||||
padding: 35px 30px 40px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.my-profile {
|
||||
.btn-save-changes {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.my-reviews-table {
|
||||
margin-bottom: 10px;
|
||||
|
||||
tbody {
|
||||
td {
|
||||
&:not(:first-child) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
min-width: 220px;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
> i {
|
||||
font-size: 18px;
|
||||
margin-right: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
.my-wishlist-table {
|
||||
margin-bottom: 10px;
|
||||
|
||||
tbody {
|
||||
td {
|
||||
&:not(:first-child) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
min-width: 220px;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
margin-top: 0 !important;
|
||||
|
||||
@extend %account-common-buttons;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
.shopping-cart {
|
||||
.table-responsive {
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.shopping-cart-table {
|
||||
margin-bottom: 10px;
|
||||
|
||||
thead {
|
||||
th {
|
||||
white-space: nowrap;
|
||||
|
||||
&:last-child {
|
||||
width: 70px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
&:last-child {
|
||||
width: 70px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: $radius-default;
|
||||
overflow: hidden;
|
||||
|
||||
.image-placeholder {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-options {
|
||||
margin: 4px 0 1px;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.number-picker {
|
||||
position: relative;
|
||||
width: 57px;
|
||||
|
||||
.input-quantity {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-number {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
top: 50%;
|
||||
background: $color-white;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 1;
|
||||
|
||||
> i {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-minus {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.btn-plus {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.shopping-cart-table {
|
||||
.number-picker {
|
||||
.btn-number {
|
||||
transform: translateY(-50%) rotateY(180deg) #{'/*rtl:ignore*/'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.shopping-cart-table {
|
||||
td {
|
||||
> label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.shopping-cart-table {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:first-child {
|
||||
td {
|
||||
&:nth-child(3),
|
||||
&:nth-child(4),
|
||||
&:nth-child(5) {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
td {
|
||||
vertical-align: top;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
padding: 20px 0 11px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
padding: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
padding: 2px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
padding: 2px 0 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
> label {
|
||||
width: 90px;
|
||||
min-width: 90px;
|
||||
margin-bottom: 0;
|
||||
padding-right: 5px;
|
||||
color: $color-gray;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.number-picker {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.shopping-cart-table {
|
||||
tbody {
|
||||
td {
|
||||
&:first-child {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
> label {
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.shopping-cart-wrap {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.shopping-cart {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.shopping-cart-inner {
|
||||
flex-grow: 1;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.shopping-cart {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shopping-cart-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
.checkout-left {
|
||||
flex-grow: 1;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.checkout-form {
|
||||
.account-details {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.create-an-account-form {
|
||||
.helper-text {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin: -4px 0 14px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.create-an-account-label,
|
||||
.ship-to-different-address-label {
|
||||
margin: 4px 0 7px;
|
||||
|
||||
label {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.select-address {
|
||||
padding: 3px 0;
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
label {
|
||||
> span {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
color: $color-black;
|
||||
|
||||
&:not(:first-child) {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: inline-flex;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-new-address-wrap {
|
||||
.btn-add-new-address {
|
||||
font-weight: 500;
|
||||
margin-bottom: 22px;
|
||||
padding: 5px 0;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ship-to-different-address-form {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.order-notes {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.checkout-form {
|
||||
.order-notes {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.checkout-left {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
.checkout-right {
|
||||
width: 395px;
|
||||
min-width: 395px;
|
||||
padding: 0 15px;
|
||||
|
||||
.payment-method {
|
||||
.title {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-method-form {
|
||||
padding: 28px 30px 5px;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
margin: -4px 0 0 28px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: -2px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-instructions {
|
||||
margin-top: 30px;
|
||||
padding: 24px 30px 23px;
|
||||
background: $color-white-dark;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.title {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: 14px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-wrap {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
#stripe-card-element {
|
||||
margin-top: 30px;
|
||||
padding: 30px;
|
||||
background: $color-white-dark;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.checkout-right {
|
||||
.coupon-wrap {
|
||||
.form-group {
|
||||
input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.btn-apply-coupon {
|
||||
width: 100%;
|
||||
padding: 7px 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.checkout-right {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-top: 14px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.checkout-right {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.order-details-bottom {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
|
||||
.order-summary-list {
|
||||
width: 300px;
|
||||
|
||||
.price-amount {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.order-summary-total {
|
||||
width: 300px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 340px) {
|
||||
.order-details-bottom {
|
||||
.order-summary-list,
|
||||
.order-summary-total {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
.order-details-middle {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.table-responsive {
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
|
||||
.order-details-table {
|
||||
tbody {
|
||||
td {
|
||||
&:nth-child(2),
|
||||
&:nth-child(4) {
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
color: $color-black;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.product-options {
|
||||
margin: 4px 0 1px;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 881px) {
|
||||
.order-details-table {
|
||||
td {
|
||||
> label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 880px) {
|
||||
.order-details-middle {
|
||||
.table-responsive {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-details-table {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:first-child {
|
||||
td {
|
||||
&:nth-child(2),
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
vertical-align: top;
|
||||
display: block;
|
||||
|
||||
&:nth-child(1) {
|
||||
padding: 25px 30px 11px !important;
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(3) {
|
||||
padding: 2px 30px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
padding: 2px 30px 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
> label {
|
||||
width: 90px;
|
||||
min-width: 90px;
|
||||
margin-bottom: 0;
|
||||
padding-right: 5px;
|
||||
color: $color-gray;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.order-details-table {
|
||||
tbody {
|
||||
td {
|
||||
&:nth-child(1) {
|
||||
padding: 25px 20px 11px !important;
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(3) {
|
||||
padding: 2px 20px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
padding: 2px 20px 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.order-details-top {
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
|
||||
.order-information {
|
||||
display: inline-block;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.order-information-list {
|
||||
li {
|
||||
display: flex;
|
||||
margin-bottom: 9px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
min-width: 165px;
|
||||
margin-bottom: 0;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-billing-details,
|
||||
.order-shipping-details {
|
||||
h4 {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
address {
|
||||
> span {
|
||||
display: block;
|
||||
margin-bottom: 9px;
|
||||
color: $color-gray;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.order-details-top {
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
|
||||
.order-information {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.order-billing-details {
|
||||
margin-bottom: 33px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
.description {
|
||||
padding-top: 46px;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 24px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
margin-bottom: 9px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
b, strong, em {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: $color-default-hover;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.description {
|
||||
padding-top: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.description {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
.product-details-bottom {
|
||||
display: flex;
|
||||
|
||||
.left-sidebar {
|
||||
width: 285px;
|
||||
min-width: 285px;
|
||||
padding-right: 15px;
|
||||
|
||||
.vertical-products {
|
||||
margin-top: 14px;
|
||||
|
||||
& + .banner {
|
||||
margin-top: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-details-bottom-inner {
|
||||
width: calc(100% - 282px);
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-details-tab {
|
||||
> .tabs {
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid $color-gray-lite;
|
||||
|
||||
.nav-item {
|
||||
margin: 0 26px -1px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
padding: 15px 3px;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-details-bottom {
|
||||
.left-sidebar {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
.vertical-products {
|
||||
margin-top: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-details-bottom-inner {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.product-details-tab {
|
||||
margin-bottom: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,400 @@
|
||||
.product-details-info {
|
||||
width: calc(100% - 600px);
|
||||
padding: 0 15px 0 30px;
|
||||
|
||||
.details-info-top {
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
font-size: 16px;
|
||||
margin-bottom: 9px;
|
||||
|
||||
.rating-count {
|
||||
font-size: 14px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
& + .brief-description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
& + .details-info-top-actions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.availability {
|
||||
margin-bottom: 14px;
|
||||
|
||||
&.in-stock {
|
||||
color: $color-green;
|
||||
}
|
||||
|
||||
&.out-of-stock {
|
||||
color: $color-red;
|
||||
}
|
||||
|
||||
& + .details-info-top-actions {
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.brief-description {
|
||||
margin-bottom: 12px;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.details-info-top-actions {
|
||||
.btn {
|
||||
padding: 0;
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
> i {
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wishlist {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.btn-wishlist,
|
||||
.btn-compare {
|
||||
font-weight: 500;
|
||||
|
||||
&.added {
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-info-middle {
|
||||
padding: 22px 0 25px;
|
||||
border-top: 1px solid $border-color-lite;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 24px;
|
||||
padding-bottom: 18px;
|
||||
|
||||
.previous-price {
|
||||
font-size: 14px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-variants {
|
||||
padding-bottom: 10px;
|
||||
|
||||
.form-group {
|
||||
.extra-price {
|
||||
font-weight: 500;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.form-custom-radio {
|
||||
.extra-price {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.variant-check {
|
||||
margin: -1px 0 7px;
|
||||
|
||||
.error-message {
|
||||
margin: -7px 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-radio {
|
||||
margin: -2px 0 8px;
|
||||
|
||||
.error-message {
|
||||
margin: -6px 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-input,
|
||||
.variant-select {
|
||||
margin-bottom: 20px;
|
||||
|
||||
label {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: 6px 0 -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-custom-selection {
|
||||
margin-bottom: 10px;
|
||||
|
||||
label {
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: -4px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-selection {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> li {
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
min-width: 42px;
|
||||
display: flex;
|
||||
margin: 0 10px 10px 0;
|
||||
padding: 6px 10px;
|
||||
color: $color-gray;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
transition: $transition-default;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: default;
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.65;
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-gray-lite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-info-middle-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.number-picker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-group-quantity {
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
|
||||
.input-quantity {
|
||||
width: 100px;
|
||||
padding: 10px 39px 10px 10px;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: $color-gray-lite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
.btn-number {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
padding: 0;
|
||||
line-height: 18px;
|
||||
background: none;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
&:hover {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-plus {
|
||||
top: 0;
|
||||
height: 24px;
|
||||
border-top-right-radius: $radius-default;
|
||||
}
|
||||
|
||||
.btn-minus {
|
||||
top: 23px;
|
||||
height: 22px;
|
||||
border-bottom-right-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
margin-left: 20px;
|
||||
padding: 8px 30px;
|
||||
|
||||
> i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.details-info-bottom {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.additional-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 -6px -12px;
|
||||
padding: 5px 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
padding: 0 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
color: $color-default-hover;
|
||||
color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
label {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.product-details-info {
|
||||
width: calc(100% - 500px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-details-info {
|
||||
width: 100%;
|
||||
margin-top: 34px;
|
||||
padding: 0;
|
||||
|
||||
.product-variants {
|
||||
margin-top: -5px;
|
||||
|
||||
.variant-custom-selection {
|
||||
label {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-check,
|
||||
.variant-radio {
|
||||
margin-top: 0;
|
||||
|
||||
label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.variant-input,
|
||||
.variant-select {
|
||||
label {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.product-details-info {
|
||||
.details-info-middle-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
margin: 20px 0 0 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.product-details-top {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.right-sidebar {
|
||||
width: 285px;
|
||||
min-width: 285px;
|
||||
padding-left: 15px;
|
||||
|
||||
.feature-list {
|
||||
flex-direction: column;
|
||||
margin-top: 0;
|
||||
|
||||
.single-feature {
|
||||
margin-bottom: 20px;
|
||||
justify-content: flex-start;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-details-top-inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1350px) {
|
||||
.product-details-top {
|
||||
.right-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-details-top-inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,246 @@
|
||||
.product-image-gallery {
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.additional-image-wrap {
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
margin-top: 8px;
|
||||
|
||||
.additional-image {
|
||||
display: flex;
|
||||
height: 80px;
|
||||
margin: 8px 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: $transition-default;
|
||||
|
||||
&.slick-current {
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
> img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-image-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-left: 16px;
|
||||
flex-grow: 1;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.base-image {
|
||||
&.slick-initialized {
|
||||
.base-image-inner {
|
||||
&:not(:first-child) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-image-inner {
|
||||
&:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.base-image-slide {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 100%;
|
||||
background: $color-white;
|
||||
cursor: crosshair;
|
||||
|
||||
&:hover {
|
||||
> img:not(.zoomImg) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.zoomImg {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
> img:not(.zoomImg) {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 130px;
|
||||
|
||||
& ~ .zoomImg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gallery-trigger {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
transform: rotateY(180deg);
|
||||
|
||||
> i {
|
||||
font-size: 20px;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.product-image-gallery {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.additional-image-wrap {
|
||||
width: 70px;
|
||||
min-width: 70px;
|
||||
|
||||
.additional-image {
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.base-image-wrap {
|
||||
.base-image-slide {
|
||||
cursor: zoom-in;
|
||||
|
||||
&:hover {
|
||||
> img:not(.zoomImg) {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.zoomImg {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoomImg {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.btn-gallery-trigger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 577px) {
|
||||
.additional-image-wrap {
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
top: -4px;
|
||||
|
||||
&:before {
|
||||
content: "\f106";
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
left: 0;
|
||||
top: auto;
|
||||
bottom: -14px;
|
||||
transform: translate(0, 0);
|
||||
|
||||
&:before {
|
||||
content: "\f107";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.product-image-gallery {
|
||||
width: 100%;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.rtl {
|
||||
.additional-image-wrap {
|
||||
.slick-track {
|
||||
right: 2px #{'/*rtl:ignore*/'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.additional-image-wrap {
|
||||
display: flex;
|
||||
width: calc(100% - 32px);
|
||||
min-width: 0;
|
||||
margin: 16px auto 0;
|
||||
|
||||
.slick-prev {
|
||||
left: -22px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: -22px;
|
||||
}
|
||||
|
||||
.additional-image {
|
||||
width: 70px;
|
||||
min-width: 70px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.base-image-wrap {
|
||||
margin-left: 0;
|
||||
|
||||
.base-image-slide {
|
||||
padding-bottom: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
.reviews {
|
||||
padding-top: 45px;
|
||||
|
||||
.pagination {
|
||||
margin-top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-form {
|
||||
> h4 {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.rating-input {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: -1px 0 -2px;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
color: $color-gray-lite;
|
||||
cursor: pointer;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color-yellow;
|
||||
|
||||
~ label {
|
||||
color: $color-yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
~ label {
|
||||
color: $color-yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
padding: 7px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-review-wrap {
|
||||
margin-top: 4px;
|
||||
|
||||
&.loading {
|
||||
&:after {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
display: flex;
|
||||
padding: 35px 0 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
path {
|
||||
stroke-width: 3px;
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
stroke: $color-default;
|
||||
stroke: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-review {
|
||||
margin-bottom: 27px;
|
||||
|
||||
&:nth-child(4) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:nth-child(n+5) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reviewer-name {
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.reviewer-message {
|
||||
color: $color-gray;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.review-date,
|
||||
.review-approval {
|
||||
font-size: 14px;
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $xl) {
|
||||
.user-review-wrap {
|
||||
margin: 48px 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.reviews {
|
||||
padding-top: 35px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.specification {
|
||||
padding-top: 51px;
|
||||
|
||||
.specification-inner {
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 15px 30px;
|
||||
background: $color-white-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.specification-list {
|
||||
padding: 35px 30px 34px 30px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin-bottom: 18px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
line-height: 23px;
|
||||
width: 190px;
|
||||
min-width: 190px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
line-height: 23px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.specification {
|
||||
padding: 41px 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.specification-list {
|
||||
li {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
.browse-categories-wrap {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.browse-categories {
|
||||
margin: -7px 0 0 -5px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
|
||||
&.active {
|
||||
> a {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-left: 25px;
|
||||
color: $color-gray;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: 200ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-top: 4px;
|
||||
cursor: pointer;
|
||||
transform: rotate(0deg);
|
||||
transition: 200ms ease-in-out;
|
||||
|
||||
&.open {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: none;
|
||||
margin-left: 10px;
|
||||
padding-top: 8px;
|
||||
|
||||
li {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
.filter-section-wrap {
|
||||
background: $color-white;
|
||||
|
||||
.filter-section-header {
|
||||
> i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section-inner {
|
||||
&.custom-scrollbar {
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
margin-bottom: 33px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> h6 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn-show-more {
|
||||
display: inline-flex;
|
||||
margin: 6px 0 9px;
|
||||
color: $color-gray;
|
||||
cursor: pointer;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-price {
|
||||
padding-bottom: 15px;
|
||||
|
||||
.price-input {
|
||||
display: flex;
|
||||
|
||||
> .form-group {
|
||||
&:first-child {
|
||||
position: relative;
|
||||
margin-right: 15px;
|
||||
|
||||
&:after {
|
||||
content: "-";
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-horizontal {
|
||||
height: 3px;
|
||||
|
||||
.noUi-handle {
|
||||
top: -6px;
|
||||
right: -7px #{'/*rtl:ignore*/'};
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-target {
|
||||
background: $border-color-lite;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.noUi-connect {
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.noUi-connect,
|
||||
.noUi-origin {
|
||||
transform-origin: 0 100% #{'/*rtl:ignore*/'};
|
||||
}
|
||||
|
||||
.noUi-handle {
|
||||
border: none;
|
||||
background: $color-default-transparent-lite;
|
||||
background: var(--color-primary-transparent-lite);
|
||||
border-radius: 50%;
|
||||
box-shadow: none;
|
||||
cursor: ew-resize;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-checkbox {
|
||||
.form-check {
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> label {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.filter-section-wrap {
|
||||
position: fixed;
|
||||
left: -165px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 300px;
|
||||
box-shadow: 2.5px 4.33px 40px 5px rgba(12, 31, 46, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 200;
|
||||
transition: $transition-primary;
|
||||
|
||||
&.active {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.filter-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 15px 20px;
|
||||
background: $color-default;
|
||||
background: var(--color-primary);
|
||||
|
||||
> i {
|
||||
display: block;
|
||||
color: $color-white;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 400;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
color: $color-white;
|
||||
border-bottom: none;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-section-inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 58px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 23px 20px 15px;
|
||||
|
||||
&.custom-scrollbar {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.grid-view-products {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -15px;
|
||||
|
||||
> .col {
|
||||
display: flex;
|
||||
flex: 0 0 20%;
|
||||
max-width: 20%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1700px) {
|
||||
.grid-view-products {
|
||||
> .col {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1350px) {
|
||||
.grid-view-products {
|
||||
> .col {
|
||||
flex: 0 0 33.33333333333333%;
|
||||
max-width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.search-result-middle {
|
||||
&.empty {
|
||||
.grid-view-products {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-view-products {
|
||||
margin: 0 -8px;
|
||||
padding-bottom: 14px;
|
||||
|
||||
> .col {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 880px) {
|
||||
.grid-view-products {
|
||||
> .col {
|
||||
flex: 0 0 33.33333333333333%;
|
||||
max-width: 33.33333333333333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $md) {
|
||||
.grid-view-products {
|
||||
margin: 0 -8px;
|
||||
|
||||
> .col {
|
||||
margin-bottom: 16px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 620px) {
|
||||
.grid-view-products {
|
||||
> .col {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
.list-view-products {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -15px;
|
||||
}
|
||||
|
||||
.list-product-card {
|
||||
display: flex;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.list-product-card-inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
border: 1px solid $color-gray-lite;
|
||||
border-radius: $radius-default;
|
||||
transition: $transition-primary;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-white;
|
||||
box-shadow: 2.5px 4.33px 50px 5px rgba(11, 28, 42, 0.15);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.product-card-left {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.product-card-right {
|
||||
flex-grow: 1;
|
||||
margin: -5px 0 -8px 30px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
|
||||
.image-placeholder {
|
||||
height: 85px;
|
||||
width: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card-countdown {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: $transition-primary;
|
||||
|
||||
&.is-countdown {
|
||||
.countdown-section {
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.countdown-amount {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
color: $color-white;
|
||||
margin: 0;
|
||||
background: $color-default-transparent;
|
||||
background: var(--color-primary-transparent);
|
||||
}
|
||||
|
||||
.countdown-period {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
|
||||
> h6 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
max-height: 48px;
|
||||
display: block;
|
||||
display: -webkit-box;
|
||||
color: $color-black;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
margin-bottom: 14px;
|
||||
|
||||
.rating-count {
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
margin: 0 0 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 18px;
|
||||
margin-bottom: 13px;
|
||||
|
||||
.previous-price {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-to-cart {
|
||||
font-size: 13px;
|
||||
margin-bottom: 9px;
|
||||
padding: 7px 30px 6px;
|
||||
|
||||
> i {
|
||||
font-size: 15px;
|
||||
margin: 5px 8px 0 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card-actions {
|
||||
.btn {
|
||||
padding: 0;
|
||||
color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
> i {
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-wishlist {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.btn-wishlist,
|
||||
.btn-compare {
|
||||
&.added {
|
||||
&:hover {
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.list-product-card {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.list-product-card-inner {
|
||||
flex-direction: column;
|
||||
|
||||
.product-card-left {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card-right {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.product-search-left {
|
||||
width: 263px;
|
||||
min-width: 263px;
|
||||
margin: -6px 30px 0 0;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid $border-color-lite;
|
||||
}
|
||||
|
||||
.vertical-products {
|
||||
margin-top: 29px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.product-search-left {
|
||||
width: 246px;
|
||||
min-width: 246px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-search-left {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
|
||||
.vertical-products {
|
||||
margin-top: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.product-search-right {
|
||||
width: calc(100% - 293px);
|
||||
|
||||
.categories-banner {
|
||||
display: block;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> img {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
border-radius: $radius-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.product-search-right {
|
||||
width: calc(100% - 276px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.product-search-right {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
.search-result-top {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.content-left {
|
||||
> h4 {
|
||||
font-weight: 400;
|
||||
color: $color-gray;
|
||||
padding-right: 30px;
|
||||
|
||||
> span {
|
||||
font-weight: 500;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-right {
|
||||
.mobile-view-filter {
|
||||
font-size: 16px;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
transition: $transition-default;
|
||||
|
||||
&:hover {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
|
||||
> i {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
> i {
|
||||
margin: 4px 5px 0 0;
|
||||
color: $color-gray-dark;
|
||||
transition: $transition-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sorting-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.view-type {
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-grid-view {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
.btn-grid-view,
|
||||
.btn-list-view {
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
color: $color-gray-dark;
|
||||
align-items: center;
|
||||
|
||||
&.active {
|
||||
color: $color-default;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-middle {
|
||||
position: relative;
|
||||
margin-bottom: -30px;
|
||||
|
||||
&.empty {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
&:before {
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
top: calc(50% - 15px);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
display: flex;
|
||||
padding: 40px 0;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
height: 70px;
|
||||
width: 100px;
|
||||
margin-bottom: 23px;
|
||||
|
||||
g {
|
||||
fill: $color-default;
|
||||
fill: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-bottom {
|
||||
display: flex;
|
||||
margin: 17px 0 -15px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.showing-results {
|
||||
line-height: 39px;
|
||||
color: $color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $lg) {
|
||||
.search-result-top {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
||||
.content-left {
|
||||
align-self: stretch;
|
||||
|
||||
> h4 {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content-right {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
margin-top: 13px;
|
||||
padding: 8px 15px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: $color-white-lite;
|
||||
border-radius: $radius-default;
|
||||
|
||||
.mobile-view-filter {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sorting-bar {
|
||||
.nice-select.form-control {
|
||||
background-color: $color-white-lite;
|
||||
border-color: $color-white-lite;
|
||||
|
||||
&:focus {
|
||||
background-color: $color-white-lite;
|
||||
border-color: $color-default;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-middle {
|
||||
&.empty {
|
||||
min-height: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result-bottom {
|
||||
flex-direction: column;
|
||||
|
||||
.showing-results {
|
||||
& + {
|
||||
.pagination {
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $sm) {
|
||||
.search-result-top {
|
||||
.sorting-bar {
|
||||
.m-r-20 {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.search-result-top {
|
||||
.content-right {
|
||||
flex-direction: column;
|
||||
padding-top: 16px;
|
||||
|
||||
.mobile-view-filter {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user