/* ========================================================================== Direction-aware Bootstrap spacing utilities for the storefront ========================================================================== The storefront links syaanah/css/bootstrap.css -- Bootstrap v5.0.2, built LTR-only (`grep -c '\[dir="rtl"\]'` returns 0) -- while the document is served as ``. In 5.x, `me-*` / `ms-*` / `ps-*` / `pe-*` / `text-start` / `float-start` / `border-start` are *logical* names, but an LTR-only build compiles them to physical properties: `.me-2` becomes `margin-right`, which under RTL is the outboard side. Measured on the real /list/products at 1200px: `i.bi.bi-folder.me-2` occupied x[1106..1121] and the adjacent label ended at exactly 1106 -- zero gap between glyph and label, with the 7.5px sitting uselessly on the icon's far side. Nested category links use ps-3/ps-4/ps-5, which padded the outboard edge and produced no indent at all. 56 occurrences across 17 storefront blades. Why this file rather than swapping in the 5.3.8 RTL build the admin shell uses: four legacy sheets (syaanah/minimal, asoug/minimal, asoug/style, asoug/footer) and design-system.css were all authored against 5.0.2's component internals, and arabic.css corrects the legacy layout with physical left/right rules that a full RTL build would double-flip. This overrides only the utility set the storefront actually uses, and only under [dir="rtl"]. Loaded after bootstrap.css and beside arabic.css. design-system.css still loads last and still wins, which is correct -- it styles RTL with logical properties and needs no correcting. Values are Bootstrap 5's own $spacers scale: 0, .25rem, .5rem, 1rem, 1.5rem, 3rem. ========================================================================== */ [dir="rtl"] .me-0 { margin-right: 0 !important; margin-left: 0 !important; } [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; } [dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ms-0 { margin-left: 0 !important; margin-right: 0 !important; } [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; } [dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .pe-0 { padding-right: 0 !important; padding-left: 0 !important; } [dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: .25rem !important; } [dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: .5rem !important; } [dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; } [dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } [dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; } [dir="rtl"] .ps-0 { padding-left: 0 !important; padding-right: 0 !important; } [dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: .25rem !important; } [dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: .5rem !important; } [dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } [dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } /* border-start/end set a 1px solid border in 5.0.2; the colour comes from --bs-border-color on the element, so only the side is corrected here. */ [dir="rtl"] .border-start { border-left: 0 !important; border-right: 1px solid !important; } [dir="rtl"] .border-end { border-right: 0 !important; border-left: 1px solid !important; } [dir="rtl"] .border-start-0 { border-left: 1px solid !important; border-right: 0 !important; } [dir="rtl"] .border-end-0 { border-right: 1px solid !important; border-left: 0 !important; } /* rounded-start/end follow the same physical-name problem. */ [dir="rtl"] .rounded-start { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: var(--bs-border-radius, .25rem) !important; border-bottom-right-radius: var(--bs-border-radius, .25rem) !important; } [dir="rtl"] .rounded-end { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: var(--bs-border-radius, .25rem) !important; border-bottom-left-radius: var(--bs-border-radius, .25rem) !important; }