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-18
08-19
08-19
// FoxDescriptionList — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) modal 5227:809의 form-list
// inline 변형: FOX PAY_2.0(VqFRgEzMW4CuDLDwa5vYSn) BO-MAL-003 2805:1760의 등록 정보
//
// 마크업 계약 (React 밖 소비자용):
// <dl class="fox-description-list [fox-description-list--inline]">
// <div class="fox-description-list__item">
// <dt class="fox-description-list__term"><span class="fox-form-label">이름</span></dt>
// <dd class="fox-description-list__description">홍길동</dd>
// </div>
// </dl>
//
// 줄마다 아래에 구분선이 있다 — 시안이 마지막 줄에도 그어 두었으므로 걷어내지 않는다.
// `--inline`은 쌍을 가로 한 줄에 놓고 구분선을 긋지 않는다. 이름은 한 단계 작고 옅게(label-sm ·
// subtle), 값은 body-sm — 시안 실측(12/13px)과 같다. 쌍 사이 60px는 토큰에 없어 gap-11(64px)로
// 맞춘다.
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일(body/md)의 값이나 Figma가 변수로
// export하지 않는다.
@use "abstracts" as fox;
.fox-description-list {
display: flex;
inline-size: 100%;
flex-direction: column;
margin: 0;
// flex 부모가 `align-items: flex-start`여도 가로로 꽉 차게 한다 — 이 목록은 줄마다 구분선을
// 긋기 때문에 폭이 내용에 맞춰 줄면 선이 중간에서 끊긴 것처럼 보인다.
align-self: stretch;
&__item {
display: flex;
inline-size: 100%;
flex-direction: column;
align-items: flex-start;
gap: fox.gap(3);
padding-block: fox.padding(6);
border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
}
&__term {
margin: 0;
}
&__description {
inline-size: 100%;
margin: 0;
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;
}
&--inline {
flex-flow: row wrap;
gap: fox.gap(11);
}
&--inline &__item {
inline-size: auto;
gap: fox.gap(2);
padding-block: 0;
border-block-end: 0;
}
&--inline &__term .fox-form-label {
color: fox.color(font-neutral-subtle);
font-size: fox.font-size(label-sm);
}
&--inline &__description {
inline-size: auto;
font-size: fox.font-size(body-sm);
}
}