Files
Aislo/B09_Estimation/B09_Estimation_UI_Page.css
T
eomsangdon d827a15473 Merge remote-tracking branch 'origin/sub_laptop_3' into main_laptop_1
# Conflicts:
#	B09_Estimation/B09_Estimation_UI_Tabs.ts
2026-10-10 14:32:01 +09:00

162 lines
4.8 KiB
CSS

/* B09 원가계산 — 탭 줄 · 안내 글. 색은 테마 변수만(밝음 · 어두움 같이). */
.b09-estimation {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
padding: var(--spacing-16) var(--spacing-24); /* B08 본문과 같은 값 */
}
.b09-estimation .ui-general-block__empty,
.b09-estimation__hint {
color: var(--color-text-secondary);
}
.b09-estimation__hint {
margin: 0 0 var(--spacing-8);
font-size: var(--text-caption);
}
.b09-estimation__tabs {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8); /* B08 위 · 보조 탭 줄과 같은 값(181-1) */
padding-bottom: var(--spacing-8);
border-bottom: 1px solid var(--color-border);
}
/* 아래 탭 없는 위 탭 — 보이지 않는 단추 한 줄로 높이만 채움(탭 바꿀 때 몸통이 안 튐) */
.b09-estimation__tabs--blank > .ui-btn {
visibility: hidden;
}
/* 표 머리 — 좁은 열에서 말줄임 대신 줄바꿈 */
[data-b09-table] thead th {
white-space: normal;
overflow-wrap: anywhere;
}
/* 202-1 보조 탭 줄 오른쪽 도구(박스보기 · 가로 열 수) — 빈 보조 줄에서도 보임 · 단추 · 글 한 줄 */
.b09-estimation__tools {
display: flex;
flex: none;
flex-wrap: nowrap;
align-items: center;
gap: var(--spacing-8);
margin-left: auto;
}
.b09-estimation__tools .ui-btn,
.b09-estimation__tools .ui-group-cards__label {
flex: none;
white-space: nowrap;
}
/* 202-1 안내 줄 = 표 · 카드 판 아래(묶음 탭은 한 줄 줄임표 · 전문 = 공용 호버) */
.b09-estimation .ui-data-table + .ui-general-block__empty,
.b09-estimation .ui-group-cards + .ui-general-block__empty {
margin: var(--spacing-8) 0 0;
}
.b09-estimation__line-hint {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--text-caption);
}
/* 182 설계내역서 묶음 줄 굵게 · 레벨 들여쓰기 = 공용 표 level 옵션(201-1) */
.b09-estimation .ui-data-table__table tbody tr.is-group td {
font-weight: var(--font-weight-bold);
}
/* 166-2 설계내역서 손 줄 — 사용자가 더한 줄 표시(왼쪽 띠) */
.b09-estimation .ui-data-table__table tbody tr.is-hand td:first-child {
background-image: linear-gradient(to right, var(--color-primary) 3px, transparent 3px);
}
/* 200-2 설계내역서 글 칸 왼쪽 맞춤(수량만 오른쪽) */
.b09-estimation [data-b09-table="bill"] .ui-data-table__input:not([data-k="qty"]) {
text-align: left;
}
/* 200-2 레벨 도구 줄 — 단추 넷 + 안내 한 줄 */
.b09-estimation__level {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-8);
}
.b09-estimation__level .b09-estimation__hint {
margin: 0;
}
/* 181-2 표 보기 — 목록표에서 고른 호표 줄 구간 전체 붉은 외곽선(머리 accent 밑줄은 덮음) */
.b09-estimation .ui-data-table__table tbody tr.is-pick td {
--pick-t: inset 0 0 0 0 transparent;
--pick-b: inset 0 0 0 0 transparent;
--pick-l: inset 0 0 0 0 transparent;
--pick-r: inset 0 0 0 0 transparent;
box-shadow: var(--pick-t), var(--pick-b), var(--pick-l), var(--pick-r);
}
.b09-estimation .ui-data-table__table tbody tr.is-pick.is-pick-top td {
--pick-t: inset 0 2px 0 var(--color-danger);
}
.b09-estimation .ui-data-table__table tbody tr.is-pick.is-pick-end td {
--pick-b: inset 0 -2px 0 var(--color-danger);
}
.b09-estimation .ui-data-table__table tbody tr.is-pick td:first-child {
--pick-l: inset 2px 0 0 var(--color-danger);
}
.b09-estimation .ui-data-table__table tbody tr.is-pick td:last-child {
--pick-r: inset -2px 0 0 var(--color-danger);
}
/* 183-3 자재단가대비표 — 적용 단가를 낸 출처 단가 칸(고른 출처 · 기본 최저) */
.b09-estimation .ui-data-table__table tbody td.is-picked {
background: color-mix(in srgb, var(--color-accent) 22%, var(--color-canvas));
font-weight: var(--font-weight-bold);
}
/* 184-3 설계내역서 고친 칸 — 자동 값과 다른 칸(풍선 = 자동 값) */
.b09-estimation .ui-data-table__table tbody td.is-edited {
background: color-mix(in srgb, var(--color-warning) 22%, var(--color-canvas));
}
/* 203-1 좌측 「데이터 점검」 — [업데이트] 필요 = 단추 위 점 배지(B05 [3D 업데이트] 꼴) */
.b09-options .ui-btn.is-pending {
position: relative;
border-color: var(--color-warning);
}
.b09-options .ui-btn.is-pending::after {
content: "";
position: absolute;
top: 4px;
right: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-warning);
}
/* 연결 점검 목록 — 이름 · 탭(작게) · 알림 글 */
.b09-check__head,
.b09-check__note {
margin: var(--spacing-8) 0 0;
color: var(--color-text-secondary);
font-size: var(--text-caption);
}
.b09-check__tab {
flex: none;
color: var(--color-text-secondary);
font-size: var(--text-caption);
}