@bensdev/react-sidebar 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -1
- package/README.md +51 -5
- package/dist/index.cjs +46 -39
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +12 -1
- package/dist/index.d.ts +12 -1
- package/dist/index.js +46 -39
- package/dist/index.js.map +1 -1
- package/dist/styles.css +41 -7
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -129,10 +129,10 @@
|
|
|
129
129
|
--bsb-tooltip-bg: #0f172a;
|
|
130
130
|
--bsb-tooltip-fg: #e2e8f0;
|
|
131
131
|
--bsb-tooltip-border: #334155;
|
|
132
|
-
--bsb-toggle-bg:
|
|
133
|
-
--bsb-toggle-hover-bg: #
|
|
132
|
+
--bsb-toggle-bg: var(--bsb-bg);
|
|
133
|
+
--bsb-toggle-hover-bg: #334155;
|
|
134
134
|
--bsb-toggle-fg: #ffffff;
|
|
135
|
-
--bsb-toggle-border:
|
|
135
|
+
--bsb-toggle-border: rgba(255, 255, 255, 0.14);
|
|
136
136
|
--bsb-avatar-bg: #334155;
|
|
137
137
|
--bsb-avatar-fg: #ffffff;
|
|
138
138
|
--bsb-avatar-ring: rgba(255, 255, 255, 0.15);
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
--bsb-backdrop-bg: rgba(0, 0, 0, 0.5);
|
|
147
147
|
--bsb-backdrop-blur: 4px;
|
|
148
148
|
--bsb-shadow-logo: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
149
|
-
--bsb-shadow-toggle: 0 4px
|
|
149
|
+
--bsb-shadow-toggle: 0 4px 10px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
|
|
150
150
|
--bsb-shadow-tooltip: 0 12px 32px rgba(0, 0, 0, 0.25);
|
|
151
151
|
--bsb-shadow-drawer: 0 24px 48px rgba(0, 0, 0, 0.35);
|
|
152
152
|
|
|
@@ -197,6 +197,17 @@
|
|
|
197
197
|
border-inline-start-color: var(--bsb-border);
|
|
198
198
|
}
|
|
199
199
|
|
|
200
|
+
/* Mobile-drawer theme host: the backdrop/drawer are portaled next to <body>, escaping the
|
|
201
|
+
`.bsb-root` ancestor that normally carries every `--bsb-*` custom property, the box-sizing/
|
|
202
|
+
ul/a/button resets above, and the dark-mode attribute selectors. This wrapper travels through
|
|
203
|
+
the portal *with* them so the drawer stays themed and resettable regardless of where it lands
|
|
204
|
+
in the DOM. It renders `display: contents` — no box of its own — because its two children are
|
|
205
|
+
already `position: fixed`; a real box here would just be an empty column at the portal target
|
|
206
|
+
(`display: contents` still keeps the custom-property/attribute cascade to its descendants). */
|
|
207
|
+
.bsb-root--drawer-host {
|
|
208
|
+
display: contents;
|
|
209
|
+
}
|
|
210
|
+
|
|
200
211
|
.bsb-shell {
|
|
201
212
|
display: flex;
|
|
202
213
|
flex-direction: column;
|
|
@@ -380,10 +391,29 @@ button.bsb-item {
|
|
|
380
391
|
.bsb-root[data-collapsed='true'] .bsb-group__chevron {
|
|
381
392
|
display: none;
|
|
382
393
|
}
|
|
383
|
-
/*
|
|
394
|
+
/* Depth-based indentation (an inline `padding-inline-start`) is meaningless once labels are
|
|
395
|
+
hidden — every row should sit flush like a top-level item. Without this, nested rows that
|
|
396
|
+
*do* render on the rail (a `collapsedGroupBehavior: 'expand'` group, or a `collapsible: false`
|
|
397
|
+
group) show their icon shifted off-center by however deep they're nested. `!important` is
|
|
398
|
+
required to outrank the inline style. Excludes flyout content: a flyout renders with labels
|
|
399
|
+
visible (see below), where nesting depth still needs to indent normally. */
|
|
400
|
+
.bsb-root[data-collapsed='true'] .bsb-item:not(.bsb-group__flyout .bsb-item) {
|
|
401
|
+
padding-inline-start: var(--bsb-item-padding-x) !important;
|
|
402
|
+
}
|
|
403
|
+
/* …except inside a collapsed-rail flyout, where the full row (label, badge, and a nested
|
|
404
|
+
sub-group's own chevron) is shown again. This needs `!important`, not just a later source
|
|
405
|
+
position: the hide rules above match every label via `.bsb-root[data-collapsed='true']
|
|
406
|
+
.bsb-item__label` (3 classes/attributes), every badge via `.bsb-root[data-collapsed='true'] >
|
|
407
|
+
.bsb-shell .bsb-badge` (4), and every chevron via `.bsb-root[data-collapsed='true']
|
|
408
|
+
.bsb-group__chevron` (3) — all already outrank this 2-class carve-out on specificity alone,
|
|
409
|
+
`display: none` silently winning regardless of source order and leaving the flyout's rows
|
|
410
|
+
icon-only. */
|
|
384
411
|
.bsb-group__flyout .bsb-item__label,
|
|
385
412
|
.bsb-group__flyout .bsb-badge {
|
|
386
|
-
display: inline-block;
|
|
413
|
+
display: inline-block !important;
|
|
414
|
+
}
|
|
415
|
+
.bsb-group__flyout .bsb-group__chevron {
|
|
416
|
+
display: inline-flex !important;
|
|
387
417
|
}
|
|
388
418
|
|
|
389
419
|
/* ── badge ───────────────────────────────────────────────────────────── */
|
|
@@ -607,7 +637,11 @@ button.bsb-item {
|
|
|
607
637
|
}
|
|
608
638
|
|
|
609
639
|
/* ── collapse toggle ─────────────────────────────────────────────────── */
|
|
610
|
-
.bsb-toggle
|
|
640
|
+
/* Scoped to `.bsb-root .bsb-toggle` (not the bare class) so this outranks the
|
|
641
|
+
`.bsb-root button { background: none; border: 0; }` reset above — a bare
|
|
642
|
+
`.bsb-toggle` rule ties on specificity with that reset and loses at rest,
|
|
643
|
+
which is what made the button render with no fill/border until :hover. */
|
|
644
|
+
.bsb-root .bsb-toggle {
|
|
611
645
|
position: absolute;
|
|
612
646
|
top: var(--bsb-toggle-offset-y);
|
|
613
647
|
left: calc(var(--bsb-current-width) - var(--bsb-toggle-size) / 2);
|
package/package.json
CHANGED