NW/FleetCart
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases Wiki Activity

¨4.0.1¨

Browse Source
This commit is contained in:
¨NW¨
2023-12-03 14:07:47 +00:00
parent c08b36d1b6
commit f35052522d
1112 changed files with 43019 additions and 24987 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
Themes/Storefront/resources/assets/public/sass/base/_reset.scss
View File

@@ -3,7 +3,6 @@ html {
}
body {
direction: ltr;
font-family: $primary-font;
font-size: 15px;
font-weight: 400;
@@ -11,20 +10,46 @@ body {
min-width: 320px;
color: $color-black;
overflow-x: hidden;
&.ltr {
direction: ltr;
}
&.rtl {
direction: rtl;
}
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-black;
}
h1, h2, h3, h4, h5, h6,
ul, ol, li, address, p {
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
address,
p {
margin: 0;
padding: 0;
}
div, a, button {
&:active, &:focus, &:visited {
div,
a,
button {
&:active,
&:focus,
&:visited {
outline: 0;
}
}
@@ -37,7 +62,8 @@ a {
}
}
b, strong {
b,
strong {
font-weight: 500;
}

81
Themes/Storefront/resources/assets/public/sass/components/_alert.scss
View File

@@ -1,62 +1,53 @@
.alert {
font-size: 16px;
position: fixed;
right: 15px;
bottom: 15px;
display: flex;
margin: 0 0 0 15px;
padding: 20px 64px 20px 28px;
align-items: center;
border: none;
border-left: 3px solid;
border-radius: $radius-default;
font-size: 16px;
position: fixed;
right: 15px;
bottom: 15px;
display: flex;
margin: 0 0 0 15px;
padding: 20px 64px 20px 28px;
align-items: center;
border: none;
border-radius: $radius-default;
> i {
font-size: 20px;
margin-right: 16px;
}
.close {
font-size: 16px;
top: 50%;
right: 17px;
padding: 10px;
transform: translateY(-50%);
transition: $transition-default;
.close {
font-size: 16px;
top: 50%;
right: 17px;
padding: 10px;
opacity: 1;
transform: translateY(-50%);
&:hover {
opacity: 1;
}
&:hover {
> i {
color: $color-default;
color: var(--color-primary);
}
}
> i {
color: $color-gray-dark;
}
}
> i {
color: $color-gray;
}
}
}
.alert-success {
color: $color-green;
background: #e8f7f3;
border-color: $color-green;
color: $color-green;
background: #e8f7f3;
border-color: $color-green;
}
.alert-danger {
color: $color-red;
background: #fbebea;
border-color: $color-red;
color: $color-red;
background: #fbebea;
border-color: $color-red;
}
.alert-info {
color: $color-info;
background: #e2ecf7;
border-color: $color-info;
color: $color-info;
background: #e2ecf7;
border-color: $color-info;
}
.alert-warning {
color: $color-yellow;
background: #fef5ea;
border-color: $color-yellow;
color: $color-yellow;
background: #fef5ea;
border-color: $color-yellow;
}

30
Themes/Storefront/resources/assets/public/sass/components/_badge.scss
View File

@@ -1,29 +1,29 @@
.badge {
font-size: 14px;
font-weight: 400;
min-width: 120px;
display: inline-block;
padding: 10px 15px;
text-align: center;
border-radius: 20px;
font-size: 14px;
font-weight: 400;
min-width: 120px;
display: inline-block;
padding: 10px 15px;
text-align: center;
border-radius: 20px;
}
.badge-success {
color: $color-green;
background: #edf9f6;
color: $color-green;
background: #edf9f6;
}
.badge-danger {
color: $color-red;
background: #fdf0ed;
color: $color-red;
background: #fdf0ed;
}
.badge-info {
color: $color-info;
background: #eef5fb;
color: $color-info;
background: #eef5fb;
}
.badge-warning {
color: $color-yellow;
background: #fff9ef;
color: $color-yellow;
background: #fcf6ec;
}

3
Themes/Storefront/resources/assets/public/sass/components/_buttons.scss
View File

@@ -3,8 +3,9 @@
font-size: 15px;
line-height: 26px;
position: relative;
border: none;
color: $color-black;
padding: 7px 24px;
border: none;
border-radius: $radius-default;
transition: $transition-default;

2
Themes/Storefront/resources/assets/public/sass/components/_countdown.scss
View File

@@ -1,4 +1,4 @@
.is-countdown {
.countdown {
border: none;
background: transparent;

96
Themes/Storefront/resources/assets/public/sass/components/_form.scss
View File

@@ -1,24 +1,24 @@
.form-group {
margin-bottom: 20px;
margin-bottom: 20px;
label {
font-weight: 500;
margin-bottom: 9px;
label {
font-weight: 500;
margin-bottom: 9px;
> span {
margin-left: 4px;
color: $color-red;
}
}
> span {
margin-left: 4px;
color: $color-red;
}
}
}
.form-control {
font-size: 14px;
height: 45px;
height: 45px;
padding: 10px 15px;
border-color: $color-gray-lite;
border-color: $color-gray-lite;
border-radius: $radius-default;
transition: $transition-default;
transition: $transition-default;
&:focus {
border-color: $color-default;
@@ -42,7 +42,7 @@ textarea {
}
.form-check {
padding: 0;
padding: 0 !important;
label {
font-weight: 400;
@@ -66,44 +66,44 @@ textarea {
&:checked + label:before,
&:not(:checked) + label:before {
content: '';
content: "";
position: absolute;
left: 0;
top: 1px;
width: 18px;
top: 2px;
width: 17px;
height: 17px;
border: 1px solid $border-color;
border-radius: $radius-default;
border-radius: 4px;
transition: $transition-default;
}
&:checked + label:after,
&:not(:checked) + label:after {
position: absolute;
content: '';
top: 5px;
content: "";
top: 7px;
left: 4px;
height: 6px;
width: 10px;
height: 5px;
width: 9px;
border: 2px solid;
border-color: $color-default;
border-color: var(--color-primary);
/*rtl:begin:ignore*/
border-top: none;
border-right: none;
transform: rotate(-45deg) scale(0);
border-top: none;
border-right: none;
transform: rotate(-45deg) scale(0);
/*rtl:end:ignore*/
transition: $transition-default;
}
&:not(:checked) + label:after {
opacity: 0;
transform: rotate(-45deg) scale(0) #{'/*rtl:ignore*/'};
transform: rotate(-45deg) scale(0) #{"/*rtl:ignore*/"};
}
&:checked + label:after {
opacity: 1;
transform: rotate(-45deg) scale(1) #{'/*rtl:ignore*/'};
transform: rotate(-45deg) scale(1) #{"/*rtl:ignore*/"};
}
}
}
@@ -133,28 +133,28 @@ textarea {
&:checked + label:before,
&:not(:checked) + label:before {
content: '';
content: "";
position: absolute;
left: 0;
top: 2px;
width: 17px;
height: 17px;
width: 18px;
height: 18px;
border: 1px solid $border-color;
border-radius: 50%;
border-radius: $radius-full;
transition: $transition-default;
}
&:checked + label:after,
&:not(:checked) + label:after {
position: absolute;
content: '';
top: 7px;
left: 5px;
height: 7px;
width: 7px;
content: "";
top: 6px;
left: 4px;
height: 10px;
width: 10px;
background: $color-default;
background: var(--color-primary);
border-radius: 50%;
border-radius: $radius-full;
transform: scale(0);
transition: $transition-default;
}
@@ -184,31 +184,31 @@ textarea {
}
.has-error {
.form-control {
border-color: $color-red;
.form-control {
border-color: $color-red;
&:focus {
border-color: $color-red;
}
}
&:focus {
border-color: $color-red;
}
}
}
.error-message {
line-height: 20px;
display: block;
margin: 4px 0 -5px;
color: $color-red;
display: block;
margin: 4px 0 -5px;
color: $color-red;
}
::placeholder {
color: $color-gray-dark !important;
color: darken($color-gray-dark, 5%) !important;
opacity: 1;
}
:-ms-input-placeholder {
color: $color-gray-dark !important;
color: darken($color-gray-dark, 5%) !important;
}
::-ms-input-placeholder {
color: $color-gray-dark !important;
color: darken($color-gray-dark, 5%) !important;
}

12
Themes/Storefront/resources/assets/public/sass/components/_loader.scss
View File

@@ -3,7 +3,7 @@
&:before {
position: absolute;
content: '';
content: "";
left: 0;
top: 0;
right: 0;
@@ -15,12 +15,12 @@
&:after {
position: absolute;
content: '';
content: "";
left: 50%;
top: 50%;
height: 30px;
width: 30px;
border-radius: 50%;
border-radius: $radius-full;
border: 3px solid $color-default;
border: 3px solid var(--color-primary);
border-top-color: transparent !important;
@@ -32,15 +32,15 @@
.btn-loading {
color: transparent !important;
&:after {
&:after {
position: absolute;
content: '';
content: "";
left: 50%;
top: 50%;
height: 16px;
width: 16px;
border: 2px solid $color-white;
border-radius: 50%;
border-radius: $radius-full;
border-top-color: transparent !important;
animation: loader-spin 800ms infinite linear;
}

14
Themes/Storefront/resources/assets/public/sass/components/_modal.scss
View File

@@ -1,5 +1,13 @@
.modal {
padding-right: 0 !important;
&.in {
opacity: 1;
.modal-dialog {
transform: none;
}
}
}
.modal-dialog {
@@ -15,3 +23,9 @@
.modal-body {
padding: 0;
}
.modal-backdrop {
&.in {
opacity: 0.5;
}
}

136
Themes/Storefront/resources/assets/public/sass/components/_tabs.scss
View File

@@ -8,42 +8,6 @@
border-radius: 0;
transition: $transition-default;
&:before {
position: absolute;
content: '';
left: 50%;
bottom: 0;
height: 1px;
width: 0;
background: $color-default;
background: var(--color-primary);
transform: translateX(-50%);
transition: 150ms ease-in-out;
}
&:after {
position: absolute;
content: '';
left: 50%;
bottom: -7px;
height: 8px;
width: 15px;
background: $color-default;
background: var(--color-primary);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
opacity: 0;
transform: translateX(-50%);
transition: 150ms ease-in-out;
z-index: 1;
}
&:hover {
&:before {
width: 40px;
}
}
&.active {
font-weight: 500;
color: $color-default;
@@ -58,18 +22,39 @@
}
}
&.loading {
pointer-events: none;
&:before {
position: absolute;
content: "";
left: 50%;
bottom: 0;
height: 1px;
width: 0;
background: $color-default;
background: var(--color-primary);
transform: translateX(-50%);
transition: 150ms ease-in-out;
}
&:after {
position: absolute;
content: "";
left: 50%;
bottom: -7px;
height: 8px;
width: 15px;
background: $color-default;
background: var(--color-primary);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
opacity: 0;
transform: translateX(-50%);
transition: 150ms ease-in-out;
z-index: 1;
}
&:hover:not(.active) {
&:before {
left: 0;
top: auto;
transform: none;
animation: tab-loader 1.2s ease infinite;
}
&:after {
content: none;
width: 40px;
}
}
}
@@ -77,6 +62,25 @@
.nav-tabs {
border: none;
.nav-item {
&.loading {
.nav-link {
pointer-events: none;
&:before {
left: 0;
top: auto;
transform: none;
animation: tab-loader 1.2s ease infinite;
}
&:after {
content: none;
}
}
}
}
.nav-link {
@extend %nav-link;
}
@@ -90,24 +94,50 @@
@extend %nav-link;
float: left;
margin-left: 30px;
margin-right: 30px;
cursor: pointer;
transition: none;
&:first-child {
margin-left: 0;
&:last-child {
margin-right: 0;
}
&.active {
font-weight: 500;
color: $color-default;
color: var(--color-primary);
cursor: default;
&:before {
width: 100%;
}
&:after {
opacity: 1;
}
}
&.loading {
pointer-events: none;
&:before {
left: 0;
top: auto;
transform: none;
animation: tab-loader 1.2s ease infinite;
}
&:after {
content: none;
}
}
}
}
.tab-content {
.slick-list {
margin: 0 -15px -50px;
padding: 30px 0 50px;
margin: 0 -10px -50px;
padding: 30px 1px 50px 0;
.slick-track {
display: flex;
@@ -118,14 +148,14 @@
.slick-dots {
position: relative;
bottom: auto;
margin-top: 30px;
margin-top: 25px;
}
}
@media screen and (max-width: $lg) {
.tab-content {
.slick-list {
margin: 0 -8px -50px;
margin: 0 -7.5px -50px;
}
}
}

2
Themes/Storefront/resources/assets/public/sass/components/_toast.scss
View File

@@ -1,4 +1,4 @@
@import "~vue-toast-notification/dist/theme-default";
@import "vue-toast-notification/dist/theme-default";
.notices {
.toast {

3
Themes/Storefront/resources/assets/public/sass/layout/_cookie-bar.scss
View File

@@ -47,7 +47,8 @@
padding: 16px 0 20px;
.cookie-bar-text {
margin: 0 0 14px 0;
margin-right: 0;
margin-bottom: 14px;
text-align: center;
}
}

6
Themes/Storefront/resources/assets/public/sass/layout/_footer.scss
View File

@@ -1,6 +1,6 @@
@import 'footer/_footer-top',
'footer/_footer-bottom';
@import "footer/_footer-top";
@import "footer/_footer-bottom";
.footer {
padding-top: 70px;
padding-top: 60px;
}

16
Themes/Storefront/resources/assets/public/sass/layout/_header.scss
View File

@@ -1,9 +1,9 @@
@import 'header/_header-left',
'header/_header-search',
'header/_searched-keywords',
'header/_search-suggestion',
'header/_header-right',
'header/_sticky-header';
@import "header/_header-left";
@import "header/_header-search";
@import "header/_searched-keywords";
@import "header/_search-suggestion";
@import "header/_header-right";
@import "header/_sticky-header";
.header-wrap {
position: relative;
@@ -11,12 +11,12 @@
}
.header-wrap-inner {
padding: 40px 0;
padding: 30px 0;
}
@media screen and (max-width: $lg) {
.header-wrap-inner {
padding: 15px 0;
padding: 10px 0;
border-bottom: 1px solid $border-color;
}
}

20
Themes/Storefront/resources/assets/public/sass/layout/_landscape-products.scss
View File

@@ -1,9 +1,9 @@
.landscape-products-wrap {
margin-top: 45px;
margin-top: 45px;
.products-header {
border-bottom: 1px solid $border-color-lite;
}
.products-header {
border-bottom: 1px solid $border-color-lite;
}
.section-title {
padding-bottom: 14px;
@@ -11,14 +11,14 @@
}
.landscape-products {
.arrow-prev.slick-arrow,
.arrow-prev.slick-arrow,
.arrow-next.slick-arrow {
top: -40px;
}
.slick-list {
margin: 0 -15px -50px;
padding: 30px 0 50px;
.slick-list {
margin: 0 -10px -50px;
padding: 30px 1px 50px 0;
.slick-track {
display: flex;
@@ -29,14 +29,14 @@
.slick-dots {
position: relative;
bottom: auto;
margin-top: 30px;
margin-top: 25px;
}
}
@media screen and (max-width: $lg) {
.landscape-products {
.slick-list {
margin: 0 -8px -50px;
margin: 0 -7.5px -50px;
}
}
}

32
Themes/Storefront/resources/assets/public/sass/layout/_navigation.scss
View File

@@ -51,7 +51,7 @@
justify-content: space-between;
background: $color-default;
background: var(--color-primary);
border-radius: $radius-default 0 0 $radius-default;
border-radius: $radius-default;
cursor: pointer;
&:after {
@@ -71,29 +71,9 @@
width: 263px;
background: $color-white;
border: 1px solid $border-color;
border-top: none;
border-bottom: none;
border-radius: $radius-default;
z-index: 4;
&:before,
&:after {
position: absolute;
content: '';
left: 0;
height: 1px;
width: 100%;
background: $border-color;
}
&:before {
top: 0;
}
&:after {
bottom: 0;
}
&.show {
display: block;
}
@@ -102,7 +82,7 @@
&:before,
&:after {
position: absolute;
content: '';
content: "";
left: 50%;
border-style: solid;
transform: translateX(-50%);
@@ -110,14 +90,14 @@
}
&:before {
top: -25px;
top: -26px;
border-width: 13px 15px;
border-color: transparent;
border-bottom-color: $border-color;
}
&:after {
top: -23px;
top: -24px;
border-width: 12px 14px;
border-color: transparent;
border-bottom-color: $color-white;
@@ -177,7 +157,7 @@
&:after {
position: absolute;
content: '';
content: "";
left: 0;
top: 15px;
height: 15px;
@@ -346,7 +326,7 @@
&:hover {
> .nav-link {
> i {
left: 15px #{'/*rtl:ignore*/'};
left: 15px #{"/*rtl:ignore*/"};
}
}
}

7
Themes/Storefront/resources/assets/public/sass/layout/_newsletter.scss
View File

@@ -105,7 +105,7 @@
.newsletter-left {
width: 100%;
padding: 33px 40px 27px;
padding: 33px 30px 27px;
text-align: center;
.title {
@@ -133,7 +133,7 @@
@media screen and (max-width: 500px) {
.newsletter-left {
padding: 28px 30px 22px;
padding: 28px 25px 22px;
.sub-title {
margin-bottom: 35px;
@@ -154,7 +154,8 @@
}
.btn-subscribe {
margin: 15px 0 0 0;
margin-left: 0;
margin-top: 15px;
}
}
}

49
Themes/Storefront/resources/assets/public/sass/layout/_order-summary.scss
View File

@@ -1,6 +1,6 @@
@import 'order-summary/_order-summary-top',
'order-summary/_order-summary-middle',
'order-summary/_order-summary-bottom';
@import "order-summary/_order-summary-top";
@import "order-summary/_order-summary-middle";
@import "order-summary/_order-summary-bottom";
.order-summary-wrap {
width: 380px;
@@ -9,12 +9,49 @@
}
.order-summary {
padding: 24px 30px 30px;
padding: 22px 25px 30px;
background: $color-white-dark;
border-radius: $radius-default;
}
.price-amount {
font-weight: 500;
.order-summary-list {
li {
display: flex;
justify-content: space-between;
margin-bottom: 9px;
&:last-child {
margin-bottom: 0;
}
.coupon-code {
font-weight: 500;
white-space: nowrap;
}
> span {
font-weight: 500;
}
}
label {
margin-bottom: 0;
padding-right: 20px;
}
}
.order-summary-total {
font-size: 18px;
font-weight: 500;
display: flex;
margin-top: 24px;
padding-bottom: 0;
justify-content: space-between;
padding: 14px 0;
border-top: 1px solid $color-gray-lite;
label {
margin-bottom: 0;
}
}

8
Themes/Storefront/resources/assets/public/sass/layout/_sidebar-cart.scss
View File

@@ -1,6 +1,6 @@
@import 'sidebar-cart/_sidebar-cart-top',
'sidebar-cart/_sidebar-cart-middle',
'sidebar-cart/_sidebar-cart-bottom';
@import "sidebar-cart/_sidebar-cart-top";
@import "sidebar-cart/_sidebar-cart-middle";
@import "sidebar-cart/_sidebar-cart-bottom";
.sidebar-cart-wrap {
position: fixed;
@@ -8,7 +8,7 @@
right: -200px;
bottom: 0;
height: 100%;
width: 400px;
width: 380px;
background: $color-white;
box-shadow: 2.5px 4.33px 40px 5px rgba(12, 31, 46, 0.1);
opacity: 0;

6
Themes/Storefront/resources/assets/public/sass/layout/_sidebar-menu.scss
View File

@@ -52,10 +52,9 @@
.nav-item {
width: 50%;
}
&.nav-tabs {
.nav-link {
font-weight: 400;
padding: 8px;
color: $color-gray-dark;
text-align: center;
@@ -64,7 +63,6 @@
border-radius: 0;
&.active {
font-weight: 400;
color: $color-black;
background: $color-white;
cursor: default;
@@ -133,7 +131,7 @@
> .menu-item {
&:after {
position: absolute;
content: '';
content: "";
left: 0;
top: 16px;
height: 15px;

5
Themes/Storefront/resources/assets/public/sass/layout/_subscribe.scss
View File

@@ -44,8 +44,9 @@
> input {
height: 50px;
width: 450px;
border: none;
padding: 12px 147px 10px 20px;
border: none;
border-radius: 50px;
}
> .btn-subscribe {
@@ -53,7 +54,7 @@
position: absolute;
top: 5px;
right: 5px;
border-radius: 0 $radius-default $radius-default 0;
border-radius: 50px;
}
}
}

16
Themes/Storefront/resources/assets/public/sass/layout/_top-nav.scss
View File

@@ -30,6 +30,10 @@
border-right: none;
}
&.top-nav-compare {
display: none;
}
> a {
display: block;
color: $color-black;
@@ -82,3 +86,15 @@
}
}
}
@media screen and (max-width: 480px) {
.top-nav {
.top-nav-right-list {
> li {
&.top-nav-compare {
display: block;
}
}
}
}
}

4
Themes/Storefront/resources/assets/public/sass/layout/footer/_footer-top.scss
View File

@@ -55,7 +55,8 @@
}
a {
line-height: 33px;
font-size: 14px;
line-height: 30px;
display: block;
color: $color-gray;
border: 1px solid $color-gray-lite;
@@ -65,7 +66,6 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
&:hover {
color: $color-default;

2
Themes/Storefront/resources/assets/public/sass/layout/header/_header-left.scss
View File

@@ -69,7 +69,7 @@
}
svg {
direction: ltr #{'/*rtl:ignore*/'};
direction: ltr #{"/*rtl:ignore*/"};
height: 60px;
width: 245px;

72
Themes/Storefront/resources/assets/public/sass/layout/header/_header-right.scss
View File

@@ -2,10 +2,22 @@
height: 60px;
padding: 0 15px;
.header-wishlist,
.header-cart {
.header-column-right-item {
display: flex;
align-items: center;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
&:hover {
> span,
.icon-wrap > i {
color: $color-default;
color: var(--color-primary);
}
}
> span {
line-height: 28px;
@@ -15,27 +27,8 @@
}
}
.header-wishlist {
&:hover {
> span,
.icon-wrap > i {
color: $color-default;
color: var(--color-primary);
}
}
}
.header-cart {
margin-left: 35px;
cursor: pointer;
&:hover {
> span,
.icon-wrap > i {
color: $color-default;
color: var(--color-primary);
}
}
}
.icon-wrap {
@@ -43,7 +36,7 @@
margin-right: 10px;
> i {
font-size: 34px;
font-size: 30px;
line-height: 36px;
color: $color-black;
transition: $transition-default;
@@ -58,20 +51,16 @@
height: 18px;
width: 18px;
color: $color-white;
background: $color-red;
background: $color-default;
background: var(--color-primary);
text-align: center;
border-radius: 50%;
border-radius: $radius-full;
}
}
}
@media screen and (max-width: $xl) {
.header-column-right {
.icon-wrap {
margin-right: 6px;
}
.header-wishlist,
.header-cart {
> span {
display: none;
@@ -82,18 +71,23 @@
@media screen and (max-width: $lg) {
.header-column-right {
.header-column-right-item {
margin-right: 10px;
}
.icon-wrap {
> i {
font-size: 30px;
}
}
}
}
@media screen and (max-width: 480px) {
.header-column-right {
.header-compare,
.header-wishlist {
display: none;
}
.header-cart {
margin-left: 0;
}
}
}
@media screen and (max-width: 391px) {
.header-column-right {
padding-left: 10px;
}
}

14
Themes/Storefront/resources/assets/public/sass/layout/header/_header-search.scss
View File

@@ -11,13 +11,16 @@
.header-search-lg {
position: relative;
display: flex;
background: $color-white-lite;
border: 1px solid $border-color;
border-radius: $radius-default;
.search-input {
height: 58px;
padding-left: 30px;
background: $color-white-lite;
border: none;
border-radius: $radius-default;
}
.header-search-right {
@@ -30,15 +33,16 @@
display: flex;
height: 50px;
width: 50px;
margin-left: 40px;
margin-left: 30px;
padding: 0;
align-items: center;
justify-content: center;
border-radius: 0 $radius-default $radius-default 0;
border-radius: $radius-default;
> i {
font-size: 18px;
font-size: 20px;
line-height: 36px;
transform: rotateY(-180deg);
}
}
}
@@ -139,7 +143,7 @@
position: static;
display: flex;
flex-grow: 0;
margin-left: auto;
margin: 0 -10px 0 auto;
padding: 0 15px;
align-items: center;
}
@@ -158,7 +162,7 @@
}
> i {
font-size: 34px;
font-size: 30px;
line-height: 36px;
color: $color-black;
cursor: pointer;

54
Themes/Storefront/resources/assets/public/sass/layout/header/_search-suggestion.scss
View File

@@ -1,18 +1,32 @@
.search-suggestions {
position: absolute;
left: 41px;
left: 42px;
top: 60px;
right: 41px;
right: 42px;
background: $color-white;
border-bottom: 2px solid $color-default;
border-bottom: 2px solid var(--color-primary);
border-radius: 0 0 $radius-default $radius-default;
border-bottom: 1px solid $color-gray-lite;
border-radius: $radius-default;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
.search-suggestions-inner {
max-height: 425px;
background: $color-white;
padding-bottom: 11px;
padding-bottom: 14px;
}
.more-results {
font-size: 14px;
display: block;
padding: 6px 0;
color: $color-gray-dark;
background: $color-white-dark;
text-align: center;
border-top: 1px solid $color-gray-lite;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
.title {
@@ -25,7 +39,7 @@
&:after {
position: absolute;
content: '';
content: "";
left: 0;
top: 7px;
height: 15px;
@@ -62,7 +76,7 @@
line-height: 26px;
display: block;
max-width: 100%;
padding: 0 20px;
padding: 1px 20px;
color: $color-gray;
overflow: hidden;
text-overflow: ellipsis;
@@ -72,27 +86,9 @@
}
.product-suggestion {
padding-bottom: 3px;
.title {
margin-bottom: 14px;
}
.more-results {
font-size: 14px;
display: block;
margin: 14px 0 -14px;
padding: 6px 0;
color: $color-gray-dark;
background: $color-white-dark;
text-align: center;
border-top: 1px solid $color-gray-lite;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
}
.product-suggestion-list {
@@ -163,20 +159,20 @@
@media screen and (max-width: $lg) {
.search-suggestions {
top: 76px;
top: 71px;
left: 15px;
right: 15px;
display: none;
.search-suggestions-inner {
max-height: 359px;
max-height: 285px;
}
}
.header-wrap-inner {
&.sticky {
.search-suggestions {
top: 71px;
top: 66px;
}
}
}

28
Themes/Storefront/resources/assets/public/sass/layout/header/_sticky-header.scss
View File

@@ -5,7 +5,7 @@
top: -200px;
right: 0;
min-width: 320px;
padding: 10px 0;
padding: 8px 0;
background: $color-white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
z-index: 150;
@@ -24,6 +24,23 @@
}
}
.header-search {
.header-search-lg {
.search-input {
height: 54px;
}
.btn-search {
height: 46px;
width: 46px;
}
}
}
.search-suggestions {
top: 57px;
}
.searched-keywords {
display: none;
}
@@ -34,3 +51,12 @@
transition: 600ms ease;
}
}
@media screen and (max-width: $lg) {
.header-wrap-inner {
&.sticky {
padding: 5px 0;
border: none;
}
}
}

10
Themes/Storefront/resources/assets/public/sass/layout/order-summary/_order-summary-bottom.scss
View File

@@ -1,4 +1,6 @@
.order-summary-bottom {
text-align: center;
.checkout-terms-and-conditions {
margin: -1px 0 0;
padding-bottom: 17px;
@@ -23,3 +25,11 @@
}
}
}
@media screen and (min-width: $md) and (max-width: $lg) {
.order-summary-bottom {
.btn {
width: 50%;
}
}
}

32
Themes/Storefront/resources/assets/public/sass/layout/order-summary/_order-summary-middle.scss
View File

@@ -10,30 +10,16 @@
}
}
.shipping-methods {
margin: 21px 0 -6px;
.btn-remove-coupon {
font-size: 14px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
> h6 {
margin-bottom: 17px;
}
.error-message {
margin: 0;
padding-bottom: 10px;
}
.form-group {
margin: -1px 0 0;
}
.form-radio {
display: flex;
justify-content: space-between;
label {
padding-right: 20px;
color: $color-black;
}
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
}

39
Themes/Storefront/resources/assets/public/sass/layout/order-summary/_order-summary-top.scss
View File

@@ -5,35 +5,28 @@
}
.cart-item {
padding: 25px 0 24px;
border-bottom: 1px solid $color-gray-lite;
padding: 10px 0 10px;
li {
display: flex;
margin-bottom: 9px;
justify-content: space-between;
&:last-child {
margin-bottom: 0;
.product-info {
.number-picker {
.input-quantity {
background: transparent;
}
}
}
label {
margin-bottom: 0;
padding-right: 20px;
.remove-cart-item {
top: 0;
}
}
.coupon-wrap {
input {
height: 40px;
}
.product-name {
color: $color-black;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
.product-quantity {
font-weight: 500;
.btn-apply-coupon {
margin-left: 10px;
}
}
}

6
Themes/Storefront/resources/assets/public/sass/layout/sidebar-cart/_sidebar-cart-bottom.scss
View File

@@ -7,8 +7,8 @@
.sidebar-cart-subtotal {
display: flex;
margin: 0 30px;
padding: 25px 0;
margin: 0 25px;
padding: 20px 0;
justify-content: space-between;
border-top: 1px solid $border-color-lite;
@@ -21,7 +21,7 @@
.sidebar-cart-actions {
display: flex;
padding: 20px 30px;
padding: 20px 25px;
background: $color-white-lite;
justify-content: space-between;
}

59
Themes/Storefront/resources/assets/public/sass/layout/sidebar-cart/_sidebar-cart-middle.scss
View File

@@ -3,8 +3,8 @@
left: 0;
right: 0;
top: 60px;
bottom: 155px;
padding: 0 30px;
bottom: 145px;
padding: 0 25px;
&.empty {
bottom: 0;
@@ -18,67 +18,14 @@
}
.sidebar-cart-item {
position: relative;
display: flex;
padding: 25px 0 21px;
padding: 25px 0 20px;
border-bottom: 1px solid $color-white-lite;
&:last-child {
border-bottom: none;
}
.product-image {
height: 46px;
width: 46px;
min-width: 46px;
border-radius: $radius-default;
overflow: hidden;
.image-placeholder {
height: 25px;
width: 25px;
}
}
.product-info {
margin: 0 30px 0 20px;
min-width: 0;
.product-name {
font-size: 15px;
font-weight: 400;
line-height: 24px;
display: block;
color: $color-black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
.product-quantity {
font-size: 13px;
line-height: 26px;
color: #666666;
}
}
.remove-cart-item {
position: absolute;
top: 16px;
right: -8px;
.btn-remove {
font-size: 14px;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
}
}

2
Themes/Storefront/resources/assets/public/sass/layout/sidebar-cart/_sidebar-cart-top.scss
View File

@@ -1,6 +1,6 @@
.sidebar-cart-top {
display: flex;
padding: 15px 30px;
padding: 15px 25px;
align-items: center;
justify-content: space-between;
background: $color-default;

82
Themes/Storefront/resources/assets/public/sass/main.scss Normal file
View File

@@ -0,0 +1,82 @@
$grid-columns: 18;
// Vendors
@import "bootstrap/scss/bootstrap";
/*rtl:begin:ignore*/
@import "line-awesome/dist/line-awesome/scss/line-awesome";
@import "animate.css/animate";
@import "jquery-nice-select/scss/nice-select";
@import "drift-zoom/dist/drift-basic";
@import "nouislider/dist/nouislider";
@import "flatpickr/dist/flatpickr";
@import "glightbox/dist/css/glightbox";
/*rtl:end:ignore*/
@import "slick-carousel/slick/slick";
@import "slick-carousel/slick/slick-theme";
// Utilities
@import "utils/_variables";
@import "utils/_utilities";
@import "utils/_common";
// Vendors
@import "vendors/_slick";
@import "vendors/_drift-zoom";
// Base
@import "base/_reset";
@import "base/_typography";
// Components
@import "components/_custom-select";
@import "components/_mega-menu";
@import "components/_tabs";
@import "components/_buttons";
@import "components/_scrollbar";
@import "components/_countdown";
@import "components/_breadcrumb";
@import "components/_form";
@import "components/_alert";
@import "components/_table";
@import "components/_badge";
@import "components/_panel";
@import "components/_pagination";
@import "components/_loader";
@import "components/_modal";
@import "components/_toast";
// Layout
@import "layout/_top-nav";
@import "layout/_header";
@import "layout/_sidebar-menu";
@import "layout/_sidebar-cart";
@import "layout/_navigation";
@import "layout/_landscape-products";
@import "layout/_steps";
@import "layout/_order-summary";
@import "layout/_subscribe";
@import "layout/_newsletter";
@import "layout/_cookie-bar";
@import "layout/_footer";
// Pages
@import "pages/_home";
@import "pages/_login";
@import "pages/_register";
@import "pages/_account";
@import "pages/_contact";
@import "pages/_compare";
@import "pages/_product-search";
@import "pages/_product-details";
@import "pages/_cart";
@import "pages/_checkout";
@import "pages/_order-complete";
@import "pages/_all-brands";
@import "pages/_all-categories";
@import "pages/_order-details";
@import "pages/_404";
@import "pages/_custom-page";
[v-cloak] {
display: none !important;
}

4
Themes/Storefront/resources/assets/public/sass/pages/_404.scss
View File

@@ -1,5 +1,5 @@
@import '404/_error-page-left',
'404/_error-page-right';
@import "404/_error-page-left";
@import "404/_error-page-right";
.error-page-wrap {
margin-top: 70px;

170
Themes/Storefront/resources/assets/public/sass/pages/_account.scss
View File

@@ -1,89 +1,89 @@
@import 'account/_my-orders',
'account/_my-downloads',
'account/_my-wishlist',
'account/_my-reviews',
'account/_my-addresses',
'account/_my-profile';
@import "account/_my-orders";
@import "account/_my-downloads";
@import "account/_my-wishlist";
@import "account/_my-reviews";
@import "account/_my-addresses";
@import "account/_my-profile";
%account-common-buttons {
display: inline-flex;
margin-top: -2px;
padding: 0;
letter-spacing: 2px;
display: inline-flex;
margin-top: -2px;
padding: 0;
letter-spacing: 2px;
&:hover {
color: $color-default;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
> i {
margin: 5px 10px 0 0;
}
> i {
margin: 5px 10px 0 0;
}
}
.account-wrap {
margin-top: 42px;
margin-top: 42px;
.account-left {
min-width: 267px
}
.account-left {
min-width: 267px;
}
.account-right {
width: 100%;
margin-left: 30px;
overflow: hidden;
}
.account-right {
width: 100%;
margin-left: 30px;
overflow: hidden;
}
}
.account-wrap-inner {
display: flex;
display: flex;
}
.account-sidebar {
li {
&.active {
a {
font-weight: 500;
color: $color-default;
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;
&: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;
}
}
}
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;
a {
font-size: 16px;
line-height: 36px;
position: relative;
display: inline-block;
color: $color-black;
padding: 8px 0 8px 28px;
&:hover {
color: $color-default;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
> i {
font-size: 24px;
vertical-align: top;
margin-top: 5px;
> i {
font-size: 24px;
vertical-align: top;
margin-top: 5px;
margin: 5px 12px 0 0;
color: $color-gray;
}
}
}
}
}
}
}
.account-wrap {
@@ -91,38 +91,38 @@
margin: 17px -13px -15px 0;
}
.empty-message {
padding: 64px 15px 63px;
text-align: center;
.empty-message {
padding: 64px 15px 63px;
text-align: center;
> h3 {
font-weight: 400;
}
}
> h3 {
font-weight: 400;
}
}
}
@media screen and (max-width: 1400px) {
.account-wrap {
.account-left {
min-width: 245px;
}
}
.account-wrap {
.account-left {
min-width: 245px;
}
}
}
@media screen and (max-width: $lg) {
.account-wrap {
.account-wrap {
margin-top: 23px;
.account-left {
min-width: 0;
}
.account-left {
min-width: 0;
}
.account-right {
margin: 29px 0 0 0;
}
}
.account-right {
margin: 30px 0 0 0 !important;
}
}
.account-wrap-inner {
flex-direction: column;
}
}
.account-wrap-inner {
flex-direction: column;
}
}

4
Themes/Storefront/resources/assets/public/sass/pages/_cart.scss
View File

@@ -1,2 +1,2 @@
@import 'cart/_shopping-cart',
'cart/_shopping-cart-table';
@import "cart/_shopping-cart";
@import "cart/_shopping-cart-table";

27
Themes/Storefront/resources/assets/public/sass/pages/_checkout.scss
View File

@@ -1,26 +1,35 @@
@import "checkout/_checkout-left", "checkout/_checkout-right";
@import "checkout/_checkout-left";
@import "checkout/_checkout-right";
.checkout-wrap {
margin-top: 50px;
}
.checkout {
.checkout-form {
display: flex;
}
.checkout-inner {
display: flex;
flex-grow: 1;
.checkout-inner {
display: flex;
flex-grow: 1;
}
.order-summary {
.cart-items {
margin: -9px 0 17px;
}
}
}
@media screen and (max-width: 1280px) {
.checkout-inner {
flex-direction: column;
.checkout-form {
.checkout-inner {
flex-direction: column;
}
}
}
@media screen and (max-width: $lg) {
.checkout {
.checkout-form {
flex-direction: column;
}
}

39
Themes/Storefront/resources/assets/public/sass/pages/_compare.scss
View File

@@ -1,5 +1,5 @@
.compare-wrap {
margin-top: 50px;
margin-top: 50px;
.empty-message {
display: flex;
@@ -56,6 +56,10 @@
}
}
.product-name {
font-size: 16px;
}
.product-image {
height: 200px;
width: 260px;
@@ -121,7 +125,7 @@
justify-content: center;
align-items: center;
border: 1px solid $color-gray-lite;
border-radius: 50%;
border-radius: $radius-full;
&:hover {
border-color: $color-default-transparent;
@@ -133,12 +137,13 @@
}
}
&.disabled, &[disabled] {
&.disabled,
&[disabled] {
&:hover {
border-color: $color-gray-lite !important;
border-color: $color-gray-lite;
> i {
color: $color-black !important;
color: $color-gray;
}
}
}
@@ -155,21 +160,27 @@
animation-iteration-count: 1;
}
&.disabled, &[disabled] {
&.disabled,
&[disabled] {
.animated {
animation: initial;
}
}
> i {
color: $color-gray;
transition: $transition-default;
}
}
}
@media screen and (max-width: 1400px) {
.compare-table {
td {
&:first-child {
width: 245px;
min-width: 245px;
}
}
}
.compare-table {
td {
&:first-child {
width: 245px;
min-width: 245px;
}
}
}
}

69
Themes/Storefront/resources/assets/public/sass/pages/_contact.scss
View File

@@ -1,35 +1,36 @@
.contact-wrap {
margin: 90px 0;
margin: 90px 0;
.map-canvas {
position: relative;
height: 0;
padding-bottom: 34%;
overflow: hidden;
border-radius: $radius-default;
.map-canvas {
position: relative;
height: 0;
padding-bottom: 34%;
overflow: hidden;
background: $color-white-lite;
border-radius: $radius-default;
> iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
}
> iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
}
}
.contact-form-wrap {
display: flex;
margin-top: -12%;
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-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 {
@@ -58,6 +59,10 @@
i {
color: $color-white !important;
}
a {
color: $color-white;
}
}
}
@@ -106,12 +111,12 @@
}
@media screen and (max-width: 1080px) {
.contact-form-wrap {
.contact-form-inner {
width: 90%;
flex-direction: column;
}
}
.contact-form-wrap {
.contact-form-inner {
width: 90%;
flex-direction: column;
}
}
.contact-form-left {
width: 100%;
@@ -143,11 +148,11 @@
}
@media screen and (max-width: $sm) {
.contact-form-wrap {
margin-top: 30px;
.contact-form-wrap {
margin-top: 30px;
.contact-form-inner {
width: 100%;
}
}
}
}

19
Themes/Storefront/resources/assets/public/sass/pages/_home.scss
View File

@@ -1,10 +1,9 @@
@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';
@import "home/_home-section";
@import "home/_features";
@import "home/_featured-categories";
@import "home/_banner";
@import "home/_landscape-tab-products";
@import "home/_grid-products";
@import "home/_brands";
@import "home/_vertical-products";
@import "home/_blog";

48
Themes/Storefront/resources/assets/public/sass/pages/_login.scss
View File

@@ -1,21 +1,21 @@
.login-wrap {
.remember-me {
margin-top: -1px;
float: left;
}
.remember-me {
margin-top: -1px;
float: left;
}
.forgot-password {
margin-top: -1px;
color: $color-gray;
float: right;
.forgot-password {
margin-top: -1px;
color: $color-gray;
float: right;
&:hover {
color: $color-default;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
}
}
.btn-sign-in {
.btn-sign-in {
margin-top: 34px;
}
@@ -25,16 +25,16 @@
}
@media screen and (max-width: 380px) {
.login-wrap {
.remember-me,
.forgot-password {
display: block;
text-align: center;
float: none;
}
.login-wrap {
.remember-me,
.forgot-password {
display: block;
text-align: center;
float: none !important;
}
.forgot-password {
margin-top: 4px;
}
}
.forgot-password {
margin-top: 10px;
}
}
}

12
Themes/Storefront/resources/assets/public/sass/pages/_order-complete.scss
View File

@@ -15,12 +15,13 @@
width: 80px;
height: 80px;
margin-bottom: 23px;
border-radius: 50%;
border-radius: $radius-full;
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;
animation: fill 0.4s ease-in-out 0.4s forwards,
scale 0.3s ease-in-out 0.9s both;
}
.checkmark-circle {
@@ -31,14 +32,14 @@
stroke-width: 1.5;
stroke-miterlimit: 10;
fill: none;
animation: stroke .6s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) 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;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
@@ -48,7 +49,8 @@
}
@keyframes scale {
0%, 100% {
0%,
100% {
transform: none;
}

6
Themes/Storefront/resources/assets/public/sass/pages/_order-details.scss
View File

@@ -1,6 +1,6 @@
@import 'order-details/_order-details-top',
'order-details/_order-details-middle',
'order-details/_order-details-bottom';
@import "order-details/_order-details-top";
@import "order-details/_order-details-middle";
@import "order-details/_order-details-bottom";
.order-details-wrap {
margin-top: 50px;

16
Themes/Storefront/resources/assets/public/sass/pages/_product-details.scss
View File

@@ -1,11 +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';
@import "product-details/_product-details-top";
@import "product-details/_product-gallery";
@import "product-details/_product-details-info";
@import "product-details/_product-details-bottom";
@import "product-details/_product-description";
@import "product-details/_product-specification";
@import "product-details/_product-reviews";
.product-details-wrap {
margin-top: 50px;
margin-top: 50px;
}

14
Themes/Storefront/resources/assets/public/sass/pages/_product-search.scss
View File

@@ -1,10 +1,10 @@
@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';
@import "product-search/_product-search-left";
@import "product-search/_product-search-right";
@import "product-search/_category-menu";
@import "product-search/_filter-section";
@import "product-search/_search-result";
@import "product-search/_grid-view-product";
@import "product-search/_list-view-product";
.product-search-wrap {
margin-top: 50px;

137
Themes/Storefront/resources/assets/public/sass/pages/account/_my-addresses.scss
View File

@@ -1,102 +1,67 @@
.my-addresses {
padding: 40px 30px;
padding: 35px 30px;
.address-card-wrap {
.btn-add-new-address {
margin-top: 0;
}
.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;
.address-card-actions {
display: flex;
margin-left: -8px;
&.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;
}
}
.btn {
padding: 0 8px;
}
.address-card-actions {
display: flex;
margin-left: -8px;
.btn-edit-address {
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
.btn {
padding: 0 8px;
}
.btn-delete-address {
&:hover {
color: $color-red;
}
}
}
}
.btn-edit-address {
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
.add-new-address-form {
margin-top: -7px;
.btn-delete-address {
&:hover {
color: $color-red;
}
}
}
}
}
.section-title {
margin-bottom: 25px;
padding-bottom: 13px;
border-bottom: 1px solid #e5e5e5;
}
.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;
}
}
.btn-cancel {
margin-right: 12px;
}
}
}
@media screen and (max-width: 500px) {
.my-addresses {
.address-card-wrap {
.btn-add-new-address {
width: 100%;
}
}
.my-addresses {
.address-card-wrap {
.btn-add-new-address {
width: 100%;
}
}
.add-new-address-form {
.btn-cancel {
width: 100%;
margin-right: 0;
}
.add-new-address-form {
.btn-cancel {
width: 100%;
margin-right: 0;
}
.btn-save-address {
width: 100%;
margin-top: 15px;
}
}
}
.btn-save-address {
width: 100%;
margin-top: 15px;
}
}
}
}

70
Themes/Storefront/resources/assets/public/sass/pages/account/_my-orders.scss
View File

@@ -1,56 +1,56 @@
.my-orders-table {
margin-bottom: 5px;
margin-bottom: 5px;
thead {
th {
thead {
th {
white-space: nowrap;
}
}
}
}
tbody {
td {
tbody {
td {
white-space: nowrap;
&:first-child {
font-weight: 500;
}
&:first-child {
font-weight: 500;
}
&:nth-child(4) {
font-weight: 500;
}
}
}
}
}
.product-price {
.product-price {
color: $color-black;
}
}
.badge {
margin-top: -6px;
}
.badge {
margin-top: -6px;
}
.btn-view {
@extend %account-common-buttons;
}
.btn-view {
@extend %account-common-buttons;
}
}
.user-info {
padding: 23px 30px;
padding: 23px 30px !important;
li {
display: flex;
line-height: 24px;
padding: 11px 0;
color: $color-gray;
li {
display: flex;
line-height: 24px;
padding: 11px 0;
color: $color-gray;
> i {
font-size: 24px;
margin-right: 8px;
vertical-align: top;
}
> i {
font-size: 24px;
margin-right: 8px;
vertical-align: top;
}
> span {
word-break: break-all;
}
}
> span {
word-break: break-all;
}
}
}

91
Themes/Storefront/resources/assets/public/sass/pages/cart/_shopping-cart-table.scss
View File

@@ -9,29 +9,29 @@
.shopping-cart-table {
margin-bottom: 10px;
thead th,
tbody td {
&:first-child {
width: 120px;
}
&:last-child {
width: 70px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
}
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;
}
}
}
@@ -46,8 +46,8 @@
overflow: hidden;
.image-placeholder {
height: 40px;
width: 40px;
height: 45px;
width: 45px;
}
}
@@ -68,61 +68,6 @@
.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) {
@@ -195,10 +140,6 @@
.product-price {
display: inline-flex;
}
.number-picker {
display: inline-block;
}
}
}

128
Themes/Storefront/resources/assets/public/sass/pages/checkout/_checkout-left.scss
View File

@@ -32,36 +32,25 @@
}
}
.select-address {
padding: 3px 0;
.address-card-wrap {
margin-bottom: -10px;
.form-group {
margin-bottom: 0;
}
> .row {
margin-left: -10px;
margin-right: -10px;
.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;
}
> .col {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
padding-left: 10px;
padding-right: 10px;
}
}
.address-card {
margin-bottom: 20px;
}
.error-message {
display: inline-flex;
margin: 0 0 20px;
@@ -71,7 +60,7 @@
.add-new-address-wrap {
.btn-add-new-address {
font-weight: 500;
margin-bottom: 22px;
margin-bottom: 20px;
padding: 5px 0;
&:hover {
@@ -90,16 +79,103 @@
}
}
@media screen and (max-width: 1700px) {
.checkout-form {
.address-card-wrap {
padding: 3px 0;
> .row {
> .col {
flex: 0 0 50%;
max-width: 50%;
}
}
}
}
}
@media screen and (max-width: 1350px) {
.checkout-form {
.address-card-wrap {
> .row {
> .col {
flex: 0 0 100%;
max-width: 100%;
}
}
}
}
}
@media screen and (max-width: 1280px) {
.checkout-form {
.address-card-wrap {
> .row {
> .col {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
}
}
.order-notes {
margin-bottom: 20px;
}
}
}
@media screen and (max-width: $xl) {
.checkout-form {
.address-card-wrap {
> .row {
> .col {
flex: 0 0 50%;
max-width: 50%;
}
}
}
}
}
@media screen and (max-width: $lg) {
.checkout-left {
padding-right: 0;
}
.checkout-form {
.address-card-wrap {
> .row {
> .col {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
}
}
}
}
@media screen and (max-width: 850px) {
.checkout-form {
.address-card-wrap {
> .row {
> .col {
flex: 0 0 50%;
max-width: 50%;
}
}
}
}
}
@media screen and (max-width: $sm) {
.checkout-form {
.address-card-wrap {
> .row {
> .col {
flex: 0 0 100%;
max-width: 100%;
}
}
}
}
}

99
Themes/Storefront/resources/assets/public/sass/pages/checkout/_checkout-right.scss
View File

@@ -7,41 +7,41 @@
.title {
margin-bottom: 13px;
}
}
.payment-method-form {
padding: 28px 30px 5px;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
.payment-method-form {
padding: 25px 25px 4px;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
.form-group {
margin-bottom: 0;
}
.form-group {
margin-bottom: 0;
}
.form-radio {
margin-bottom: 20px;
}
.form-radio {
margin-bottom: 20px;
}
label {
font-weight: 500;
color: $color-black;
}
label {
font-weight: 500;
color: $color-black;
}
.helper-text {
font-size: 13px;
display: block;
margin: -4px 0 0 28px;
color: $color-gray;
}
.helper-text {
font-size: 13px;
display: block;
margin: -4px 0 0 28px;
color: $color-gray;
}
.error-message {
margin: -2px 0 20px;
.error-message {
margin: -2px 0 20px;
}
}
}
.payment-instructions {
margin-top: 30px;
padding: 24px 30px 23px;
padding: 21px 25px;
background: $color-white-dark;
border-radius: $radius-default;
@@ -55,8 +55,37 @@
}
}
.coupon-wrap {
margin-top: 25px;
.shipping-method {
margin-top: 33px;
.title {
margin-bottom: 13px;
}
.shipping-method-form {
padding: 25px 25px 7px;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
.form-group {
margin-bottom: 0;
}
.form-radio {
font-weight: 400;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
label {
font-weight: 400;
}
span {
font-weight: 500;
}
}
}
}
}
@@ -67,22 +96,8 @@
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;
}
}
}
}
.stripe-error-message {
word-break: break-all;
}
@media screen and (max-width: 1280px) {

3
Themes/Storefront/resources/assets/public/sass/pages/home/_banner.scss
View File

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

81
Themes/Storefront/resources/assets/public/sass/pages/home/_brands.scss
View File

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

190
Themes/Storefront/resources/assets/public/sass/pages/home/_featured-categories.scss
View File

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

111
Themes/Storefront/resources/assets/public/sass/pages/home/_grid-products.scss
View File

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

116
Themes/Storefront/resources/assets/public/sass/pages/home/_slider.scss
View File

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

39
Themes/Storefront/resources/assets/public/sass/pages/home/_vertical-products.scss
View File

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

6
Themes/Storefront/resources/assets/public/sass/pages/order-details/_order-details-bottom.scss
View File

@@ -5,15 +5,11 @@
.order-summary-list {
width: 300px;
.price-amount {
font-weight: 500;
}
}
.order-summary-total {
width: 300px;
margin-top: 24px;
margin-top: 23px;
padding-bottom: 0;
}
}

72
Themes/Storefront/resources/assets/public/sass/pages/product-details/_product-details-bottom.scss
View File

@@ -1,10 +1,10 @@
.product-details-bottom {
display: flex;
display: flex;
.left-sidebar {
width: 285px;
min-width: 285px;
padding-right: 15px;
.left-sidebar {
width: 285px;
min-width: 285px;
padding-right: 15px;
.vertical-products {
margin-top: 14px;
@@ -17,50 +17,50 @@
.banner {
margin-top: 20px;
}
}
}
.product-details-bottom-inner {
width: calc(100% - 282px);
padding-left: 15px;
}
.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;
> .tabs {
justify-content: center;
border-bottom: 1px solid $color-gray-lite;
.nav-item {
margin: 0 26px -1px;
}
.nav-item {
margin: 0 26px;
}
.nav-link {
font-size: 20px;
font-weight: 500;
padding: 15px 3px;
color: $color-black;
}
}
.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;
.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-bottom-inner {
width: 100%;
padding-left: 0;
}
.product-details-tab {
margin-bottom: -15px;
}
}
.product-details-tab {
margin-bottom: -15px;
}
}
}

596
Themes/Storefront/resources/assets/public/sass/pages/product-details/_product-details-info.scss
View File

@@ -1,25 +1,25 @@
.product-details-info {
width: calc(100% - 600px);
padding: 0 15px 0 30px;
padding: 0 15px;
.details-info-top {
padding-bottom: 17px;
}
.details-info-top {
padding-bottom: 17px;
text-align: left;
}
.product-name {
font-size: 24px;
line-height: 30px;
margin-bottom: 15px;
}
.product-name {
font-size: 24px;
line-height: 30px;
margin-bottom: 15px;
}
.product-rating {
font-size: 16px;
margin-bottom: 9px;
.product-rating {
font-size: 16px;
margin-bottom: 9px;
.rating-count {
font-size: 14px;
margin-top: 3px;
}
.rating-count {
font-size: 14px;
margin-top: 3px;
}
& + .brief-description {
margin-top: 10px;
@@ -28,90 +28,83 @@
& + .details-info-top-actions {
margin-top: 8px;
}
}
}
.availability {
margin-bottom: 14px;
.availability {
margin-bottom: 14px;
&.in-stock {
color: $color-green;
}
&.in-stock {
color: $color-green;
}
&.out-of-stock {
color: $color-red;
}
&.out-of-stock {
color: $color-red;
}
& + .details-info-top-actions {
margin-top: -2px;
}
}
}
.brief-description {
margin-bottom: 12px;
.brief-description {
margin-bottom: 12px;
color: $color-gray;
}
}
.details-info-top-actions {
.btn {
padding: 0;
color: $color-gray;
.details-info-top-actions {
.btn {
padding: 0;
color: $color-gray;
&:hover {
color: $color-default;
&:hover {
color: $color-default;
color: var(--color-primary);
> i {
color: $color-gray;
}
}
}
> i {
margin-right: 4px;
}
}
> i {
margin-right: 4px;
}
}
.btn-wishlist {
margin-right: 25px;
}
.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;
}
.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;
.product-price {
font-size: 24px;
align-items: flex-end;
padding-bottom: 18px;
.previous-price {
font-size: 14px;
margin-top: 3px;
}
}
.previous-price {
font-size: 16px;
line-height: 20px;
margin-top: 0;
}
}
.product-variants {
padding-bottom: 10px;
.product-variants {
padding-bottom: 10px;
.form-group {
.extra-price {
font-weight: 500;
color: $color-gray;
.form-group {
.extra-price {
font-weight: 500;
color: $color-gray;
}
.form-custom-radio {
@@ -119,271 +112,313 @@
margin-left: 4px;
}
}
}
}
.variant-check {
margin: -1px 0 7px;
.variant-check {
margin: -1px 0 7px;
.error-message {
margin: -7px 0 8px;
}
}
.error-message {
margin: -7px 0 8px;
}
}
.variant-radio {
margin: -2px 0 8px;
.variant-radio {
margin: -2px 0 8px;
.error-message {
margin: -6px 0 7px;
}
}
.error-message {
margin: -6px 0 7px;
}
}
.variant-input,
.variant-select {
margin-bottom: 20px;
.variant-input,
.variant-select {
margin-bottom: 20px;
label {
padding-top: 12px;
}
label {
padding-top: 12px;
}
.error-message {
margin: 6px 0 -5px;
}
}
.nice-select {
.list {
z-index: 6;
}
}
.variant-custom-selection {
margin-bottom: 10px;
.error-message {
margin: 6px 0 -5px;
}
}
label {
padding-top: 6px;
}
.variant-custom-selection {
margin-bottom: 10px;
.error-message {
margin: -4px 0 5px;
}
}
label {
font-weight: 500;
}
.custom-selection {
display: inline-flex;
flex-wrap: wrap;
.variation-label {
font-size: 15px;
margin-bottom: 4px;
}
> 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;
.error-message {
margin: -4px 0 5px;
}
}
&:last-child {
margin-right: 0;
}
.custom-selection {
display: inline-flex;
flex-wrap: wrap;
&:hover {
border-color: $color-default;
border-color: var(--color-primary);
}
> li {
font-size: 14px;
height: 32px;
min-width: 50px;
position: relative;
display: flex;
margin: 0 10px 10px 0;
padding: 6px 14px;
color: $color-gray;
justify-content: center;
box-shadow: 0 0 0 1px darken($border-color, 5%);
border-radius: $radius-default;
transition: 100ms ease-in-out;
overflow: hidden;
cursor: pointer;
&.active {
cursor: default;
&:last-child {
margin-right: 0;
}
&:hover {
box-shadow: 0 0 0 2px $color-default-transparent;
box-shadow: 0 0 0 2px var(--color-primary-transparent);
}
&.active {
cursor: default;
color: $color-default;
color: var(--color-primary);
border-color: $color-default;
border-color: var(--color-primary);
}
box-shadow: 0 0 0 2px $color-default-transparent;
box-shadow: 0 0 0 2px var(--color-primary-transparent);
}
&.disabled {
opacity: 0.65;
cursor: default;
&.disabled {
opacity: 0.6;
}
&:hover {
border-color: $color-gray-lite;
}
}
}
}
}
&.variation-color {
height: 40px;
width: 40px;
min-width: auto;
padding: 0;
border-radius: $radius-full;
.details-info-middle-actions {
display: flex;
}
> div {
position: absolute;
left: 50%;
top: 50%;
height: 36px;
width: 36px;
border-radius: $radius-full;
transform: translate(-50%, -50%);
}
}
.number-picker {
display: inline-flex;
align-items: center;
&.variation-image {
height: 50px;
width: 50px;
min-width: auto;
padding: 0;
label {
font-weight: 500;
margin-bottom: 0;
}
img {
position: absolute;
left: 50%;
top: 50%;
max-height: 100%;
max-width: 100%;
transform: translate(-50%, -50%);
}
}
}
}
}
.input-group-quantity {
position: relative;
margin-left: 20px;
.details-info-middle-actions {
display: flex;
}
.input-quantity {
width: 100px;
padding: 10px 39px 10px 10px;
text-align: center;
.number-picker-lg {
display: inline-flex;
align-items: center;
&:focus {
outline: 0;
border-color: $color-gray-lite;
}
}
label {
font-weight: 500;
margin-bottom: 0;
}
.btn-wrapper {
position: absolute;
top: 0;
right: 0;
.input-group-quantity {
position: relative;
margin-left: 20px;
.btn-number {
position: absolute;
right: 0;
width: 30px;
padding: 0;
line-height: 18px;
background: none;
border: 1px solid $color-gray-lite;
border-radius: 0;
.input-quantity {
font-size: 15px;
width: 100px;
padding: 10px 39px 10px 10px;
text-align: center;
&:hover {
color: $color-default;
&:focus {
outline: 0;
border-color: $color-gray-lite;
}
&[disabled] {
color: $color-gray-dark;
}
}
.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;
}
}
}
&[disabled] {
color: $color-gray-dark;
.btn-plus {
top: 0;
height: 24px;
border-top-right-radius: $radius-default;
}
&:hover {
color: $color-gray-dark;
}
}
}
.btn-minus {
top: 23px;
height: 22px;
border-bottom-right-radius: $radius-default;
}
}
}
}
.btn-plus {
top: 0;
height: 24px;
border-top-right-radius: $radius-default;
}
.btn-add-to-cart {
margin-left: 20px;
padding: 8px 30px;
.btn-minus {
top: 23px;
height: 22px;
border-bottom-right-radius: $radius-default;
}
}
}
}
> i {
margin-right: 6px;
}
}
.btn-add-to-cart {
margin-left: 20px;
padding: 8px 30px;
.details-info-bottom {
padding: 10px 0;
}
> i {
margin-right: 6px;
}
}
.additional-info {
display: flex;
.details-info-bottom {
padding: 10px 0;
}
.additional-info {
display: flex;
flex-direction: column;
margin: 0 0 -6px -12px;
padding: 5px 0;
margin: 0 0 -6px -12px;
padding: 5px 0;
li {
margin-bottom: 4px;
padding: 0 12px;
li {
margin-bottom: 4px;
padding: 0 12px;
&:last-child {
&:last-child {
margin-bottom: 0;
}
}
label {
margin-bottom: 0;
}
label {
margin-right: 5px;
margin-bottom: 0;
}
a {
color: $color-default;
a {
color: $color-default;
color: var(--color-primary);
&:hover {
color: $color-default-hover;
&:hover {
color: $color-default-hover;
color: var(--color-primary-hover);
}
}
}
}
}
}
.sku {
color: $color-default;
.sku {
color: $color-default;
color: var(--color-primary);
label {
color: $color-black;
}
}
}
label {
color: $color-black;
}
}
}
.social-share {
display: flex;
align-items: center;
.social-share {
display: flex;
align-items: center;
label {
margin-bottom: 0;
}
label {
margin-bottom: 0;
}
.social-links {
margin-left: 16px;
}
}
}
@media screen and (max-width: 1600px) {
.product-details-info {
width: calc(100% - 500px);
}
.social-links {
margin-left: 15px;
}
}
}
@media screen and (max-width: $lg) {
.product-details-info {
width: 100%;
margin-top: 34px;
padding: 0;
.product-details-info {
width: 100%;
margin-top: 34px;
.product-variants {
margin-top: -5px;
.product-variants {
margin-top: -5px;
.variant-custom-selection {
label {
padding-top: 0;
}
}
.variant-custom-selection {
label {
padding-top: 0;
}
}
.variant-check,
.variant-radio {
margin-top: 0;
.variant-check,
.variant-radio {
margin-top: 0;
label {
margin-bottom: 8px;
}
}
label {
margin-bottom: 8px;
}
}
.variant-input,
.variant-select {
label {
padding-top: 0;
}
}
}
}
.variant-input,
.variant-select {
label {
padding-top: 0;
}
}
}
}
}
@media screen and (max-width: 420px) {
@@ -393,7 +428,8 @@
}
.btn-add-to-cart {
margin: 20px 0 0 0;
margin-top: 15px;
margin-left: 0;
align-self: flex-start;
}
}

54
Themes/Storefront/resources/assets/public/sass/pages/product-details/_product-details-top.scss
View File

@@ -1,43 +1,31 @@
.product-details-top {
display: flex;
margin-bottom: 20px;
margin-bottom: 20px;
.right-sidebar {
width: 285px;
min-width: 285px;
padding-left: 15px;
.right-sidebar {
width: 285px;
min-width: 285px;
padding: 0 15px;
.feature-list {
.feature-list {
flex-direction: column;
margin-top: 0;
margin-top: 0;
.single-feature {
margin-bottom: 20px;
justify-content: flex-start;
.single-feature {
margin-bottom: 20px;
justify-content: flex-start;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
.product-details-top-inner {
display: flex;
width: 100%;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
@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;
}
.product-details-top {
.right-sidebar {
display: none;
}
}
}

193
Themes/Storefront/resources/assets/public/sass/pages/product-details/_product-gallery.scss Normal file
View File

@@ -0,0 +1,193 @@
.product-gallery {
width: 600px;
min-width: 600px;
padding: 0 15px;
}
.product-gallery-preview-wrap {
margin-bottom: 15px;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
&.visible-variation-image {
.product-gallery-preview {
opacity: 0;
visibility: hidden;
}
}
.variation-image {
position: absolute;
left: 50%;
top: 50%;
max-height: 100%;
max-width: 100%;
transform: translate(-50%, -50%);
z-index: 1;
}
}
.product-gallery-preview {
&:not(.slick-initialized) {
.gallery-preview-slide {
&:not(:first-child) {
display: none;
}
}
}
.gallery-preview-item {
position: relative;
display: flex;
width: 100%;
padding-bottom: 85%;
background: $color-white;
cursor: crosshair;
> img {
position: absolute;
left: 50%;
top: 50%;
max-height: 100%;
max-width: 100%;
transform: translate(-50%, -50%);
}
.image-placeholder {
width: 130px;
}
}
.gallery-view-icon {
position: absolute;
top: 15px;
right: 15px;
height: 30px;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
color: $color-white;
background: $color-default-transparent;
background: var(--color-primary-transparent);
border-radius: $radius-full;
z-index: 1;
cursor: pointer;
transform: rotateY(180deg);
> i {
font-size: 16px;
}
&:hover {
color: $color-gray-lite;
background: $color-default;
background: var(--color-primary);
}
}
}
.product-gallery-thumbnail {
.slick-list {
margin: 0 -6px;
}
.slick-current {
.gallery-thumbnail-item {
border-color: $color-default;
border-color: var(--color-primary);
}
}
.slick-arrow {
height: 22px;
width: 22px;
background: $color-default-transparent;
background: var(--color-primary-transparent);
border-radius: $radius-full;
transition: $transition-default;
&:hover {
background: $color-default;
background: var(--color-primary);
}
&:before {
color: $color-white;
&:hover {
color: $color-white;
}
}
}
.slick-prev,
.slick-next {
&:before {
font-size: 10px;
}
}
.slick-prev {
left: 10px;
right: auto;
}
.slick-next {
right: 10px;
left: auto;
}
.gallery-thumbnail-item {
position: relative;
margin: 0 6px;
padding-bottom: 75%;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
overflow: hidden;
transition: $transition-default;
cursor: pointer;
img {
position: absolute;
left: 50%;
top: 50%;
max-height: 100%;
max-width: 100%;
transform: translate(-50%, -50%);
}
.image-placeholder {
max-height: 60%;
max-width: 60%;
}
}
}
@media screen and (max-width: 1600px) {
.product-gallery {
width: 500px;
min-width: 500px;
}
}
@media screen and (max-width: $xl) {
.product-gallery {
width: 430px;
min-width: 430px;
}
}
@media screen and (max-width: $lg) {
.product-gallery {
width: 578px;
min-width: 578px;
}
}
@media screen and (max-width: 600px) {
.product-gallery {
width: 100%;
min-width: 100%;
}
}

138
Themes/Storefront/resources/assets/public/sass/pages/product-details/_product-reviews.scss
View File

@@ -1,59 +1,59 @@
.reviews {
padding-top: 45px;
padding-top: 45px;
.pagination {
margin-top: 11px;
}
.pagination {
margin-top: 11px;
}
}
.review-form {
> h4 {
margin-bottom: 28px;
}
> 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;
.rating-input {
font-size: 26px;
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;
label {
margin-bottom: 0;
color: $color-gray-lite;
cursor: pointer;
transition: $transition-default;
&:hover,
&:focus {
color: $color-yellow;
&:hover,
&:focus {
color: $color-yellow;
~ label {
color: $color-yellow;
}
}
}
~ label {
color: $color-yellow;
}
}
}
input[type="radio"] {
display: none;
input[type="radio"] {
display: none;
&:checked {
~ label {
color: $color-yellow;
}
}
}
}
&:checked {
~ label {
color: $color-yellow;
}
}
}
}
.btn-submit {
padding: 7px 30px;
}
.btn-submit {
padding: 7px 30px;
}
}
.user-review-wrap {
margin-top: 4px;
margin-top: 4px;
&.loading {
&:after {
@@ -61,7 +61,7 @@
}
}
.empty-message {
.empty-message {
display: flex;
padding: 35px 0 40px;
justify-content: center;
@@ -82,49 +82,49 @@
stroke: var(--color-primary);
}
}
}
}
}
.user-review {
margin-bottom: 27px;
margin-bottom: 27px;
&:nth-child(4) {
margin-bottom: 0;
}
&:nth-child(4) {
margin-bottom: 0;
}
&:nth-child(n+5) {
&:nth-child(n + 5) {
display: none;
}
.reviewer-name {
font-size: 16px;
margin-bottom: 6px;
}
.reviewer-name {
font-size: 16px;
margin-bottom: 6px;
}
.product-rating {
margin-bottom: 11px;
}
.product-rating {
margin-bottom: 11px;
}
.reviewer-message {
color: $color-gray;
margin-bottom: 7px;
}
.reviewer-message {
color: $color-gray;
margin-bottom: 7px;
}
.review-date,
.review-date,
.review-approval {
font-size: 14px;
color: $color-gray-dark;
}
font-size: 14px;
color: $color-gray-dark;
}
}
@media screen and (max-width: $xl) {
.user-review-wrap {
margin: 48px 0 8px;
}
.user-review-wrap {
margin: 48px 0 8px;
}
}
@media screen and (max-width: $lg) {
.reviews {
padding-top: 35px;
}
.reviews {
padding-top: 35px;
}
}

78
Themes/Storefront/resources/assets/public/sass/pages/product-details/_product-specification.scss
View File

@@ -1,57 +1,57 @@
.specification {
padding-top: 51px;
padding-top: 51px;
.specification-inner {
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
}
.specification-inner {
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
}
.title {
padding: 15px 30px;
background: $color-white-dark;
}
.title {
padding: 15px 30px;
background: $color-white-dark;
}
}
.specification-list {
padding: 35px 30px 34px 30px;
padding: 35px 30px !important;
li {
display: flex;
margin-bottom: 18px;
li {
display: flex;
margin-bottom: 18px;
&:last-child {
margin-bottom: 0;
}
}
&:last-child {
margin-bottom: 0;
}
}
label {
font-weight: 500;
line-height: 23px;
width: 190px;
min-width: 190px;
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;
}
span {
line-height: 23px;
color: $color-gray;
}
}
@media screen and (max-width: $lg) {
.specification {
padding: 41px 0 15px;
}
.specification {
padding: 41px 0 15px;
}
}
@media screen and (max-width: $md) {
.specification-list {
li {
flex-direction: column;
}
.specification-list {
li {
flex-direction: column;
}
label {
margin-bottom: 3px;
}
}
label {
margin-bottom: 3px;
}
}
}

4
Themes/Storefront/resources/assets/public/sass/pages/product-search/_category-menu.scss
View File

@@ -23,7 +23,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: 200ms ease-in-out;
transition: 150ms ease-in-out;
&:hover {
color: $color-default;
@@ -42,7 +42,7 @@
margin-top: 4px;
cursor: pointer;
transform: rotate(0deg);
transition: 200ms ease-in-out;
transition: 150ms ease-in-out;
&.open {
color: $color-default;

24
Themes/Storefront/resources/assets/public/sass/pages/product-search/_filter-section.scss
View File

@@ -15,7 +15,7 @@
}
.filter-section {
margin-bottom: 33px;
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
@@ -76,7 +76,7 @@
.noUi-handle {
top: -6px;
right: -7px #{'/*rtl:ignore*/'};
right: -7px #{"/*rtl:ignore*/"};
height: 14px;
width: 14px;
}
@@ -95,14 +95,14 @@
.noUi-connect,
.noUi-origin {
transform-origin: 0 100% #{'/*rtl:ignore*/'};
transform-origin: 0 100% #{"/*rtl:ignore*/"};
}
.noUi-handle {
border: none;
background: $color-default-transparent-lite;
background: var(--color-primary-transparent-lite);
border-radius: 50%;
border-radius: $radius-full;
box-shadow: none;
cursor: ew-resize;
@@ -117,21 +117,23 @@
width: 8px;
background: $color-default;
background: var(--color-primary);
border-radius: 50%;
border-radius: $radius-full;
}
}
}
.filter-checkbox {
.form-check {
margin-bottom: 4px;
max-height: 175px;
.form-check {
&:last-child {
margin-bottom: 0;
label {
margin-bottom: 0;
}
}
> label {
line-height: 24px;
label {
margin-bottom: 12px;
}
}
}
@@ -139,7 +141,7 @@
@media screen and (max-width: $lg) {
.filter-section-wrap {
position: fixed;
left: -165px;
left: -300px;
top: 0;
bottom: 0;
width: 300px;

43
Themes/Storefront/resources/assets/public/sass/pages/product-search/_grid-view-product.scss
View File

@@ -1,13 +1,13 @@
.grid-view-products {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
margin: -10px -10px 0;
> .col {
.grid-view-products-item {
display: flex;
flex: 0 0 20%;
max-width: 20%;
margin-bottom: 30px;
padding: 10px;
}
.product-card {
@@ -18,7 +18,7 @@
@media screen and (max-width: 1700px) {
.grid-view-products {
> .col {
.grid-view-products-item {
flex: 0 0 25%;
max-width: 25%;
}
@@ -27,7 +27,7 @@
@media screen and (max-width: 1350px) {
.grid-view-products {
> .col {
.grid-view-products-item {
flex: 0 0 33.33333333333333%;
max-width: 33.33333333333333%;
}
@@ -35,52 +35,29 @@
}
@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;
margin: -7.5px -7.5px 0;
> .col {
.grid-view-products-item {
flex: 0 0 25%;
max-width: 25%;
margin-bottom: 16px;
padding-left: 8px;
padding-right: 8px;
padding: 7.5px;
}
}
}
@media screen and (max-width: 880px) {
.grid-view-products {
> .col {
.grid-view-products-item {
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 {
.grid-view-products-item {
flex: 0 0 50%;
max-width: 50%;
}

33
Themes/Storefront/resources/assets/public/sass/pages/product-search/_list-view-product.scss
View File

@@ -1,15 +1,14 @@
.list-view-products {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
margin: -10px -10px 0;
}
.list-product-card {
display: flex;
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
margin-bottom: 30px;
padding: 10px;
}
.list-product-card-inner {
@@ -21,8 +20,8 @@
transition: $transition-primary;
&:hover {
border-color: $color-white;
box-shadow: 2.5px 4.33px 50px 5px rgba(11, 28, 42, 0.15);
border-color: $color-white-lite;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
z-index: 1;
}
@@ -53,7 +52,7 @@
transform: translate(-50%, -50%);
transition: $transition-primary;
&.is-countdown {
&.countdown {
.countdown-section {
width: auto;
margin-right: 10px;
@@ -84,7 +83,14 @@
align-items: center;
z-index: 1;
> h6 {
&:hover {
h6 {
color: $color-default;
color: var(--color-primary);
}
}
h6 {
font-size: 16px;
font-weight: 400;
line-height: 26px;
@@ -96,6 +102,7 @@
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition: $transition-default;
}
}
@@ -152,18 +159,6 @@
.btn-wishlist {
margin-right: 25px;
}
.btn-wishlist,
.btn-compare {
&.added {
&:hover {
> i {
color: $color-default;
color: var(--color-primary);
}
}
}
}
}
}

31
Themes/Storefront/resources/assets/public/sass/pages/product-search/_search-result.scss
View File

@@ -78,7 +78,6 @@
.search-result-middle {
position: relative;
margin-bottom: -30px;
&.empty {
display: flex;
@@ -89,14 +88,9 @@
}
&.loading {
&:before {
bottom: 30px;
}
&:after {
height: 40px;
width: 40px;
top: calc(50% - 15px);
}
}
@@ -122,7 +116,7 @@
.search-result-bottom {
display: flex;
margin: 17px 0 -15px;
margin: 7px 0 -15px;
justify-content: space-between;
align-items: center;
@@ -149,7 +143,7 @@
display: flex;
align-self: stretch;
margin-top: 13px;
padding: 8px 15px;
padding: 10px 15px;
justify-content: space-between;
align-items: center;
background: $color-white-lite;
@@ -157,14 +151,17 @@
.mobile-view-filter {
display: block;
margin-right: auto;
}
}
.sorting-bar {
.m-r-20 {
margin-right: 15px;
}
.nice-select.form-control {
background-color: $color-white-lite;
border-color: $color-white-lite;
border-color: darken($color-gray-lite, 5%);
&:focus {
background-color: $color-white-lite;
@@ -194,21 +191,11 @@
}
}
@media screen and (max-width: $sm) {
.search-result-top {
.sorting-bar {
.m-r-20 {
margin-right: 0;
}
}
}
}
@media screen and (max-width: 450px) {
@media screen and (max-width: 480px) {
.search-result-top {
.content-right {
flex-direction: column;
padding-top: 16px;
padding: 15px;
.mobile-view-filter {
margin: 0 0 10px 0;

339
Themes/Storefront/resources/assets/public/sass/utils/_common.scss
View File

@@ -1,5 +1,8 @@
@import "common/_feature", "common/_product", "common/_form-wrap",
"common/_product-card", "common/_vertical-product-card";
@import "common/_feature";
@import "common/_product";
@import "common/_form-wrap";
@import "common/_product-card";
@import "common/_vertical-product-card";
.wrapper {
position: relative;
@@ -16,7 +19,7 @@
opacity: 0;
visibility: hidden;
z-index: 180;
transition: 200ms ease-in-out;
transition: 150ms ease-in-out;
&.active {
opacity: 1;
@@ -45,7 +48,7 @@
li {
font-size: 13px;
margin-right: 5px;
color: $color-gray-dark;
color: $color-gray;
&:last-child {
margin-right: 0;
@@ -54,7 +57,7 @@
label {
margin-bottom: 0;
color: $color-gray;
color: $color-gray-dark;
}
}
@@ -96,91 +99,136 @@
.btn-wishlist,
.btn-compare {
&.added {
&:hover {
> i {
color: $color-default !important;
color: var(--color-primary) !important;
}
}
> i {
color: $color-default;
color: var(--color-primary);
animation: bounceIn 1.2s both cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
}
> i {
color: $color-gray;
transition: 500ms ease-in-out;
&.animating {
animation: zoomInOut 500ms ease-in-out;
}
transition: $transition-default;
}
}
.coupon-wrap {
.form-group {
display: flex;
margin-bottom: 0;
.cart-item {
position: relative;
display: flex;
.form-input {
input {
height: 40px;
width: 250px;
.product-image {
height: 46px;
width: 46px;
min-width: 46px;
border-radius: $radius-default;
overflow: hidden;
.image-placeholder {
height: 40px;
width: 40px;
}
}
.product-info {
flex-grow: 1;
margin-left: 20px;
min-width: 0;
.product-name {
font-size: 14px;
font-weight: 400;
line-height: 18px;
max-height: 36px;
display: -webkit-box;
margin: 0 25px 3px 0;
color: $color-black;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
.error-message {
display: none;
}
.btn-apply-coupon {
margin-left: 10px;
align-self: flex-start;
}
}
}
.order-summary-list {
li {
display: flex;
justify-content: space-between;
margin-bottom: 9px;
&:last-child {
margin-bottom: 0;
}
}
label {
margin-bottom: 0;
padding-right: 20px;
}
.coupon-code {
color: $color-gray;
white-space: nowrap;
}
.btn-remove-coupon {
font-size: 14px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
&:hover {
.product-price {
font-weight: 500;
color: $color-default;
color: var(--color-primary);
}
}
.remove-cart-item {
position: absolute;
right: -8px;
.btn-remove {
font-size: 14px;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
}
}
.order-summary-total {
font-size: 18px;
font-weight: 500;
display: flex;
margin-top: 21px;
justify-content: space-between;
padding: 14px 0;
border-top: 1px solid $color-gray-lite;
.number-picker {
position: relative;
width: 75px;
display: inline-flex;
label {
margin-bottom: 0;
.input-quantity {
height: auto;
padding: 0;
text-align: center;
border: none;
}
.btn-number {
position: absolute;
font-size: 14px;
padding: 0;
top: 50%;
height: 18px;
width: 18px;
display: flex;
align-items: center;
justify-content: center;
background: $color-gray-lite;
border-radius: 3px;
transform: translateY(-50%);
&:hover:not([disabled]) {
color: $color-white;
background: $color-default;
background: var(--color-primary);
}
&[disabled] {
opacity: 0.5;
&:hover {
color: $color-black;
}
}
}
.btn-minus {
left: 0;
}
.btn-plus {
right: 0;
}
}
@@ -217,29 +265,53 @@
}
}
@media screen and (max-width: 455px) {
.coupon-wrap {
.form-group {
flex-direction: column;
.address-card-wrap {
.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;
.form-input {
input {
width: 100%;
}
.error-message {
display: block;
}
}
.btn-apply-coupon {
margin: 15px 0 0 0;
align-self: stretch;
}
&.active {
border-color: $color-default;
border-color: var(--color-primary);
}
> .error-message {
display: none;
.badge {
font-size: 11px;
position: absolute;
top: 10px;
right: 10px;
min-width: 0;
padding: 4px 7px;
color: $color-white;
background: $color-default;
background: var(--color-primary);
border-radius: 6px;
opacity: 0.8;
}
.address-card-data {
margin-bottom: 3px;
> 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;
}
}
}
}
}
@@ -252,27 +324,42 @@
}
.contact-info {
> li {
li {
display: flex;
align-items: center;
color: $color-gray;
margin-bottom: 14px;
white-space: nowrap;
clear: both;
&:last-child {
margin-bottom: 0;
}
> i {
margin-top: 3px;
i {
color: $color-default;
color: var(--color-primary);
float: left;
}
a {
margin-left: 10px;
color: $color-gray;
&:hover {
color: $color-default;
color: var(--color-primary);
}
span {
&:first-child {
margin-right: -4px;
}
}
}
> span {
line-height: 22px;
display: block;
margin-left: 24px;
display: inline-block;
margin-left: 10px;
word-break: break-all;
white-space: pre-wrap;
}
@@ -305,27 +392,35 @@
}
}
.captcha-input {
font-size: 14px;
height: 45px;
margin-left: 7px;
padding: 10px 15px;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
transition: $transition-default;
.captcha-field {
> img {
border-radius: $radius-default;
}
&:focus {
outline: 0;
border-color: $color-default;
border-color: var(--color-primary);
box-shadow: none;
> input {
font-size: 14px;
height: 45px;
margin-left: 7px;
padding: 10px 15px;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
transition: $transition-default;
&:focus {
outline: 0;
border-color: $color-default;
border-color: var(--color-primary);
box-shadow: none;
}
}
}
@media screen and (max-width: 510px) {
.captcha-input {
display: block;
margin: 10px 0 0 0;
.captcha-field {
> input {
display: block;
margin: 10px 0 0 0 !important;
}
}
}
@@ -342,3 +437,25 @@
transform: scale(1);
}
}
@keyframes bounceIn {
0% {
transform: scale(0);
}
15% {
transform: scale(1.6);
}
32% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

11
Themes/Storefront/resources/assets/public/sass/utils/_utilities.scss
View File

@@ -1,5 +1,10 @@
/* color */
.color-primary {
color: $color-default;
color: var(--color-primary);
}
.bg-blue {
background: $color-info;
}
@@ -36,3 +41,9 @@
.p-t-5 {
margin-top: 5px;
}
/* miscellaneous */
.text-line-through {
text-decoration: line-through;
}

5
Themes/Storefront/resources/assets/public/sass/utils/_variables.scss
View File

@@ -1,6 +1,6 @@
/* fonts */
$primary-font: 'Rubik', Arial, Helvetica, sans-serif;
$primary-font: "Rubik", sans-serif;
/* default theme colors */
@@ -35,6 +35,7 @@ $sm: 576px;
/* miscellaneous */
$radius-default: 2px;
$radius-default: 8px;
$radius-full: 50%;
$transition-default: 150ms ease-in-out;
$transition-primary: 200ms ease-in-out;

4
Themes/Storefront/resources/assets/public/sass/utils/common/_form-wrap.scss
View File

@@ -6,7 +6,7 @@
.form-wrap-inner {
width: 600px;
margin: auto;
padding: 0 15px;
padding: 0 5px;
> h2 {
margin-bottom: 40px;
@@ -53,7 +53,7 @@
color: $color-white;
align-items: center;
justify-content: center;
border-radius: 50%;
border-radius: $radius-full;
&:hover {
opacity: 0.85;

57
Themes/Storefront/resources/assets/public/sass/utils/common/_product-card.scss
View File

@@ -2,7 +2,7 @@
position: relative;
display: flex !important;
height: auto;
margin: 0 15px;
margin: 0 10px;
padding: 20px 20px 0;
flex-direction: column;
overflow: hidden;
@@ -11,24 +11,17 @@
transition: $transition-primary;
&:hover {
border-color: $color-white;
box-shadow: 2.5px 4.33px 50px 5px rgba(11, 28, 42, 0.15);
border-color: $color-white-lite;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
z-index: 1;
.product-card-actions {
button {
opacity: 1;
visibility: visible;
transform: scale(1);
}
}
.product-badge {
opacity: 0;
visibility: hidden;
transform: scale(0.9);
}
.product-card-countdown {
opacity: 0;
visibility: hidden;
@@ -87,7 +80,7 @@
}
.product-image {
height: 180px;
padding-bottom: 80%;
.image-placeholder {
height: 85px;
@@ -96,9 +89,10 @@
}
.product-badge {
right: 0;
left: 0;
right: auto;
z-index: 1;
transition: $transition-primary;
cursor: pointer;
}
.product-card-actions {
@@ -121,9 +115,14 @@
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transition: opacity $transition-primary, transform $transition-primary, border-color $transition-default;
transition: opacity $transition-primary,
transform $transition-primary, border-color $transition-default;
&.btn-wishlist.added {
opacity: 1;
transform: scale(1);
}
&:hover {
border-color: $color-default-transparent-lite;
@@ -132,6 +131,7 @@
> i {
font-size: 15px;
transition: $transition-primary;
}
}
@@ -147,7 +147,7 @@
transform: translate(-50%, -50%) scale(1);
transition: $transition-primary;
&.is-countdown {
&.countdown {
.countdown-section {
width: auto;
margin-right: 10px;
@@ -225,7 +225,7 @@
&:after {
position: absolute;
content: '';
content: "";
left: -20px;
top: 4px;
height: 15px;
@@ -276,17 +276,9 @@
}
}
@media screen and (max-width: 1800px) {
.product-card {
.product-image {
height: 160px;
}
}
}
@media screen and (max-width: $lg) {
.product-card {
margin: 0 8px;
margin: 0 7.5px;
padding: 15px 15px 0;
&:hover {
@@ -324,19 +316,6 @@
margin-bottom: 10px;
}
.product-image {
position: relative;
height: 80%;
padding-bottom: 80%;
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.product-card-actions,
.product-price-clone,
.btn-add-to-cart {

16
Themes/Storefront/resources/assets/public/sass/utils/common/_product.scss
View File

@@ -1,11 +1,17 @@
.product-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
> img {
position: absolute;
left: 50%;
top: 50%;
max-height: 100%;
max-width: 100%;
transform: translate(-50%, -50%);
transition: $transition-primary;
}
}
@@ -13,7 +19,7 @@
.product-badge {
position: absolute;
top: -5px;
right: 0;
left: 0;
display: flex;
flex-direction: column;
@@ -23,10 +29,10 @@
width: auto;
min-width: 0;
display: inline-block;
margin: 0 0 5px auto;
padding: 6px 9px;
text-align: right;
border-radius: 0;
margin: 0 auto 5px 0;
padding: 5px 9px;
text-align: left;
border-radius: 5px;
&:last-child {
margin-bottom: 0;

32
Themes/Storefront/resources/assets/public/sass/vendors/_drift-zoom.scss vendored Normal file
View File

@@ -0,0 +1,32 @@
.drift-bounding-box {
background: $color-default-transparent-lite;
background: var(--color-primary-transparent-lite);
z-index: 7;
}
.drift-zoom-pane {
left: 100%;
background: $color-white;
border-radius: $radius-default;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
z-index: 7;
}
.drift-zoom-pane-loader:before,
.drift-zoom-pane-loader:after {
background: $color-default;
background: var(--color-primary);
}
/*rtl:ignore*/
.rtl {
.drift-zoom-pane {
&.mobile-drift-zoom-pane {
right: auto;
}
img {
left: 0;
}
}
}

129
Themes/Storefront/resources/assets/public/sass/vendors/_slick.scss vendored Normal file
View File

@@ -0,0 +1,129 @@
.slick-list .slick-track {
float: left;
}
.slick-dotted {
&.slick-slider {
margin-bottom: 0;
}
}
.slick-prev,
.slick-next {
z-index: 1;
&.slick-disabled:before {
opacity: 0.7;
}
&:before {
font-family: "Line Awesome Free";
font-size: 14px;
font-weight: 900;
color: $color-gray-dark;
opacity: 1;
transition: $transition-default;
}
&:hover {
&:before {
color: $color-default;
color: var(--color-primary);
}
}
}
.slick-prev:before {
content: "\f104";
}
.slick-next:before {
content: "\f105";
}
.rtl {
.slick-prev:before {
content: "\f105";
}
.slick-next:before {
content: "\f104";
}
}
.slick-dots {
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: -12px;
li {
height: 8px;
width: 8px;
margin: 0 6px 12px;
transition: $transition-primary;
button {
height: 8px;
width: 8px;
padding: 0;
transition: $transition-primary;
&:before {
content: "";
font-size: 14px;
height: 8px;
width: 8px;
background: $color-default;
background: var(--color-primary);
border-radius: 15px;
transition: $transition-primary;
}
}
&.slick-active {
width: 25px;
button {
width: 25px;
&:before {
width: 25px;
opacity: 1;
}
}
}
}
}
.arrow-prev.slick-arrow,
.arrow-next.slick-arrow {
position: absolute;
font-size: 14px;
padding: 4px 0;
color: $color-gray-dark;
z-index: 1;
cursor: pointer;
transition: none;
&:hover {
font-weight: 500;
color: $color-default;
color: var(--color-primary);
}
}
.arrow-prev {
right: 69px;
}
.arrow-next {
right: -3px;
}
.slick-arrow {
&.slick-disabled {
opacity: 0.6;
}
}