- 새 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>
121 lines
2.9 KiB
CSS
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;
|
|
}
|