JezK

Edit File: _gutenberg-components.scss

@use "sass:color" as sassColor; @use "@wordpress/base-styles/colors" as wpColors; @use "@wordpress/base-styles/variables" as wpVariables; // Scope the old styles of core components to SFW pages to avoid styling conflicts with other non-SFW pages. .sfw-admin-page { .components-button { // Hack to show correct font color for disabled primary destructive button. // The color style is copied from https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/button/style.scss#L67-L72 &.is-primary.is-destructive:disabled { color: sassColor.change(wpColors.$white, $alpha: 0.4); } // hack to fix tertiary destructive button. &.is-tertiary.is-destructive { box-shadow: none; &:hover:not(:disabled) { box-shadow: none; } } &.is-link { text-decoration: none; // Hack to show correct font color for disabled link button. &:disabled { color: initial; } &.is-destructive:focus { box-shadow: none; color: wpColors.$alert-red; &:not(:disabled) { color: wpColors.$alert-red; } } } } // Fix the obvious styles conflicts caused by WooCommerce Payments since approximately version 2.2.0. // Ref: https://github.com/Automattic/woocommerce-payments/blob/2.2.0/client/payment-details/summary/style.scss#L3-L9 .components-card { margin-bottom: 0; &__header { font-size: inherit; } } // Adjust InputControl suffix's empty right margin. .components-input-control__suffix { margin-right: wpVariables.$grid-unit; } }