eomsangdonandClaude Opus 5.5
caf38ccb3e
- ui_template/cad_host/cad_host_tabs — 고르기 · [+] · 이름 · 지우기 · 끌어 순서 · 닫기(켬/끔) · 바꿀 때 지금 장 받아 두고 싣기 - mountStructureSheets — 1장 고정 + 더한장 · 백업 칸 장마다 · 장 도번 도각 · 안 실린 장 표 갈기 - 상세 열기 · 저장 = 도면 · 더한장 칸 · 카드 1장 + 장 수 · 도각 도번 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NPJGtfXo6GMbcpiboQC4uK
113 lines
2.5 KiB
CSS
113 lines
2.5 KiB
CSS
/* M02 도면 양식 편집 부품 — 위 도구 줄 한 줄(작도 영역 · 단추) + 아래 웹캐드. */
|
|
|
|
/* 도면 칸이 메인을 꽉 채우고 창 크기를 따른다 — 메인 칸(`ui-workflow-layout__main`)은
|
|
높이가 정해지지 않아(min-height 만) 100% 가 안 먹으므로 화면 높이로 잡는다.
|
|
표 양식일 때는 페이지 쪽 모양 그대로 두려고 도면을 품은 때만 건다. */
|
|
.m02-main:has(> .m02-main__host > .m02-drawing) {
|
|
box-sizing: border-box;
|
|
height: calc(100vh - var(--spacing-64));
|
|
min-height: 0;
|
|
}
|
|
|
|
.m02-main__host:has(> .m02-drawing) {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.m02-drawing {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.m02-drawing > .cad-host {
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.m02-drawing__toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8) var(--spacing-16, 16px);
|
|
}
|
|
|
|
.m02-drawing__title {
|
|
align-self: center;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.m02-drawing__areabtn {
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-drawing__areabtn.is-invalid {
|
|
border-color: var(--color-danger);
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
/* 작은 창 안 칸 넷 — 이름이 다 보이는 넉넉한 폭 */
|
|
.m02-drawing__areaform {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(9rem, 1fr));
|
|
gap: var(--spacing-12);
|
|
min-width: min(22rem, 80vw);
|
|
}
|
|
|
|
.m02-drawing__toolbar--slot {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.m02-drawing__actions {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
margin-left: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-pop {
|
|
display: block;
|
|
background-color: transparent; /* 단추 아래 뜨는 작은 창 — 뒤를 가리지 않음 */
|
|
}
|
|
|
|
.m02-pop > .ui-modal {
|
|
position: absolute;
|
|
margin-top: 0;
|
|
width: 23rem;
|
|
max-width: calc(100vw - 16px);
|
|
box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
|
|
}
|
|
|
|
/* 카드 미리보기 「장 n」(82-2) — 1장만 보이는 여러 장 도면 */
|
|
.m02-drawing:has(> .m02-drawing__sheets) {
|
|
position: relative;
|
|
}
|
|
|
|
.m02-drawing__sheets {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 6px;
|
|
right: 8px;
|
|
padding: 1px 8px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 10px;
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-text-secondary);
|
|
font-size: 11px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 탭 줄(82-1) — 그림 칸에 붙임 */
|
|
.m02-drawing > .cad-tabs {
|
|
margin-bottom: calc(-1 * var(--spacing-8));
|
|
}
|