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

Merge pull request #2367 from woocommerce/PCP-3237-fix-apple-pay-button-layout

Browse source 
Fix Apple Pay button layout (3237)
This commit is contained in:
Emili Castells 2024-07-02 11:04:19 +02:00 • committed by GitHub
commit 4897193669
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

9
modules/ppcp-applepay/resources/css/styles.scss
View file

@ -4,23 +4,22 @@
--apple-pay-button-min-height: 35px; --apple-pay-button-min-height: 35px;
--apple-pay-button-width: 100%; --apple-pay-button-width: 100%;
--apple-pay-button-max-width: 750px; --apple-pay-button-max-width: 750px;
--apple-pay-button-border-radius: 4px; --apple-pay-button-border-radius: var(--apm-button-border-radius);
--apple-pay-button-overflow: hidden; --apple-pay-button-overflow: hidden;
--apple-pay-button-box-sizing: border-box;
.ppcp-width-min & { .ppcp-width-min & {
--apple-pay-button-height: 35px; --apple-pay-button-height: 35px;
} }
.ppcp-width-300 & { .ppcp-width-300 & {
--apple-pay-button-height: 45px; --apple-pay-button-height: 45px;
} }
.ppcp-width-500 & { .ppcp-width-500 & {
--apple-pay-button-height: 55px; --apple-pay-button-height: 55px;
} }
&.ppcp-button-pill {
--apple-pay-button-border-radius: 50px;
}
&.ppcp-button-minicart { &.ppcp-button-minicart {
--apple-pay-button-display: block; --apple-pay-button-display: block;
} }

6
modules/ppcp-button/resources/css/mixins/apm-button.scss
View file

@ -1,17 +1,19 @@
@mixin button { @mixin button {
--apm-button-border-radius: 4px;
overflow: hidden; overflow: hidden;
min-width: 0; min-width: 0;
max-width: 750px; max-width: 750px;
line-height: 0; line-height: 0;
border-radius: 4px; border-radius: var(--apm-button-border-radius);
// Defaults // Defaults
height: 45px; height: 45px;
margin-top: 14px; margin-top: 14px;
&.ppcp-button-pill { &.ppcp-button-pill {
border-radius: 50px; --apm-button-border-radius: 50px;
} }
&.ppcp-button-minicart { &.ppcp-button-minicart {

6
modules/ppcp-googlepay/resources/css/styles.scss
View file

@ -1,5 +1,11 @@
.ppcp-button-googlepay { .ppcp-button-googlepay {
min-height: 40px; min-height: 40px;
.gpay-card-info-container,
.gpay-button {
outline-offset: -1px;
border-radius: var(--apm-button-border-radius);
}
} }
.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart { .wp-block-woocommerce-checkout, .wp-block-woocommerce-cart {