magdev/wc-bootstrap
1
Fork 0
Code Issues Pull Requests Actions Releases 8 Activity

Fix dark mode selects, notice borders, and double notice icons

Browse Source 
- Override WooCommerce's hardcoded #fff on native <select> and Select2
  widgets for Bootstrap 5 dark mode (background, color, border)
- Suppress WooCommerce icon font ::before on notices — templates
  already render Bootstrap Icons (bi-check-circle, etc.)
- Bump notice selector specificity to .woocommerce .woocommerce-message
  (0,2,0) to beat woocommerce.css border-top: 3px solid override
- Explicitly reset border-top shorthand to prevent WooCommerce's
  colored top-border from bleeding through

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco Grätsch
2026-02-28 19:24:55 +01:00
parent 01404c87ba
commit f4877833cf
1 changed files with 71 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
assets/css/wc-bootstrap.css
View File

@@ -42,29 +42,35 @@
when notices are rendered outside our Twig templates. when notices are rendered outside our Twig templates.
========================================================================== */ ========================================================================== */
.woocommerce-info, /* Use .woocommerce ancestor to beat woocommerce.css specificity (0,2,0 > 0,1,0).
.woocommerce-message, WooCommerce sets border-top: 3px solid, background-color: #f6f5f8, and a
.woocommerce-error { WooCommerce icon font ::before on these classes. Override all of it. */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
position: relative; position: relative;
padding: 1rem 3rem 1rem 1rem; padding: 1rem 3rem 1rem 1rem;
margin-bottom: 1rem; margin: 0 0 1rem;
border: 1px solid transparent; border: var(--bs-border-width) solid transparent;
border-top: var(--bs-border-width) solid transparent;
border-radius: var(--bs-border-radius); border-radius: var(--bs-border-radius);
background-color: transparent;
background-image: none;
} }
.woocommerce-info { .woocommerce .woocommerce-info {
color: var(--bs-info-text-emphasis); color: var(--bs-info-text-emphasis);
background-color: var(--bs-info-bg-subtle); background-color: var(--bs-info-bg-subtle);
border-color: var(--bs-info-border-subtle); border-color: var(--bs-info-border-subtle);
} }
.woocommerce-message { .woocommerce .woocommerce-message {
color: var(--bs-success-text-emphasis); color: var(--bs-success-text-emphasis);
background-color: var(--bs-success-bg-subtle); background-color: var(--bs-success-bg-subtle);
border-color: var(--bs-success-border-subtle); border-color: var(--bs-success-border-subtle);
} }
.woocommerce-error { .woocommerce .woocommerce-error {
color: var(--bs-danger-text-emphasis); color: var(--bs-danger-text-emphasis);
background-color: var(--bs-danger-bg-subtle); background-color: var(--bs-danger-bg-subtle);
border-color: var(--bs-danger-border-subtle); border-color: var(--bs-danger-border-subtle);
@@ -72,6 +78,13 @@
padding-left: 1rem; 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 Quantity Input
Sizing for the Bootstrap input-group quantity widget. Sizing for the Bootstrap input-group quantity widget.
@@ -381,10 +394,58 @@
========================================================================== */ ========================================================================== */
/* Bootstrap 5 dark mode uses data-bs-theme="dark" attribute on <html> */ /* Bootstrap 5 dark mode uses data-bs-theme="dark" attribute on <html> */
[data-bs-theme="dark"] {
/* Checkout form focus color for dark mode */ /* Native <select> elements — woocommerce.css sets:
select { background-color: var(--wc-form-color-background, #fff) }
The custom property is never defined for dark mode, so it falls back to #fff. */
[data-bs-theme="dark"] .woocommerce select,
[data-bs-theme="dark"] .wc-block-checkout select {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border-color: var(--bs-border-color);
} }
/* SelectWoo / Select2 — select2.css hardcodes #fff backgrounds on selection
containers and dropdowns. Override to use Bootstrap's dark mode variables. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--bs-body-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--bs-secondary-color) transparent transparent transparent;
}
[data-bs-theme="dark"] .select2-dropdown {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
background-color: var(--bs-tertiary-bg);
color: var(--bs-body-color);
border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
[data-bs-theme="dark"] .select2-container--default .select2-results__option[data-selected=true] {
background-color: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[data-selected] {
background-color: var(--bs-primary);
color: #fff;
}
/* Checkout form focus color for dark mode */
[data-bs-theme="dark"] .woocommerce-checkout .form-row input.input-text:focus, [data-bs-theme="dark"] .woocommerce-checkout .form-row input.input-text:focus,
[data-bs-theme="dark"] .woocommerce-checkout .form-row textarea:focus, [data-bs-theme="dark"] .woocommerce-checkout .form-row textarea:focus,
[data-bs-theme="dark"] .woocommerce-checkout .form-row select:focus { [data-bs-theme="dark"] .woocommerce-checkout .form-row select:focus {