style(client): tighten sidebar layout
This commit is contained in:
@@ -20,10 +20,10 @@ export interface Columns { sidebar: number; center: number; details: number }
|
|||||||
/** Center column floor; only the final fallback may go below it. */
|
/** Center column floor; only the final fallback may go below it. */
|
||||||
export const CENTER_MIN = 640
|
export const CENTER_MIN = 640
|
||||||
/** Sidebar drag clamp floor. */
|
/** Sidebar drag clamp floor. */
|
||||||
export const SIDEBAR_MIN = 280
|
export const SIDEBAR_MIN = 264
|
||||||
/** Sidebar drag clamp ceiling. */
|
/** Sidebar drag clamp ceiling. */
|
||||||
export const SIDEBAR_MAX = 420
|
export const SIDEBAR_MAX = 420
|
||||||
/** Sidebar width before any user drag (= the drag floor). */
|
/** Sidebar width before any user drag. */
|
||||||
export const SIDEBAR_DEFAULT = 280
|
export const SIDEBAR_DEFAULT = 280
|
||||||
/** Closed-sidebar rail: a 24px icon column between 16px horizontal paddings. */
|
/** Closed-sidebar rail: a 24px icon column between 16px horizontal paddings. */
|
||||||
export const SIDEBAR_COLLAPSED = 56
|
export const SIDEBAR_COLLAPSED = 56
|
||||||
|
|||||||
@@ -1,19 +1,20 @@
|
|||||||
/* Settings shell (figma 501:29904 mask context / 501:29947 panel): sidebar
|
/* Settings shell (figma 501:29904 mask context / 501:29947 panel): sidebar
|
||||||
foot trigger row + centered 1080x700 modal panel. The trigger reproduces
|
foot trigger row + centered 1080x700 modal panel. The trigger uses the
|
||||||
the former sidebar foot geometry (49px wide row / 36px rail circle); the
|
sidebar's 38px wide row / 36px rail circle rhythm; the
|
||||||
panel is a two-column layout — 188px nav rail + content column with a
|
panel is a two-column layout — 188px nav rail + content column with a
|
||||||
54px header and the 24px-padded options area. */
|
54px header and the 24px-padded options area. */
|
||||||
|
|
||||||
/* Trigger row (former sidebar foot, figma 133:7668): 49px hover pill. */
|
/* Trigger row: match the other wide sidebar controls' compact vertical rhythm. */
|
||||||
.trigger {
|
.trigger {
|
||||||
flex: none;
|
flex: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 49px;
|
height: 38px;
|
||||||
margin: 8px 0 0;
|
margin: 4px 0 0;
|
||||||
padding: 0 2px 0 6px;
|
padding: 8px 2px 8px 6px;
|
||||||
|
box-sizing: border-box;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -22,6 +23,7 @@
|
|||||||
color: var(--dsw-alias-label-primary);
|
color: var(--dsw-alias-label-primary);
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.trigger:hover {
|
.trigger:hover {
|
||||||
@@ -32,7 +34,7 @@
|
|||||||
.trigger.rail {
|
.trigger.rail {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
margin: 18px 0 10px;
|
margin: 8px 0 10px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
@@ -224,7 +224,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Foot seat: a pure layout socket pinned under the region; the ui-settings
|
/* Foot seat: a pure layout socket pinned under the region; the ui-settings
|
||||||
trigger row inside owns its own geometry (49px wide row / 36px rail
|
trigger row inside owns its own geometry (38px wide row / 36px rail
|
||||||
circle) and hover chrome. */
|
circle) and hover chrome. */
|
||||||
.footArea {
|
.footArea {
|
||||||
flex: none;
|
flex: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user