You've already forked wc-bootstrap
magdev
01b807a769
Add 9 Twig template overrides for WooCommerce's global and notice templates: - global/wrapper-start, wrapper-end: conditional container with _theme_wrapped - global/breadcrumb: Bootstrap breadcrumb component with aria-current - global/sidebar: offcanvas-lg for mobile, standard aside for desktop - global/quantity-input: input-group with +/- buttons - global/form-login: responsive form with form-control, form-check - notices/notice, error, success: Bootstrap alert-dismissible with icons Supporting changes: - assets/js/quantity.js: +/- button handler respecting min/max/step - assets/css/wc-bootstrap.css: WooCommerce notice fallback styles, spinner removal - functions.php: register quantity.js script Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
123 lines
3.9 KiB
CSS
123 lines
3.9 KiB
CSS
/**
|
|
* 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 <html> */
|
|
[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;
|
|
}
|