e27020ae9b
- 모든 카테고리 구매신청 기능 완성 (PIPE, FITTING, VALVE, FLANGE, GASKET, BOLT, SUPPORT, SPECIAL, UNKNOWN) - 구매신청 완료 항목: 회색 배경, 체크박스 비활성화, '구매신청완료' 배지 표시 - 전체 선택/구매신청 시 이미 구매신청된 항목 자동 제외 - 구매신청 quantity 타입 에러 수정 (문자열 -> 정수 변환) SUPPORT 카테고리 (구 U-BOLT): - U-BOLT -> SUPPORT로 카테고리명 변경 - 클램프, 유볼트, 우레탄블럭슈 분류 개선 - 테이블 헤더: 선택-종류-타입-크기-디스크립션-추가요구-사용자요구-수량 - 크기 정보 main_nom 필드에서 가져오기 (배관 인치) - 엑셀 내보내기 형식 조정 SPECIAL 카테고리: - SPECIAL 키워드 자재 자동 분류 (SPECIFICATION 제외) - 파일 업로드 시 SPECIAL 카테고리 처리 로직 추가 - 도면번호 필드 추가 (drawing_name, line_no) - 타입 필드: 크기/스케줄/재질 제외한 핵심 정보 표시 - 엑셀 DWG_NAME, LINE_NUM 컬럼 파싱 및 저장 FITTING 카테고리: - 테이블 컬럼 너비 조정 (선택 2%, 종류 8.5%, 수량 12%) 구매신청 관리: - 엑셀 재다운로드 형식 개선 (BOM 페이지와 동일한 형식) - 그룹화된 자재 정보 포함하여 저장 및 다운로드
1171 lines
22 KiB
CSS
1171 lines
22 KiB
CSS
/* NewMaterialsPage - DevonThink 스타일 */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.materials-page {
|
|
background: #f8f9fa;
|
|
min-height: 100vh;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
|
|
overflow-x: auto;
|
|
min-width: 1400px; /* 페이지 최소 너비 고정 */
|
|
}
|
|
|
|
/* 헤더 */
|
|
.materials-header {
|
|
background: white;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
padding: 16px 24px;
|
|
}
|
|
|
|
.header-center {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.revision-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.revision-selector label {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
margin: 0;
|
|
}
|
|
|
|
.revision-dropdown {
|
|
padding: 4px 8px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
background: white;
|
|
font-size: 14px;
|
|
color: #495057;
|
|
cursor: pointer;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.revision-dropdown:focus {
|
|
outline: none;
|
|
border-color: #4299e1;
|
|
box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
|
|
}
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.back-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
background: #6366f1;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.back-button:hover {
|
|
background: #5558e3;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* 심플한 뒤로가기 버튼 */
|
|
.back-button-simple {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #86efac;
|
|
color: #166534;
|
|
border: 1px solid #bbf7d0;
|
|
border-radius: 6px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.back-button-simple:hover {
|
|
background: #6ee7b7;
|
|
transform: translateX(-2px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.materials-header h1 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin: 0;
|
|
}
|
|
|
|
.job-info {
|
|
color: #6b7280;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.material-count-inline {
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
background: #f3f4f6;
|
|
padding: 2px 8px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.material-count {
|
|
color: #6b7280;
|
|
font-size: 14px;
|
|
background: #f3f4f6;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* 메인 헤더 */
|
|
.materials-header {
|
|
background: white;
|
|
padding: 8px 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* 카테고리 필터 */
|
|
.category-filters {
|
|
background: white;
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.category-filters::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.category-filters::-webkit-scrollbar-track {
|
|
background: #f3f4f6;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.category-filters::-webkit-scrollbar-thumb {
|
|
background: #d1d5db;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.category-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #4b5563;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.category-btn:hover {
|
|
background: #f9fafb;
|
|
border-color: #d1d5db;
|
|
}
|
|
|
|
.category-btn.active {
|
|
background: #eef2ff;
|
|
border-color: #6366f1;
|
|
color: #4f46e5;
|
|
}
|
|
|
|
.category-btn .count {
|
|
background: #f3f4f6;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.category-btn.active .count {
|
|
background: #6366f1;
|
|
color: white;
|
|
}
|
|
|
|
/* 액션 바 */
|
|
.action-bar {
|
|
background: white;
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.selection-info {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.select-all-btn,
|
|
.export-btn {
|
|
padding: 6px 14px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.select-all-btn {
|
|
background: white;
|
|
border: 1px solid #e5e7eb;
|
|
color: #374151;
|
|
}
|
|
|
|
.select-all-btn:hover {
|
|
background: #f9fafb;
|
|
border-color: #d1d5db;
|
|
}
|
|
|
|
.export-btn {
|
|
background: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.export-btn:hover {
|
|
background: #059669;
|
|
}
|
|
|
|
.export-btn:disabled {
|
|
background: #e5e7eb;
|
|
color: #9ca3af;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 자재 테이블 - 엑셀 스타일 */
|
|
.materials-grid {
|
|
background: white;
|
|
margin: 16px 24px;
|
|
overflow-y: auto;
|
|
overflow-x: auto; /* 좌우 스크롤 가능하도록 변경 */
|
|
max-height: calc(100vh - 220px);
|
|
border: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header {
|
|
display: grid;
|
|
/* 기본 그리드는 사용하지 않음 - 각 카테고리별 전용 클래스 사용 */
|
|
background: #f3f4f6;
|
|
border-bottom: 2px solid #9ca3af;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.detailed-grid-header > div,
|
|
.detailed-grid-header .filterable-header {
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 32px;
|
|
padding: 6px 4px;
|
|
border-right: 1px solid #d1d5db;
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
.detailed-grid-header > div:first-child,
|
|
.detailed-grid-header .filterable-header:first-child {
|
|
border-left: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header > div:last-child,
|
|
.detailed-grid-header .filterable-header:last-child {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
/* PIPE 전용 헤더 - 9개 컬럼 */
|
|
.detailed-grid-header.pipe-header {
|
|
grid-template-columns: 2% 8% 14% 8% 10% 20% 12% 15% 10% !important;
|
|
}
|
|
|
|
.detailed-grid-header.pipe-header > div,
|
|
.detailed-grid-header.pipe-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header.pipe-header > div:last-child,
|
|
.detailed-grid-header.pipe-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* PIPE 전용 행 - 9개 컬럼 */
|
|
.detailed-material-row.pipe-row {
|
|
grid-template-columns: 1.5% 8.5% 14% 8% 10% 20% 12% 15% 10% !important;
|
|
}
|
|
|
|
.detailed-material-row.pipe-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-material-row.pipe-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* SPECIAL 전용 헤더 - 10개 컬럼 */
|
|
.detailed-grid-header.special-header {
|
|
grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 12% 18% 5%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-grid-header.special-header > div,
|
|
.detailed-grid-header.special-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header.special-header > div:last-child,
|
|
.detailed-grid-header.special-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* SPECIAL 전용 행 - 10개 컬럼 */
|
|
.detailed-material-row.special-row {
|
|
grid-template-columns: 5% 8% 14% 8% 10% 18% 12% 12% 18% 5%;
|
|
|
|
|
|
}
|
|
|
|
/* BOLT 전용 헤더 - 9개 컬럼 */
|
|
.detailed-grid-header.bolt-header {
|
|
grid-template-columns: 2% 8% 14% 8% 10% 20% 12% 15% 10%;
|
|
|
|
|
|
}
|
|
|
|
/* BOLT 전용 행 - 9개 컬럼 */
|
|
.detailed-material-row.bolt-row {
|
|
grid-template-columns: 2% 8% 14% 8% 10% 20% 12% 15% 10%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-material-row.special-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
/* BOLT 헤더 테두리 */
|
|
.detailed-grid-header.bolt-header > div,
|
|
.detailed-grid-header.bolt-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header.bolt-header > div:last-child,
|
|
.detailed-grid-header.bolt-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* BOLT 행 테두리 */
|
|
.detailed-material-row.bolt-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-material-row.bolt-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* BOLT 타입 배지 */
|
|
.type-badge.bolt {
|
|
background: #7c3aed;
|
|
color: white;
|
|
border: 2px solid #6d28d9;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* SUPPORT 전용 헤더 - 8개 컬럼 */
|
|
.detailed-grid-header.support-header {
|
|
grid-template-columns: 3% 10% 12% 10% 25% 10% 18% 12%;
|
|
|
|
|
|
}
|
|
|
|
/* SUPPORT 전용 행 - 8개 컬럼 */
|
|
.detailed-material-row.support-row {
|
|
grid-template-columns: 3% 10% 12% 10% 25% 10% 18% 12%;
|
|
|
|
|
|
}
|
|
|
|
/* SUPPORT 헤더 테두리 */
|
|
.detailed-grid-header.support-header > div,
|
|
.detailed-grid-header.support-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
.detailed-grid-header.support-header > div:last-child,
|
|
.detailed-grid-header.support-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* SUPPORT 행 테두리 */
|
|
.detailed-material-row.support-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
.detailed-material-row.support-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* SUPPORT 타입 배지 */
|
|
.type-badge.support {
|
|
background: #059669;
|
|
color: white;
|
|
border: 2px solid #047857;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* URETHANE 타입 배지 */
|
|
.type-badge.urethane {
|
|
background: #ea580c;
|
|
color: white;
|
|
border: 2px solid #c2410c;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* CLAMP 타입 배지 */
|
|
.type-badge.clamp {
|
|
background: #0d9488;
|
|
color: white;
|
|
border: 2px solid #0f766e;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* SUPPORT 전용 헤더 - 9개 컬럼 */
|
|
.detailed-grid-header.support-header {
|
|
grid-template-columns: 2% 8% 16% 8% 10% 18% 12% 15% 10%;
|
|
|
|
|
|
}
|
|
|
|
/* SUPPORT 전용 행 - 9개 컬럼 */
|
|
.detailed-material-row.support-row {
|
|
grid-template-columns: 2% 8% 16% 8% 10% 18% 12% 15% 10%;
|
|
|
|
|
|
}
|
|
|
|
/* SUPPORT 헤더 테두리 */
|
|
.detailed-grid-header.support-header > div,
|
|
.detailed-grid-header.support-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
.detailed-grid-header.support-header > div:last-child,
|
|
.detailed-grid-header.support-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* SUPPORT 행 테두리 */
|
|
.detailed-material-row.support-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
.detailed-material-row.support-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* SUPPORT 타입 배지 */
|
|
.type-badge.support {
|
|
background: #0891b2;
|
|
color: white;
|
|
border: 2px solid #0e7490;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.detailed-material-row.special-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 플랜지 전용 헤더 - 10개 컬럼 */
|
|
.detailed-grid-header.flange-header {
|
|
grid-template-columns: 1.5% 8.5% 12% 8% 10% 10% 15% 8% 12% 11.5%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-grid-header.flange-header > div,
|
|
.detailed-grid-header.flange-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header.flange-header > div:last-child,
|
|
.detailed-grid-header.flange-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 플랜지 전용 행 - 10개 컬럼 */
|
|
.detailed-material-row.flange-row {
|
|
grid-template-columns: 1.5% 8.5% 12% 8% 10% 10% 15% 8% 12% 11.5%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-material-row.flange-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-material-row.flange-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 피팅 전용 헤더 - 10개 컬럼 */
|
|
.detailed-grid-header.fitting-header {
|
|
grid-template-columns: 2% 8.5% 16% 7.5% 7.5% 9% 15% 9% 13% 12%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-grid-header.fitting-header > div,
|
|
.detailed-grid-header.fitting-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header.fitting-header > div:last-child,
|
|
.detailed-grid-header.fitting-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 피팅 전용 행 - 10개 컬럼 */
|
|
.detailed-material-row.fitting-row {
|
|
grid-template-columns: 2% 8.5% 16% 7.5% 7.5% 9% 15% 9% 13% 12%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-material-row.fitting-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-material-row.fitting-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
|
|
.detailed-grid-header.valve-header {
|
|
grid-template-columns: 3% 19% 12% 8% 8% 18% 10% 15% 6%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-grid-header.valve-header > div,
|
|
.detailed-grid-header.valve-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header.valve-header > div:last-child,
|
|
.detailed-grid-header.valve-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
|
|
.detailed-material-row.valve-row {
|
|
grid-template-columns: 3% 19% 12% 8% 8% 18% 10% 15% 6%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-material-row.valve-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-material-row.valve-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
|
|
.detailed-grid-header.gasket-header {
|
|
grid-template-columns: 2% 8% 12% 7% 7% 10% 18% 7% 10% 15% 3%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-grid-header.gasket-header > div,
|
|
.detailed-grid-header.gasket-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header.gasket-header > div:last-child,
|
|
.detailed-grid-header.gasket-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
|
|
.detailed-material-row.gasket-row {
|
|
grid-template-columns: 2% 8% 12% 7% 7% 10% 18% 7% 10% 15% 3%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-material-row.gasket-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-material-row.gasket-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* 필터링 가능한 헤더 스타일 */
|
|
.filterable-header {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: all 0.2s ease;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.filterable-header:hover {
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
.header-text {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
}
|
|
|
|
.header-controls {
|
|
display: flex;
|
|
gap: 2px;
|
|
opacity: 0.7;
|
|
flex-shrink: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.filterable-header:hover .header-controls {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sort-btn, .filter-btn {
|
|
background: white;
|
|
border: 1px solid #e2e8f0;
|
|
padding: 1px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 9px;
|
|
color: #64748b;
|
|
transition: all 0.15s ease;
|
|
width: 16px;
|
|
height: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sort-btn:hover, .filter-btn:hover {
|
|
background: #f8fafc;
|
|
border-color: #cbd5e1;
|
|
color: #475569;
|
|
}
|
|
|
|
.sort-btn.active {
|
|
background: #3b82f6;
|
|
border-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: #10b981;
|
|
border-color: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
/* 필터 드롭다운 */
|
|
.filter-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 2px);
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
max-height: 240px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: dropdownFadeIn 0.15s ease-out;
|
|
}
|
|
|
|
@keyframes dropdownFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.filter-search {
|
|
padding: 8px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
background: #fafbfc;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.filter-search input {
|
|
flex: 1;
|
|
padding: 6px 8px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
outline: none;
|
|
transition: border-color 0.15s ease;
|
|
background: white;
|
|
color: #374151;
|
|
}
|
|
|
|
.filter-search input:focus {
|
|
border-color: #3b82f6;
|
|
}
|
|
|
|
.filter-search input::placeholder {
|
|
color: #9ca3af;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.clear-filter-btn {
|
|
background: #ef4444;
|
|
color: white;
|
|
border: none;
|
|
padding: 4px 6px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.clear-filter-btn:hover {
|
|
background: #dc2626;
|
|
}
|
|
|
|
.filter-options {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
max-height: 160px;
|
|
}
|
|
|
|
.filter-option-header {
|
|
padding: 4px 10px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.filter-option {
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
transition: background-color 0.1s ease;
|
|
color: #374151;
|
|
}
|
|
|
|
.filter-option:hover {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.filter-option-more {
|
|
padding: 4px 10px;
|
|
font-size: 10px;
|
|
color: #9ca3af;
|
|
font-style: italic;
|
|
text-align: center;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
/* 액션 바 스타일 개선 */
|
|
.filter-info {
|
|
font-size: 11px;
|
|
color: #6b7280;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.clear-filters-btn {
|
|
background: #f59e0b;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
margin-right: 8px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.clear-filters-btn:hover {
|
|
background: #d97706;
|
|
}
|
|
|
|
/* UNKNOWN 전용 헤더 - 5개 컬럼 */
|
|
.detailed-grid-header.unknown-header {
|
|
grid-template-columns: 5% 10% 1fr 20% 10%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-grid-header.unknown-header > div,
|
|
.detailed-grid-header.unknown-header .filterable-header {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-grid-header.unknown-header > div:last-child,
|
|
.detailed-grid-header.unknown-header .filterable-header:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* UNKNOWN 전용 행 - 5개 컬럼 */
|
|
.detailed-material-row.unknown-row {
|
|
grid-template-columns: 5% 10% 1fr 20% 10%;
|
|
|
|
|
|
}
|
|
|
|
.detailed-material-row.unknown-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-material-row.unknown-row .material-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* UNKNOWN 설명 셀 스타일 */
|
|
.description-cell {
|
|
overflow: visible;
|
|
text-overflow: initial;
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.description-text {
|
|
display: block;
|
|
overflow: visible;
|
|
text-overflow: initial;
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.detailed-material-row {
|
|
display: grid;
|
|
/* 기본 그리드는 사용하지 않음 - 각 카테고리별 전용 클래스 사용 */
|
|
border-bottom: 1px solid #d1d5db;
|
|
background: white;
|
|
transition: background 0.15s;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.detailed-material-row .material-cell {
|
|
border-right: 1px solid #d1d5db;
|
|
padding: 6px 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 28px;
|
|
}
|
|
|
|
.detailed-material-row .material-cell:first-child {
|
|
border-left: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-material-row .material-cell:last-child {
|
|
border-right: 1px solid #d1d5db;
|
|
}
|
|
|
|
.detailed-material-row:hover {
|
|
background: #fafbfc;
|
|
}
|
|
|
|
.detailed-material-row.selected {
|
|
background: #f0f9ff;
|
|
}
|
|
|
|
.material-cell {
|
|
overflow: visible !important;
|
|
text-overflow: initial !important;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: normal !important;
|
|
word-break: break-word;
|
|
min-width: 120px;
|
|
max-width: none !important;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.material-cell > * {
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 사용자 요구사항 입력 필드 */
|
|
.user-req-input {
|
|
width: 100%;
|
|
padding: 4px 8px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
outline: none;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.user-req-input:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 1px #3b82f6;
|
|
}
|
|
|
|
.material-cell input[type="checkbox"] {
|
|
width: 14px;
|
|
height: 14px;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 타입 배지 */
|
|
.type-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.type-badge.pipe {
|
|
background: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.type-badge.fitting {
|
|
background: #3b82f6;
|
|
color: white;
|
|
}
|
|
|
|
.type-badge.valve {
|
|
background: #f59e0b;
|
|
color: white;
|
|
}
|
|
|
|
.type-badge.flange {
|
|
background: #8b5cf6;
|
|
color: white;
|
|
}
|
|
|
|
.type-badge.bolt {
|
|
background: #ef4444;
|
|
color: white;
|
|
}
|
|
|
|
.type-badge.gasket {
|
|
background: #06b6d4;
|
|
color: white;
|
|
}
|
|
|
|
.type-badge.special {
|
|
background: #dc2626;
|
|
color: white;
|
|
border: 2px solid #b91c1c;
|
|
font-weight: 700;
|
|
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
|
|
}
|
|
|
|
.type-badge.unknown {
|
|
background: #6b7280;
|
|
color: white;
|
|
}
|
|
|
|
.type-badge.instrument {
|
|
background: #78716c;
|
|
color: white;
|
|
}
|
|
|
|
/* 텍스트 스타일 */
|
|
.subtype-text,
|
|
.size-text,
|
|
.material-grade {
|
|
color: #1f2937;
|
|
font-weight: 500;
|
|
white-space: normal !important;
|
|
word-break: break-word !important;
|
|
overflow: visible !important;
|
|
text-overflow: initial !important;
|
|
min-width: 300px !important;
|
|
}
|
|
|
|
/* 입력 필드 */
|
|
.user-req-input {
|
|
width: 100%;
|
|
padding: 4px 8px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
background: #fafbfc;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.user-req-input:focus {
|
|
outline: none;
|
|
border-color: #6366f1;
|
|
background: white;
|
|
}
|
|
|
|
.user-req-input::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
/* 수량 정보 */
|
|
.quantity-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* 플랜지 압력 정보 */
|
|
.pressure-info {
|
|
font-weight: 600;
|
|
color: #0066cc;
|
|
}
|
|
|
|
.quantity-value {
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.quantity-details {
|
|
font-size: 11px;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
/* 로딩 */
|
|
.loading-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 400px;
|
|
background: white;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid #f3f4f6;
|
|
border-top: 3px solid #6366f1;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
.loading-container p {
|
|
margin-top: 16px;
|
|
color: #6b7280;
|
|
font-size: 14px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 스크롤바 스타일 */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #d1d5db;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #9ca3af;
|
|
} |