/** * WooCommerce Bootstrap - Bootstrap 5 Overrides * * Provides Bootstrap 5 styling for any plugin CSS classes * that may be injected by the plugin's JavaScript or inline markup. * * CSS dependency chain (lowest to highest priority): * 1. wp-bootstrap (parent theme) * 2. woocommerce (plugin styles) * 3. wc-bootstrap-style (child theme style.css) * 4. wc-bootstrap-overrides (this file) * * @package WcBootstrap * @since 0.1.0 */ /* ========================================================================== Button Overrides Map plugin button classes to Bootstrap button styles. ========================================================================== */ /* Example: Map plugin .my-button to Bootstrap styling .my-button { display: inline-block; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: var(--bs-border-radius); transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } */ /* ========================================================================== WooCommerce Notice Overrides Map WooCommerce notice classes to Bootstrap alert styles as fallback when notices are rendered outside our Twig templates. ========================================================================== */ .woocommerce-info, .woocommerce-message, .woocommerce-error { position: relative; padding: 1rem 3rem 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: var(--bs-border-radius); } .woocommerce-info { color: var(--bs-info-text-emphasis); background-color: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); } .woocommerce-message { color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); } .woocommerce-error { color: var(--bs-danger-text-emphasis); background-color: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); list-style: none; padding-left: 1rem; } /* ========================================================================== Quantity Input Sizing for the Bootstrap input-group quantity widget. ========================================================================== */ .quantity.input-group .form-control { /* Remove number input spinners (browser default) */ -moz-appearance: textfield; } .quantity.input-group .form-control::-webkit-outer-spin-button, .quantity.input-group .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ========================================================================== Dark Mode Overrides Fix any plugin elements that don't adapt to Bootstrap's dark mode. ========================================================================== */ /* Bootstrap 5 dark mode uses data-bs-theme="dark" attribute on */ [data-bs-theme="dark"] { /* Example overrides for dark mode compatibility */ } /* ========================================================================== Sticky Header Shadow effect when header is in stuck position. ========================================================================== */ header.sticky-top.is-stuck { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.2s ease; } [data-bs-theme="dark"] header.sticky-top.is-stuck { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* ========================================================================== Block Navigation Fix Required for dropdown menus inside WordPress block navigation. ========================================================================== */ .wp-block-navigation__container { overflow: visible !important; }