From 0afe6fbda5021fb86cf6a7688ef3dc32c250d564 Mon Sep 17 00:00:00 2001
From: "Morgane (morm)" <morm@odoo.com>
Date: Thu, 11 Aug 2022 13:35:23 +0000
Subject: [PATCH] [IMP] web: improve cards and toggles design

This commit improves cards and toggles designs and part of the overall
v16 SCSS optimization/restyle, task-2704984.

The default values of the cards wasn't consistant with the rest of odoo
(ie. default background color value was grey instead of the BS default
which is white) and to avoid these inconsistencies, the card classes
were not used (even though we do have card-like visual elements).

Before this commit, if we wanted to use them, we had to add utility
classes all over the place (ie. the 'bg-white' class) which is not
optimal.

This commit also simplifies toggle's visual rendering by removing
unnecessary graphical elements that were not readable in regular & small
font-size,

In some case the toggle design was even irrelevant with the content and
required unnecessary overrides in css to hide it (ie. it's ok in
Recruitment but not in Payroll).

task-2924487

closes odoo/odoo#98770

Related: odoo/enterprise#29829
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 .../src/legacy/scss/bootstrap_overridden.scss | 19 +++++++------------
 .../web/static/src/webclient/webclient.scss   |  3 ---
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
index c946cf5373b..61048542c6f 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
@@ -239,21 +239,10 @@ $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-white !default;
-$form-check-input-border-radius: 0 !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-color: rgba($black, .25) !default;
-$form-switch-checked-color: $o-brand-primary !default;
+$form-switch-checked-color: $input-bg !default;
 $form-switch-circle-bg-color: $input-bg !default;
-$form-switch-circle-checked-bg-color: $input-bg !default;
-$form-switch-icon-color: $form-switch-color !default;
-$form-switch-icon-checked-color: $form-switch-checked-color !default;
-$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-circle-bg-color}'/><line x1='-1.5' y1='-1.5' x2='1.5' y2='1.5' stroke='#{$form-switch-icon-color}' stroke-width='0.75'/><line x1='1.5' y1='-1.5' x2='-1.5' y2='1.5' stroke='#{$form-switch-icon-color}' stroke-width='0.75'/></svg>") !default;
-$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-circle-checked-bg-color}'/><path d='m-2.125,-0.5l1.75,1.75l2.5,-2.5' fill='none' stroke='#{$form-switch-icon-checked-color}' stroke-width='0.75'/></svg>") !default;
 
 // Badge
 $badge-color: inherit !default;
@@ -262,3 +251,9 @@ $badge-padding-x: 0.4em !default;
 
 // Placeholder color 
 $input-placeholder-color: $gray-300 !default;
+
+// Card
+
+$card-spacer-y: $spacer !default; // BS Default
+$card-cap-padding-y: $card-spacer-y !default;
+$card-cap-bg: $o-white !default;
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index f5fe38561fd..70386db5ef8 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -36,9 +36,6 @@ tfoot {
   outline: none;
 }
 
-div.o_boolean_toggle.form-switch.form-check > input.form-check-input:not(:checked) {
-  background-color: $form-switch-color;
-}
 
 // User input typically entered via keyboard
 kbd {