92 lines
2.1 KiB
CSS
92 lines
2.1 KiB
CSS
/* ========================================================= */
|
|
/* Patterns: Datei-Upload */
|
|
/* ========================================================= */
|
|
|
|
.sg-file-upload {
|
|
--surface-file-upload-dropzone: var(--surface-form-preview);
|
|
--surface-file-upload-file-item: var(--surface-control-default);
|
|
--text-file-upload-meta: var(--text-control-disabled);
|
|
--text-file-upload-error: var(--color-signal-red);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-large);
|
|
width: 100%;
|
|
max-width: var(--layout-input-field-max-width);
|
|
}
|
|
|
|
.sg-file-upload__status,
|
|
.sg-file-upload__file-meta {
|
|
margin: var(--spacing-small) 0 0;
|
|
}
|
|
|
|
.sg-file-upload__dropzone {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-large);
|
|
width: 100%;
|
|
padding: var(--spacing-large);
|
|
background: var(--surface-file-upload-dropzone);
|
|
border: 1px dashed var(--surface-button-active);
|
|
border-radius: var(--radius-interaction);
|
|
}
|
|
|
|
.sg-file-upload__dropzone[data-drag-over="true"] {
|
|
outline: 2px solid var(--text-hyperlink);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.sg-file-upload__files {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.sg-file-upload__file {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-large);
|
|
padding: var(--spacing-small) var(--spacing-large);
|
|
color: var(--text-control-default);
|
|
background: var(--surface-file-upload-file-item);
|
|
border-radius: var(--radius-interaction);
|
|
}
|
|
|
|
.sg-file-upload__file-name {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.sg-file-upload__file-meta {
|
|
color: var(--text-file-upload-meta);
|
|
}
|
|
|
|
.sg-file-upload__remove {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.sg-file-upload__submit {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.sg-file-upload__error {
|
|
color: var(--text-file-upload-error);
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.sg-file-upload__dropzone {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sg-file-upload__file {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
}
|
|
}
|