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

[IMP] web: improve input colors

Browse Source 
== ISSUE ==

If you go to the Payroll Module, you can see that the checkboxes on the
main dashboard have a different color for the `background`
and the `border`.

This is due to inconsistencies in the color theme.

There was also an issue with the checkboxes in Accounting.
If you go to Accounting > Configuration > Currencies
and hover a checkbox, the checkboxes have a different background than
the one in Payroll which is not consistent.

== After this commit ==

The `background` and `border` color of the inputs are set
to the enterprise one. We also handle this in dark mode.

task-2818586

Part-of: odoo/odoo#116641
This commit is contained in:
chrysanthe(chgo)
2023-05-12 22:59:23 +02:00
committed by Pierre Paridans
parent 45b9e04db4
commit 7809147f59
2 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/scss/bootstrap_overridden.scss
Vendored
+1
View File
@@ -286,6 +286,7 @@ $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-focus-color: mix($o-success, $input-bg) !default;
$form-range-thumb-bg: $primary !default;
addons/web/static/src/scss/bootstrap_review_backend.scss
Vendored
+40
View File
@@ -258,3 +258,43 @@ $-o-bg-colors-custom: null;
background-color: $input-focus-bg;
border-color: $o-input-hover-border-color;
}
// Switches
// ============================================================================
.form-switch {
.form-check-input:checked {
background-color: $o-success;
border-color: $o-success;
}
.form-check-input:focus {
border-color: $o-success;
}
&:hover .form-check-input:not(:disabled) {
border-color: $o-success;
}
// Creating a different styling for toggle switches with a purpose of switching
// from A to B (eg. switching between month and year) rather than ON/OFF.
// The 'o_switch_toggle' class should be use in addition to the default
// 'form-switch' Bootstrap class.
&.o_switch_toggle {
.form-check-input, .form-check-input:checked {
border-color: $o-action;
background-color: $o-view-background-color;
&, &:focus, &:checked {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$o-action}'/></svg>"));
}
}
&:hover .form-check-input:not(:disabled) {
border-color: $o-action;
}
}
&:disabled, &.disabled, &[disabled] {
opacity: $o-opacity-disabled;
}
}