eomsangdonandClaude Opus 5.5
b2138e213d
- 새 D03_PlanAnalysis_UI_DrawPanel.ts — createDrawKindFields(노드 판 598-4 가 다시 씀) · 그리기 칸 몸 - 「둘 다」 → 「길이·기울기 고정」 · 칸 설명 글 걷음(요구 463-6) - 부품 마디 고름에 columns 덧(여러 줄 꼴) — 한 줄 꼴 그대로 - 지도 도구줄 연도 마커 단추 · 공용 표 줄 걷음 → 그리기 칸 끌기 단추 - 시험 553_4 · 568_1 고침(마커 자리 옮김 · 방식 칸 새 파일) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
68 lines
1.9 KiB
CSS
68 lines
1.9 KiB
CSS
/* 부품 「분할 고르기」(552-2) — 대시보드 `.b01-sys-seg` 꼴 · 단 값은 ui_template_button.css */
|
|
.ui-segment {
|
|
display: inline-flex;
|
|
height: var(--ui-size-h);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--ui-size-radius);
|
|
overflow: hidden;
|
|
}
|
|
.ui-segment__item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--ui-size-gap);
|
|
padding: 0 var(--ui-size-px);
|
|
border: 0;
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-text-secondary);
|
|
font: inherit;
|
|
font-size: var(--ui-size-font);
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition:
|
|
background-color var(--transition-fast),
|
|
color var(--transition-fast);
|
|
}
|
|
.ui-segment__item + .ui-segment__item {
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
.ui-segment__item svg {
|
|
width: var(--ui-size-icon);
|
|
height: var(--ui-size-icon);
|
|
}
|
|
.ui-segment__item:is(:hover, [data-state="hover"]):not(:disabled) {
|
|
background: var(--color-hover);
|
|
color: var(--color-text);
|
|
}
|
|
.ui-segment__item[aria-checked="true"] {
|
|
background: var(--color-accent-soft);
|
|
color: var(--color-accent);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
.ui-segment__item:is(:active, [data-state="active"]):not(:disabled) {
|
|
box-shadow: inset 0 1px 2px var(--color-scrim);
|
|
}
|
|
.ui-segment__item:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 여러 줄(columns) — 칸 사이 1px 틈에 틀 색 바탕이 보여 줄 · 칸 나눔선 */
|
|
.ui-segment[data-columns] {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--ui-segment-columns), 1fr);
|
|
gap: 1px;
|
|
height: auto;
|
|
background: var(--color-border);
|
|
}
|
|
.ui-segment[data-columns] > .ui-segment__item {
|
|
height: var(--ui-size-h);
|
|
border-left: 0;
|
|
}
|
|
|
|
/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
|
|
:is(.ui-segment, .ui-segment__item)[hidden] {
|
|
display: none !important;
|
|
}
|