eomsangdonandClaude Opus 5.5
09134bab84
- DataFlow: 표 넷 = 데이터표 · 함수 판 알림 · 선/알약 경고 · 끊긴 곳 = 띠 알림 · 알약 · 칸 종류 = 배지 · 고르는 줄 = 목록 줄 · 입력 넷 = 입력 · 도구줄 여섯 · 날 색 → 공통 값 - 구조물 옵션 · 구조물 · 도면 · 면적 · 품목 고르기: 판 띠 = 띠 알림 · 한눈/종류별/부품 = 탭 · 표 둘 = 데이터표 · 체크 둘 = 체크 · 카드 · 번호 = 카드 · 배지 · 도면 도구줄 - 일위대가 · 호표 · 실무자료 · 본 화면 · 서고: 알림 = 띠 알림 · 빈 상태 · 보조 글 · 도구줄 여섯 · 옛 보라 별칭 0 - M01 로직 입력칸 = 입력 부품(작은 칸) · 일위대가 상세 줄 수 고정 시험 693 · 지킴 시험 M02 몫 더함 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
211 lines
4.1 KiB
CSS
211 lines
4.1 KiB
CSS
.m02-dfpanel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
font-size: var(--text-body);
|
|
color: var(--color-text-body);
|
|
}
|
|
|
|
.m02-dfpanel-head,
|
|
.m02-dfpanel-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.m02-dfpanel-head {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.m02-dfpanel-title {
|
|
font-size: var(--text-subheading);
|
|
}
|
|
|
|
.m02-dfpanel-unitbox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.m02-dfpanel-unit {
|
|
width: 6em;
|
|
text-align: center;
|
|
}
|
|
|
|
.m02-dfpanel-label {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
/* 겉 = 카드 부품 · 여기는 아래 맞춤 · 안 여백만 */
|
|
.m02-dfpanel-form.ui-card {
|
|
align-items: flex-end;
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
}
|
|
|
|
.m02-dfpanel-fieldbox {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.m02-dfpanel-field {
|
|
width: 9em;
|
|
}
|
|
|
|
.m02-dfpanel-field.is-num {
|
|
width: 6em;
|
|
}
|
|
|
|
/* 알림 = 띠 알림 부품 — 숨김은 부품 display 를 이김 */
|
|
.m02-dfpanel-msg {
|
|
margin: 0;
|
|
}
|
|
|
|
.m02-dfpanel-msg[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* 받음 · 변수 · 출력 알약 = 배지 부품(info · warning · success) — 안 놓인 받음은 점선 */
|
|
.m02-dfpanel-chip {
|
|
font-family: inherit;
|
|
}
|
|
|
|
button.m02-dfpanel-chip {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.m02-dfpanel-chip:focus-visible {
|
|
outline: 2px solid var(--color-focus-ring);
|
|
}
|
|
|
|
.m02-dfpanel-chip.is-in:not(.is-placed) {
|
|
border-color: var(--badge-tone);
|
|
border-style: dashed;
|
|
}
|
|
|
|
/* 판 높이 크게 — 안쪽 세로 스크롤 없이 보이게 */
|
|
.m02-dfpanel-sheet {
|
|
position: relative;
|
|
height: max(640px, calc(100dvh - 260px));
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-cards);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 칸 위 표시 — 색 + 글자(받음 · 변수 · 출력) 둘 다 */
|
|
.m02-dfpanel .aislo-cell[data-cf-kind="in"] {
|
|
box-shadow: inset 0 0 0 2px var(--color-info);
|
|
}
|
|
|
|
.m02-dfpanel .aislo-cell[data-cf-kind="var"] {
|
|
box-shadow: inset 0 0 0 2px var(--color-warning);
|
|
}
|
|
|
|
.m02-dfpanel .aislo-cell[data-cf-kind="out"] {
|
|
box-shadow: inset 0 0 0 2px var(--color-success);
|
|
}
|
|
|
|
.m02-dfpanel .aislo-cell[data-cf-kind]::after {
|
|
content: attr(data-cf-name);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 0 4px;
|
|
border-radius: 0 0 0 6px;
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.m02-dfpanel .aislo-cell[data-cf-lock]::before {
|
|
content: attr(data-cf-lock);
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 0 4px;
|
|
background: var(--color-surface);
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.m02-dfpanel .aislo-cell[data-cf-err] {
|
|
outline: 2px dashed var(--color-danger);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* 시트 + 칸 연결 표 — 좁으면 표가 아래로 */
|
|
.m02-dfpanel-body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.m02-dfpanel-body > .m02-dfpanel-sheet {
|
|
flex: 1 1 28em;
|
|
min-width: 0;
|
|
}
|
|
|
|
.m02-dfcells {
|
|
flex: 0 1 24em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
min-width: 0;
|
|
}
|
|
|
|
.m02-dfcells__title {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.m02-dfcells__cell {
|
|
width: 5em;
|
|
}
|
|
|
|
.m02-dfcells .ui-input.is-bad {
|
|
border-color: var(--color-danger);
|
|
border-style: dashed;
|
|
}
|
|
|
|
/* 칸 종류 = 배지 부품(받음 info · 변수 warning · 출력 success) */
|
|
|
|
/* 식 보기 */
|
|
/* 겉 = 카드 부품 · 여기는 쌓기 · 안 여백만 */
|
|
.m02-df-formula.ui-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
}
|
|
|
|
.m02-df-formula__title {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.m02-df-formula__line {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding-top: var(--spacing-4);
|
|
border-top: 1px dashed var(--color-border);
|
|
}
|
|
|
|
.m02-df-formula__valued {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.m02-df-formula__branches {
|
|
margin: 0;
|
|
padding-left: var(--spacing-16);
|
|
list-style: none;
|
|
}
|
|
|
|
.m02-df-formula__branches .is-now {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|