@bensdev/react-sidebar 0.2.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 +34 -4
- package/README.md +51 -5
- package/dist/index.cjs +41 -34
- 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 +41 -34
- package/dist/index.js.map +1 -1
- package/dist/styles.css +32 -2
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -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 ───────────────────────────────────────────────────────────── */
|
package/package.json
CHANGED