feat(web): add Modal + EmptyState primitives and a11y hooks
- Modal: shared backdrop/panel with ESC-close, backdrop-click-close, focus trap, body scroll lock; supports center + drawer-right variants, matrix/violet accents, default/wide widths. - EmptyState: icon + title + hint + optional CTA; compact variant for tight rails. - useEscapeKey, useFocusTrap: reusable hooks powering Modal; will also be adopted by CommandPalette and ContextMenu in follow-up commits. No retrofits yet — primitives only. tsc clean.
This commit is contained in:
24
decnet_web/src/components/Modal/Modal.css
Normal file
24
decnet_web/src/components/Modal/Modal.css
Normal file
@@ -0,0 +1,24 @@
|
||||
/* Drawer-right variant: reuses .modal-backdrop + .modal base from DeckyFleet.css
|
||||
and shifts the panel to the right edge as a full-height side panel. */
|
||||
|
||||
.modal-backdrop.drawer {
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.modal.modal-drawer-right {
|
||||
width: 520px;
|
||||
max-width: 96vw;
|
||||
max-height: 100vh;
|
||||
height: 100vh;
|
||||
border-left: 1px solid var(--matrix);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
box-shadow: -8px 0 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.modal.modal-drawer-right.violet {
|
||||
border-left-color: var(--violet);
|
||||
box-shadow: -8px 0 30px rgba(238, 130, 238, 0.25);
|
||||
}
|
||||
Reference in New Issue
Block a user