From 9da1f5c990845fe0b1f5b0af57eade4c1a3cb344 Mon Sep 17 00:00:00 2001 From: "Mathieu (mano)" Date: Tue, 13 Jun 2023 09:32:02 +0000 Subject: [PATCH] [FIX] web: set input background to transparent Prior to this commit, the `input-bg` in enterprise and in community were inconsistent. Some inputs such as the ones in list view were appearing in community with a weird white background while being hovered on. Meanwhile in enterprise, these inputs were having a transparent background. This commit sets the `input-bg` variable in `bootstrap_overridden` to transparent for the inputs in community. Since the variable is now the same in community and enterprise, this variable is now unnecessary and was removed from the enterprise branch. The boolean switch input is relying on the $form-switch-checked-color to display its SVG white circle, therefore it should be set to $o-white in community instead of $input-bg (its already the case in enterprise, doing so, this line can be removed from enterprise as well). The `form-switch-focus-color` is providing almost the same visual result when mixed with transparent rather than gray, allowing to remove the enterprise override. The form override in `review_backend` can be removed as well. $form-switch-circle-bg-color is not used anywhere in the code and can be removed since we use $form-switch-checked-color instead. Note: `form-control` relies on input-bg and could potentially cause issues but I didn't find any yet since most of the time the background is overridden or is on a white background. Task-3094005 closes odoo/odoo#124906 X-original-commit: fd55732d23956c1069c605cfc086d2d2d824b905 Related: odoo/enterprise#42509 Signed-off-by: Pierre Paridans (app) --- addons/web/static/src/legacy/scss/fields.scss | 2 +- addons/web/static/src/scss/bootstrap_overridden.scss | 5 ++--- addons/web/static/src/scss/bootstrap_review_backend.scss | 7 ------- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss index 37a484acb6c..1d3582e251d 100644 --- a/addons/web/static/src/legacy/scss/fields.scss +++ b/addons/web/static/src/legacy/scss/fields.scss @@ -35,7 +35,7 @@ border:$input-border-width solid var(--o-input-border-color); border-width: 0 0 $input-border-width 0; padding: $o-input-padding-y $o-input-padding-x; - background-color: var(--o-input-background-color, #{$o-view-background-color}); + background-color: var(--o-input-background-color, #{$input-bg}); // -- Nested o_input(s) .o_input { diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index cd50f991fdd..91d72c76ff8 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -279,13 +279,12 @@ $kbd-bg: $o-gray-100 !default; $kbd-box-shadow: 0px 1px 1px rgba($o-black, 0.2), inset 0px -1px 1px 1px rgba($o-gray-200, 0.8), inset 0px 2px 0px 0px rgba($o-white, 0.8) !default; // Input -$input-bg: $o-view-background-color !default; +$input-bg: transparent !default; $input-focus-border-color: $o-brand-primary !default; $form-check-input-checked-color: $o-brand-lightsecondary !default; $form-check-input-checked-border-color: $o-brand-primary !default; $form-check-input-checked-bg-color: $o-brand-primary !default; -$form-switch-checked-color: $input-bg !default; -$form-switch-circle-bg-color: $input-bg !default; +$form-switch-checked-color: $white !default; $form-switch-focus-color: mix($o-success, $input-bg) !default; $form-range-thumb-bg: $primary !default; diff --git a/addons/web/static/src/scss/bootstrap_review_backend.scss b/addons/web/static/src/scss/bootstrap_review_backend.scss index e5722202df2..4f514149f4c 100644 --- a/addons/web/static/src/scss/bootstrap_review_backend.scss +++ b/addons/web/static/src/scss/bootstrap_review_backend.scss @@ -257,13 +257,6 @@ $-o-bg-colors-custom: null; @extend %-card-body-reviewed; // See bootstrap_review.scss } -// Forms -// ============================================================================== -.form-control:hover { - background-color: $input-focus-bg; - border-color: $o-input-hover-border-color; -} - // Switches // ============================================================================ .form-switch {