#6372: Improve form styling

netbox-community · Jul 19, 2021 · 64e6dcb · 64e6dcb
1 parent 1661d1f
commit 64e6dcb
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 8 deletions.
diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
diff --git a/netbox/project-static/dist/netbox-dark.css.map b/netbox/project-static/dist/netbox-dark.css.map
diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css
diff --git a/netbox/project-static/dist/netbox-light.css.map b/netbox/project-static/dist/netbox-light.css.map
diff --git a/netbox/project-static/styles/select.scss b/netbox/project-static/styles/select.scss
@@ -18,7 +18,7 @@ $spacing-s: $input-padding-x;
   --nbx-select-option-selected-bg: #{$gray-300};
   --nbx-select-option-hover-bg: #{$blue};
   --nbx-select-option-hover-color: #{$white};
-  --nbx-select-placeholder-color: #{$gray-500};
+  --nbx-select-placeholder-color: #{$gray-600};
   --nbx-select-value-color: #{$white};
   & body[data-netbox-color-mode='dark'] {
     --nbx-select-content-bg: #{$gray-900};
@@ -120,7 +120,7 @@ div.form-floating div.ss-main div.ss-multi-selected {
         background-color: transparent;
       }
       .ss-option.ss-disabled:hover {
-        color: unset;
+        color: $form-select-disabled-color;
       }
     }
     border-bottom-left-radius: $form-select-border-radius;

diff --git a/netbox/project-static/styles/theme-dark.scss b/netbox/project-static/styles/theme-dark.scss
@@ -60,8 +60,9 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($white, 0.125);
 $btn-link-disabled-color: $gray-300;
 
 // Forms
+$component-active-bg: $primary;
 $form-text-color: $text-muted;
-$input-bg: $gray-800;
+$input-bg: $gray-900;
 $input-disabled-bg: $gray-700;
 $input-color: $gray-100;
 $input-border-color: $gray-700;
@@ -90,7 +91,7 @@ $input-group-addon-bg: $gray-700;
 $input-group-addon-border-color: $input-border-color;
 
 $form-select-color: $input-color;
-$form-select-disabled-color: $gray-400;
+$form-select-disabled-color: $gray-700;
 $form-select-bg: $input-bg;
 $form-select-disabled-bg: $input-disabled-bg;
 $form-select-indicator-color: $form-select-color;
@@ -109,6 +110,9 @@ $form-file-button-color: $input-color;
 $form-file-button-bg: $input-group-addon-bg;
 $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%);
 
+$form-feedback-valid-color: $success;
+$form-feedback-invalid-color: $danger;
+
 // Navs
 $nav-link-color: $body-color;
 $nav-link-hover-color: null;