File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-14
08-19
08-19
08-14
08-14
08-18
08-18
08-14
08-18
08-18
08-19
08-19
// FoxTableCell — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// tbl-basic-cell-head (425:5694) · tbl-basic-cell-body (425:5701)
// tbl-list-cell-head (391:4116) · tbl-list-cell-body (391:4150)
// tbl-form-cell-head (391:4307) · tbl-form-cell-body (391:4337)
//
// 마크업 계약: `_fox-table.scss` 상단 참고.
//
// 여섯 시안이 한 컴포넌트다 — 바탕(머리 회색 / 본문 흰색)과 아래 선이 모두 같고, 여백·
// 글자·기본 정렬만 표 타입에 따라 달라진다. 그 값은 표가 커스텀 프로퍼티로 내려보낸다.
//
// 열 이름(`__label`)은 카드로 접혔을 때만 보인다 — 표로 있을 때는 머리행이 이미 같은 말을
// 한다.
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
@use "abstracts" as fox;
.fox-table-cell {
padding-inline: var(--fox-table-cell-padding-inline);
border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(body-md);
font-weight: fox.font-weight(regular);
line-height: 1.5;
letter-spacing: -0.025em;
text-align: var(--fox-table-body-align);
vertical-align: middle;
&--head {
min-inline-size: var(--fox-table-head-min-inline-size);
min-block-size: var(--fox-table-cell-min-block-size);
padding-block: var(--fox-table-head-padding-block);
background: fox.color(surface-neutral-gray);
font-family: var(--fox-table-head-font-family);
font-size: var(--fox-table-head-font-size);
font-weight: var(--fox-table-head-font-weight);
line-height: var(--fox-table-head-line-height);
text-align: var(--fox-table-head-align);
}
&--body {
padding-block: var(--fox-table-body-padding-block);
background: fox.color(surface-neutral-default);
}
// 그 줄을 대표하는 칸. 시안 list 표의 제목 열이 이렇다.
&--emphasis {
font-family: fox.font-family(title);
font-size: fox.font-size(heading-xsm);
font-weight: fox.font-weight(bold);
line-height: 1.4;
}
// 칸이 직접 정한 정렬은 표 기본값을 이긴다.
&--start { text-align: start; }
&--center { text-align: center; }
&--end { text-align: end; }
// 표로 있을 때는 머리행이 열 이름을 말하므로 감춘다.
&__label {
display: none;
}
@include fox.mobile {
// 카드로 접힌 줄 안에서만 열 이름이 보인다.
.fox-table--list & {
display: flex;
gap: fox.gap(3);
align-items: baseline;
text-align: start;
}
.fox-table--list &__label {
display: block;
flex-shrink: 0;
color: fox.color(font-neutral-subtle);
font-family: fox.font-family(title);
font-size: fox.font-size(heading-2xsm);
font-weight: fox.font-weight(bold);
line-height: 1.4;
}
.fox-table--list &__content {
flex: 1 0 0;
min-inline-size: 0;
}
}
}