gitea_admin/Styleguide
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: align file upload controls

Browse Source
This commit is contained in:
gitea_admin committed 2026-09-08 11:26:56 +02:00
1 parent 4e5d1e32e8
commit 5b2c75deb4
4 files changed
+30 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/interactive-elements.html
+4 -3
View File
@@ -851,12 +851,13 @@
<p class="sg-preview-label">Component: File Input</p> <p class="sg-preview-label">Component: File Input</p>
<div class="sg-form-preview-area"> <div class="sg-form-preview-area">
<div class="sg-file-input" data-component="file-input"> <div class="sg-file-input" data-component="file-input">
<label class="sg-label" for="component-file-input-control">Dateien auswählen</label> <div class="sg-file-input__row sg-labeled-input-row">
<p class="sg-file-input__description sg-body" id="component-file-input-description">Mehrere Dateien können ausgewählt werden.</p> <label class="sg-label" for="component-file-input-control">Datei auswählen</label>
<input class="sg-file-input__control" id="component-file-input-control" type="file" multiple aria-describedby="component-file-input-description"> <input class="sg-file-input__control" id="component-file-input-control" type="file" multiple>
<button class="sg-interaction-element sg-button sg-button--active sg-file-input__trigger" type="button">Dateien auswählen</button> <button class="sg-interaction-element sg-button sg-button--active sg-file-input__trigger" type="button">Dateien auswählen</button>
</div> </div>
</div> </div>
</div>
</section> </section>
<script> <script>
patterns/file-upload.html
+3 -7
View File
@@ -11,13 +11,9 @@
<section id="pattern-file-upload"> <section id="pattern-file-upload">
<p class="sg-preview-label">Pattern: Datei-Upload</p> <p class="sg-preview-label">Pattern: Datei-Upload</p>
<form class="sg-file-upload" data-pattern="file-upload" action="#" method="post"> <form class="sg-file-upload" data-pattern="file-upload" action="#" method="post">
<div> <div class="sg-file-upload__dropzone sg-labeled-input-row" data-drag-over="false">
<label class="sg-label" for="file-upload-input">Dokumente hochladen</label> <label class="sg-label" for="file-upload-input">Datei auswählen</label>
<p class="sg-body sg-file-upload__description" id="file-upload-help">Mehrere Dateien auswählen. Erlaubte Formate: PDF, DOCX. Maximale Dateigröße: 10 MB pro Datei.</p> <input class="sg-file-input__control" id="file-upload-input" name="documents" type="file" multiple aria-describedby="file-upload-status">
</div>
<div class="sg-file-upload__dropzone" data-drag-over="false">
<input class="sg-file-input__control" id="file-upload-input" name="documents" type="file" multiple aria-describedby="file-upload-help file-upload-status">
<p class="sg-body sg-file-upload__prompt">Dateien hierher ziehen oder</p>
<button class="sg-interaction-element sg-button sg-button--active sg-file-upload__trigger" type="button">Dateien auswählen</button> <button class="sg-interaction-element sg-button sg-button--active sg-file-upload__trigger" type="button">Dateien auswählen</button>
</div> </div>
<p class="sg-body sg-file-upload__status" id="file-upload-status" aria-live="polite">Noch keine Dateien ausgewählt.</p> <p class="sg-body sg-file-upload__status" id="file-upload-status" aria-live="polite">Noch keine Dateien ausgewählt.</p>
styles/10-components-interactive-elements.css
+14 -7
View File
@@ -1588,9 +1588,14 @@
/* Component: File Input */ /* Component: File Input */
.sg-file-input { .sg-file-input {
width: 100%;
}
.sg-file-input__row {
display: flex; display: flex;
flex-direction: column; align-items: center;
gap: var(--spacing-small); justify-content: space-between;
gap: var(--spacing-large);
width: 100%; width: 100%;
} }
@@ -1611,15 +1616,17 @@
outline-offset: 2px; outline-offset: 2px;
} }
.sg-file-input__description {
margin: 0;
color: var(--text-control-disabled);
}
.sg-file-input__trigger { .sg-file-input__trigger {
align-self: flex-start; align-self: flex-start;
} }
@media (max-width: 48rem) {
.sg-file-input__row {
align-items: flex-start;
flex-direction: column;
}
}
.sg-file-input--disabled { .sg-file-input--disabled {
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
} }
styles/47-patterns-file-upload.css
+9 -8
View File
@@ -14,7 +14,6 @@
max-width: var(--layout-input-field-max-width); max-width: var(--layout-input-field-max-width);
} }
.sg-file-upload__description,
.sg-file-upload__status, .sg-file-upload__status,
.sg-file-upload__file-meta { .sg-file-upload__file-meta {
margin: var(--spacing-small) 0 0; margin: var(--spacing-small) 0 0;
@@ -22,9 +21,10 @@
.sg-file-upload__dropzone { .sg-file-upload__dropzone {
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: flex-start; justify-content: space-between;
gap: var(--spacing-small); gap: var(--spacing-large);
width: 100%;
padding: var(--spacing-large); padding: var(--spacing-large);
background: var(--surface-file-upload-dropzone); background: var(--surface-file-upload-dropzone);
border: 1px dashed var(--surface-button-active); border: 1px dashed var(--surface-button-active);
@@ -36,10 +36,6 @@
outline-offset: 2px; outline-offset: 2px;
} }
.sg-file-upload__prompt {
margin: 0;
}
.sg-file-upload__files { .sg-file-upload__files {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -78,6 +74,11 @@
} }
@media (max-width: 48rem) { @media (max-width: 48rem) {
.sg-file-upload__dropzone {
align-items: flex-start;
flex-direction: column;
}
.sg-file-upload__file { .sg-file-upload__file {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;