File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-14
08-14
08-14
08-14
// FoxTab — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) tab (171:14016 · 섹션 391:4497)
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-tab fox-tab--line fox-tab--lg">
// <div class="fox-tab__list" role="tablist" aria-label="탭">
// <button class="fox-tab-item fox-tab-item--active" role="tab" aria-selected="true">…</button>
// <button class="fox-tab-item" role="tab" aria-selected="false" tabindex="-1">…</button>
// </div>
// </div>
//
// 크기가 배치를 정한다.
// - lg: 탭이 폭을 고르게 나눠 갖고, 목록 전체에 옅은 밑줄이 깔린다.
// - md: 탭이 글자만큼만 차지하고 8px 간격으로 선다. 목록 밑줄은 없다.
// 아래 여백도 크기마다 다르다(시안 spacing/bottom/*).
//
// line 계열에서 고른 탭의 4px 밑줄은 항목이 그리고, 그 아래 1px 선은 목록이 그린다.
// 둘이 겹치는 자리에서 굵은 선이 이겨야 하므로 항목 밑줄을 목록 선 위로 끌어올린다.
@use "abstracts" as fox;
.fox-tab {
inline-size: 100%;
&__list {
display: flex;
align-items: center;
}
// ── 크기 ──────────────────────────────────────────────────────────────────
&--lg {
padding-block-end: fox.spacing(bottom-lg);
}
// 탭이 폭을 고르게 나눠 갖는다.
&--lg &__list {
inline-size: 100%;
}
&--lg .fox-tab-item {
flex: 1 0 0;
min-inline-size: 0;
}
&--md {
padding-block-end: fox.spacing(bottom-md);
}
&--md &__list {
gap: fox.gap(3);
}
&--md .fox-tab-item {
flex-shrink: 0;
}
// ── line 계열 ─────────────────────────────────────────────────────────────
// lg만 목록 전체에 밑줄이 깔린다(시안).
&--line#{&}--lg &__list {
border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
background: fox.color(surface-neutral-default);
}
// 고른 탭의 굵은 밑줄이 목록의 옅은 선을 덮는다.
&--line#{&}--lg .fox-tab-item {
margin-block-end: calc(-1 * #{fox.border(1)});
}
// ── fill 계열 ─────────────────────────────────────────────────────────────
// lg는 세그먼트 컨트롤이다 — 목록이 테두리와 둥근 모서리를 갖고 항목이 그 안에 갇힌다.
// `overflow: clip`이 있어야 끝 칸의 채운 색이 둥근 모서리를 넘지 않는다.
&--fill#{&}--lg &__list {
overflow: clip;
border: fox.border(1) solid fox.color(border-neutral-subtle);
border-radius: fox.radius(4);
background: fox.color(surface-neutral-default);
}
}