[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:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user