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
//
// 마크업 계약 (React 밖 소비자용):
// <dl class="fox-description-list">
// <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>
//
// 줄마다 아래에 구분선이 있다 — 시안이 마지막 줄에도 그어 두었으므로 걷어내지 않는다.
//
// 토큰이 아닌 값:
// - 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;
}
}