124 lines
1.6 KiB
SCSS
124 lines
1.6 KiB
SCSS
.upload-card {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.upload-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.file-upload-section {
|
|
margin-bottom: 24px;
|
|
|
|
.file-input-container {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.selected-file-info {
|
|
margin-top: 12px;
|
|
|
|
mat-chip-set {
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.json-section {
|
|
margin-top: 24px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid #e0e0e0;
|
|
|
|
h3 {
|
|
margin: 0 0 16px 0;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #424242;
|
|
}
|
|
}
|
|
|
|
.upload-progress {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.upload-button {
|
|
padding: 12px 32px;
|
|
font-size: 16px;
|
|
|
|
mat-icon {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.status-section {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
mat-chip-set {
|
|
justify-content: center;
|
|
}
|
|
|
|
.success {
|
|
background-color: #c8e6c9 !important;
|
|
color: #2e7d32 !important;
|
|
}
|
|
|
|
.error {
|
|
background-color: #ffcdd2 !important;
|
|
color: #d32f2f !important;
|
|
}
|
|
}
|
|
|
|
// Material Design overrides
|
|
:host ::ng-deep {
|
|
.mat-mdc-form-field {
|
|
width: 100%;
|
|
}
|
|
|
|
.mat-mdc-form-field-hint {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mat-mdc-chip {
|
|
--mdc-chip-container-height: 28px;
|
|
}
|
|
|
|
.mat-mdc-text-field-wrapper {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
// Responsive design
|
|
@media (max-width: 768px) {
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.upload-card {
|
|
margin: 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.upload-button {
|
|
width: 100%;
|
|
}
|
|
} |