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-18
08-14
08-14
08-14
08-18
08-18
08-14
08-18
08-18
// FoxBulletList — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// bullet-list (484:5650 · 484:5723 · 섹션 484:5722)
//
// 마크업 계약 (React 밖 소비자용):
// <ul class="fox-bullet-list">
// <li class="fox-bullet-list-item …">…</li>
// <li class="fox-bullet-list-item …">…
// <ul class="fox-bullet-list fox-bullet-list--nested">…</ul>
// </li>
// </ul>
// 번호 목록은 `<ul>` 자리에 `<ol>`을 쓴다.
//
// 시안은 2·3단계를 형제 프레임으로 두고 왼쪽 여백만 20·40px 줬지만, 여기서는 진짜 중첩
// (`<ul>` 안의 `<ul>`)으로 낸다 — 목록의 단계를 스크린리더에 알리려면 그래야 한다.
// 한 단계마다 20px씩 들어가므로 3단계는 40px이 되어 시안과 같은 자리에 선다.
//
// 항목 사이 간격은 뿌리에서 12px, 중첩 안에서 8px이다(시안 그대로).
//
// 토큰이 아닌 값:
// - 목록의 margin/padding/list-style 0: `<ul>`·`<ol>`의 브라우저 기본값 지우기.
@use "abstracts" as fox;
.fox-bullet-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: fox.gap(4);
inline-size: 100%;
margin: 0;
padding: 0;
list-style: none;
// 안쪽 목록은 한 단계 들여쓰고 줄 간격이 좁다.
&--nested {
gap: fox.gap(3);
padding-inline-start: fox.padding(7);
}
// 첫 줄부터 2단계로 시작할 때 중첩 목록을 매다는 빈 칸. 보이는 것이 없다.
&__hanger {
inline-size: 100%;
}
}