Validate expense/reimbursement forms

Adds some general helpers and styles for minimalistic form validation.
2020-09-29 18:37:55 +02:00
parent 326d46b1a1
commit 444ec62a66
9 changed files with 114 additions and 45 deletions
@@ -58,7 +58,7 @@ section#signup {
      }
    }

-    input[type=text], select {
+    input[type=text], input[type=url], select {
      width: 100%;
      padding: 1rem;
      border: none;
@@ -72,12 +72,15 @@ section#signup {
      &:focus, &.valid {
        background-color: rgba(22, 21, 40, 0.6);
      }
-      &:focus {
+      &:focus :not(:invalid) {
        border-color: $blue;
      }
      &::placeholder {
        color: rgba(238, 238, 238, 0.5);
      }
+      &.invalid {
+        border-color: $red;
+      }
    }

    select {