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
// FoxListToolbar — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) list-toolbar (3002:8151)
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-list-toolbar">
// <div class="fox-list-toolbar__base">
// <div class="fox-list-toolbar__left">…</div>
// <div class="fox-list-toolbar__right">…</div>
// </div>
// <div class="fox-list-toolbar__filter">…</div> <!-- 선택 -->
// </div>
//
// 좌우가 각각 `flex: 1`이라 반씩 나눠 갖고, 우측 내용은 오른쪽 끝으로 몰린다.
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지 않는다.
@use "abstracts" as fox;
.fox-list-toolbar {
display: flex;
inline-size: 100%;
flex-direction: column;
align-items: flex-start;
padding-block-end: fox.spacing(bottom-md);
&__base {
display: flex;
inline-size: 100%;
flex-shrink: 0;
align-items: center;
}
&__left,
&__right {
display: flex;
flex: 1 0 0;
min-inline-size: 0;
align-items: center;
gap: fox.gap(4);
}
&__right {
justify-content: flex-end;
}
&__sorts {
display: flex;
flex-shrink: 0;
align-items: center;
gap: fox.gap(3);
}
// 아래 줄 — 위 줄과 가로 구분선으로 나뉜다.
&__filter {
display: flex;
inline-size: 100%;
flex-shrink: 0;
align-items: center;
gap: fox.gap(3);
margin-block-start: fox.padding(5);
padding-block-start: fox.padding(5);
border-block-start: fox.border(1) solid fox.color(border-neutral-subtler);
}
}
// 총 건수 — 숫자만 굵고 색이 다르다.
.fox-list-count {
flex-shrink: 0;
margin: 0;
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(label-md);
font-weight: fox.font-weight(regular);
line-height: 1;
letter-spacing: -0.025em;
white-space: nowrap;
&__value {
color: fox.color(font-theme-primary);
font-weight: fox.font-weight(bold);
}
}