diff --git a/assets/css/wc-bootstrap.css b/assets/css/wc-bootstrap.css index 80fdd78..00303ee 100644 --- a/assets/css/wc-bootstrap.css +++ b/assets/css/wc-bootstrap.css @@ -42,29 +42,35 @@ when notices are rendered outside our Twig templates. ========================================================================== */ -.woocommerce-info, -.woocommerce-message, -.woocommerce-error { +/* Use .woocommerce ancestor to beat woocommerce.css specificity (0,2,0 > 0,1,0). + WooCommerce sets border-top: 3px solid, background-color: #f6f5f8, and a + WooCommerce icon font ::before on these classes. Override all of it. */ +.woocommerce .woocommerce-info, +.woocommerce .woocommerce-message, +.woocommerce .woocommerce-error { position: relative; padding: 1rem 3rem 1rem 1rem; - margin-bottom: 1rem; - border: 1px solid transparent; + margin: 0 0 1rem; + border: var(--bs-border-width) solid transparent; + border-top: var(--bs-border-width) solid transparent; border-radius: var(--bs-border-radius); + background-color: transparent; + background-image: none; } -.woocommerce-info { +.woocommerce .woocommerce-info { color: var(--bs-info-text-emphasis); background-color: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); } -.woocommerce-message { +.woocommerce .woocommerce-message { color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); } -.woocommerce-error { +.woocommerce .woocommerce-error { color: var(--bs-danger-text-emphasis); background-color: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); @@ -72,6 +78,13 @@ padding-left: 1rem; } +/* Suppress WooCommerce icon font ::before — our templates use Bootstrap Icons */ +.woocommerce .woocommerce-info::before, +.woocommerce .woocommerce-message::before, +.woocommerce .woocommerce-error::before { + display: none; +} + /* ========================================================================== Quantity Input Sizing for the Bootstrap input-group quantity widget. @@ -381,10 +394,58 @@ ========================================================================== */ /* Bootstrap 5 dark mode uses data-bs-theme="dark" attribute on */ -[data-bs-theme="dark"] { - /* Checkout form focus color for dark mode */ + +/* Native