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
// FoxSnackbarList — 시안: 통합관리자페이지 디자인시스템 Figma snackbar-list
//
// 스낵바가 여러 개일 때 세로로 쌓는 묶음이다. 배치만 갖는다 — 무엇이 몇 개 떠 있는지는
// 호출부가 소유한다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-snackbar-list" role="group">
// …fox-snackbar…
// …fox-snackbar…
// </div>
//
// 자식 폭과 묶음 폭이 같은 640px이다 — 묶음이 자식을 늘이거나 줄이지 않고, `align-items`가
// `flex-start`라 자식이 자기 폭을 그대로 갖는다(시안 지정).
//
// 토큰이 아닌 값:
// - ⚠️ `inline-size: 64rem`: **시안의 폭(640px)을 그대로 적용해 둔 것이다.** 자식
// `fox-snackbar`와 같은 값이고 근거도 같다 — 토큰 스케일에 640이 없다. 폭을 바꿔야 하는
// 자리는 호출부가 `className`으로 덮는다.
// - display / flex-direction / align-items: 구조 규칙.
//
// ⚠️ 모바일에서는 자식과 같은 이유로 고정 폭을 푼다 — 640px을 그대로 두면 화면 밖으로 넘쳐
// 잘린다(`fox-snackbar` 상단 주석 참고).
@use "@fox/styles/abstracts" as fox;
.fox-snackbar-list {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: fox.gap(3);
inline-size: 64rem;
// 모바일에서는 부모 폭을 채운다. 자식(`fox-snackbar`)도 같은 규칙을 스스로 갖는다.
@include fox.mobile {
inline-size: 100%;
}
}