[MOV] web: allow oi icons to flip in RTL frontend

Prior to this commit, `oi` icons were not adapted when RTL was defined
in frontend.
This is because RTL adaptations were defined in the backend bundle.

This commit moves the RTL adaptations to be used wherever `oi` icons can
be defined.

Steps to reproduce :
- Enter in edit mode
- Drag and drop an image gallery and a carousel snippet
- Navigate to the theme tab
- Add an RTL language (Arabic, for instance)

Bugs :
- The image gallery displays inverted chevrons
- The carousel's chevrons are correct, but clicking on "previous"
  displays the next picture, and vice versa.

Also, some icons a bit everywhere in the apps were not rotated either.
For instance, the back button a forum post to go back to the forum.

Note that task-3714335 will replace FA icons by BS icons, and will
triple check Odoo icons at the same time, to ensure all Odoo icons are
available in the frontend and correctly imported. For instance,
`oi-spin` and `oi-pulse` could make sense in the frontend too.

opw-3747848
task-3794966

closes odoo/odoo#159150

X-original-commit: fc105130551cf9897c7a0a78baf4458e6d5e6fd8
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
This commit is contained in:
Brieuc-brd
2024-03-26 09:54:29 +00:00
parent 71eea06e7c
commit 3bf4fa0ac6
2 changed files with 14 additions and 17 deletions
@@ -59,3 +59,17 @@
.oi-text-effect:before { content: '\e827'; }
.oi-smile-add:before { content: '\e84e'; }
.oi-close:before { content: '\e852'; }
/* RTL adaptations. */
/* Flip directional icons by 180 degree. */
/* ---------------------------------------------------------------------------- */
.o_rtl .oi-chevron-left,
.o_rtl .oi-chevron-right,
.o_rtl .oi-arrow-down-left,
.o_rtl .oi-arrow-down-right,
.o_rtl .oi-arrow-left,
.o_rtl .oi-arrow-right,
.o_rtl .oi-arrow-up-left,
.o_rtl .oi-arrow-up-right {
transform: rotate(180deg);
}
@@ -80,20 +80,3 @@ $oi-sizes: (
mask: url('/web/static/img/barcode.svg') center/contain no-repeat;
background-color: $o-brand-primary;
}
// RTL adaptations.
// ----------------------------------------------------------------------------
.o_rtl {
// Flip directional icons by 180 degree.
.oi-chevron-left,
.oi-chevron-right,
.oi-arrow-down-left,
.oi-arrow-down-right,
.oi-arrow-left,
.oi-arrow-right,
.oi-arrow-up-left,
.oi-arrow-up-right {
transform: rotate(180deg);
}
}