woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart/style.scss

345 lines
6.8 KiB
SCSS
Raw Normal View History

.wc-block-cart {
.wc-block-components-shipping-calculator {
white-space: nowrap;
}
.wc-block-components-address-form {
.wc-block-components-text-input,
.wc-block-components-country-input,
.wc-block-components-state-input {
&:first-of-type {
margin-top: 0;
}
}
}
}
table.wc-block-cart-items,
table.wc-block-cart-items th,
table.wc-block-cart-items td {
// Override Storefront theme gray table background.
background: none !important;
// Remove borders on default themes.
border: 0;
margin: 0 0 2em;
}
.editor-styles-wrapper table.wc-block-cart-items,
table.wc-block-cart-items {
width: 100%;
.wc-block-cart-items__header {
@include font-size( smaller );
text-transform: uppercase;
.wc-block-cart-items__header-image {
width: 100px;
}
.wc-block-cart-items__header-product {
visibility: hidden;
}
.wc-block-cart-items__header-total {
width: 100px;
text-align: right;
}
}
.wc-block-cart-items__row {
.wc-block-cart-item__image img {
width: 100%;
margin: 0;
}
.wc-block-cart-item__quantity {
.wc-block-cart-item__remove-link {
@include link-button;
@include font-size( smaller );
text-transform: none;
white-space: nowrap;
}
}
.wc-block-components-product-name {
display: block;
max-width: max-content;
}
.wc-block-cart-item__total {
@include font-size( regular );
text-align: right;
line-height: inherit;
}
.wc-block-components-product-metadata {
margin-bottom: 0.75em;
}
&.is-disabled {
opacity: 0.5;
pointer-events: none;
transition: opacity 200ms ease;
}
}
}
.wc-block-cart {
.wc-block-components-totals-taxes,
.wc-block-components-totals-footer-item {
margin: 0;
}
}
// Loading placeholder state.
.wc-block-cart--is-loading,
.wc-block-mini-cart__drawer.is-loading {
th span,
h2 span {
@include placeholder();
@include force-content();
min-width: 84px;
display: inline-block;
}
h2 span {
min-width: 33%;
}
.wc-block-components-product-price,
.wc-block-components-product-metadata,
.wc-block-components-quantity-selector {
@include placeholder();
}
.wc-block-components-product-name {
@include placeholder();
@include force-content();
min-width: 84px;
display: inline-block;
}
.wc-block-components-product-metadata {
margin-top: 0.25em;
min-width: 8em;
}
.wc-block-cart-item__remove-link {
visibility: hidden;
}
.wc-block-cart-item__image > a {
@include placeholder();
display: block;
}
.wc-block-components-product-price {
@include force-content();
max-width: 3em;
display: block;
margin-top: 0.25em;
}
.wc-block-cart__sidebar .components-card {
@include placeholder();
@include force-content();
min-height: 460px;
}
}
.wc-block-components-sidebar-layout.wc-block-cart--skeleton {
display: none;
}
.is-loading + .wc-block-components-sidebar-layout.wc-block-cart--skeleton {
display: flex;
}
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
.wc-block-components-sale-badge {
margin-top: $gap-smallest;
}
}
.is-small,
.is-mobile {
.wc-block-cart-item__total {
.wc-block-components-sale-badge {
display: none;
}
}
}
.is-medium,
.is-small,
.is-mobile {
&.wc-block-cart {
.wc-block-components-sidebar {
.wc-block-cart__totals-title {
display: none;
}
}
}
table.wc-block-cart-items {
td {
padding: 0;
}
.wc-block-cart-items__header {
display: none;
}
.wc-block-cart-item__remove-link {
display: none;
}
&:not(.wc-block-mini-cart-items) {
.wc-block-cart-items__row {
@include with-translucent-border( 0 0 1px );
}
}
.wc-block-cart-items__row {
display: grid;
grid-template-columns: 80px 132px;
padding: $gap 0;
.wc-block-cart-item__image {
grid-column-start: 1;
grid-row-start: 1;
padding-right: $gap;
}
.wc-block-cart-item__product {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
justify-self: stretch;
padding: 0 $gap $gap 0;
}
.wc-block-cart-item__quantity {
grid-column-start: 1;
grid-row-start: 2;
vertical-align: bottom;
padding-right: $gap;
align-self: end;
padding-top: $gap;
}
.wc-block-cart-item__total {
grid-row-start: 1;
.wc-block-components-formatted-money-amount {
display: inline-block;
}
}
}
}
}
.is-large.wc-block-cart {
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
margin-bottom: 3em;
.wc-block-cart-items {
@include with-translucent-border( 0 0 1px );
th {
padding: 0.25rem $gap 0.25rem 0;
white-space: nowrap;
}
td {
@include with-translucent-border( 1px 0 0 );
padding: $gap 0 $gap $gap;
vertical-align: top;
}
th:last-child {
padding-right: 0;
}
td:last-child {
padding-right: $gap;
}
}
.wc-block-components-radio-control__input {
left: 0;
}
.wc-block-cart__totals-title {
@include text-heading();
@include font-size( smaller );
display: block;
font-weight: 600;
padding: 0.25rem 0;
text-align: right;
text-transform: uppercase;
}
.wc-block-components-sidebar {
.wc-block-components-shipping-calculator,
.wc-block-components-shipping-rates-control__package:not(.wc-block-components-panel) {
padding-left: $gap;
padding-right: $gap;
}
}
.wc-block-cart__payment-options {
padding: $gap 0 0;
WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065) * Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 13:45:18 +00:00
&:empty {
padding: 0;
}
}
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
}
.wp-block-woocommerce-cart.is-loading {
.wp-block-woocommerce-empty-cart-block {
display: none;
}
.wp-block-woocommerce-filled-cart-block {
display: flex;
flex-wrap: wrap;
margin: 0 auto $gap;
position: relative;
}
.wp-block-woocommerce-cart-items-block {
box-sizing: border-box;
margin: 0;
padding-right: math.percentage(math.div($gap-largest, 1060px)); // ~1060px is the default width of the content area in Storefront.
width: 65%;
min-height: 10em;
}
.wp-block-woocommerce-cart-line-items-block {
min-height: 15em;
display: block;
@include placeholder();
}
.wp-block-woocommerce-cart-totals-block {
box-sizing: border-box;
margin: 0;
padding-left: math.percentage(math.div($gap-large, 1060px));
width: 35%;
min-height: 12em;
}
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart-express-payment-block,
.wp-block-woocommerce-proceed-to-checkout-block,
.wp-block-woocommerce-cart-accepted-payment-methods-block {
min-height: 3em;
display: block;
@include placeholder();
margin: 0 0 1em 0;
}
.wp-block-woocommerce-cart-order-summary-block {
height: 20em;
}
}
// Skeleton is shown before mobile classes are appended.
@media only screen and ( max-width: 700px ) {
.wp-block-woocommerce-cart.is-loading {
padding-top: $gap;
.wp-block-woocommerce-filled-cart-block {
flex-direction: column;
margin: 0 auto $gap;
}
.wp-block-woocommerce-cart-items-block {
padding: 0;
width: 100%;
}
.wp-block-woocommerce-cart-totals-block {
padding: 0;
width: 100%;
}
}
}