Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Checkout Block Order Summary Styles (https://github.com/woocommerce/woocommerce-blocks/pull/2355) 

* Update checkout styles

* remove item prices from summary
This commit is contained in:
Mike Jolley 2020-04-30 10:51:08 +01:00 committed by GitHub
parent 2593c711ad
commit 6df5903e0f
2 changed files with 33 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/sidebar/order-summary-item.js
View File

@ -27,8 +27,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
} = cartItem;
const currency = getCurrency( prices );
const regularPrice = parseInt( prices.regular_price, 10 );
const purchasePrice = parseInt( prices.price, 10 );
const linePrice = Dinero( {
amount: parseInt( prices.raw_prices.price, 10 ),
precision: parseInt( prices.raw_prices.precision, 10 ),
@ -40,7 +38,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
return (
<div className="wc-block-order-summary-item">
<div className="wc-block-order-summary-item__image">
<ProductImage image={ images.length ? images[ 0 ] : {} } />
<div className="wc-block-order-summary-item__quantity">
<Label
label={ quantity }
@ -51,6 +48,7 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
) }
/>
</div>
<ProductImage image={ images.length ? images[ 0 ] : {} } />
</div>
<div className="wc-block-order-summary-item__description">
<div className="wc-block-order-summary-item__header">
@ -61,13 +59,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
value={ linePrice }
/>
</div>
<div className="wc-block-order-summary-item__prices">
<ProductPrice
currency={ currency }
regularValue={ regularPrice }
value={ purchasePrice }
/>
</div>
<ProductLowStockBadge lowStockRemaining={ lowStockRemaining } />
<ProductMetadata summary={ summary } variation={ variation } />
</div>

63
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
View File

@ -13,6 +13,12 @@
}
}
.wc-block-checkout__main {
fieldset.wc-block-checkout-step:first-child {
margin-top: $gap-small;
}
}
.wc-block-checkout__sidebar {
.wc-block-order-summary {
border: none;
@ -49,20 +55,32 @@
.wc-block-order-summary-item {
display: table-row;
> div {
border-bottom: 1px solid $core-grey-light-600;
}
&:last-child {
> div {
border-bottom: none;
}
}
}
.wc-block-order-summary-item__image,
.wc-block-order-summary-item__description {
border-bottom: 1px solid $core-grey-light-600;
display: table-cell;
padding-top: $gap;
vertical-align: top;
}
.wc-block-order-summary-item__image {
width: 72px;
width: #{$gap-large * 2};
padding-top: $gap;
padding-bottom: $gap;
position: relative;
> img {
width: #{$gap-large * 2};
max-width: #{$gap-large * 2};
}
}
.wc-block-order-summary-item__quantity {
@ -78,29 +96,32 @@
min-height: 22px;
position: absolute;
justify-content: center;
right: -11px;
top: #{$gap - 11px};
min-width: 22px;
right: -10px;
margin: -10px 0 0 0;
}
.wc-block-order-summary-item__description {
padding-left: $gap;
padding-left: $gap-large;
padding-top: $gap;
line-height: $gap-large;
.wc-block-product-metadata {
line-height: $gap;
margin-top: #{ ( $gap-large - $gap ) / 2 };
}
}
.wc-block-order-summary-item__header {
display: flex;
flex-wrap: wrap;
}
.wc-block-product-name {
flex-grow: 1;
margin-right: 0.5em;
// Required by IE11.
flex-basis: 0;
}
.wc-block-order-summary-item__prices {
font-size: 0.875em;
}
}
.wc-block-component-express-checkout-continue-rule {
@ -336,25 +357,5 @@
.wc-block-order-summary__row {
padding: 0 $gap;
}
.wc-block-order-summary-item:last-child {
.wc-block-order-summary-item__image,
.wc-block-order-summary-item__description {
border-bottom: none;
}
}
.wc-block-order-summary-item__image {
width: 48px;
// Required by IE11.
> img {
width: 48px;
}
}
.wc-block-order-summary-item__description {
padding-left: $gap-small;
}
}
}