eomsangdonandClaude Opus 5.5
6e0d86c961
- ui_template_machine_form.ts · .css — 목록 · 찾기 · 저장은 부르는 쪽이 줌(M01 · M02 에 안 묶임) · 숫자만 · 범위 경고 · 고친 칸 노랑 · 같은 이름 알림 자리 · 좁은 폭 한 줄 - 품셈 방식 = 비율 칸 · 계수 넷 읽기 전용(입력이 처음과 같으면 저장 값 그대로) - 사전 ui_template_locale_machine.ts · 부품 모음 견본 한 칸 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
113 lines
2.3 KiB
CSS
113 lines
2.3 KiB
CSS
/* 기계 양식(821-2) — 왼쪽 칸 · 오른쪽 시간당 계산식 · 좁은 폭(720 아래)은 한 줄로 */
|
|
.ui-machine-form {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
|
|
gap: var(--spacing-16);
|
|
align-items: start;
|
|
}
|
|
|
|
.ui-machine-form__fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-12);
|
|
min-width: 0;
|
|
}
|
|
|
|
.ui-machine-form__row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: var(--spacing-8) var(--spacing-12);
|
|
}
|
|
|
|
.ui-machine-form__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.ui-machine-form__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.ui-machine-form__coefs {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.ui-machine-form__coefs .ui-input {
|
|
background: var(--color-surface-sunken);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.ui-machine-form .is-changed .ui-input,
|
|
.ui-machine-form .is-changed .ui-select {
|
|
background: color-mix(in srgb, var(--color-warning) 28%, var(--color-canvas));
|
|
}
|
|
|
|
.ui-machine-form__warn {
|
|
min-height: 0;
|
|
color: var(--color-warning);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.ui-machine-form__warn:empty {
|
|
display: none;
|
|
}
|
|
|
|
.ui-machine-form__notice:empty {
|
|
display: none;
|
|
}
|
|
|
|
.ui-machine-form__similar {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
}
|
|
|
|
.ui-machine-form__similar > summary {
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.ui-machine-form__similar .ui-find__list {
|
|
max-height: 240px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.ui-machine-form__preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-12);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-surface);
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.ui-machine-form__preview .ui-calc-row--formula {
|
|
grid-template-columns: 64px minmax(0, 1fr) 96px;
|
|
}
|
|
|
|
.ui-machine-form__rule {
|
|
border: 0;
|
|
border-top: 1px solid var(--color-border);
|
|
margin: var(--spacing-4) 0;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.ui-machine-form {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.ui-machine-form__preview {
|
|
position: static;
|
|
}
|
|
}
|