woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

Make submit button full width on mobile

Browse source
This commit is contained in:
Daniel Dudzic 2024-09-17 14:13:29 +02:00
parent deb1d7a618
commit 483f017d8d
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
1 changed files with 32 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

39
modules/ppcp-axo-block/resources/css/gateway.scss
View file

@ -138,11 +138,12 @@ $fast-transition-duration: 0.5s;
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input { .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"input button" "input"
"watermark watermark" "button"
"error error"; "watermark"
grid-template-columns: 1fr auto; "error";
gap: 6px 8px; grid-template-columns: 1fr;
gap: 6px;
align-items: start; align-items: start;
input[type="email"] { input[type="email"] {
@ -152,16 +153,17 @@ $fast-transition-duration: 0.5s;
} }
#email { #email {
align-self: center; align-self: stretch;
} }
// 4.5 Email Submit Button // 4.5 Email Submit Button
.wc-block-axo-email-submit-button-container { .wc-block-axo-email-submit-button-container {
grid-area: button; grid-area: button;
align-self: center; align-self: stretch;
.wc-block-components-button { .wc-block-components-button {
white-space: nowrap; white-space: nowrap;
width: 100%;
} }
} }
@ -177,6 +179,29 @@ $fast-transition-duration: 0.5s;
width: 100%; width: 100%;
margin-top: 4px; margin-top: 4px;
} }
@media (min-width: 783px) {
.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input {
grid-template-areas:
"input button"
"watermark watermark"
"error error";
grid-template-columns: 1fr auto;
gap: 6px 8px;
}
#email {
align-self: center;
}
.wc-block-axo-email-submit-button-container {
align-self: center;
.wc-block-components-button {
width: auto;
}
}
}
} }
// 5. Shipping/Card Change Link // 5. Shipping/Card Change Link