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

Fix styling issues introduced in woocommerce/woocommerce-blocks#2597 and woocommerce/woocommerce-blocks#2619 (https://github.com/woocommerce/woocommerce-blocks/pull/2652) 

* Move order summary styles to component style.scss

* Fix wrong class name in Order summary

* Move express payment methods a little bit higher

* Fix shipping options panel misaligned in the Cart sidebar

* Add right padding to panel button so text doesn't overlap the arrow

* Fix wrong class name in Order summary (II)
This commit is contained in:
Albert Juhé Lluveras 2020-06-08 11:28:58 +02:00 committed by GitHub
parent 4dfd5bd687
commit 40426cbf93
7 changed files with 89 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/index.js
View File

@ -10,6 +10,7 @@ import Panel from '@woocommerce/base-components/panel';
* Internal dependencies
*/
import OrderSummaryItem from './order-summary-item.js';
import './style.scss';
const OrderSummary = ( { cartItems = [] } ) => {
const { isLarge, hasContainerWidth } = useContainerWidthContext();
@ -29,7 +30,7 @@ const OrderSummary = ( { cartItems = [] } ) => {
}
titleTag="h2"
>
<div className="wc-block-order-components-summary__content">
<div className="wc-block-components-order-summary__content">
{ cartItems.map( ( cartItem ) => {
return (
<OrderSummaryItem

83
plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss Normal file
View File

@ -0,0 +1,83 @@
.wc-block-components-order-summary {
border: 0;
}
.wc-block-components-order-summary__content {
display: table;
width: 100%;
}
.wc-block-components-order-summary-item {
display: table-row;
width: 100%;
> div {
border-bottom: 1px solid $core-grey-light-600;
}
&:last-child {
> div {
border-bottom: none;
padding-bottom: 0;
}
}
}
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__description {
display: table-cell;
vertical-align: top;
}
.wc-block-components-order-summary-item__image {
width: #{$gap-large * 2};
padding-top: $gap;
padding-bottom: $gap;
position: relative;
> img {
width: #{$gap-large * 2};
max-width: #{$gap-large * 2};
}
}
.wc-block-components-order-summary-item__quantity {
@include font-size(smaller);
align-items: center;
background: #fff;
border: 2px solid;
border-radius: 1em;
box-shadow: 0 0 0 2px #fff;
color: #000;
display: flex;
line-height: 1;
min-height: 20px;
padding: 0 0.4em;
position: absolute;
justify-content: center;
min-width: 20px;
right: 0;
top: $gap;
transform: translate(50%, -50%);
white-space: nowrap;
z-index: 1;
}
.wc-block-components-order-summary-item__description {
padding-left: $gap-large;
padding-top: $gap;
padding-bottom: $gap;
line-height: 1.375;
p,
.wc-block-product-metadata {
line-height: 1.375;
margin-top: #{ ( $gap-large - $gap ) / 2 };
}
}
.wc-block-components-order-summary-item__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

1
plugins/woocommerce-blocks/assets/js/base/components/panel/style.scss
View File

@ -12,6 +12,7 @@
margin-bottom: em(6px);
margin-top: em(6px);
padding-bottom: em($gap-small - 6px);
padding-right: #{24px + $gap-smaller};
padding-top: em($gap-small - 6px);
position: relative;
text-align: left;

1
plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
View File

@ -15,6 +15,7 @@
transform: translateY(-50%);
position: absolute;
top: 0;
margin-top: -2px; // Same as container border width.
}
.wc-block-components-express-checkout__content {

9
plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
View File

@ -29,12 +29,6 @@
@include reset-box();
}
}
.wc-blocks-components-panel__button {
> svg {
padding-right: $gap;
}
}
}
.is-medium,
@ -58,8 +52,7 @@
.is-large {
.wc-block-sidebar {
.wc-block-totals-table-item,
.wc-blocks-components-panel__button,
.wc-blocks-components-panel__content {
.wc-blocks-components-panel {
padding-left: $gap;
padding-right: $gap;
}

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

@ -266,7 +266,7 @@ table.wc-block-cart-items {
.wc-block-sidebar {
> .wc-block-cart__totals-title,
.wc-block-cart__shipping-calculator,
.wc-block-shipping-totals__fieldset,
.wc-block-shipping-rates-control__package:not(.wc-blocks-components-panel),
> .wc-block-cart__submit-container {
padding-left: $gap;
padding-right: $gap;

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

@ -28,90 +28,6 @@
}
}
.wc-block-components-order-summary {
border: 0;
}
.wc-block-components-order-summary__content {
display: table;
width: 100%;
}
.wc-block-components-order-summary-item {
display: table-row;
width: 100%;
> div {
border-bottom: 1px solid $core-grey-light-600;
}
&:last-child {
> div {
border-bottom: none;
padding-bottom: 0;
}
}
}
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__description {
display: table-cell;
vertical-align: top;
}
.wc-block-components-order-summary-item__image {
width: #{$gap-large * 2};
padding-top: $gap;
padding-bottom: $gap;
position: relative;
> img {
width: #{$gap-large * 2};
max-width: #{$gap-large * 2};
}
}
.wc-block-components-order-summary-item__quantity {
@include font-size(smaller);
align-items: center;
background: #fff;
border: 2px solid;
border-radius: 1em;
box-shadow: 0 0 0 2px #fff;
color: #000;
display: flex;
line-height: 1;
min-height: 20px;
padding: 0 0.4em;
position: absolute;
justify-content: center;
min-width: 20px;
right: 0;
top: $gap;
transform: translate(50%, -50%);
white-space: nowrap;
z-index: 1;
}
.wc-block-components-order-summary-item__description {
padding-left: $gap-large;
padding-top: $gap;
padding-bottom: $gap;
line-height: 1.375;
p,
.wc-block-product-metadata {
line-height: 1.375;
margin-top: #{ ( $gap-large - $gap ) / 2 };
}
}
.wc-block-components-order-summary-item__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.wc-block-components-express-checkout-continue-rule {
display: flex;
align-items: center;