File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// Basic 레이아웃 셸 — 헤더·사이드바·본문·풋터의 배치만 책임진다.
//
// @fox에 넣지 않고 레이아웃 전용으로 둔다(사용자 확정) — 로고·프로필처럼 이 앱에만 있는
// 구성을 전제로 한 배치라 포터블 디자인시스템에 들어갈 성격이 아니다. 대신 여백·색·서체는
// 전부 @fox 토큰을 거치므로 없는 이름을 쓰면 빌드가 실패한다.
//
// **뷰포트를 채우고 그 안에서만 스크롤한다.** 헤더는 항상 보이고 사이드바와 본문이 각자
// 스크롤한다 — 사이드바가 `overflow-y: auto`를 전제로 만들어져 있어(시안 높이 1251px이
// 뷰포트보다 크다) 행 높이가 뷰포트에 묶여 있어야 그 스크롤이 동작한다.
// globals.scss가 `html, body { block-size: 100% }`와 `body { display: flex }`를 깔아 두므로
// 이 셸은 그 flex 자식으로서 남은 높이를 그대로 받는다.
@use "@fox/styles/abstracts" as fox;
.shell {
display: flex;
flex: 1;
flex-direction: column;
// 자식이 넘칠 때 셸이 늘어나지 않게 한다 — 늘어나면 안쪽 스크롤 대신 페이지가 스크롤된다.
min-block-size: 0;
}
.body {
display: flex;
flex: 1;
min-block-size: 0;
}
.content {
display: flex;
flex: 1;
flex-direction: column;
// flex 자식의 기본 min-inline-size는 auto라, 넓은 표가 들어오면 줄어들지 않고 사이드바를
// 밀어낸다. 0으로 낮춰야 표 쪽이 스크롤된다.
min-inline-size: 0;
background: fox.color(background-default);
overflow-y: auto;
}
.main {
display: flex;
flex: 1;
flex-direction: column;
// 헤더의 좌우 여백과 같은 값이라 세로 기준선이 맞는다.
padding: fox.padding(8);
}
.footer {
flex-shrink: 0;
padding-block: fox.padding(6);
padding-inline: fox.padding(8);
border-block-start: fox.border(1) solid fox.color(border-neutral-subtler);
color: fox.color(font-neutral-subtler);
font-family: fox.font-family(body);
font-size: fox.font-size(label-sm);
line-height: 1.5;
letter-spacing: -0.025em;
text-align: center;
}