From 9703eba6ec162836da7f429251a71debdbf3ae39 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Wed, 17 Feb 2021 11:15:35 +0100
Subject: [PATCH] Fixed styles for disabled inputs in dark theme

---
 src/index.scss             | 10 ++++++++--
 src/theme/theme.scss       |  4 ++++
 src/utils/DropdownBtn.scss |  5 +++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 748664b3..f4be25a1 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -129,8 +129,14 @@ body,
   border-color: var(--input-border-color);
 }
 
-.card .form-control,
-.card .form-control:hover {
+.form-control.disabled,
+.form-control:disabled {
+  background-color: var(--input-disabled-color);
+  cursor: not-allowed;
+}
+
+.card .form-control:not(:disabled),
+.card .form-control:not(:disabled):hover {
   background-color: var(--input-color);
 }
 
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index 5d9dd194..042de9c3 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -9,6 +9,7 @@ $lightBorderColor: rgba(0, 0, 0, .125);
 $lightActiveColor: $lightGrey;
 $lightBrandColor: $mainColor;
 $lightInputColor: $lightPrimaryColor;
+$lightDisabledInputColor: $lightColor;
 $lightBorderInputColor: rgba(0, 0, 0, .19);
 
 // Dark theme colors
@@ -20,6 +21,7 @@ $darkBorderColor: rgba(0, 0, 0, .2);
 $darkActiveColor: $darkSecondaryColor;
 $darkBrandColor: #0b2d4e;
 $darkInputColor: darken($darkPrimaryColor, 2%);
+$darkDisabledInputColor: lighten($darkPrimaryColor, 2%);
 $darkBorderInputColor: rgba(0, 0, 0, .3);
 
 html:not([data-theme='dark']) {
@@ -31,6 +33,7 @@ html:not([data-theme='dark']) {
   --active-color: #{$lightActiveColor};
   --brand-color: #{$lightBrandColor};
   --input-color: #{$lightInputColor};
+  --input-disabled-color: #{$lightDisabledInputColor};
   --input-border-color: #{$lightBorderInputColor};
 }
 
@@ -43,5 +46,6 @@ html[data-theme='dark'] {
   --active-color: #{$darkActiveColor};
   --brand-color: #{$darkBrandColor};
   --input-color: #{$darkInputColor};
+  --input-disabled-color: #{$darkDisabledInputColor};
   --input-border-color: #{$darkBorderInputColor};
 }
diff --git a/src/utils/DropdownBtn.scss b/src/utils/DropdownBtn.scss
index cd3161bf..f630328e 100644
--- a/src/utils/DropdownBtn.scss
+++ b/src/utils/DropdownBtn.scss
@@ -21,6 +21,11 @@
   background-color: var(--input-color);
 }
 
+.dropdown-btn__toggle.dropdown-btn__toggle.disabled,
+.dropdown-btn__toggle.dropdown-btn__toggle:disabled {
+  background-color: var(--input-disabled-color);
+}
+
 .dropdown-btn__toggle.dropdown-btn__toggle:after {
   @include vertical-align();