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
// FoxDisclosure — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// disclosure (391:4082 닫힘 · 391:4083 열림 · 섹션 391:4102)
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-disclosure fox-disclosure--open">
// <button class="fox-disclosure__tit" type="button" aria-expanded="true" aria-controls="…">
// <span class="fox-disclosure__icon">…svg…</span>
// <span class="fox-disclosure__title">제목</span>
// </button>
// <div class="fox-disclosure__contents" id="…">…</div> <!-- 열렸을 때만 -->
// </div>
//
// 캐럿이 제목 앞에 오고 바탕·테두리가 없다. 시안에 크기 축도 계열 축도 없어 변형이 없다.
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
// - 버튼 초기화(appearance/cursor/색 상속): 구조 규칙.
@use "abstracts" as fox;
.fox-disclosure {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: fox.gap(3);
inline-size: 100%;
// 제목 줄은 통째로 누르는 자리다. 글자 폭만 차지한다 — 시안이 hug다.
&__tit {
display: flex;
align-items: center;
gap: fox.gap(2);
margin: 0;
padding: 0;
border: none;
background: none;
text-align: start;
cursor: pointer;
}
&__icon {
display: inline-flex;
flex-shrink: 0;
inline-size: fox.icon(4);
block-size: fox.icon(4);
color: fox.color(element-neutral-strong);
}
&__title {
color: fox.color(font-neutral-strong);
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;
word-break: break-word;
}
&__contents {
display: flex;
flex-direction: column;
align-items: flex-start;
inline-size: 100%;
}
}