pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web: improve cards and toggles design

Browse Source 
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>
This commit is contained in:
Morgane (morm)
2022-09-05 14:49:56 +02:00
committed by Pierre Paridans
parent 854260f436
commit 0afe6fbda5
2 changed files with 7 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/legacy/scss/bootstrap_overridden.scss
Vendored
+7 -12
View File
@@ -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;
addons/web/static/src/webclient/webclient.scss
-3
View File
@@ -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 {