From 83437c0dd1c6f78a15b5f7468fc6ba0ce36698dc Mon Sep 17 00:00:00 2001 From: maTh Date: Mon, 29 Aug 2022 08:43:14 +0200 Subject: 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 | 3 ++- p/themes/Alternative-Dark/adark.rtl.css | 3 ++- p/themes/Ansum/_forms.scss | 3 ++- p/themes/Ansum/ansum.css | 3 ++- p/themes/Ansum/ansum.rtl.css | 3 ++- p/themes/BlueLagoon/BlueLagoon.css | 2 ++ p/themes/BlueLagoon/BlueLagoon.rtl.css | 2 ++ p/themes/Dark/dark.css | 4 +++- p/themes/Dark/dark.rtl.css | 4 +++- p/themes/Nord/nord.css | 5 +++++ p/themes/Nord/nord.rtl.css | 5 +++++ p/themes/base-theme/template.css | 9 +++++++++ p/themes/base-theme/template.rtl.css | 9 +++++++++ 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); -- cgit v1.2.3