David
74b63cb385
- Introduced `CompanyDetailBody` to maintain content identity and landmark separation from menu presentation. - Added `CompanyFixedNavigation` to ensure visibility of identity while allowing navigation without content displacement. - Created sidebar preference helper functions for reading and saving sidebar collapsed state. - Defined workspace navigation capacity budgets and modes to manage responsive behavior based on shell width. - Implemented focus management for workspace navigation to ensure proper accessibility and user experience. - Developed a custom hook `useWorkspaceCapacity` to observe shell size changes and update navigation capacity accordingly. - Updated documentation to reflect changes in responsive navigation architecture and testing procedures.
213 lines
6.3 KiB
CSS
213 lines
6.3 KiB
CSS
@import "@repo/shadcn-ui/globals.css";
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-display: swap;
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
src: url("./fonts/inter-variable.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Geist Mono";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("./fonts/geist-mono-latin-ext-variable.woff2") format("woff2");
|
|
unicode-range:
|
|
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Geist Mono";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("./fonts/geist-mono-latin-variable.woff2") format("woff2");
|
|
unicode-range:
|
|
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto Serif";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("./fonts/roboto-serif-latin-ext-variable.woff2") format("woff2");
|
|
unicode-range:
|
|
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto Serif";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url("./fonts/roboto-serif-latin-variable.woff2") format("woff2");
|
|
unicode-range:
|
|
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
@source "../../../modules";
|
|
@source "../../../packages/rdx-ui/src";
|
|
@source "../../../packages/shadcn-ui/src/components";
|
|
|
|
/* Los tokens del vendor se definen también en oscuro; se sobrescriben aquí
|
|
para que las utilidades y los elementos nativos usen las mismas familias. */
|
|
:root,
|
|
.dark {
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Roboto Serif", Georgia, "Times New Roman", serif;
|
|
--font-mono:
|
|
"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
monospace;
|
|
}
|
|
|
|
/* El shell conserva su identidad visual sin alterar los tokens semánticos del vendor. */
|
|
@theme {
|
|
--breakpoint-shell: 768px;
|
|
--breakpoint-inventory: 1100px;
|
|
--breakpoint-dashboard: 1200px;
|
|
--color-shell-exterior: #000;
|
|
--color-shell-content: var(--color-background);
|
|
--color-shell-header: #fff;
|
|
--color-shell-sidebar: #0e282c;
|
|
--color-shell-sidebar-top: #0c252a;
|
|
--color-shell-sidebar-bottom: #102c30;
|
|
--color-shell-sidebar-foreground: #f4f7f7;
|
|
--color-shell-sidebar-muted: rgb(255 255 255 / 82%);
|
|
--color-shell-accent: #00d2c1;
|
|
--color-shell-active-start: rgb(0 188 177 / 40%);
|
|
--color-shell-active-end: rgb(0 128 130 / 45%);
|
|
--color-shell-navy: #0c2850;
|
|
--color-shell-muted-navy: #607895;
|
|
--color-shell-border: #d1d9e2;
|
|
--color-shell-search-icon: #1d3e6e;
|
|
--radius-shell-control: 8px;
|
|
--radius-shell-popover: 10px;
|
|
--radius-shell: 20px;
|
|
--radius-panel: 12px;
|
|
--spacing-shell-sidebar: 228px;
|
|
--spacing-shell-sidebar-inset: 20px;
|
|
--spacing-shell-sidebar-collapsed: 72px;
|
|
--spacing-shell-header: 88px;
|
|
--spacing-shell-search: 41px;
|
|
--spacing-shell-navigation: 48px;
|
|
--spacing-shell-avatar: 35px;
|
|
--shadow-shell-popover: 0 3px 12px rgb(12 40 80 / 8%);
|
|
}
|
|
|
|
/* Enlaces de contenido y controles que navegan: criterio común en toda la aplicación. */
|
|
@layer components {
|
|
.app-link {
|
|
color: var(--primary);
|
|
cursor: pointer;
|
|
text-underline-offset: 4px;
|
|
}
|
|
|
|
.app-link:hover {
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.app-link:focus-visible {
|
|
outline: 2px solid var(--ring);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.app-link:disabled,
|
|
.app-link[data-disabled],
|
|
.app-link[aria-disabled="true"] {
|
|
cursor: default;
|
|
text-decoration-line: none;
|
|
}
|
|
}
|
|
|
|
/* Los diálogos necesitan separarse visualmente del fondo y de la capa de
|
|
superposición sin depender de una variante concreta de formulario. */
|
|
[data-slot="dialog-content"] {
|
|
box-shadow:
|
|
0 18px 45px rgb(12 40 80 / 16%),
|
|
0 4px 12px rgb(12 40 80 / 10%);
|
|
}
|
|
|
|
/* El diálogo activo necesita un límite inequívoco cuando aparece sobre otro. */
|
|
[data-slot="dialog-content"] {
|
|
border: 1px solid color-mix(in oklch, var(--foreground) 1%, var(--border));
|
|
box-shadow:
|
|
0 24px 60px rgb(12 40 80 / 24%),
|
|
0 8px 18px rgb(12 40 80 / 14%),
|
|
0 0 0 1px rgb(12 40 80 / 8%);
|
|
}
|
|
|
|
[data-slot="dialog-content"] [data-slot="dialog-header"] {
|
|
background-color: var(--popover);
|
|
}
|
|
|
|
/* La política discreta de capacidad vive en workspace-navigation-capacity.ts. */
|
|
[data-slot="workspace"] {
|
|
--workspace-header-offset: 3.5rem;
|
|
}
|
|
|
|
.workspace-global-navigation[data-mode="overlay"] {
|
|
display: none;
|
|
}
|
|
|
|
.workspace-company-layout {
|
|
display: grid;
|
|
min-height: calc(100dvh - var(--workspace-header-offset));
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-areas: "context" "main";
|
|
}
|
|
|
|
.company-fixed-navigation {
|
|
display: none;
|
|
}
|
|
|
|
.workspace-company-main {
|
|
grid-area: main;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.workspace-company-layout[data-navigation="fixed"] {
|
|
grid-template-columns: 240px minmax(0, 1fr);
|
|
grid-template-rows: 1fr;
|
|
grid-template-areas: "navigation main";
|
|
}
|
|
|
|
.workspace-company-layout[data-navigation="fixed"] > .company-fixed-navigation {
|
|
display: flex;
|
|
position: sticky;
|
|
top: var(--workspace-header-offset);
|
|
grid-area: navigation;
|
|
align-self: start;
|
|
min-height: 0;
|
|
height: calc(100dvh - var(--workspace-header-offset));
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.workspace-company-layout[data-navigation="fixed"] > [data-slot="company-context-bar"] {
|
|
display: none;
|
|
}
|
|
|
|
.workspace-company-layout[data-navigation="fixed"] > .workspace-company-main {
|
|
border-top: 0;
|
|
border-left: 1px solid var(--border);
|
|
}
|
|
|
|
[data-slot="workspace-scroll"] {
|
|
scroll-padding-block-start: calc(var(--workspace-header-offset) + 3rem);
|
|
}
|
|
|
|
[data-workspace-main],
|
|
[data-workspace-main] :is(h1, h2, input, button, a, select, textarea) {
|
|
scroll-margin-block-start: calc(var(--workspace-header-offset) + 3rem);
|
|
}
|
|
|
|
@media (width >= 768px) {
|
|
[data-slot="workspace"] {
|
|
--workspace-header-offset: 88px;
|
|
}
|
|
}
|