Fix Cart and Checkout sidebar styling issues (https://github.com/woocommerce/woocommerce-blocks/pull/2694)
* Order summary: Add spacing between product name and price name * Remove border from shipping options in the side bar * Add a hasBorder prop to Panel * Checkout Order summary: remove margin product description * Fix padding when there are multiple packages and remove old code * Simplify selector * Add margin botton to no shipping options notice * Make sure Checkout titles are aligned when there are no express payment methods * Update step heading margins according to new designs
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
50ead0508e
commit
f46bc68f6e
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.wc-block-checkout-step__content {
|
||||
padding-bottom: $gap-larger;
|
||||
padding-bottom: em($gap-large);
|
||||
}
|
||||
|
||||
.wc-block-checkout-form fieldset.wc-block-checkout-step:disabled {
|
||||
|
|
@ -31,12 +31,15 @@
|
|||
justify-content: space-between;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: $gap-smaller;
|
||||
margin: em($gap-small) 0 em($gap);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wc-block-checkout-step:first-child .wc-block-checkout-step__heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.wc-block-checkout-step__title {
|
||||
line-height: 1.5;
|
||||
margin: 0 $gap-small 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +78,7 @@
|
|||
|
||||
.wc-block-checkout-step__container::after {
|
||||
content: "";
|
||||
height: calc(100% - #{$gap-smaller});
|
||||
height: 100%;
|
||||
border-left: 1px solid;
|
||||
position: absolute;
|
||||
left: -$gap-larger/2;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
.wc-block-components-order-summary {
|
||||
border: 0;
|
||||
.wc-blocks-components-panel__button {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-order-summary__content {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ const ProductMetadata = ( {
|
|||
return (
|
||||
<div className="wc-block-product-metadata">
|
||||
<ProductSummary
|
||||
className="wc-block-product-description"
|
||||
shortDescription={ shortDescription }
|
||||
fullDescription={ fullDescription }
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
@include font-size(smaller);
|
||||
color: $core-grey-dark-400;
|
||||
|
||||
p,
|
||||
.wc-block-product-description > p,
|
||||
.wc-block-product-variation-data {
|
||||
margin: 0.25em 0 0 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@ import { getSetting } from '@woocommerce/settings';
|
|||
/**
|
||||
* Returns an element containing a summary of the product.
|
||||
*/
|
||||
const ProductSummary = ( { shortDescription = '', fullDescription = '' } ) => {
|
||||
const ProductSummary = ( {
|
||||
className,
|
||||
shortDescription = '',
|
||||
fullDescription = '',
|
||||
} ) => {
|
||||
const source = shortDescription ? shortDescription : fullDescription;
|
||||
|
||||
if ( ! source ) {
|
||||
|
|
@ -16,11 +20,17 @@ const ProductSummary = ( { shortDescription = '', fullDescription = '' } ) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<Summary source={ source } maxLength={ 15 } countType={ getSetting( 'wordCountType', 'words' ) } />
|
||||
<Summary
|
||||
className={ className }
|
||||
source={ source }
|
||||
maxLength={ 15 }
|
||||
countType={ getSetting( 'wordCountType', 'words' ) }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
ProductSummary.propTypes = {
|
||||
className: PropTypes.string,
|
||||
shortDescription: PropTypes.string,
|
||||
fullDescription: PropTypes.string,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ const Package = ( {
|
|||
return (
|
||||
<Panel
|
||||
className="wc-block-shipping-rates-control__package"
|
||||
hasBorder={ true }
|
||||
initialOpen={ true }
|
||||
title={ header }
|
||||
>
|
||||
|
|
|
|||
|
|
@ -34,31 +34,8 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Resets when it's inside a panel.
|
||||
.wc-block-shipping-rates-control {
|
||||
.wc-block-shipping-rates-control__package.components-panel__body {
|
||||
border-bottom: none;
|
||||
|
||||
&,
|
||||
&.is-opened {
|
||||
.wc-blocks-components-panel__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wc-block-shipping-rates-control__package-items {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wc-block-radio-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wc-block-radio-control__option {
|
||||
margin-right: 0;
|
||||
max-width: none;
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid $core-grey-light-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ const TotalsCouponCodeInput = ( {
|
|||
return (
|
||||
<Panel
|
||||
className="wc-block-coupon-code"
|
||||
hasBorder={ true }
|
||||
initialOpen={ initialOpen }
|
||||
title={
|
||||
<Label
|
||||
|
|
|
|||
|
|
@ -15,12 +15,17 @@
|
|||
flex-basis: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-radio-control__option {
|
||||
.wc-block-radio-control__option,
|
||||
.wc-block-radio-control__option-layout {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-shipping-rates-control__no-results-notice {
|
||||
margin-bottom: em($gap-small);
|
||||
}
|
||||
|
||||
.wc-block-shipping-totals__change-address-button {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const Panel = ( {
|
|||
children,
|
||||
className,
|
||||
initialOpen = false,
|
||||
hasBorder = false,
|
||||
title,
|
||||
titleTag: TitleTag = 'div',
|
||||
} ) => {
|
||||
|
|
@ -22,7 +23,9 @@ const Panel = ( {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={ classNames( className, 'wc-blocks-components-panel' ) }
|
||||
className={ classNames( className, 'wc-blocks-components-panel', {
|
||||
'has-border': hasBorder,
|
||||
} ) }
|
||||
>
|
||||
<TitleTag>
|
||||
<button
|
||||
|
|
@ -50,6 +53,7 @@ const Panel = ( {
|
|||
|
||||
Panel.propTypes = {
|
||||
className: PropTypes.string,
|
||||
hasBorder: PropTypes.bool,
|
||||
initialOpen: PropTypes.bool,
|
||||
title: PropTypes.element,
|
||||
titleTag: PropTypes.string,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
.wc-blocks-components-panel.has-border {
|
||||
border-top: 1px solid $core-grey-light-600;
|
||||
border-bottom: 1px solid $core-grey-light-600;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.wc-blocks-components-panel__button {
|
||||
&,
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -17,13 +17,6 @@
|
|||
width: 35%;
|
||||
|
||||
.wc-blocks-components-panel {
|
||||
border-top: 1px solid $core-grey-light-600;
|
||||
border-bottom: 1px solid $core-grey-light-600;
|
||||
|
||||
+ .wc-blocks-components-panel {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
@include font-size(large);
|
||||
@include reset-box();
|
||||
|
|
|
|||
|
|
@ -13,15 +13,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wc-block-checkout__main {
|
||||
fieldset.wc-block-checkout-step:first-child {
|
||||
margin-top: $gap-small;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-checkout__sidebar {
|
||||
.wc-block-product-name {
|
||||
color: inherit;
|
||||
padding-right: $gap-small;
|
||||
flex-grow: 1;
|
||||
// Required by IE11.
|
||||
flex-basis: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue