*: web

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

Co-authored-by: qsm-odoo <qsm@odoo.com>

*: web, portal

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

Co-authored-by: qsm-odoo <qsm@odoo.com>

For some strange reason, BS is handling small and large input groups
pretty well but not normal ones. Indeed when customizing the paddings
of buttons and inputs individually, the normal-size input groups are
broken. Also, customizing the border width of buttons always breaks
input groups for all sizes. This is now fixed.

Note: the first problem was actually already solved by increasing the
input height to the button height. It makes actually more sense to
shrink the button size to the input height as this commit does (as this
is the input which is the main element in an input group).

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

*: web_editor

Do not display the backdrop element added by bootstrap in the body and
add a background on the modal to keep the same effect. The bootstrap
backdrop was probably useful for compatibility with <IE9 but is no
longer needed. This also avoids z-index issues because modals could be
opened in an element (e.g. the website #wrapwrap) whose stacking context
is different of the body one (where the backdrop is opened). This would
make the backdrop appears on top of the modal.

Part of https://github.com/odoo/odoo/pull/49142
Related to task-2229551

Co-authored-by: qsm-odoo <qsm@odoo.com>

*: web, web_editor

Now, the user can edit each individual component of each color preset
thanks to the third tab of the left panel. The edition of the first
preset is the same as the others for the users but it is actually
also used for "no-preset" areas, meaning that they impact the whole
website by default (*without impacting the other presets*). The website
thus appears as areas using presets, preset 1 being the default (in the
future all areas will be customizable with a different preset). The only
difference between "using preset 1 explicitely" and "not using a preset"
will be that background color is transparent in no-preset, leaving the
body background appear. If the body background has no image, then there
is no difference at all as the background color of the body is set to be
the background color of the preset 1. In boxed mode, that color is used
for the "box" and the website body uses a different customizable color.

Note: before this commit, the "text" color edition was used to set the
main text color and one of the constrasting color for the color-yiq
function (the darkest if a dark color or the lightest if a light color).
That last part has been removed and automatic colors will now always
use $gray-900 and $white as contrasting colors, unless changed by the
theme explicitely. This needed to be removed as now the "text color"
edition has been moved in the "preset 1" config and should thus only
impact the "no-preset / preset 1" areas instead of all the presets.

Part of https://github.com/odoo/odoo/pull/45856
task-2197038

*: web, web_editor

Disable the automatic generation of bootstrap color buttons and do it
ourself with a tweak: we introduce btn-fill-* (working as the normal
btn-* classes (in opposition to btn-outline-* classes). We then map
btn-* classes to either btn-fill-* or btn-outline-* classes depending
on the configuration (with a sass extend).

Part of https://github.com/odoo/odoo/pull/52220
task-2197038

closes odoo/odoo#52220

Related: odoo/design-themes#288
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

Also extend bootstrap to not use that style on specific elements like
btn, dropdown-items, etc.

Part of https://github.com/odoo/odoo/pull/52220
task-2197038

Issue

    - Install eCommerce
    - Select Zap theme
    - Go on a product in the shop

    The quantity is hidden behind the buttons
    The quantity height is not the same than the buttons

Cause

    By default, there is a max width of 125px on the div containing
    the buttons and the quantity label. As this theme increase the
    button size, the quantity is hidden.

    The quantity label has `.form-control` class who override
    his height, so it's not using flex anymore.

    More details from QSM in design-themes closed PR #199:
        Bootstrap is not correct about input-group form-control height
        -> bootstrap_review.scss fix for the height of input-group
           form-controls

        Our max-width on css_quantity is not right, it should be a
        max-width on the internal input

Solution

    Restore the initial height in bootstrap_review for input-group form
    control

    Set the max-width only on the internal input.

OPW-2166311

closes odoo/odoo#43099

X-original-commit: 81e06ec43fdf90758556a654cedd75001ff654c1
Signed-off-by: Jason Van Malder <jvm-odoo@users.noreply.github.com>

Reproduce the issue

    - Load Arabic language
    - Install Accounting
    - Create an invoice & add credit note
    - Switch to arabic
    - Click on the "(i)" icon near the total price

    The popover is displayed at the other side of the screen

Cause

    - RTLcss was reversing the "left: 0" css property to "right: 0"
    - The popover configuration was not adapted for RTL

This commit ignore RTL for the popover css "left" property and
configure correctly the JS side

OPW-2146210

closes odoo/odoo#41200

X-original-commit: 88f03f0444a2533b1f6085369af431131da42b54
Signed-off-by: Jason Van Malder <jasonvanmalder@users.noreply.github.com>