2020-01-20 16:43:22 +00:00
|
|
|
|
.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
|
|
|
|
display: flex;
|
2020-01-20 16:43:22 +00:00
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
margin: 0 (-$gap) $gap;
|
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
|
|
|
|
|
2020-01-20 16:43:22 +00:00
|
|
|
|
.wc-block-cart__main {
|
|
|
|
|
flex: 1 0 65%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0 $gap;
|
|
|
|
|
min-width: 500px;
|
2020-01-10 14:37:27 +00:00
|
|
|
|
}
|
2020-01-20 16:43:22 +00:00
|
|
|
|
.wc-block-cart__sidebar {
|
|
|
|
|
flex: 1 1 35%;
|
|
|
|
|
margin: 0;
|
2020-02-14 03:43:13 +00:00
|
|
|
|
max-width: 35%;
|
2020-01-20 16:43:22 +00:00
|
|
|
|
padding: 0 $gap;
|
2020-01-10 14:37:27 +00:00
|
|
|
|
}
|
2020-01-20 16:43:22 +00:00
|
|
|
|
.wc-block-cart__item-count {
|
|
|
|
|
float: right;
|
2020-01-10 14:37:27 +00:00
|
|
|
|
}
|
2020-02-17 11:12:15 +00:00
|
|
|
|
.wc-block-cart__change-address {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart__change-address-button {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
color: inherit;
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-weight: inherit;
|
|
|
|
|
display: inline;
|
|
|
|
|
font-weight: inherit;
|
|
|
|
|
letter-spacing: inherit;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus,
|
|
|
|
|
&:active {
|
|
|
|
|
background: transparent;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-01-20 16:43:22 +00:00
|
|
|
|
// Added extra class and label for specificity.
|
|
|
|
|
fieldset.wc-block-cart__shipping-options-fieldset {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: 0;
|
2020-01-10 14:37:27 +00:00
|
|
|
|
}
|
2020-01-20 16:43:22 +00:00
|
|
|
|
.wc-block-cart__shipping-options {
|
2020-02-24 13:30:09 +00:00
|
|
|
|
.wc-block-radio-control__label,
|
|
|
|
|
.wc-block-radio-control__description,
|
|
|
|
|
.wc-block-radio-control__secondary-label,
|
|
|
|
|
.wc-block-radio-control__secondary-description {
|
2020-01-20 16:43:22 +00:00
|
|
|
|
flex-basis: 100%;
|
2020-02-24 13:30:09 +00:00
|
|
|
|
text-align: left;
|
2020-01-20 16:43:22 +00:00
|
|
|
|
}
|
2020-01-14 20:52:42 +00:00
|
|
|
|
|
2020-01-20 16:43:22 +00:00
|
|
|
|
.wc-block-radio-control__option {
|
|
|
|
|
padding-left: $gap-large;
|
|
|
|
|
}
|
2020-01-17 13:46:56 +00:00
|
|
|
|
|
2020-01-20 16:43:22 +00:00
|
|
|
|
.wc-block-radio-control__input {
|
|
|
|
|
left: 0;
|
2020-02-24 13:30:09 +00:00
|
|
|
|
margin: 0;
|
2020-01-20 16:43:22 +00:00
|
|
|
|
}
|
2020-01-14 20:52:42 +00:00
|
|
|
|
}
|
2020-01-10 14:37:27 +00:00
|
|
|
|
}
|
|
|
|
|
|
2020-01-20 16:43:22 +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;
|
|
|
|
|
}
|
2020-01-10 14:37:27 +00:00
|
|
|
|
|
2020-01-20 16:43:22 +00:00
|
|
|
|
table.wc-block-cart-items {
|
|
|
|
|
table-layout: fixed;
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-bottom: 1px solid $core-grey-light-600;
|
2019-12-12 19:46:56 +00:00
|
|
|
|
|
2020-01-20 16:43:22 +00:00
|
|
|
|
th {
|
|
|
|
|
padding: 0.5rem $gap 0.5rem 0;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
border-collapse: collapse;
|
2019-12-12 19:46:56 +00:00
|
|
|
|
}
|
2020-01-20 16:43:22 +00:00
|
|
|
|
td {
|
|
|
|
|
border-top: 1px solid $core-grey-light-600;
|
|
|
|
|
padding: $gap $gap $gap 0;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
border-collapse: collapse;
|
2019-12-12 19:46:56 +00:00
|
|
|
|
}
|
2020-01-20 16:43:22 +00:00
|
|
|
|
th:last-child,
|
|
|
|
|
td:last-child {
|
|
|
|
|
padding-right: 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
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-items__header {
|
2020-01-20 16:43:22 +00:00
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
.wc-block-cart-items__header-image {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-items__header-product {
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
min-width: 300px;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-items__header-quantity {
|
|
|
|
|
width: 116px;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-items__header-total {
|
|
|
|
|
width: 100px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
2020-01-17 13:46:56 +00:00
|
|
|
|
}
|
2020-01-20 16:43:22 +00:00
|
|
|
|
.wc-block-cart-items__row {
|
|
|
|
|
.wc-block-cart-item__image img {
|
|
|
|
|
width: 100%;
|
2020-03-05 14:15:28 +00:00
|
|
|
|
margin: 0;
|
2020-01-20 16:43:22 +00:00
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__product {
|
|
|
|
|
.wc-block-cart-item__product-name {
|
|
|
|
|
color: $core-grey-dark-600;
|
|
|
|
|
font-size: 16px;
|
2020-03-05 12:56:57 +00:00
|
|
|
|
display: block;
|
2020-01-20 16:43:22 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wc-block-cart-item__low-stock-badge {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
|
|
background-color: $white;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
border: 1px solid $black;
|
|
|
|
|
color: $black;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: 0 1em;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wc-block-cart-item__product-metadata {
|
|
|
|
|
color: $core-grey-dark-400;
|
|
|
|
|
font-size: 12px;
|
2020-02-26 15:49:07 +00:00
|
|
|
|
margin-top: 0.25em;
|
2020-01-20 16:43:22 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__quantity {
|
|
|
|
|
.wc-block-cart-item__remove-link {
|
|
|
|
|
@include link-button;
|
|
|
|
|
|
|
|
|
|
color: $core-grey-dark-400;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
line-height: 12px;
|
|
|
|
|
margin-top: 0.5em;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
// Temporary - this is not yet a link or "link button".
|
|
|
|
|
// May not be needed when remove is hooked up to API properly.
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__remove-icon {
|
|
|
|
|
@include link-button;
|
|
|
|
|
|
|
|
|
|
color: $core-grey-dark-400;
|
|
|
|
|
fill: currentColor;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: $gap;
|
|
|
|
|
right: 0;
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__total {
|
|
|
|
|
text-align: right;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
line-height: 19px;
|
|
|
|
|
|
2020-02-26 15:49:07 +00:00
|
|
|
|
.wc-block-formatted-money-amount {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wc-block-cart-item__regular-price {
|
2020-01-20 16:43:22 +00:00
|
|
|
|
color: $core-grey-dark-400;
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-26 15:49:07 +00:00
|
|
|
|
.wc-block-cart-item__price {
|
2020-01-20 16:43:22 +00:00
|
|
|
|
color: $black;
|
|
|
|
|
margin-left: 0.5em;
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-25 12:17:13 +00:00
|
|
|
|
.wc-block-cart-item__sale-badge {
|
2020-01-20 16:43:22 +00:00
|
|
|
|
background-color: $core-grey-dark-600;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
color: $white;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: 0 1em;
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
}
|
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
|
|
|
|
}
|
2020-01-20 16:43:22 +00:00
|
|
|
|
}
|
2020-01-14 20:52:42 +00:00
|
|
|
|
|
2020-02-26 15:49:07 +00:00
|
|
|
|
// Loading placeholder state.
|
|
|
|
|
.wc-block-cart--is-loading {
|
2020-03-05 14:15:28 +00:00
|
|
|
|
th span,
|
|
|
|
|
h2 span {
|
|
|
|
|
@include placeholder();
|
|
|
|
|
@include force-content();
|
|
|
|
|
min-width: 84px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
h2 span {
|
|
|
|
|
min-width: 33%;
|
|
|
|
|
}
|
2020-02-26 15:49:07 +00:00
|
|
|
|
.wc-block-cart-items {
|
|
|
|
|
.wc-block-cart-items__row {
|
|
|
|
|
.wc-block-cart-item__product-name,
|
|
|
|
|
.wc-block-cart-item__price,
|
|
|
|
|
.wc-block-cart-item__product-metadata,
|
2020-03-05 14:15:28 +00:00
|
|
|
|
.wc-block-cart-item__image > *,
|
2020-02-26 15:49:07 +00:00
|
|
|
|
.wc-block-quantity-selector {
|
|
|
|
|
@include placeholder();
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__product-name {
|
2020-03-05 14:15:28 +00:00
|
|
|
|
@include placeholder();
|
2020-02-26 15:49:07 +00:00
|
|
|
|
@include force-content();
|
2020-03-05 14:15:28 +00:00
|
|
|
|
min-width: 84px;
|
|
|
|
|
display: inline-block;
|
2020-02-26 15:49:07 +00:00
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__product-metadata {
|
2020-03-05 14:15:28 +00:00
|
|
|
|
margin-top: 0.25em;
|
|
|
|
|
min-width: 8em;
|
2020-02-26 15:49:07 +00:00
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__remove-link,
|
|
|
|
|
.wc-block-cart-item__remove-icon {
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__image a {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
2020-03-05 14:15:28 +00:00
|
|
|
|
.wc-block-cart-item__total {
|
|
|
|
|
> span,
|
|
|
|
|
> div {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__price {
|
|
|
|
|
@include force-content();
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
2020-02-26 15:49:07 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart__sidebar .components-card {
|
|
|
|
|
@include placeholder();
|
2020-03-05 14:15:28 +00:00
|
|
|
|
@include force-content();
|
|
|
|
|
min-height: 460px;
|
2020-02-26 15:49:07 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-05 14:15:28 +00:00
|
|
|
|
.wc-block-cart--skeleton {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.is-loading + .wc-block-cart--skeleton {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
2020-02-26 15:49:07 +00:00
|
|
|
|
|
2020-01-20 16:43:22 +00:00
|
|
|
|
// Mobile styles.
|
|
|
|
|
@include breakpoint( "<782px" ) {
|
|
|
|
|
.wc-block-cart {
|
2020-01-14 20:52:42 +00:00
|
|
|
|
display: block;
|
2020-01-20 16:43:22 +00:00
|
|
|
|
margin: 0 0 $gap;
|
|
|
|
|
.wc-block-cart__main {
|
|
|
|
|
padding: 0;
|
|
|
|
|
flex: none;
|
2020-03-05 13:05:42 +00:00
|
|
|
|
min-width: 200px;
|
2020-01-20 16:43:22 +00:00
|
|
|
|
}
|
|
|
|
|
.wc-block-cart__sidebar {
|
|
|
|
|
padding: 0;
|
|
|
|
|
flex: none;
|
|
|
|
|
}
|
2020-01-14 20:52:42 +00:00
|
|
|
|
}
|
2020-01-20 16:43:22 +00:00
|
|
|
|
table.wc-block-cart-items {
|
|
|
|
|
td {
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-items__header {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__remove-link {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-items__row {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 80px 132px;
|
|
|
|
|
border-top: 1px solid $core-grey-light-600;
|
|
|
|
|
padding: $gap 0;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.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-bottom: $gap;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__quantity {
|
|
|
|
|
grid-column-start: 2;
|
|
|
|
|
grid-row-start: 2;
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
padding-right: $gap;
|
|
|
|
|
|
|
|
|
|
.wc-block-cart-item__remove-link {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__remove-icon {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wc-block-cart-item__total {
|
|
|
|
|
grid-column-start: 3;
|
|
|
|
|
grid-row-start: 2;
|
|
|
|
|
align-self: center;
|
|
|
|
|
|
2020-03-05 13:05:42 +00:00
|
|
|
|
.wc-block-formatted-money-amount {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-25 12:17:13 +00:00
|
|
|
|
.wc-block-cart-item__sale-badge {
|
2020-01-20 16:43:22 +00:00
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-01-14 20:52:42 +00:00
|
|
|
|
}
|
2019-12-12 19:46:56 +00:00
|
|
|
|
}
|
2020-02-26 17:09:18 +00:00
|
|
|
|
.wc-block-cart-coupon-list {
|
|
|
|
|
list-style: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|