File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-18
08-14
08-14
08-18
08-19
08-19
// FoxListContainer — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) container (3019:8608)
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-list-container">
// …fox-page-header…
// <section class="fox-list-container__section">
// …fox-list-toolbar… …fox-table… …fox-pagination…
// </section>
// </div>
//
// 세로로만 쌓는다 — 도구 줄과 페이지네이션이 각자 자기 여백을 갖고 있어 여기서 간격을 더하지
// 않는다(더하면 시안보다 벌어진다).
@use "abstracts" as fox;
.fox-list-container {
display: flex;
inline-size: 100%;
flex-direction: column;
&__section {
display: flex;
inline-size: 100%;
flex-direction: column;
}
// 열이 많은 표는 화면보다 넓다. 눌러 담으면 시안 폭이 무너지므로 여기서 가로로 스크롤한다.
&__table {
inline-size: 100%;
overflow-x: auto;
}
}
// 표가 지정된 열 폭 아래로 눌리지 않게 한다 — 넓을 때만 넘치고, 좁으면 100%로 앉는다.
// 좁은 화면에서는 목록표가 카드로 바뀌어(FoxTable의 mobile 규칙) 스크롤이 필요 없으므로
// PC에서만 건다.
@include fox.pc {
.fox-list-container__table > .fox-table {
min-inline-size: max-content;
}
}