accura0117
cda5f9591e
- wtm-frontend → wtm-frontend-vue 이름 변경 - wtm-frontend-react 추가 (React 18 + PrimeReact + Zustand) - 동일한 모듈 구조 및 API 연동 (Vue 버전과 기능 동일) - Vue:5173 / React:5174 포트 분리 - 개발자 가이드에 React 프론트엔드 안내 추가 - .gitignore: Claude/OMC, 문서 생성 스크립트, package-lock 제외 - 불필요 파일 git 추적 제거 (.omc, generate_*.py, regenerate_*.py) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
50 줄
912 B
SCSS
50 줄
912 B
SCSS
@use 'variables' as *;
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
gap: $space-md;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
|
|
@media (max-width: $bp-mobile) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.col-1 { grid-column: span 1; }
|
|
.col-2 { grid-column: span 2; }
|
|
.col-3 { grid-column: span 3; }
|
|
.col-4 { grid-column: span 4; }
|
|
.col-6 { grid-column: span 6; }
|
|
.col-8 { grid-column: span 8; }
|
|
.col-12 { grid-column: span 12; }
|
|
|
|
@media (max-width: $bp-mobile) {
|
|
[class^='col-'] {
|
|
grid-column: span 1 !important;
|
|
}
|
|
}
|
|
|
|
.form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $space-xs;
|
|
|
|
&__label {
|
|
font-size: $font-size-sm;
|
|
font-weight: 600;
|
|
color: $color-text;
|
|
&--required::after {
|
|
content: ' *';
|
|
color: $color-danger;
|
|
}
|
|
}
|
|
&__error {
|
|
font-size: $font-size-xs;
|
|
color: $color-danger;
|
|
}
|
|
&__hint {
|
|
font-size: $font-size-xs;
|
|
color: $color-text-muted;
|
|
}
|
|
}
|