-
-
Dateien hierher ziehen oder
+
+
+
Noch keine Dateien ausgewählt.
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index d064e22..765fadd 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -1588,9 +1588,14 @@
/* Component: File Input */
.sg-file-input {
+ width: 100%;
+}
+
+.sg-file-input__row {
display: flex;
- flex-direction: column;
- gap: var(--spacing-small);
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--spacing-large);
width: 100%;
}
@@ -1611,15 +1616,17 @@
outline-offset: 2px;
}
-.sg-file-input__description {
- margin: 0;
- color: var(--text-control-disabled);
-}
-
.sg-file-input__trigger {
align-self: flex-start;
}
+@media (max-width: 48rem) {
+ .sg-file-input__row {
+ align-items: flex-start;
+ flex-direction: column;
+ }
+}
+
.sg-file-input--disabled {
opacity: var(--disabled-opacity);
}
diff --git a/styles/47-patterns-file-upload.css b/styles/47-patterns-file-upload.css
index 2af081a..3e1f594 100644
--- a/styles/47-patterns-file-upload.css
+++ b/styles/47-patterns-file-upload.css
@@ -14,7 +14,6 @@
max-width: var(--layout-input-field-max-width);
}
-.sg-file-upload__description,
.sg-file-upload__status,
.sg-file-upload__file-meta {
margin: var(--spacing-small) 0 0;
@@ -22,9 +21,10 @@
.sg-file-upload__dropzone {
display: flex;
- flex-direction: column;
- align-items: flex-start;
- gap: var(--spacing-small);
+ 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);
@@ -36,10 +36,6 @@
outline-offset: 2px;
}
-.sg-file-upload__prompt {
- margin: 0;
-}
-
.sg-file-upload__files {
display: flex;
flex-direction: column;
@@ -78,6 +74,11 @@
}
@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;