From 0e6e079e40c32e118c77d89e8b26e77b313d9532 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 25 Jun 2024 12:52:33 +0200 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20Fix=20Google=20Pay=20button?= =?UTF-8?q?=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Make the outline of the payment button visible --- modules/ppcp-button/resources/css/mixins/apm-button.scss | 6 ++++-- modules/ppcp-googlepay/resources/css/styles.scss | 6 ++++++ 2 files changed, 10 insertions(+), 2 deletions(-) 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 { From 9bdd9b5c1622473f2c97545aea22bc775c166cf7 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 25 Jun 2024 13:09:36 +0200 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20Fix=20the=20Apple=20Pay=20bu?= =?UTF-8?q?tton=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit “White with outline” correctly displays the outline --- modules/ppcp-applepay/resources/css/styles.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) 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; }