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

260 lines
5.2 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;
}
}
}
Add Cart totals to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1411) * Add Cart totals to Cart block * Accessibility improvements * Load vendors styles separately * Use same shipping placeholders for cart and checkout * Refactor how we import @wordpress/components styles so only panel styles are imported * Remove style-loader from vendors styles build process * Add htmlFor attribute to TotalsCouponCodeInput * Update totalItems shape to match API * Fix wrong total items shape using numbers instead of strings * Rename wc-blocks classes to wc-block * Remove unnecessary parseInt() * Add radix to parseInt() * Rename totalRows to totalRowsConfig * Move placeholder content out of the component * Use Card component for cart's sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1423) * Use Card component for cart's sidebar * Split RadioControl component * No need to use Label in RadioControlOption * Remove no longer valid @todo comment * Use 'checked' prop instead of 'selected' in RadioControlOption * Rename wc-blocks classes to wc-block * Rename wc-blocks classes to wc-block (II) * Make sure radio control ids are unique using withComponentId * Load PanelBody and PanelRow from last version of @wordpress/components * Create vendors-frontend.js file * Load wordpress-component instead of @wordpress/components from <Button> component * Only load 'withRestApiHydration' HOC * Make vendors-frontend a dependency of cart-frontend script * Revert "Only load 'withRestApiHydration' HOC" This reverts commit 9f9b9759a98047b26e7d8f04189ffe78c1d5bb06. * Fix fieldset background
2020-01-10 14:37:27 +00:00
}
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;
}
Add Cart totals to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1411) * Add Cart totals to Cart block * Accessibility improvements * Load vendors styles separately * Use same shipping placeholders for cart and checkout * Refactor how we import @wordpress/components styles so only panel styles are imported * Remove style-loader from vendors styles build process * Add htmlFor attribute to TotalsCouponCodeInput * Update totalItems shape to match API * Fix wrong total items shape using numbers instead of strings * Rename wc-blocks classes to wc-block * Remove unnecessary parseInt() * Add radix to parseInt() * Rename totalRows to totalRowsConfig * Move placeholder content out of the component * Use Card component for cart's sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1423) * Use Card component for cart's sidebar * Split RadioControl component * No need to use Label in RadioControlOption * Remove no longer valid @todo comment * Use 'checked' prop instead of 'selected' in RadioControlOption * Rename wc-blocks classes to wc-block * Rename wc-blocks classes to wc-block (II) * Make sure radio control ids are unique using withComponentId * Load PanelBody and PanelRow from last version of @wordpress/components * Create vendors-frontend.js file * Load wordpress-component instead of @wordpress/components from <Button> component * Only load 'withRestApiHydration' HOC * Make vendors-frontend a dependency of cart-frontend script * Revert "Only load 'withRestApiHydration' HOC" This reverts commit 9f9b9759a98047b26e7d8f04189ffe78c1d5bb06. * Fix fieldset background
2020-01-10 14:37:27 +00:00
.editor-styles-wrapper table.wc-block-cart-items,
table.wc-block-cart-items {
width: 100%;
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-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: 1.25;
}
Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) * Create new vars to differentiate between single and multiple item price This is because we need to display the subtotal of the item AND the total (subtotal * quantity) * Add subtotal and move quantity picker As per the new designs, the quantity picker should be moved below the product metadata, and the product subtotals should appear below the product name. * Move line item total to top of grid on mobile/medium/small * Remove CSS for trash icon that is no longer used. * Remove link style colour override from product name and make total bold * Remove quantity column from CartLineItem This is because the quantity picker is now displayed below the product metadata and name. * Fix margins around quantity picker and its width * Always disable link to product in OrderSummaryItem * Add single price below product name in OrderSummaryItem * Add styles for new OrderItemSummary design * Move total into its own "column" This is to stop product description text flowing under the total and making it look untidy. * Add styles to cater for total price being its own column * Convert precision after multiplication instead of before * Remove unnecessary div from OrderSummaryItem * Remove line height from product names on order summary * Add more margin to the bottom of the product metadata div * Delete trash icon * Only remove margin from the bottom of last product-details * Move quantity input to below product name in cart skeleton * Add placeholder for individual price to Cart skeleton
2021-01-27 11:34:59 +00:00
.wc-block-components-product-metadata {
margin-bottom: 0.75em;
}
&.is-disabled {
opacity: 0.5;
pointer-events: none;
transition: opacity 200ms ease;
}
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-cart .wc-block-components-shipping-rates-control__package {
@include with-translucent-border(1px 0 0);
}
// Loading placeholder state.
.wc-block-cart--is-loading {
th span,
h2 span {
@include placeholder();
@include force-content();
min-width: 84px;
display: inline-block;
}
h2 span {
min-width: 33%;
}
.wc-block-cart-items {
.wc-block-cart-items__row {
.wc-block-cart-item__price,
Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) * Create new vars to differentiate between single and multiple item price This is because we need to display the subtotal of the item AND the total (subtotal * quantity) * Add subtotal and move quantity picker As per the new designs, the quantity picker should be moved below the product metadata, and the product subtotals should appear below the product name. * Move line item total to top of grid on mobile/medium/small * Remove CSS for trash icon that is no longer used. * Remove link style colour override from product name and make total bold * Remove quantity column from CartLineItem This is because the quantity picker is now displayed below the product metadata and name. * Fix margins around quantity picker and its width * Always disable link to product in OrderSummaryItem * Add single price below product name in OrderSummaryItem * Add styles for new OrderItemSummary design * Move total into its own "column" This is to stop product description text flowing under the total and making it look untidy. * Add styles to cater for total price being its own column * Convert precision after multiplication instead of before * Remove unnecessary div from OrderSummaryItem * Remove line height from product names on order summary * Add more margin to the bottom of the product metadata div * Delete trash icon * Only remove margin from the bottom of last product-details * Move quantity input to below product name in cart skeleton * Add placeholder for individual price to Cart skeleton
2021-01-27 11:34:59 +00:00
.wc-block-cart-item__individual-price,
.wc-block-cart-item__product-metadata,
.wc-block-cart-item__image > *,
.wc-block-components-quantity-selector {
@include placeholder();
}
.wc-block-cart-item__product-name {
@include placeholder();
@include force-content();
min-width: 84px;
display: inline-block;
}
.wc-block-cart-item__product-metadata {
margin-top: 0.25em;
min-width: 8em;
}
Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) * Create new vars to differentiate between single and multiple item price This is because we need to display the subtotal of the item AND the total (subtotal * quantity) * Add subtotal and move quantity picker As per the new designs, the quantity picker should be moved below the product metadata, and the product subtotals should appear below the product name. * Move line item total to top of grid on mobile/medium/small * Remove CSS for trash icon that is no longer used. * Remove link style colour override from product name and make total bold * Remove quantity column from CartLineItem This is because the quantity picker is now displayed below the product metadata and name. * Fix margins around quantity picker and its width * Always disable link to product in OrderSummaryItem * Add single price below product name in OrderSummaryItem * Add styles for new OrderItemSummary design * Move total into its own "column" This is to stop product description text flowing under the total and making it look untidy. * Add styles to cater for total price being its own column * Convert precision after multiplication instead of before * Remove unnecessary div from OrderSummaryItem * Remove line height from product names on order summary * Add more margin to the bottom of the product metadata div * Delete trash icon * Only remove margin from the bottom of last product-details * Move quantity input to below product name in cart skeleton * Add placeholder for individual price to Cart skeleton
2021-01-27 11:34:59 +00:00
.wc-block-cart-item__remove-link {
visibility: hidden;
}
.wc-block-cart-item__image a {
display: block;
}
Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) * Create new vars to differentiate between single and multiple item price This is because we need to display the subtotal of the item AND the total (subtotal * quantity) * Add subtotal and move quantity picker As per the new designs, the quantity picker should be moved below the product metadata, and the product subtotals should appear below the product name. * Move line item total to top of grid on mobile/medium/small * Remove CSS for trash icon that is no longer used. * Remove link style colour override from product name and make total bold * Remove quantity column from CartLineItem This is because the quantity picker is now displayed below the product metadata and name. * Fix margins around quantity picker and its width * Always disable link to product in OrderSummaryItem * Add single price below product name in OrderSummaryItem * Add styles for new OrderItemSummary design * Move total into its own "column" This is to stop product description text flowing under the total and making it look untidy. * Add styles to cater for total price being its own column * Convert precision after multiplication instead of before * Remove unnecessary div from OrderSummaryItem * Remove line height from product names on order summary * Add more margin to the bottom of the product metadata div * Delete trash icon * Only remove margin from the bottom of last product-details * Move quantity input to below product name in cart skeleton * Add placeholder for individual price to Cart skeleton
2021-01-27 11:34:59 +00:00
.wc-block-cart-item__individual-price {
@include force-content();
max-width: 3em;
display: block;
margin-top: 0.25em;
}
.wc-block-cart-item__total {
> span,
> div {
display: none;
}
.wc-block-cart-item__price {
@include force-content();
display: block;
}
}
}
}
.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;
}
.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;
}
.wc-block-cart-items__row {
@include with-translucent-border(0 0 1px);
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 {
Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) * Create new vars to differentiate between single and multiple item price This is because we need to display the subtotal of the item AND the total (subtotal * quantity) * Add subtotal and move quantity picker As per the new designs, the quantity picker should be moved below the product metadata, and the product subtotals should appear below the product name. * Move line item total to top of grid on mobile/medium/small * Remove CSS for trash icon that is no longer used. * Remove link style colour override from product name and make total bold * Remove quantity column from CartLineItem This is because the quantity picker is now displayed below the product metadata and name. * Fix margins around quantity picker and its width * Always disable link to product in OrderSummaryItem * Add single price below product name in OrderSummaryItem * Add styles for new OrderItemSummary design * Move total into its own "column" This is to stop product description text flowing under the total and making it look untidy. * Add styles to cater for total price being its own column * Convert precision after multiplication instead of before * Remove unnecessary div from OrderSummaryItem * Remove line height from product names on order summary * Add more margin to the bottom of the product metadata div * Delete trash icon * Only remove margin from the bottom of last product-details * Move quantity input to below product name in cart skeleton * Add placeholder for individual price to Cart skeleton
2021-01-27 11:34:59 +00:00
grid-row-start: 1;
.wc-block-components-formatted-money-amount {
display: inline-block;
}
.wc-block-components-sale-badge {
display: none;
}
}
}
}
}
.is-large.wc-block-cart {
.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 $gap $gap 0;
vertical-align: top;
}
th:last-child,
td:last-child {
padding-right: 0;
}
}
.wc-block-components-radio-control__input {
left: 0;
}
.wc-block-cart__totals-title {
@include with-translucent-border(0 0 1px);
@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-blocks-components-panel) {
padding-left: $gap;
padding-right: $gap;
}
}
.wc-block-cart__payment-options {
padding: $gap;
}
}