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

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;