You've already forked wc-bootstrap
Implement Phase 1: global templates and notices (Bootstrap 5)
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>
This commit is contained in:
@@ -37,19 +37,56 @@
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Notification Overrides
|
||||
Map plugin notification classes to Bootstrap alert styles.
|
||||
WooCommerce Notice Overrides
|
||||
Map WooCommerce notice classes to Bootstrap alert styles as fallback
|
||||
when notices are rendered outside our Twig templates.
|
||||
========================================================================== */
|
||||
|
||||
/* Example: Map plugin .my-notification to Bootstrap alert
|
||||
.my-notification {
|
||||
.woocommerce-info,
|
||||
.woocommerce-message,
|
||||
.woocommerce-error {
|
||||
position: relative;
|
||||
padding: 1rem 1rem;
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user