forms styling WIP

2025-06-23 11:37:52 +02:00
parent 837e666af9
commit 8dd24a8c1e
5 changed files with 83 additions and 62 deletions
--- a/CSS/Element/form.css
+++ b/CSS/Element/form.css
@@ -0,0 +1,54 @@
+.form-flex {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    align-items: center;
+    width: 100%;
+}
+
+form label {
+    width: fit-content;
+}
+
+form input {
+    border: var(--border-primary);
+    height: var(--h-md);
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.input {
+    display: flex;
+    flex-direction: column;
+    row-gap: 2px;
+    align-items: start;
+}
+
+.input-short {
+    max-width: 240px;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    max-width: 600px;
+}
+
+.form-grid label {
+    display: flex;
+    flex-direction: column;
+    font-weight: bold;
+}
+
+.form-grid textarea {
+    grid-column: span 2;
+    resize: vertical;
+    min-height: 100px;
+}
+
+input, textarea {
+    padding: 8px;
+    font-size: 1rem;
+    margin-top: 5px;
+}