eomsangdonandClaude Opus 5.5
2c51bb53a6
- ui_template_input.ts · .css 새로 — createInputField · createSelectField 를 옮김(ui_template_elements 가 다시 내보냄 · 부르는 길 그대로) · size(data-size 단 높이) · unit(칸 안 단위) · multiline · createSlider(이름 | 막대 | 값 글 3열) - 옛 compact 는 단을 안 붙임 — 옛 작은 칸 30 그대로(32 로 맞추면 페이지 칸이 바뀜 · 553 에서 단으로 옮김) - 입력 · 고르기 상태 = 마우스 선 짙게 · 막힘 흐림 · 오류 빨강(aria-invalid 같이) · 고르기 화살표 = 보라 → 보조 글 색(밝음 · 어두움 따로) - 체크 = 라디오 · 칩 꼴 더함(createCheckbox 부름 그대로) · 켜기(스위치 · 색 점 칩) · 분할 고르기(대시보드 .b01-sys-seg 꼴) · 탭(밑줄 · 보조 알약 = 옛 .ui-subtabs · 수 배지) - 배지(알약 · 수 · 램프 ✓ ✗ · 점 · 옛 .ui-tag 같이) · 툴팁 제자리 상자(tooltipBox) · 보조 글(흐린 · 안내 · 오류 ✗ · 경고 ! · 성공 ✓) - 부품 모음 기본 묶음 13 줄 모두 새 부품 견본 · 상태 다섯 칸 · 여덟 단 한 줄 - 시험 test_552_2_parts 새로(머리 · 옛 이름 · 크기 단 · 상태 · 날 색 없음 · 부품 모음 13) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
165 lines
3.1 KiB
CSS
165 lines
3.1 KiB
CSS
/* 부품 모음 화면(552-1) — 밝음 · 어두움 두 칸 · 칸 안은 iframe 문서 */
|
|
.b01-pg.ui-kit {
|
|
max-width: none;
|
|
}
|
|
|
|
.ui-kit__panes {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
|
|
gap: 16px;
|
|
align-items: start;
|
|
}
|
|
|
|
.ui-kit__pane-title {
|
|
margin: 0 0 8px;
|
|
font-size: var(--text-body-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ui-kit__frame {
|
|
display: block;
|
|
box-sizing: content-box; /* 높이 = 문서 높이(테두리 밖) — 안 스크롤 막대 없음 */
|
|
width: calc(100% - 2px);
|
|
min-height: 240px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards, 10px);
|
|
}
|
|
|
|
/* iframe 문서 */
|
|
.ui-kit__doc {
|
|
margin: 0;
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
/* 셸 별칭만 받고 셸 배치(100dvh · grid)는 풂 */
|
|
.b01-shell.ui-kit__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-height: 0;
|
|
padding: 16px;
|
|
}
|
|
|
|
.ui-kit__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ui-kit__group-title {
|
|
margin: 0;
|
|
font-size: var(--text-body-sm);
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.ui-kit__part {
|
|
padding: 12px;
|
|
background: var(--color-surface-raised);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards, 10px);
|
|
}
|
|
|
|
.ui-kit__part-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 4px 8px;
|
|
margin-bottom: 8px;
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.ui-kit__part-name {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.ui-kit__part-flag {
|
|
padding: 0 6px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.ui-kit__states {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
.ui-kit__legend {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
padding: 4px 12px;
|
|
background: var(--color-bg);
|
|
font-size: var(--text-caption);
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.ui-kit__state {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 상태가 기본 하나뿐인 견본(표 · 배지 …)은 다섯 칸을 다 씀 */
|
|
.ui-kit__state--wide {
|
|
grid-column: 1 / -1;
|
|
overflow: visible;
|
|
}
|
|
|
|
.ui-kit__slot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 32px;
|
|
border: 1px dashed var(--color-border);
|
|
border-radius: 8px;
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.ui-kit__demo-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ui-kit__sizes {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ui-kit__size {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 40px;
|
|
border: 1px dashed var(--color-accent);
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* 부품 여덟 단 한 줄 */
|
|
.ui-kit__part-sizes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px dashed var(--color-border);
|
|
}
|
|
|
|
/* 견본 세로 묶음(탭 두 꼴) */
|
|
.ui-kit__demo-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|