- ui_template_find_list(.ts · .css) 새로 둠 — 거름 칸 2열 격자 · 찾기 칸 · 알림 줄 · 한 줄 결과 목록(꼬리표 · 이름 · 흐린 보조 글 · 단위) · 고름 하이라이트 · ↑ ↓ Enter - M02 로직 고르기 창(Labor_Pick)이 이 양식을 씀 — 구분 칸 · 층 단추 · data-pick 표지 그대로 - 확인 시나리오 resources/tester/ui_checks/51-9_고르기_찾기양식.js Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W4uKaV4ZBhsJN4GHG7yRj4
74 lines
1.3 KiB
CSS
74 lines
1.3 KiB
CSS
/* 공용 찾기 목록(ui_template_find_list.ts) — 거름 2열 · 결과 한 줄 · 이름 왼쪽 맞춤 */
|
|
.ui-find {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
min-height: 0;
|
|
}
|
|
|
|
.ui-find__filters {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.ui-find__hint {
|
|
margin: 0;
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.ui-find__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.ui-find__row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--spacing-8);
|
|
width: 100%;
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border: 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: none;
|
|
color: var(--color-text-body);
|
|
font: inherit;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui-find__row.is-active {
|
|
background: var(--color-mist-violet);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.ui-find__tag,
|
|
.ui-find__sub,
|
|
.ui-find__unit {
|
|
flex: none;
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.ui-find__tag {
|
|
min-width: 4.5em;
|
|
}
|
|
|
|
.ui-find__name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: left;
|
|
}
|
|
|
|
.ui-find__sub {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|