From d35254f537c8ed12f9e124a1f39140198c67c470 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Tue, 11 Apr 2023 09:51:09 +0200 Subject: [PATCH] Create specific stylesheet for CartLineItemsTable component (https://github.com/woocommerce/woocommerce-blocks/pull/8967) --- .../cart-line-items-table/index.tsx | 1 + .../cart-line-items-table/style.scss | 141 ++++++++++++++++++ .../assets/js/blocks/cart/style.scss | 133 ----------------- 3 files changed, 142 insertions(+), 133 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx index c13e8a1f174..c978203d24b 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/index.tsx @@ -11,6 +11,7 @@ import type { RefObject } from 'react'; * Internal dependencies */ import CartLineItemRow from './cart-line-item-row'; +import './style.scss'; const placeholderRows = [ ...Array( 3 ) ].map( ( _x, i ) => ( diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss new file mode 100644 index 00000000000..3d92b32bf10 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss @@ -0,0 +1,141 @@ +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; + } + } +} + +.is-medium, +.is-small, +.is-mobile { + 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 { + 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; + } + } +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart/style.scss index 11a20a50ff0..7fc38b3db23 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart/style.scss @@ -14,70 +14,6 @@ } } -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 { @@ -168,80 +104,11 @@ table.wc-block-cart-items { } } } - 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 { 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; margin: 0;