* Fix Place Order button alignment

* Change order of Place Order and Return to Cart buttons
This commit is contained in:
Albert Juhé Lluveras 2021-02-08 14:42:56 +01:00 committed by GitHub
parent 1bd65bd948
commit 2acdbc088b
3 changed files with 19 additions and 12 deletions

View File

@ -141,7 +141,6 @@ const Checkout = ( { attributes, scrollToTop } ) => {
allowCreateAccount={ allowCreateAccount } allowCreateAccount={ allowCreateAccount }
/> />
<div className="wc-block-checkout__actions"> <div className="wc-block-checkout__actions">
<PlaceOrderButton />
{ attributes.showReturnToCart && ( { attributes.showReturnToCart && (
<ReturnToCartButton <ReturnToCartButton
link={ getSetting( link={ getSetting(
@ -150,6 +149,7 @@ const Checkout = ( { attributes, scrollToTop } ) => {
) } ) }
/> />
) } ) }
<PlaceOrderButton />
</div> </div>
{ attributes.showPolicyLinks && <Policies /> } { attributes.showPolicyLinks && <Policies /> }
</Main> </Main>

View File

@ -1,6 +1,16 @@
.wc-block-checkout__add-note { .wc-block-checkout__add-note {
padding: $gap $gap 0 9px; margin: em($gap-large) 0 em($gap-large) 9px;
margin-bottom: $gap; }
.is-mobile,
.is-small,
.is-medium {
.wc-block-checkout__add-note {
@include with-translucent-border(1px 0);
margin-bottom: em($gap);
margin-top: em($gap);
padding: em($gap) 0;
}
} }
.wc-block-checkout__add-note .wc-block-components-textarea { .wc-block-checkout__add-note .wc-block-components-textarea {

View File

@ -14,15 +14,14 @@
.wc-block-checkout__actions { .wc-block-checkout__actions {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
margin: 0 0 $gap-large*2; align-items: center;
padding-left: 9px; margin-left: 9px;
.wc-block-components-checkout-place-order-button { .wc-block-components-checkout-place-order-button {
width: 50%; width: 50%;
padding: 1em; padding: 1em;
height: auto; height: auto;
margin-bottom: 44px;
.wc-block-components-button__text { .wc-block-components-button__text {
line-height: 24px; line-height: 24px;
@ -147,10 +146,8 @@
.is-large { .is-large {
.wc-block-checkout__actions { .wc-block-checkout__actions {
padding-right: 36px; @include with-translucent-border(1px 0 0);
margin-right: $gap-large;
padding-top: em($gap-large);
} }
} }
.wc-block-checkout__actions {
margin-top: $gap;
}