/* RTL helper stylesheet Place this file into your build pipeline (Vite / Laravel Mix / plain ) so it's loaded after Bootstrap and your main app stylesheet. It uses CSS logical properties so that existing Bootstrap utility classes (e.g. .fixed-start / .fixed-end, .ms-3 / .me-3, .text-start / .text-end) behave correctly when the page is rendered in RTL. Activate RTL by setting `dir="rtl"` on the element or by adding the `.rtl` class to a top-level element. Usage examples: - ... - ... Notes: - This file intentionally only overrides a small set of utilities used in the sidebar component. - It prefers logical properties (margin-inline, padding-inline, text-align: start/end) so it works with the browser's direction behaviour. - Ensure this file is loaded after Bootstrap's CSS so the rules here override the default utilities. */ /* Scope: both attribute-based and class-based activation */ html[dir="rtl"], .rtl { direction: rtl; } /* Swap fixed-start / fixed-end positioning (Bootstrap uses left/right). */ html[dir="rtl"] .fixed-start, .rtl .fixed-start { right: 0 !important; left: auto !important; } html[dir="rtl"] .fixed-end, .rtl .fixed-end { left: 0 !important; right: auto !important; } /* Re-map margin-start (ms-*) and margin-end (me-*) to logical properties so they follow direction */ html[dir="rtl"] .ms-0, .rtl .ms-0 { margin-inline-start: 0 !important; } html[dir="rtl"] .ms-1, .rtl .ms-1 { margin-inline-start: .25rem !important; } html[dir="rtl"] .ms-2, .rtl .ms-2 { margin-inline-start: .5rem !important; } html[dir="rtl"] .ms-3, .rtl .ms-3 { margin-inline-start: 1rem !important; } html[dir="rtl"] .ms-4, .rtl .ms-4 { margin-inline-start: 1.5rem !important; } html[dir="rtl"] .ms-5, .rtl .ms-5 { margin-inline-start: 3rem !important; } html[dir="rtl"] .me-0, .rtl .me-0 { margin-inline-end: 0 !important; } html[dir="rtl"] .me-1, .rtl .me-1 { margin-inline-end: .25rem !important; } html[dir="rtl"] .me-2, .rtl .me-2 { margin-inline-end: .5rem !important; } html[dir="rtl"] .me-3, .rtl .me-3 { margin-inline-end: 1rem !important; } html[dir="rtl"] .me-4, .rtl .me-4 { margin-inline-end: 1.5rem !important; } html[dir="rtl"] .me-5, .rtl .me-5 { margin-inline-end: 3rem !important; } /* Also support padding-start / padding-end (ps / pe) if your templates use them */ html[dir="rtl"] .ps-0, .rtl .ps-0 { padding-inline-start: 0 !important; } html[dir="rtl"] .ps-1, .rtl .ps-1 { padding-inline-start: .25rem !important; } html[dir="rtl"] .ps-2, .rtl .ps-2 { padding-inline-start: .5rem !important; } html[dir="rtl"] .ps-3, .rtl .ps-3 { padding-inline-start: 1rem !important; } html[dir="rtl"] .ps-4, .rtl .ps-4 { padding-inline-start: 1.5rem !important; } html[dir="rtl"] .ps-5, .rtl .ps-5 { padding-inline-start: 3rem !important; } html[dir="rtl"] .pe-0, .rtl .pe-0 { padding-inline-end: 0 !important; } html[dir="rtl"] .pe-1, .rtl .pe-1 { padding-inline-end: .25rem !important; } html[dir="rtl"] .pe-2, .rtl .pe-2 { padding-inline-end: .5rem !important; } html[dir="rtl"] .pe-3, .rtl .pe-3 { padding-inline-end: 1rem !important; } html[dir="rtl"] .pe-4, .rtl .pe-4 { padding-inline-end: 1.5rem !important; } html[dir="rtl"] .pe-5, .rtl .pe-5 { padding-inline-end: 3rem !important; } /* Text alignment helpers: use logical alignment so start/end follow direction */ html[dir="rtl"] .text-start, .rtl .text-start { text-align: start !important; } html[dir="rtl"] .text-end, .rtl .text-end { text-align: end !important; } /* Float utilities */ html[dir="rtl"] .float-start, .rtl .float-start { float: inline-start !important; } html[dir="rtl"] .float-end, .rtl .float-end { float: inline-end !important; } /* If you need to flip additional utilities, add them here following the same pattern. */ /* Arabic font-face definition */ @font-face { font-family: 'DINNextArabic'; src: url('/assets//fonts/arabic/DINNEXTLTARABIC-LIGHT-2-2.ttf') format('truetype'); font-weight: 300; font-style: normal; } /* Apply Arabic font to text only — not icons */ [dir="rtl"] :not(.material-icons):not(i):not([class*="material-icons"]) { font-family: 'DINNextArabic', sans-serif !important; }