Skip to content

style(app-frame): shell layout, panel chrome, resize handle dwell #343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kamendola wants to merge 1 commit into
base: ew
Choose a base branch
from
Open

style(app-frame): shell layout, panel chrome, resize handle dwell #343

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 128 additions & 40 deletions nx2/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,14 @@
--s2-corner-radius-700: 10px;
--s2-corner-radius-800: 16px;

/* Drop shadow / elevated — layered (alias/drop-shadow: ambient, transition, elevated-key) */
--nx-drop-shadow-ambient: 0 4px 12px 0 rgb(0 0 0 / 8%);
--nx-drop-shadow-transition: 0 2px 6px 0 rgb(0 0 0 / 4%);
--nx-drop-shadow-elevated-key: 0 0 2px 0 rgb(0 0 0 / 12%);

/* App-frame `main` + side panels (desktop + mobile shell) */
--nx-app-shell-radius: 12px;

/* heading */
--s2-heading-size-xs: 18px;
--s2-heading-size-s: 20px;
Expand Down Expand Up @@ -422,7 +430,11 @@ html:has(meta[content="edge-delivery"]) {
grid-template:
"header" var(--s2-nav-height)
"main" 1fr;
background-color: light-dark(rgb(240 240 240), rgb(17 17 17));
background-color: var(--s2-gray-50);

&.nx-panel-resize-active {
cursor: ew-resize;
}

header {
grid-area: header;
Expand All @@ -436,24 +448,22 @@ html:has(meta[content="edge-delivery"]) {
grid-area: main;
background-color: light-dark(#fff, #000);
max-height: 100%;
border-radius: var(--nx-app-shell-radius) var(--nx-app-shell-radius) 0 0;
}

.section {
&.container {
.default-content, .block-content {
max-width: var(--section-container-width);
margin-inline: auto;
}
}
/* Elevated surface: center `main` or side panels (pointer-activated; see panel.js) */
main,
aside.panel .panel-wrapper {
transition: box-shadow 0.15s ease;
}

&:has(aside.panel:not([hidden]))::before {
content: '';
position: fixed;
inset: 0;
z-index: 50;
background-color: light-dark(rgb(0 0 0 / 40%), rgb(0 0 0 / 55%));
pointer-events: auto;
main.nx-main-raised {
position: relative;
z-index: 1;
box-shadow:
var(--nx-drop-shadow-ambient),
var(--nx-drop-shadow-transition),
var(--nx-drop-shadow-elevated-key);
}

aside.panel {
Expand All @@ -465,20 +475,22 @@ html:has(meta[content="edge-delivery"]) {
margin: 0;
max-height: none;

path {
fill: currentcolor;
}

.panel-wrapper {
--panel-bottom-margin: 12px;

display: block;
position: relative;
box-sizing: border-box;

/* Programmatic / click focus; visual is layered shadow via :focus-within */
&:focus {
outline: none;
}

height: 100%;
max-height: 100%;
margin: 0;
border-radius: 24px;
border-radius: var(--nx-app-shell-radius);
background-color: light-dark(#fff, #000);

.panel-shell {
Expand Down Expand Up @@ -509,12 +521,11 @@ html:has(meta[content="edge-delivery"]) {
.panel-resize-handle {
display: none;
position: absolute;
top: 50%;
translate: 0 -50%;
top: 4px;
bottom: 4px;
z-index: 2;
box-sizing: border-box;
width: 12px;
height: 56px;
width: 16px;
padding: 0;
margin: 0;
border: none;
Expand All @@ -524,38 +535,95 @@ html:has(meta[content="edge-delivery"]) {
color: inherit;
}

/* Gutter pill: gray-400, only when pointer is in the resize zone (or dragging / touch) */
.panel-resize-handle::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 4px;
height: 48px;
top: 0;
bottom: 0;
translate: -50% 0;
width: 2px;
border-radius: 999px;
background-color: var(--s2-gray-600);
background-color: var(--s2-gray-400);
opacity: 0;
transition: opacity 0.12s ease 0s;
}

.panel-resize-handle:focus-visible {
outline: none;
}

.panel-resize-handle:hover::before,
.panel-resize-handle:focus-visible::before {
background-color: var(--s2-gray-900);
background-color: var(--s2-gray-400);
opacity: 1;
}

.panel-resize-handle:focus-visible {
outline: 2px solid var(--s2-blue-800);
outline-offset: 2px;
.panel-resize-handle:active::before {
background-color: var(--s2-gray-400);
opacity: 1;
}

/* Show gutter pill only when pointer is in the handle hit zone (between main & panel) */
@media (hover: hover) {
/* Short dwell so the pill doesn’t flash on fast pointer moves across the hit zone */
.panel-resize-handle:hover::before {
opacity: 1;
background-color: var(--s2-gray-400);
transition: opacity 0.12s ease 0.2s;
}
}

@media (hover: none) {
.panel-resize-handle::before {
opacity: 1;
}
}

.panel-resize-handle-trailing {
right: -12px;
right: -14px;
}

.panel-resize-handle-leading {
left: -12px;
left: -14px;
}
}
}

/* During drag, only the handle being dragged stays visible (see panel.js) */
aside.panel.nx-panel-resizing .panel-wrapper .panel-resize-handle::before {
opacity: 1;
}

/* Side panels: `.nx-panel-raised` matches main behavior (see panel.js) */
aside.panel .panel-wrapper:focus-within,
aside.panel .panel-wrapper.nx-panel-raised {
position: relative;
z-index: 2;
box-shadow:
var(--nx-drop-shadow-ambient),
var(--nx-drop-shadow-transition),
var(--nx-drop-shadow-elevated-key);
}

.section {
&.container {
.default-content, .block-content {
max-width: var(--section-container-width);
margin-inline: auto;
}
}
}

&:has(aside.panel:not([hidden]))::before {
content: '';
position: fixed;
inset: 0;
z-index: 50;
background-color: light-dark(rgb(0 0 0 / 40%), rgb(0 0 0 / 55%));
pointer-events: auto;
}

footer {
display: none;
}
Expand Down Expand Up @@ -584,15 +652,31 @@ html:has(meta[content="edge-delivery"]) {
display: unset;
}

&.sidenav-collapsed > nav {
visibility: hidden;
overflow: hidden;
width: 0;
min-width: 0;
pointer-events: none;
}

main {
display: grid;
margin: 0 12px 0 0;
border-radius: var(--s2-corner-radius-800) var(--s2-corner-radius-800) 0 0;
margin: 0 12px;
max-height: 100%;
overflow-y: auto;

}

/* Single 12px gutter: `.panel-wrapper` already uses margin-inline 12px */
&:has(aside.panel[data-position="before"]:not([hidden])) main {
margin-left: 0;
}

&:has(aside.panel[data-position="after"]:not([hidden])) main {
margin-right: 0;
}

&:has(aside.panel:not([hidden]))::before {
display: none;
pointer-events: none;
Expand All @@ -601,11 +685,15 @@ html:has(meta[content="edge-delivery"]) {
aside.panel {
position: static;

/* Match panel.js: 240px surface + 12px `.panel-wrapper` margin each side */
min-width: calc(240px + 24px);

.panel-wrapper {
height: calc(100vh - var(--s2-nav-height) - var(--panel-bottom-margin));
max-height: none;
margin: 0 12px var(--panel-bottom-margin) 0;
border-radius: var(--s2-corner-radius-800);
margin-block: 0 var(--panel-bottom-margin);
margin-inline: 12px;
border-radius: var(--nx-app-shell-radius);

.panel-resize-handle {
display: block;
Expand Down
Loading