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

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 {
display: grid;
grid-template-areas:
"input button"
"watermark watermark"
"error error";
grid-template-columns: 1fr auto;
gap: 6px 8px;
"input"
"button"
"watermark"
"error";
grid-template-columns: 1fr;
gap: 6px;
align-items: start;
input[type="email"] {
@ -152,16 +153,17 @@ $fast-transition-duration: 0.5s;
}
#email {
align-self: center;
align-self: stretch;
}
// 4.5 Email Submit Button
.wc-block-axo-email-submit-button-container {
grid-area: button;
align-self: center;
align-self: stretch;
.wc-block-components-button {
white-space: nowrap;
width: 100%;
}
}
@ -177,6 +179,29 @@ $fast-transition-duration: 0.5s;
width: 100%;
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