Improve input disabled, select disabled (#4546)

* set default in template.css

* Theme Alternative Dark

* Theme Ansum

* Theme BlueLagoon

* Theme dark

* theme Nord

* fix

p/themes/Alternative-Dark/adark.css

@@ -49,7 +49,8 @@ option {
 }
 
 input:disabled, select:disabled {
-	background: #eee;
+	color: #666;
+	border-color: #666;
 }
 
 input.extend {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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);
 }

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);
 }

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);

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);