File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-14
08-18
08-19
08-19
// FoxPageHeader — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) page-tit-area (3002:6823)
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-page-header">
// <div class="fox-page-header__main">
// …fox-breadcrumb… <!-- 선택 -->
// <h1 class="fox-page-header__title">제목</h1>
// <p class="fox-page-header__description">설명</p> <!-- 선택 -->
// </div>
// <div class="fox-page-header__actions">…</div> <!-- 선택 -->
// </div>
//
// 제목이 남는 폭을 먹고 오른쪽에 24px 간격이 남는다. 시안에는 그 자리에 들어간 것이 없지만
// 배치가 자리를 비워 두고 있어 `__actions`로 열어 둔다.
//
// 본문과의 간격(아래 여백)을 머리말이 갖는다 — 시안이 그렇게 묶어 놓았다. 화면마다 따로
// 띄우지 않아도 된다.
//
// 설명 한 줄은 가맹몰 시안(FOX-PAY_2.0 2805:635 머리말)에서 왔다 — 제목과 같은 세로 쌓임에
// 서고 글자는 FoxHeadingGroup의 설명과 같은 토큰이다.
//
// 토큰이 아닌 값:
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
// - `<h1>`·`<p>`의 브라우저 기본 여백 0: UA 기본값 지우기.
@use "abstracts" as fox;
.fox-page-header {
display: flex;
align-items: flex-start;
gap: fox.gap(7);
inline-size: 100%;
padding-block-end: fox.spacing(bottom-xlg);
// 현재 위치와 제목이 세로로 쌓이고 남는 폭을 먹는다.
&__main {
display: flex;
flex: 1 0 0;
flex-direction: column;
align-items: flex-start;
gap: fox.gap(3);
min-inline-size: 0;
}
&__title {
inline-size: 100%;
margin: 0;
color: fox.color(font-neutral-strong);
font-family: fox.font-family(title);
font-size: fox.font-size(display-md);
font-weight: fox.font-weight(bold);
line-height: 1.5;
letter-spacing: -0.025em;
word-break: break-word;
}
&__description {
inline-size: 100%;
margin: 0;
color: fox.color(font-neutral-subtle);
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;
}
// 제목 옆에 서고 줄어들지 않는다. 오른쪽 끝에 붙는 것을 선언으로 못박는다 — 제목 칸이
// 남는 폭을 먹어 밀려나는 것에 기대면, 제목 칸이 없거나 좁아질 때 자리가 흔들린다.
&__actions {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: flex-end;
margin-inline-start: auto;
}
// 여러 개가 들어와 줄이 넘어가도 오른쪽에 맞춘다.
&__actions > * {
justify-content: flex-end;
}
}