design.estate/dees-wcctools
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sidebar): increase scrolled sidebar header box-shadow intensity and size to improve visual separation

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-04 17:07:41 +00:00
parent 203a53a45d
commit 24a1f064ba
3 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
changelog.md
View File

@@ -1,5 +1,11 @@
# Changelog # Changelog
## 2026-01-04 - 3.7.1 - fix(sidebar)
increase scrolled sidebar header box-shadow intensity and size to improve visual separation
- Changed .sidebar-header.scrolled box-shadow from `0 4px 12px -2px rgba(0, 0, 0, 0.4)` to `0 8px 24px -2px rgba(0, 0, 0, 1)`
- File modified: ts_web/elements/wcc-sidebar.ts — stronger, larger, and fully opaque shadow for better contrast when scrolled
## 2026-01-04 - 3.7.0 - feat(wcc-sidebar) ## 2026-01-04 - 3.7.0 - feat(wcc-sidebar)
add header shadow and scrolled state for sidebar menu to show elevation when content is scrolled add header shadow and scrolled state for sidebar menu to show elevation when content is scrolled

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-wcctools', name: '@design.estate/dees-wcctools',
version: '3.7.0', version: '3.7.1',
description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.' description: 'A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.'
} }

2
ts_web/elements/wcc-sidebar.ts
View File

@@ -107,7 +107,7 @@ export class WccSidebar extends DeesElement {
} }
.sidebar-header.scrolled { .sidebar-header.scrolled {
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4); box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 1);
border-bottom-color: var(--border); border-bottom-color: var(--border);
} }