diff --git a/modules/ppcp-applepay/resources/css/styles.scss b/modules/ppcp-applepay/resources/css/styles.scss index da8fe0c22..3818b8db5 100644 --- a/modules/ppcp-applepay/resources/css/styles.scss +++ b/modules/ppcp-applepay/resources/css/styles.scss @@ -4,23 +4,22 @@ --apple-pay-button-min-height: 35px; --apple-pay-button-width: 100%; --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-box-sizing: border-box; .ppcp-width-min & { --apple-pay-button-height: 35px; } + .ppcp-width-300 & { --apple-pay-button-height: 45px; } + .ppcp-width-500 & { --apple-pay-button-height: 55px; } - &.ppcp-button-pill { - --apple-pay-button-border-radius: 50px; - } - &.ppcp-button-minicart { --apple-pay-button-display: block; } diff --git a/modules/ppcp-button/resources/css/mixins/apm-button.scss b/modules/ppcp-button/resources/css/mixins/apm-button.scss index 5c9e73921..9b08a531c 100644 --- a/modules/ppcp-button/resources/css/mixins/apm-button.scss +++ b/modules/ppcp-button/resources/css/mixins/apm-button.scss @@ -1,17 +1,19 @@ @mixin button { + --apm-button-border-radius: 4px; + overflow: hidden; min-width: 0; max-width: 750px; line-height: 0; - border-radius: 4px; + border-radius: var(--apm-button-border-radius); // Defaults height: 45px; margin-top: 14px; &.ppcp-button-pill { - border-radius: 50px; + --apm-button-border-radius: 50px; } &.ppcp-button-minicart { diff --git a/modules/ppcp-googlepay/resources/css/styles.scss b/modules/ppcp-googlepay/resources/css/styles.scss index 0747a2a91..c60212a2e 100644 --- a/modules/ppcp-googlepay/resources/css/styles.scss +++ b/modules/ppcp-googlepay/resources/css/styles.scss @@ -1,5 +1,11 @@ .ppcp-button-googlepay { 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 {