/* * Rechts-naar-links (ar, he, fa, ur, ps, ku) * ========================================== * Wordt alleen ingeladen als de gekozen taal rechts-naar-links loopt. Alles * hangt onder [dir="rtl"], zodat dit bestand nooit iets kan doen in de andere * 82 talen. * * dir="rtl" op regelt de tekstloop en de leesrichting van flex- en * grid-rijen zelf. Wat de browser NIET meeneemt zijn de vaste left/right- * posities, de marges en de paddings die met fysieke kanten in de stylesheets * staan - juist die zetten hier een menu of een dropdown buiten beeld. Daarom * staan hieronder alleen die gevallen. */ [dir="rtl"] body { text-align: right; } /* Tekst die per se links moet blijven staan: codes, bedragen, IBAN, e-mail. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"], [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .iban, [dir="rtl"] .account-code, [dir="rtl"] .price, [dir="rtl"] .amount { direction: ltr; text-align: right; unicode-bidi: plaintext; } /* Tabellen: kopcellen en cellen staan in de stylesheets op text-align:left. */ [dir="rtl"] th, [dir="rtl"] td { text-align: right; } [dir="rtl"] th.right, [dir="rtl"] td.right, [dir="rtl"] .text-right { text-align: left; } /* Zijbalken van het bedrijfs- en salesdashboard. */ [dir="rtl"] .sidebar, [dir="rtl"] .dashboard-sidebar { left: auto; right: 0; } [dir="rtl"] .main-content, [dir="rtl"] .dashboard-main, [dir="rtl"] .content-wrapper { margin-left: 0; margin-right: var(--sidebar-width, 260px); } @media (max-width: 1024px) { [dir="rtl"] .main-content, [dir="rtl"] .dashboard-main, [dir="rtl"] .content-wrapper { margin-right: 0; } } /* Uitklapmenu's die met right:0 aan de rechterkant hangen. */ [dir="rtl"] .lang-dropdown-menu, [dir="rtl"] .sidebar-lang-menu, [dir="rtl"] .user-dropdown-menu, [dir="rtl"] .dropdown-menu, [dir="rtl"] .notification-dropdown { right: auto; left: 0; } /* Mobiele schuiflade komt van de andere kant binnen. */ [dir="rtl"] .mobile-sidebar, [dir="rtl"] .mobile-nav, [dir="rtl"] .offcanvas { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] .mobile-sidebar.open, [dir="rtl"] .mobile-nav.open, [dir="rtl"] .offcanvas.open, [dir="rtl"] .mobile-sidebar.active, [dir="rtl"] .mobile-nav.active { transform: translateX(0); } /* Pijltjes en chevrons wijzen de andere kant op. */ [dir="rtl"] .fa-chevron-right::before { content: "\f053"; } [dir="rtl"] .fa-chevron-left::before { content: "\f054"; } [dir="rtl"] .fa-arrow-right::before { content: "\f060"; } [dir="rtl"] .fa-arrow-left::before { content: "\f061"; } [dir="rtl"] .fa-angle-right::before { content: "\f104"; } [dir="rtl"] .fa-angle-left::before { content: "\f105"; } /* Randen die een blok markeren staan aan de leeskant. */ [dir="rtl"] .alert, [dir="rtl"] .notice, [dir="rtl"] .info-box, [dir="rtl"] blockquote { border-left: none; border-right: 4px solid currentColor; } /* Lijsten en inspringing. */ [dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.5rem; } /* Een icoon vóór een label staat rechts van de tekst. */ [dir="rtl"] .btn i, [dir="rtl"] .nav-item i, [dir="rtl"] label i { margin-right: 0; margin-left: 0.5rem; }