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

Restyle category tree to idiomatic Bootstrap list-group pattern (v0.1.8)
All checks were successful
Create Release Package / PHP Lint (push) Successful in 48s
Details
Create Release Package / PHPUnit Tests (push) Successful in 56s
Details
Create Release Package / Build Release (push) Successful in 1m4s
Details

Browse Source 
Switch from custom link classes to Bootstrap's native list-group-item-action
pattern. Replace bold primary-colored active background with subtle tertiary
background, left accent border, and semibold text.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Grätsch
2026-03-29 15:42:35 +02:00
parent 9860a184cd
commit 1e7f82615b
6 changed files with 56 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -648,6 +648,7 @@ header.sticky-top.is-stuck {
/* ==========================================================================
Category Tree Sidebar
Hierarchical product category navigation with collapsible sub-levels.
Uses Bootstrap list-group-item-action with subtle active styling.
========================================================================== */
.category-tree {
@@ -658,24 +659,17 @@ header.sticky-top.is-stuck {
background-color: transparent;
}
.category-tree-link {
color: var(--bs-body-color);
transition: background-color 0.15s ease, color 0.15s ease;
}
.category-tree-link:hover {
/* Subtle active state: fw-semibold + left accent border instead of
full primary background, keeping the look understated. */
.category-tree .list-group-item.active {
background-color: var(--bs-tertiary-bg);
color: var(--bs-body-color);
border-left: 3px solid var(--bs-primary);
font-weight: 600;
}
.category-tree-link.active {
background-color: var(--bs-primary);
color: #fff;
}
.category-tree-link.active .badge {
background-color: rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
.category-tree .list-group-item.active small {
color: var(--bs-body-secondary) !important;
}
/* Rotate chevron icon when collapsed/expanded */
@@ -686,8 +680,3 @@ header.sticky-top.is-stuck {
.category-tree-toggle[aria-expanded="false"] .bi {
transform: rotate(-90deg);
}
/* Nested list indentation */
.category-tree .list-group-flush .list-group-flush {
padding-left: 0.75rem;
}