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
// FoxSortableList — 항목 순서를 끌어서(또는 방향키로) 바꾸는 목록.
//
// 시안에 정렬 목록 컴포넌트가 없어 기획 문구("추가 이미지는 드래그로 순서를 바꾼다",
// BO-MAL-002 ⑤)만으로 만들었다(사용자 확정). 모양은 최소한으로 둔다 — 끌고 있는 항목·놓을
// 자리 표시뿐이고, 항목 본문은 호출부가 그린다. 손잡이 없이 항목 전체를 집는다(사용자 확정).
//
// 마크업 계약 (React 밖 소비자용):
// <ul class="fox-sortable-list fox-sortable-list--horizontal" aria-label="…">
// <li class="fox-sortable-list__item [--dragging|--over]" tabindex="0" draggable aria-label="…">
// <div class="fox-sortable-list__body">…항목 본문…</div>
// </li>
// </ul>
//
// 토큰이 아닌 값:
// - 끌고 있는 항목의 opacity: 상태 표현이라 색 토큰이 없다. 관례값 0.4.
// - cursor grab/grabbing: 구조 규칙.
@use "abstracts" as fox;
.fox-sortable-list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: fox.gap(4);
padding: 0;
margin: 0;
list-style: none;
&--vertical {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
}
&__item {
position: relative;
display: flex;
align-items: flex-start;
border-radius: fox.radius(3);
// 놓을 자리 테두리가 나타날 때 항목이 밀리지 않도록 투명 테두리를 미리 둔다.
outline: fox.border(2) solid transparent;
outline-offset: fox.number(2);
cursor: grab;
&:active {
cursor: grabbing;
}
// 키보드로 잡았을 때 — 초점 테두리가 놓을 자리 표시와 같은 자리를 쓴다.
&:focus-visible {
outline-color: fox.color(border-theme-primary);
}
&--dragging {
opacity: 0.4;
}
&--over {
outline-color: fox.color(border-theme-primary);
}
}
&__body {
min-inline-size: 0;
flex: 1 1 auto;
}
&--disabled &__item {
outline: 0;
cursor: default;
}
}