mirror of
https://github.com/frappe/erpnext.git
synced 2026-05-26 08:24:47 +00:00
chore: Shopping Cart styles and cleanup shallow
- Added remove button to cart item rows - Freeze on change in Shopping Cart (UX) - Fixed cart items and taxes/totals alignment issues - Made Cart responsive - Added free item indicator - Fixed item group nested routing issue - Sales Order is populated with right source warehouse
This commit is contained in:
@@ -184,6 +184,12 @@ body.product-page {
|
||||
}
|
||||
}
|
||||
|
||||
.list-image {
|
||||
overflow: hidden;
|
||||
max-height: 200px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.product-container {
|
||||
@include card($padding: var(--padding-md));
|
||||
min-height: 70vh;
|
||||
@@ -413,7 +419,10 @@ body.product-page {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.total-discount {
|
||||
font-size: var(--text-base);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
#page-cart {
|
||||
.shopping-cart-header {
|
||||
@@ -434,6 +443,10 @@ body.product-page {
|
||||
}
|
||||
|
||||
.cart-table {
|
||||
tr {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
th, tr, td {
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
@@ -468,6 +481,16 @@ body.product-page {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sm-item-subtotal {
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
display: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item-rate {
|
||||
font-size: var(--text-md);
|
||||
color: var(--text-muted);
|
||||
@@ -481,10 +504,44 @@ body.product-page {
|
||||
.cart-tax-items {
|
||||
.item-grand-total {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.column-sm-view {
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item-column {
|
||||
width: 50%;
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-cart-item {
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--gray-100);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: var(--gray-200);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.remove-cart-item-logo {
|
||||
margin-bottom: 6px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.totals {
|
||||
padding-right: 4rem;
|
||||
@include media-breakpoint-between(xs, md) {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-addresses {
|
||||
@@ -495,12 +552,16 @@ body.product-page {
|
||||
|
||||
.number-spinner {
|
||||
width: 75%;
|
||||
min-width: 105px;
|
||||
.cart-btn {
|
||||
border: none;
|
||||
background: var(--gray-100);
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: none;
|
||||
width: 24px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -512,7 +573,7 @@ body.product-page {
|
||||
|
||||
.place-order-container {
|
||||
.btn-place-order {
|
||||
width: 62%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -652,12 +713,12 @@ body.product-page {
|
||||
}
|
||||
|
||||
.not-added {
|
||||
color: var(--blue-500);
|
||||
background-color: white;
|
||||
color: var(--primary-color);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--blue-500);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--blue-500);
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@@ -795,3 +856,12 @@ body.product-page {
|
||||
.placeholder {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background-color: var(--gray-100);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user