/** * RTL flip rules (P5-05) * * Applies to any descendant of , which base.html sets * automatically when LANGUAGE_BIDI is true (Arabic, Hebrew, etc.). * * Best-practice approach is logical properties (padding-inline-start * instead of padding-left). Where we can't change the underlying * component CSS, we flip the physical properties here so the layout * still mirrors correctly in RTL. * * Load AFTER components.css so these rules override. */ /* --------------------------------------------------------------------- * Logical spacing helpers (drop-in replacements we should migrate to). * ------------------------------------------------------------------ */ .pl-0-logical { padding-inline-start: 0 !important; } .pr-0-logical { padding-inline-end: 0 !important; } .ml-0-logical { margin-inline-start: 0 !important; } .mr-0-logical { margin-inline-end: 0 !important; } /* --------------------------------------------------------------------- * Bootstrap class overrides under dir="rtl". * * Bootstrap 5 shipped RTL-aware utility classes (me-* vs ms-*) but * most of our templates still use me-* / ms-* with LTR semantics in * mind. Flip their effect under dir="rtl". * ------------------------------------------------------------------ */ [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .border-start { border-right: var(--bs-border-width) solid var(--bs-border-color) !important; border-left: 0 !important; } [dir="rtl"] .border-end { border-left: var(--bs-border-width) solid var(--bs-border-color) !important; border-right: 0 !important; } /* --------------------------------------------------------------------- * Icon + image mirroring. * * Icons that encode direction (arrows, chevrons, play-triangles, * back/forward UI) should mirror. Decorative icons (hearts, gears, * bells) must NOT mirror — add .no-flip to opt out. * ------------------------------------------------------------------ */ [dir="rtl"] .bi-chevron-right, [dir="rtl"] .bi-chevron-left, [dir="rtl"] .bi-arrow-right, [dir="rtl"] .bi-arrow-left, [dir="rtl"] .bi-caret-right, [dir="rtl"] .bi-caret-left { transform: scaleX(-1); } [dir="rtl"] .flip-x { transform: scaleX(-1); } [dir="rtl"] .no-flip { transform: none !important; } /* --------------------------------------------------------------------- * Common component patterns. * * Anything that still uses padding-left / padding-right (pre-logical- * property) needs an explicit flip. * ------------------------------------------------------------------ */ /* Cards / list items with a left avatar + right content */ [dir="rtl"] .ag-card, [dir="rtl"] .ag-list-item, [dir="rtl"] .comment-row { direction: rtl; } /* Dropdown carets that use left: auto + right: … positioning */ [dir="rtl"] .dropdown-menu { left: auto; right: 0; } /* Form input with left-side icon (.input-icon-left) — flip to right */ [dir="rtl"] .input-icon-left { left: auto; right: 12px; } [dir="rtl"] .input-icon-left + input { padding-inline-start: 36px; padding-inline-end: 12px; } /* Close buttons anchored right in LTR should anchor left in RTL. */ [dir="rtl"] .btn-close-top-right, [dir="rtl"] .trailer-modal-close { left: 12px; right: auto; } /* --------------------------------------------------------------------- * Typography + line-height tweaks for Arabic. * * Arabic script has different x-height + ascender profile — bump the * line-height slightly so descenders in ج، ح، خ don't collide with * the next line's baseline. * ------------------------------------------------------------------ */ [dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] .lead, [dir="rtl"] .ag-body { line-height: 1.7; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { line-height: 1.4; } /* --------------------------------------------------------------------- * Bootstrap .ms-auto (margin-start: auto) works correctly — .me-auto * too. But .ml-auto / .mr-auto from older code predates the start/end * split and needs flipping. * ------------------------------------------------------------------ */ [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }