/* ========================================================================== LiftOps — Direction layer (RTL default, LTR ready) The component and layout stylesheets are written with logical properties (inset-inline-*, margin-inline-*, padding-inline-*, text-align: start), so they are direction-agnostic by construction. This file only handles the cases logical properties cannot express: 1. Directional ICONS that must physically mirror. 2. transform-based offsets that are physically left/right. 3. Typography swaps per language. Switching is all the app does at runtime. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Directional icons CONVENTION: every directional icon is authored as it should appear in LTR, and carries .ico--dir so RTL mirrors it. So: forward / next / drill-into-a-row -> chevronRight + .ico--dir back / previous -> chevronLeft + .ico--dir In Arabic those mirror to left-pointing "next" and right-pointing "back", which is what a right-to-left reader expects. Icons that carry no direction (clock, user, wrench, bell) must NEVER be given .ico--dir: mirroring them just makes them look wrong. -------------------------------------------------------------------------- */ [dir="rtl"] .ico--dir { transform: scaleX(-1); } [dir="ltr"] .ico--dir { transform: none; } /* -------------------------------------------------------------------------- 2. Physical transforms that logical properties cannot cover -------------------------------------------------------------------------- */ /* Toggle switch knob travels toward the "on" side of the reading direction. */ [dir="rtl"] .switch input:checked + .switch__track::before { transform: translateX(-18px); } [dir="ltr"] .switch input:checked + .switch__track::before { transform: translateX(18px); } /* Map / tooltip anchors are positioned with a percentage X offset. */ [dir="rtl"] .simmap__pin { transform: translate(50%, -50%); } [dir="ltr"] .simmap__pin { transform: translate(-50%, -50%); } [dir="rtl"] .simmap__radius { transform: translate(50%, -50%); } [dir="ltr"] .simmap__radius { transform: translate(-50%, -50%); } [dir="rtl"] .tip__bubble { transform: translateX(50%); } [dir="ltr"] .tip__bubble { transform: translateX(-50%); } /* Off-canvas operations sidebar slides in from the reading-start edge. */ @media (max-width: 991px) { [dir="rtl"] .osidebar { transform: translateX(100%); } [dir="ltr"] .osidebar { transform: translateX(-100%); } .osidebar.is-open { transform: translateX(0) !important; } } /* Drawer enters from the reading-start edge; `drawerIn` uses a physical X translate, so each direction gets its own keyframe set. */ [dir="rtl"] .drawer { animation-name: drawerInRtl; } [dir="ltr"] .drawer { animation-name: drawerInLtr; } @keyframes drawerInRtl { from { transform: translateX(100%); } } @keyframes drawerInLtr { from { transform: translateX(-100%); } } /* Native select arrow sits on the far edge of the reading direction. */ [dir="ltr"] .select { background-position: right var(--sp-3) center; } [dir="rtl"] .select { background-position: left var(--sp-3) center; } /* -------------------------------------------------------------------------- 3. Typography & numerals -------------------------------------------------------------------------- */ [dir="rtl"] { --font: var(--font-ar); } [dir="ltr"] { --font: var(--font-en); } /* Arabic needs a touch more line-height and slightly larger base size to stay comfortable at small sizes; letter-spacing must stay at 0 (it breaks joins). */ [dir="rtl"] body { letter-spacing: 0; line-height: 1.7; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.45; } [dir="rtl"] .u-mono { letter-spacing: 0; } /* Latin-script identifiers embedded in Arabic text (ticket numbers, asset codes, coordinates, timestamps) must be isolated or the bidi algorithm reorders their punctuation. */ .ltr, .ticket-no, .audit__time, .worktimer__value, .coord, .phone, .asset-code { direction: ltr; unicode-bidi: isolate; display: inline-block; } .ltr-block { direction: ltr; unicode-bidi: isolate; text-align: start; } /* Keep all digits Western (Latin) in both languages: operations staff read ticket IDs, SLA minutes and coordinates across languages and systems. */ body { font-variant-numeric: lining-nums tabular-nums; } /* Brand wordmark is always LTR, in both languages. */ .brandmark { direction: ltr; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 4. English (LTR) refinements -------------------------------------------------------------------------- */ [dir="ltr"] .splash__motto { letter-spacing: 3px; } [dir="ltr"] .osidebar__group { letter-spacing: .8px; text-transform: uppercase; }