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
// FoxTableRow — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// tbl-*-row-head · tbl-*-row-body
//
// 마크업 계약: `_fox-table.scss` 상단 참고.
//
// 줄 자체는 모양을 갖지 않는다 — 시안에서 바탕과 아래 선이 모두 칸에 걸려 있다.
// 좁은 화면에서 카드가 될 때만 줄이 테두리를 갖는다(그 규칙은 `_fox-table.scss`에 있다).
@use "abstracts" as fox;
.fox-table-row {
// 마지막 줄도 아래 선을 갖는다(시안). 칸이 그리므로 여기서는 둘 것이 없다.
border: none;
// 고른 줄. 칸이 바탕과 글자를 그리므로 여기서 자식만 골라 덮는다 — 후손 선택자를 쓰면
// 칸 안에 든 표까지 파랗게 물든다.
&--selected > .fox-table-cell {
background: fox.color(action-primary-hover);
color: fox.color(font-theme-primary);
}
// 행 전체가 눌리는 경우 — 누를 수 있다는 것이 보이고, 키보드 초점도 드러나야 한다.
&--clickable {
cursor: pointer;
// 바탕은 칸이 그린다 — 줄에 색을 주면 칸의 불투명한 바탕에 가려 아무것도 보이지 않는다.
// 고른 줄은 제 색을 지켜야 하므로 비켜 간다(둘 다 자식 선택자라 순서로만 갈린다).
&:not(.fox-table-row--selected):hover > .fox-table-cell {
background: fox.color(action-default-hover);
}
&:focus-visible {
outline: fox.border(2) solid fox.color(border-theme-primary);
outline-offset: calc(-1 * #{fox.border(2)});
}
}
}