From 4dd92c3e8d047dfead8135575b2d444c2ab3085d Mon Sep 17 00:00:00 2001 From: Raluca Stan Date: Mon, 14 Aug 2023 14:04:27 +0200 Subject: [PATCH] Fix express button display in the Cart block (#10534) * Fix express button display in the Cart block When multiple buttons are displayed they don't appear stacked. This PR fixes a regression; * Fix editor experience --- .../express-payment/style.scss | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss b/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss index 990809e7fac..9fac0bd0e15 100644 --- a/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss +++ b/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss @@ -5,18 +5,13 @@ $border-radius: 5px; margin: auto; position: relative; + // nested class to avoid conflict with .editor-styles-wrapper ul .wc-block-components-express-payment__event-buttons { - list-style: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr)); - grid-gap: 10px; - box-sizing: border-box; width: 100%; padding: 0; margin: 0; overflow: hidden; text-align: center; - > li { margin: 0; width: 100%; @@ -27,18 +22,23 @@ $border-radius: 5px; } } } - - @include breakpoint("<782px") { - .wc-block-components-express-payment__event-buttons { - grid-template-columns: 1fr; - } - } } .wc-block-components-express-payment--checkout { /* stylelint-disable-next-line function-calc-no-unspaced-operator */ margin-top: calc($border-radius * 3); + .wc-block-components-express-payment__event-buttons { + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr)); + grid-gap: 10px; + + @include breakpoint("<782px") { + grid-template-columns: 1fr; + } + } + .wc-block-components-express-payment__title-container { display: flex; flex-direction: row;