d2b4ff2018
Скилл переносится из ~/.claude/skills/aura-design в репозиторий обвязки: SKILL.md, справочники reference/ и набор kit/ (токены, base.css, компоненты React, оболочка AppShell, тест токенов, test-setup, примеры входа). install.sh ставит его в ~/.claude/skills/aura-design, --check его видит. tests/test-aura-design.sh проверяет структуру и инварианты набора. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
42 lines
3.1 KiB
CSS
42 lines
3.1 KiB
CSS
/* оболочка: боковая панель и страница; прокрутка — у окна, панель липнет к его верху */
|
||
.shell{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh}
|
||
/* у элемента сетки с margin-inline:auto ширина — по содержимому; явная 100% держит страницу в своей дорожке */
|
||
.shell>.page{width:100%;box-sizing:border-box}
|
||
.sidebar{
|
||
position:sticky;top:0;height:100vh;height:100dvh;width:240px;box-sizing:border-box;z-index:20;
|
||
display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);
|
||
border-right:1px solid var(--color-border-default);background:var(--color-bg-surface);
|
||
}
|
||
.sidebar.is-collapsed{width:64px;padding-inline:var(--space-2);align-items:center}
|
||
.sidebar__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:var(--control-h)}
|
||
.sidebar__brand{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:700;color:var(--color-text-primary);white-space:nowrap;padding-left:var(--space-2)}
|
||
.sidebar__nav{display:flex;flex-direction:column;gap:var(--space-1);align-self:stretch}
|
||
.sidebar__link{
|
||
display:flex;align-items:center;gap:var(--space-3);height:var(--control-h-lg);padding:0 var(--space-3);box-sizing:border-box;
|
||
border-radius:var(--control-radius);color:var(--color-text-secondary);text-decoration:none;font-weight:600;white-space:nowrap;
|
||
}
|
||
.sidebar__link:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}
|
||
.sidebar__link[aria-current="page"]{background:var(--color-bg-selected);color:var(--color-action-primary)}
|
||
.sidebar__link:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
|
||
.is-collapsed .sidebar__nav{align-items:center}
|
||
.is-collapsed .sidebar__link{width:var(--control-h-lg);padding:0;justify-content:center}
|
||
.sidebar__spacer{flex:1 1 auto}
|
||
.sidebar__foot{
|
||
display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);align-self:stretch;
|
||
padding-top:var(--space-3);border-top:1px solid var(--color-border-default);
|
||
}
|
||
.is-collapsed .sidebar__foot{flex-direction:column}
|
||
/* узкий экран (<640 px): закреплённая строка с «Меню» и выезжающая панель поверх страницы */
|
||
.topbar{
|
||
position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-2);height:56px;box-sizing:border-box;
|
||
padding:0 var(--space-4) 0 var(--space-2);border-bottom:1px solid var(--color-border-default);background:var(--color-bg-surface);
|
||
}
|
||
.topbar .sidebar__brand{padding-left:0}
|
||
.sidebar-backdrop{position:fixed;inset:0;z-index:30;background:var(--color-overlay)}
|
||
.sidebar.is-drawer{position:fixed;left:0;top:0;bottom:0;z-index:31;width:min(300px,85vw);height:auto;box-shadow:var(--shadow-popover)}
|
||
/* --topbar-h: липкие элементы страницы ставь на top:var(--topbar-h,0) — на телефоне они встанут под строку */
|
||
@media (max-width:639px){
|
||
.shell{display:block}
|
||
:root{--topbar-h:56px}
|
||
}
|