From d74f6eb625ab27e936cc94f660dd492735333b92 Mon Sep 17 00:00:00 2001 From: andrey-canon Date: Thu, 16 Jul 2026 10:04:33 -0500 Subject: [PATCH] fix(rtl): use CSS logical properties for problem blocks and remove hardcoded LTR import - Removed the explicit `@import 'vendor/bi-app/bi-app-ltr';` in `_builtin-block-variables.scss` that was overriding RTL configurations. - Replaced physical CSS properties (`left`, `padding-left`, `margin-right`) with their logical equivalents (`inset-inline-start`, `padding-inline-start`, `margin-inline-end`) in `ProblemBlockDisplay.css` to natively support bidirectional layouts. --- common/static/sass/_builtin-block-variables.scss | 1 - xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss index f848e1177492..38b10edefb0a 100644 --- a/common/static/sass/_builtin-block-variables.scss +++ b/common/static/sass/_builtin-block-variables.scss @@ -11,7 +11,6 @@ @import 'cms/static/sass/partials/cms/theme/_variables'; @import 'cms/static/sass/partials/cms/theme/_variables-v1'; @import 'bootstrap/scss/variables'; -@import 'vendor/bi-app/bi-app-ltr'; @import 'edx-pattern-library-shims/base/_variables.scss'; :root { diff --git a/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css b/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css index aa731796f44b..df175c281f15 100644 --- a/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css +++ b/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css @@ -225,7 +225,7 @@ .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="checkbox"] { margin: calc((var(--baseline, 20px) / 4)); - margin-right: calc((var(--baseline, 20px) / 2)); + margin-inline-end: calc((var(--baseline, 20px) / 2)); } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus+label, @@ -394,7 +394,7 @@ .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label { padding: calc((var(--baseline, 20px) / 2)); - padding-left: calc((var(--baseline, 20px) * 2.3)); + padding-inline-start: calc((var(--baseline, 20px) * 2.3)); position: relative; font-size: var(--base-font-size, 18px); line-height: normal; @@ -403,7 +403,7 @@ .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="radio"], .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"] { - left: 0.5625em; + inset-inline-start: 0.5625em; position: absolute; top: 0.35em; width: calc(var(--baseline, 20px) * 1.1);