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

View File

@ -1,6 +1,16 @@
.wc-block-checkout__add-note {
padding: $gap $gap 0 9px;
margin-bottom: $gap;
margin: em($gap-large) 0 em($gap-large) 9px;
}
.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 {

View File

@ -14,15 +14,14 @@
.wc-block-checkout__actions {
display: flex;
flex-direction: column;
margin: 0 0 $gap-large*2;
padding-left: 9px;
justify-content: space-between;
align-items: center;
margin-left: 9px;
.wc-block-components-checkout-place-order-button {
width: 50%;
padding: 1em;
height: auto;
margin-bottom: 44px;
.wc-block-components-button__text {
line-height: 24px;
@ -147,10 +146,8 @@
.is-large {
.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;
}