eomsangdonandClaude Opus 5.5
c03228778b
- 더함: 슬라이더 · 보조 글 · 떠 있는 판 · 목록 줄 · 띠 알림 · 값 목록 · 범례 (기본 13 · 묶음 21 · 틀 3) - 규칙 머리: 옛 size sm = 18 · compact = 32 · 지금 높이는 가까운 단(같은 거리면 표 · 도구 = 작은 단) - iframe content-box — 테두리 2 px 때문에 생기던 안 스크롤 막대 없앰 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
147 lines
2.8 KiB
CSS
147 lines
2.8 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);
|
|
}
|