eomsangdonandClaude Opus 5.5
3ccb96fbdb
- ui_template_button.ts · .css 새로 — createButton 을 옮김(ui_template_elements 가 다시 내보냄 · 부르는 길 그대로) · createIconButton 새로(고스트 · 선 · 채움 · aria-pressed · 글자 기호 · title + aria-label) - 크기 = data-size 18 · 20 · 22 · 24 · 28 · 32 · 36 · 42 · 단마다 높이 · 글자 · 여백 · 아이콘 · 둥글기 값(--ui-size-*) · 입력 · 고르기 · 분할 · 탭이 같은 값을 읽음 - 단추 높이 = 글 한 줄 + 여백 + 테두리(높이를 박지 않음) — 크기를 안 준 옛 단추 · 페이지 여백 덮어쓰기 그대로 · 옛 size "sm" = 18 단(같은 꼴) · 글 링크 꼴 더함 - 상태 = 마우스 · 눌림을 data-state 로도 받음(부품 모음이 굳혀 보임) · 마우스 색 = --color-primary-hover · --color-accent-soft(옛 보라 별칭 대신) · 눌림 = 한 칸 내려앉음 - 아이콘 = Tabler 32 더함(지도 · 길 · 자 · 합 · 크레인 · 핀 · 나침반 · 설정 · 닫기 · 메뉴 · 되돌리기 …) + PageKit 여섯을 옮김 · .ui-icon 규칙 전역(ui_template_icons.css) - 부품 모음 = 단추 · 아이콘 단추 · 아이콘 견본 · 부품마다 여덟 단 한 줄 - 시험 test_552_2_button 새로(단 값 · 높이 식 · 옛 이름 · 상태 · 날 색 없음 · 아이콘) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
158 lines
3.0 KiB
CSS
158 lines
3.0 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);
|
|
}
|