Files
Aislo/ui_template/ui_template_calc_row.css
eomsangdonandClaude Opus 5.5 48d3d4e1af feat(790-1): 단가산출 줄 식 시트 — 상세 첫 탭 「시트」 · 이름 | 식 | 값 | 비목 · 산출서 보기 · 상태줄 금액 셋
- 새 M02_MasterTemplete_Sangeun_Sheet.ts(+ .css) — 보기 고르기(시트 + 옛 넷 그대로) · 줄 갈래(근거 · 옵션 · 변수 · 계산 · 자원 · 율 · 소계 · 합계) · 칸에서 옵션 · 품 · 단가 · 율 % · 빼기 · 되살림 · 되돌림 · [+ 자원 줄] · [+ 율 줄] · 고칠 때마다 서버 셈(최신 응답만) · M01 과 다른 줄 색 띠
- 새 logic/M02_Sangeun_Sheet_Model.ts — 시트 줄 · 읽기 쉬운 식(텍스트 수식 이름글 · 별칭) · 엔진 날식 숨김 · 산출서 한 줄 글 · 상태줄(M01 원래 · 지금 · 고치기 전)
- ui_template_calc_row 시트 줄(createCalcSheetRow · is-changed) + 부품 모음 견본 한 줄
- Sangeun_Detail = 탭 등록만(createViewPicker → createSangeunSheet)
- 시험 test_790_1 새 · test_721 단추 자리 단언을 새 보기 고르기 이름으로 고침(createViewPicker 걷음)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-05 17:05:43 +09:00

121 lines
2.9 KiB
CSS

/* 계산 줄(557-2) — 이름 | 값 112 | 덧칸 · 식 줄 = 이름 | 식 | 값 112 · 테두리는 입력 · 고르기 부품만 */
.ui-calc-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 112px minmax(0, 0.8fr);
align-items: center;
gap: var(--spacing-8);
min-height: var(--control-height-sm);
}
.ui-calc-row--formula {
grid-template-columns: max-content minmax(0, 1fr) 112px;
}
.ui-calc-row__label {
margin: 0;
color: var(--color-text-secondary);
}
.ui-calc-row__label--select {
display: flex;
align-items: center;
gap: var(--spacing-8);
}
.ui-calc-formula {
margin: 0 0 0 var(--spacing-8);
font-size: var(--text-body-sm);
color: var(--color-text-secondary);
}
.ui-calc-row .ui-calc-formula {
margin: 0;
font-size: var(--text-caption);
}
.ui-calc-row__hint {
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
/* 계산 칸 — 테두리 없이 글자만 · 숫자 자리 맞춤 */
.ui-calc-row__out,
.ui-calc-row__value {
padding: 0 var(--spacing-8);
color: var(--color-text-body);
font-variant-numeric: tabular-nums;
text-align: right;
}
.ui-calc-row__value {
text-align: left;
font-weight: var(--font-weight-medium);
}
.ui-calc-row__out.is-key {
font-weight: var(--font-weight-bold);
}
.ui-calc-row__in {
width: 100%;
min-width: 0;
box-sizing: border-box;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* 줄에 바로 놓인 고르기는 값 칸 + 덧칸 — 선택지 글이 안 잘리게 */
.ui-calc-row > .ui-calc-row__select {
grid-column: 2 / 4;
justify-self: start;
width: auto;
}
/* 식 칸에 놓인 입력(하상경사 1 / ☐)은 값 칸 폭 */
.ui-calc-row--formula > .ui-calc-row__in:nth-child(2) {
justify-self: start;
width: 112px;
}
/* 시트 줄(790-1) — 이름 | 식 | 값 112 | 꼬리 · 좁은 상자(560 아래)는 두 줄 · 고친 줄 = 왼쪽 경고 띠 */
.ui-calc-row--sheet {
grid-template-columns: minmax(96px, 0.7fr) minmax(0, 2fr) 112px minmax(56px, max-content);
padding: var(--spacing-4);
border-bottom: 1px solid var(--color-border);
}
.ui-calc-row--sheet > :nth-child(4) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-4);
}
.ui-calc-row--sheet.is-changed {
box-shadow: inset 3px 0 0 var(--color-warning);
background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}
@container (max-width: 560px) {
.ui-calc-row--sheet {
grid-template-columns: minmax(0, 1fr) 112px;
}
.ui-calc-row--sheet > :nth-child(2) {
grid-row: 2;
grid-column: 1 / -1;
}
.ui-calc-row--sheet > :nth-child(4) {
grid-row: 3;
grid-column: 1 / -1;
justify-content: flex-start;
}
}
/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
:is(.ui-calc-row, .ui-calc-row__label--select)[hidden] {
display: none !important;
}