eomsangdonandClaude Opus 5.5
aaac17db4c
- 대시보드 세부 페이지 `#/b01-account?view=ui-kit` 등록부 한 줄(시스템 관리 묶음 · SYSTEM_ADMIN 만) - ui_template_ui_kit.ts — 테마 칸마다 iframe(data-theme)에 지금 CSS 를 옮겨 실제 값으로 그림 - ui_template_ui_kit_parts.ts — 표준 부품 30 줄(552-2 기본 · 552-3 묶음 · 552-4 틀) · 머리 = 부품 규칙(자리 · 이름 · data-size · data-state · 색 · 아이콘) - 지금 PageKit · 공용 부품 견본(단추 · 입력 · 고르기 · 탭 · 배지 · 표 · ⋯ · 빈 상태 · 설정 줄 · 아이콘) · 나머지 빈 자리 - test_546 시스템 메뉴 기대값에 ui-kit 더함 · 새 지킴 시험 test_552_1_ui_kit Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
146 lines
2.6 KiB
CSS
146 lines
2.6 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;
|
|
width: 100%;
|
|
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);
|
|
}
|