/** * 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; } */ /* ========================================================================== Notification Overrides Map plugin notification classes to Bootstrap alert styles. ========================================================================== */ /* Example: Map plugin .my-notification to Bootstrap alert .my-notification { position: relative; padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: var(--bs-border-radius); } */ /* ========================================================================== 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; }