eomsangdonandClaude Sonnet 5.5
10984109b4
- 옵션 칸 = 상자 폭 기준 1 → 2 → 3 → 4 → 6 열(calc_sheet optionGrid · container query) · 공통 옵션 따로 상자 걷고 모든 상자 맨 위 옵션 칸에 같이 - 맨 아래 노무비 · 재료비 · 경비 · 계 = 한 줄 4 칸 · 화면(모달) 바닥 sticky · 메인 칸 overflow clip(굴림 칸이면 안 붙음) - 텍스트 수식 = 비목 구분 상자 · 상자 위 옵션 칸 · 줄마다 붙던 옵션 꼬리표 걷음 - 두 보기 상자 제목 「단가산출 상세」 · 「지금 입력」 꼬리표 걷음 - 신규 지킴 시험 test_737_option_grid_foot Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
67 lines
1.5 KiB
CSS
67 lines
1.5 KiB
CSS
/* 공용 단가산출 계산서(714-2) — 장비 · 하위 로직 한 줄 = 누르면 펼침 */
|
|
[data-sheet-equip] {
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
[data-sheet-equip]:hover,
|
|
[data-sheet-equip]:focus-visible {
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
[data-sheet-part] .ui-calc-row__label {
|
|
padding-left: var(--spacing-16);
|
|
}
|
|
|
|
p[data-sheet-part] {
|
|
margin: 0;
|
|
padding-left: var(--spacing-16);
|
|
}
|
|
|
|
/* 737-1 옵션 칸 격자 — 상자 폭 따라 1 → 2 → 3 → 4 → 6 열(300 · 450 · 600 · 900) · 칸마다 이름 위 · 고르기 아래 */
|
|
.calc-sheet__opts {
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.calc-sheet__opts-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
@container (min-width: 300px) {
|
|
.calc-sheet__opts-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@container (min-width: 450px) {
|
|
.calc-sheet__opts-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@container (min-width: 600px) {
|
|
.calc-sheet__opts-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@container (min-width: 900px) {
|
|
.calc-sheet__opts-grid {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
.calc-sheet__opts-grid > .ui-calc-row {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
align-items: stretch;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.calc-sheet__opts-grid > .ui-calc-row > :is(.ui-calc-row__select, .ui-calc-row__in, .ui-field) {
|
|
grid-column: 1;
|
|
justify-self: stretch;
|
|
width: 100%;
|
|
}
|