File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
@use "@fox/styles/abstracts" as fox;
.root {
display: flex;
flex-direction: column;
gap: fox.gap(3);
}
.tiles {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: fox.gap(4);
}
// 타일과 그 아래 글자 사이 — 시안 8px.
.thumbnail,
.slot {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: fox.gap(3);
}
.caption {
font-size: fox.font-size(label-sm);
color: fox.color(font-neutral-default);
}
// [+ 추가] 타일 아래 「추가 이미지」 — 시안은 「삭제」와 같은 11px 연한 글자다.
.captionSubtle {
font-size: fox.font-size(label-xsm);
color: fox.color(font-neutral-subtle);
}
.required {
color: fox.color(font-system-danger);
}
// 「+ 추가」 타일 — 기획 BO-MAL-002의 160×160 점선 상자. 크기는 옆 이미지 칸과 같아야 줄이
// 맞는다(토큰 스케일이 96px에서 끝나 리터럴로 둔다, 꾸미기아이템 썸네일과 같은 처리).
// 안의 글자는 시안대로 "+ 추가" 한 줄이다.
.addTile {
display: flex;
inline-size: 16rem;
block-size: 16rem;
align-items: center;
justify-content: center;
gap: fox.gap(1);
padding: 0;
margin: 0;
border: fox.border(1) dashed fox.color(border-neutral-subtle);
border-radius: fox.radius(3);
background: fox.color(surface-neutral-gray);
color: fox.color(font-neutral-subtler);
font-size: fox.font-size(label-sm);
cursor: pointer;
appearance: none;
&:hover {
background: fox.color(action-default-hover);
color: fox.color(font-neutral-default);
}
}