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;
// 트리 한 줄 — 깊이만큼 들여쓰고 캐럿·아이콘·이름이 차례로 선다.
.name {
display: flex;
align-items: center;
gap: fox.gap(2);
}
.toggle {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
inline-size: fox.icon(4);
font-size: fox.icon(4);
block-size: fox.icon(4);
border: none;
background: none;
color: fox.color(icon-neutral-default);
cursor: pointer;
> svg {
inline-size: fox.icon(3);
font-size: fox.icon(3);
block-size: fox.icon(3);
}
&:focus-visible {
outline: fox.border(2) solid fox.color(border-theme-primary);
outline-offset: fox.border(1);
}
}
// 자식이 없는 줄도 자리를 잡아 이름 시작 위치가 흔들리지 않게 한다.
.togglePlaceholder {
display: inline-block;
flex-shrink: 0;
inline-size: fox.icon(4);
}
.icon {
display: inline-flex;
flex-shrink: 0;
color: fox.color(icon-neutral-subtle);
> svg {
inline-size: fox.icon(3);
font-size: fox.icon(3);
block-size: fox.icon(3);
}
}
.actions {
display: flex;
align-items: center;
gap: fox.gap(1);
}