Improve input disabled, select disabled (#4546)

* set default in template.css

* Theme Alternative Dark

* Theme Ansum

* Theme BlueLagoon

* Theme dark

* theme Nord

* fix

13 files changed, 48 insertions, 7 deletions

diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 13b5f7dc8..59ab41ea5 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -49,7 +49,8 @@ option {
 }
 
 input:disabled, select:disabled {
-	background: #eee;
+	color: #666;
+	border-color: #666;
 }
 
 input.extend {
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 573606f30..ef08cbb3f 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -49,7 +49,8 @@ option {
 }
 
 input:disabled, select:disabled {
-	background: #eee;
+	color: #666;
+	border-color: #666;
 }
 
 input.extend {
diff --git a/p/themes/Ansum/_forms.scss b/p/themes/Ansum/_forms.scss
index 0f5f96681..77c9e3552 100644
--- a/p/themes/Ansum/_forms.scss
+++ b/p/themes/Ansum/_forms.scss
@@ -116,7 +116,8 @@ input:invalid, select:invalid {
 }
 
 input:disabled, select:disabled {
-	background: variables.$grey-light;
+	color: variables.$grey-medium-dark;
+	border-color: variables.$grey-medium-dark;
 }
 
 input.extend {
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index ac35b263b..3df770d88 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -160,7 +160,8 @@ input:invalid, select:invalid {
 }
 
 input:disabled, select:disabled {
-	background: #f5f0ec;
+	color: #ba9;
+	border-color: #ba9;
 }
 
 input.extend {
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index c678ffc51..e4c6e2294 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -160,7 +160,8 @@ input:invalid, select:invalid {
 }
 
 input:disabled, select:disabled {
-	background: #f5f0ec;
+	color: #ba9;
+	border-color: #ba9;
 }
 
 input.extend {
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index 24a56b5b3..c60d2f1c3 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -61,6 +61,8 @@ input:invalid, select:invalid {
 
 input:disabled, select:disabled {
 	background: #eee;
+	border-style: solid;
+	border-color: #ccc;
 }
 
 input.extend {
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 415341439..55a9cf416 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -61,6 +61,8 @@ input:invalid, select:invalid {
 
 input:disabled, select:disabled {
 	background: #eee;
+	border-style: solid;
+	border-color: #ccc;
 }
 
 input.extend {
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index c25d8acb6..717c7c8f2 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -72,8 +72,10 @@ input:invalid, select:invalid {
 }
 
 input:disabled, select:disabled {
-	background: #666;
+	background-color: #222;
 	color: #aaa;
+	border-style: solid;
+	border-color: #000;
 }
 
 input.extend {
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 6c019e3db..f9af44eb2 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -72,8 +72,10 @@ input:invalid, select:invalid {
 }
 
 input:disabled, select:disabled {
-	background: #666;
+	background-color: #222;
 	color: #aaa;
+	border-style: solid;
+	border-color: #000;
 }
 
 input.extend {
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index ebaf1a2bf..84b53c5d0 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -74,6 +74,11 @@ input, select, textarea {
 	vertical-align: middle;
 }
 
+input:disabled, select:disabled {
+	color: #aaa;
+	border-color: var(--border);
+}
+
 button {
 	font-family: var(--sans-font);
 }
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index 5b4e85dca..a420aa180 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -74,6 +74,11 @@ input, select, textarea {
 	vertical-align: middle;
 }
 
+input:disabled, select:disabled {
+	color: #aaa;
+	border-color: var(--border);
+}
+
 button {
 	font-family: var(--sans-font);
 }
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index e0c7bd74e..d92975234 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -229,6 +229,15 @@ input[type="checkbox"] {
 	box-sizing: border-box;
 }
 
+input:disabled,
+select:disabled {
+	background-color: transparent;
+	min-width: 75px;
+	color: lightgray;
+	font-style: italic;
+	border: 1px dashed lightgray;
+}
+
 .dropdown-menu label > input[type="text"] {
 	width: 150px;
 	width: calc(99% - 5em);
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index a4031cafa..78a9f3ee1 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -229,6 +229,15 @@ input[type="checkbox"] {
 	box-sizing: border-box;
 }
 
+input:disabled,
+select:disabled {
+	background-color: transparent;
+	min-width: 75px;
+	color: lightgray;
+	font-style: italic;
+	border: 1px dashed lightgray;
+}
+
 .dropdown-menu label > input[type="text"] {
 	width: 150px;
 	width: calc(99% - 5em);