File name
Commit message
Commit date
File name
Commit message
Commit date
09-14
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);
}
}