/* Faz 30: right-to-left overrides (Arabic). Loaded only when . * The layout itself is flexbox and mirrors on its own; Bootstrap 4 has no * logical spacing/alignment utilities, so the physical ones the site uses are * flipped here, and addresses/codes are kept left-to-right. */ [dir=rtl] body { text-align: right; } /* spacing utilities used by the views */ [dir=rtl] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; } [dir=rtl] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; } [dir=rtl] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir=rtl] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; } [dir=rtl] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; } [dir=rtl] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir=rtl] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir=rtl] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* alignment utilities */ [dir=rtl] .text-left { text-align: right !important; } [dir=rtl] .text-right { text-align: left !important; } @media (min-width: 576px) { [dir=rtl] .text-sm-left { text-align: right !important; } [dir=rtl] .text-sm-right { text-align: left !important; } } [dir=rtl] .float-left { float: right !important; } [dir=rtl] .float-right { float: left !important; } /* dropdowns, modals, input groups */ [dir=rtl] .dropdown-menu { text-align: right; } [dir=rtl] .dropdown-menu-left { right: 0; left: auto; } [dir=rtl] .modal-header .close { margin: -1rem auto -1rem -1rem; } [dir=rtl] .input-group > .form-control:not(:last-child) { border-radius: 0 .25rem .25rem 0; } [dir=rtl] .input-group > .input-group-append > .btn { border-radius: .25rem 0 0 .25rem; } /* arrows point the reading direction */ [dir=rtl] .fa-angle-right, [dir=rtl] .fa-angle-left, [dir=rtl] .fa-arrow-right, [dir=rtl] .fa-arrow-left, [dir=rtl] .fa-chevron-right, [dir=rtl] .fa-chevron-left { transform: scaleX(-1); } /* addresses, senders, codes: each line takes the direction of its own text, * so "name@domain" is never reordered inside Arabic UI */ [dir=rtl] .email, [dir=rtl] .menu-title, [dir=rtl] .text-truncate, [dir=rtl] .summary, [dir=rtl] .subject { unicode-bidi: plaintext; } [dir=rtl] #emailText, [dir=rtl] input[type=email], [dir=rtl] code, [dir=rtl] pre, [dir=rtl] kbd { direction: ltr; unicode-bidi: plaintext; } /* plain lists in page and article text (lists with classes are layout, leave them) */ [dir=rtl] .content-wrapper ul:not([class]), [dir=rtl] .content-wrapper ol:not([class]) { padding-right: 1.5rem; padding-left: 0; }