Grid e Layout
O Shell do Admin, o espaçamento de 3,5 px, os breakpoints e os ritmos de página.
O Admin vive dentro do Shell: uma moldura escura com trilho e painel, e o conteúdo flutuando sobre ela. Dentro do conteúdo, o ritmo vertical vem de três espaços e de container queries, não de @media da janela.
Shell
| Peça | Token | Valor | Uso |
|---|---|---|---|
| Trilho | --rx-shell-rail-width | — | Coluna das áreas e da marca; sempre visível. |
| Painel | --rx-shell-panel-width | — | Sidebar da área aberta; recolhe para o trilho. |
| Topbar | --rx-shell-topbar-height | — | Altura da barra superior do conteúdo. |
| Margem do painel | --rx-shell-inset | — | Respiro entre a moldura e o painel de conteúdo (de 769 px para cima). |
| Raio do painel | --rx-shell-radius | — | Mesmo valor de --radius. |
| Celular | --rx-shell-mobile-breakpoint | — | Abaixo disso não há margem nem raio, e o painel vira gaveta. |
Espaçamento
--spacing vale 3,5 px. Use as utilities (p-4, gap-6), nunca pixels. A medida abaixo é lida do navegador.
| Exemplo | Classe | Uso |
|---|---|---|
p-1 · gap-1— | Respiro mínimo entre ícone e texto. | |
p-2 · gap-2— | Espaço interno (--rx-gap-inner), entre itens de um bloco. | |
p-3 · gap-3— | Padding de controles compactos. | |
p-4 · gap-4— | Espaço entre blocos (--rx-gap-block) e padding de cartão. | |
p-6 · gap-6— | Padding de Widget e de painéis. | |
p-8 · gap-8— | Espaço entre seções (--rx-gap-section). | |
p-12 · gap-12— | Respiro de página em telas largas. |
Ritmo da Página
PageStack aplica os três espaços da página: seção (8 unidades), bloco (4) e interno (2). O PageHeader traz título, descrição de até 62 caracteres e ações.
Breakpoints
A janela só decide o Shell; o conteúdo responde ao tamanho do próprio contêiner.
| Prefixo | Largura mínima | Observação |
|---|---|---|
sm: | 40rem (640 px) | Celular grande. |
md: | 48rem (768 px) | Tablet; o Shell vira painel flutuante a partir de 769 px. |
lg: | 64rem (1.024 px) | Notebook. |
xl: | 80rem (1.280 px) | Tela larga. |
2xl: | 96rem (1.536 px) | Tela muito larga. |
Containers
| Container | Regra | Efeito |
|---|---|---|
rx-ph | até 40rem | PageHeader: ações descem para baixo do título. |
rx-fb | até 40rem | FilterBar: os campos viram o painel Filtros. |
rx-kpi | até 44rem e até 19rem | KPI: empilha as métricas e depois esconde a mini-tendência. |
Faça
Deixar o conteúdo responder ao contêiner (@container) e usar PageStack para o ritmo.
Evite
Margens soltas entre blocos ou @media de janela para ajustar um componente interno.