/* 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; } /* More specific overrides to match material-dashboard selectors (mirrored) */ /* Navbar vertical fixed positions (all expand sizes) */ html[dir="rtl"] .navbar-vertical.navbar-expand-xs.fixed-start, .rtl .navbar-vertical.navbar-expand-xs.fixed-start, html[dir="rtl"] .navbar-vertical.navbar-expand-sm.fixed-start, .rtl .navbar-vertical.navbar-expand-sm.fixed-start, html[dir="rtl"] .navbar-vertical.navbar-expand-md.fixed-start, .rtl .navbar-vertical.navbar-expand-md.fixed-start, html[dir="rtl"] .navbar-vertical.navbar-expand-lg.fixed-start, .rtl .navbar-vertical.navbar-expand-lg.fixed-start, html[dir="rtl"] .navbar-vertical.navbar-expand-xl.fixed-start, .rtl .navbar-vertical.navbar-expand-xl.fixed-start, html[dir="rtl"] .navbar-vertical.navbar-expand-xxl.fixed-start, .rtl .navbar-vertical.navbar-expand-xxl.fixed-start { right: 0 !important; left: auto !important; } html[dir="rtl"] .navbar-vertical.navbar-expand-xs.fixed-end, .rtl .navbar-vertical.navbar-expand-xs.fixed-end, html[dir="rtl"] .navbar-vertical.navbar-expand-sm.fixed-end, .rtl .navbar-vertical.navbar-expand-sm.fixed-end, html[dir="rtl"] .navbar-vertical.navbar-expand-md.fixed-end, .rtl .navbar-vertical.navbar-expand-md.fixed-end, html[dir="rtl"] .navbar-vertical.navbar-expand-lg.fixed-end, .rtl .navbar-vertical.navbar-expand-lg.fixed-end, html[dir="rtl"] .navbar-vertical.navbar-expand-xl.fixed-end, .rtl .navbar-vertical.navbar-expand-xl.fixed-end, html[dir="rtl"] .navbar-vertical.navbar-expand-xxl.fixed-end, .rtl .navbar-vertical.navbar-expand-xxl.fixed-end { left: 0 !important; right: auto !important; } /* Sidenav + main-content margin flips (mirrors material-dashboard @media (min-width:1200px) rules) */ @media (min-width: 1200px) { html[dir="rtl"] .sidenav.fixed-start + .main-content, .rtl .sidenav.fixed-start + .main-content { margin-right: 17.125rem !important; margin-left: 0 !important; } html[dir="rtl"] .sidenav.fixed-end + .main-content, .rtl .sidenav.fixed-end + .main-content { margin-left: 17.125rem !important; margin-right: 0 !important; } /* g-sidenav-hidden variant used in material-dashboard */ html[dir="rtl"] .g-sidenav-hidden .navbar-vertical.fixed-start + .main-content, .rtl .g-sidenav-hidden .navbar-vertical.fixed-start + .main-content { margin-right: 7.5rem !important; margin-left: 0 !important; } } /* Small-screen g-sidenav-show flip (mirrors material-dashboard @media (max-width: 1199.98px) behavior) */ @media (max-width: 1199.98px) { html[dir="rtl"] .g-sidenav-show .sidenav.fixed-start + .main-content, .rtl .g-sidenav-show .sidenav.fixed-start + .main-content { margin-right: 0 !important; margin-left: 0 !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"] .ms-auto, .rtl .ms-auto { margin-inline-start: auto !important; } html[dir="rtl"] .me-auto, .rtl .me-auto { margin-inline-end: auto !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. */ /* Mirror .form-check positioning used in material-dashboard.css so checkboxes/radios appear on the correct side in RTL. This flips the left padding/offset used in LTR to the right side when the page is in RTL. */ html[dir="rtl"] .form-check, .rtl .form-check { /* original LTR uses `padding-left: 1.73em`; in RTL we want that space on the right */ padding-left: 0 !important; padding-right: 1.73em !important; } html[dir="rtl"] .form-check .form-check-input, .rtl .form-check .form-check-input { /* original LTR uses `float: left` and `margin-left: -1.73em` to visually place the control in the padding area; flip those to the right in RTL */ float: right !important; margin-left: 0 !important; margin-right: -1.73em !important; } /* Floating notification RTL overrides (moved from inline layout styles) */ html[dir="rtl"] .floating-notification-btn, .rtl .floating-notification-btn { right: auto !important; left: 20px !important; } html[dir="rtl"] .floating-notification-btn .badge, .rtl .floating-notification-btn .badge { right: auto !important; left: -8px !important; } html[dir="rtl"] .notification-dropdown-float, .rtl .notification-dropdown-float { right: auto !important; left: 0 !important; } /* If the dropdown needs a different transform origin in RTL, set it for smoother animation */ html[dir="rtl"] .notification-dropdown-float, .rtl .notification-dropdown-float { transform-origin: top left; } /* End floating notification RTL overrides */ /* 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; } /* Automatically apply Arabic font to RTL pages */ [dir="rtl"] :not(.material-icons):not(i):not([class*="material-icons"]) { font-family: 'DINNextArabic', sans-serif !important; }