Fix WooCommerce payments action button styling (https://github.com/woocommerce/woocommerce-admin/pull/7412)

* Fix WC action button styling

* Add changelog

* Updated WCPay css for updated card component

* Added changelog
This commit is contained in:
louwie17 2021-07-28 11:40:27 -03:00 committed by GitHub
parent 17730079a8
commit 668c86ac48
3 changed files with 15 additions and 9 deletions

View File

@ -0,0 +1,4 @@
Significance: patch
Type: Fix
Fixes action button mis-alignment within card footer. #7412

View File

@ -1,3 +1,7 @@
# Unreleased
- Update WCPayCard CSS to handle @wordpress/card updates. #7412
# 2.1.0 # 2.1.0
- Fix commonjs module build, allow package to be built in isolation. #7286 - Fix commonjs module build, allow package to be built in isolation. #7286

View File

@ -1,27 +1,30 @@
.woocommerce-task-payment-wcpay { .woocommerce-task-payments .woocommerce-task-payment-wcpay {
.woocommerce-task-payment-wcpay__description { .woocommerce-task-payment-wcpay__description {
font-size: 16px; font-size: 16px;
margin-bottom: $gap-large; margin-bottom: $gap-large;
} }
> .components-card__header { .components-card__header {
margin-bottom: $gap-small; margin-bottom: $gap-small;
justify-content: flex-start;
padding: 25px;
.woocommerce-pill { .woocommerce-pill {
margin-left: $gap-small; margin-left: $gap-small;
} }
} }
> .components-card__footer { .components-card__footer {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
.components-button { .components-button {
margin-top: $gap; margin-top: $gap;
margin-left: 0;
} }
} }
> .components-card__body { .components-card__body {
h2 { h2 {
margin: 0 0 20px 0; margin: 0 0 20px 0;
} }
@ -37,9 +40,4 @@
color: #40464d; color: #40464d;
} }
} }
> h2 {
display: flex;
justify-content: flex-start;
}
} }