Invalid forms style (#1143)

levkk · web-flow · commit 039aca57d25c · 2023-11-02T12:31:40.000-07:00
diff --git a/pgml-dashboard/static/css/scss/abstracts/variables.scss b/pgml-dashboard/static/css/scss/abstracts/variables.scss
@@ -193,6 +193,9 @@ $form-range-thumb-active-bg: #{$primary};
 $form-range-thumb-bg: #{$primary};
 $form-range-thumb-border: 4px solid #{$neon-tint-100};
 $form-range-track-bg: #111213;
+$form-feedback-icon-invalid: none;
+$form-feedback-icon-valid: none;
+$form-feedback-invalid-color: #{$error};
 
 $input-box-shadow: none;
 $form-switch-checked-color: #{$gray-100};
diff --git a/pgml-dashboard/static/css/scss/components/_forms.scss b/pgml-dashboard/static/css/scss/components/_forms.scss
@@ -257,6 +257,21 @@
     caret-color: #{$input-color};
 }
 
+.form-control {
+    &.is-invalid {
+        &:focus {
+            box-shadow: none;
+            border-width: 2px;
+        }
+
+        padding-right: #{$input-padding-x};
+    }
+}
+
+.invalid-feedback {
+    --bs-danger-text: #{$error};
+}
+
 .hourly-rate {
     display: flex;
     flex-direction: row;
diff --git a/pgml-dashboard/static/css/scss/layout/_utilities.scss b/pgml-dashboard/static/css/scss/layout/_utilities.scss
@@ -97,3 +97,9 @@
 .min-vw-0 {
     min-width: 0;
 }
+
+.min-vh-lg-100 {
+    @include media-breakpoint-up(lg) {
+        min-height: 100vh;
+    }
+}
