Merge pull request #16200 from edx/andya/bootstrap-rtl-support

Add RTL support for Bootstrap CSS

cms/static/sass/bootstrap/_legacy.scss

+// ------------------------------------
+// Studio support for legacy Sass partials
+//
+// The intention is that this makes it
+// easier to reuse existing partials
+// that were not built with Bootstrap
+// in mind.
+// ------------------------------------
+
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+
+@mixin font-size($sizeValue: 16) {
+  font-size: ($sizeValue/10) + rem;
+}
+
+// Support .sr as a synonym for .sr-only
+.sr {
+    @extend .sr-only;
+}

cms/static/sass/bootstrap/studio-main.scss

@@ -6,6 +6,9 @@
 @import 'cms/bootstrap/theme';
 @import 'bootstrap/scss/bootstrap';
 
+// Legacy support
+@import 'legacy';
+
 // Variables
 @import 'mixins';
 @import 'variables';

lms/static/sass/bootstrap/_base.scss

+// Open edX: LMS base styles
+// ============================
+
+body {
+  text-align: initial !important;  // Bootstrap hard-codes left alignment
+}

lms/static/sass/bootstrap/lms-main.scss

@@ -9,7 +9,8 @@
 // Legacy support
 @import 'legacy';
 
-// Variables
+// Base
+@import 'base';
 @import 'variables';
 
 // Elements

lms/templates/main.html

@@ -65,8 +65,15 @@ from pipeline_mako import render_require_js_path_overrides
   <link rel="icon" type="image/x-icon" href="${static.url(static.get_value('favicon_path', settings.FAVICON_PATH))}" />
 
   <%static:css group='style-vendor'/>
-  % if uses_bootstrap or '/' in self.attr.main_css:
-    <link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
+  % if '/' in self.attr.main_css:
+    % if get_language_bidi():
+      <%
+      rtl_css_file = self.attr.main_css.replace('.css', '-rtl.css')
+      %>
+      <link rel="stylesheet" href="${unicode(static.url(rtl_css_file))}" type="text/css" media="all" />
+    % else:
+      <link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
+    % endif
   % else:
     <%static:css group='${self.attr.main_css}'/>
   % endif

package.json

@@ -29,6 +29,7 @@
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "requirejs": "~2.3.2",
+    "rtlcss": "^2.2.0",
     "string-replace-webpack-plugin": "^0.1.3",
     "uglify-js": "2.7.0",
     "underscore": "~1.8.3",

pavelib/assets.py

@@ -597,11 +597,45 @@ def _compile_sass(system, theme, debug, force, timing_info):
                 source_comments=source_comments,
                 output_style=output_style,
             )
+
+        # For Sass files without explicit RTL versions, generate
+        # an RTL version of the CSS using the rtlcss library.
+        for sass_file in glob.glob(sass_source_dir + '/**/*.scss'):
+            if should_generate_rtl_css_file(sass_file):
+                source_css_file = sass_file.replace(sass_source_dir, css_dir).replace('.scss', '.css')
+                target_css_file = source_css_file.replace('.css', '-rtl.css')
+                sh("rtlcss {source_file} {target_file}".format(
+                    source_file=source_css_file,
+                    target_file=target_css_file,
+                ))
+
+        # Capture the time taken
+        if not dry_run:
             duration = datetime.now() - start
             timing_info.append((sass_source_dir, css_dir, duration))
     return True
 
 
+def should_generate_rtl_css_file(sass_file):
+    """
+    Returns true if a Sass file should have an RTL version generated.
+    """
+    # Don't generate RTL CSS for partials
+    if path(sass_file).name.startswith('_'):
+        return False
+
+    # Don't generate RTL CSS if the file is itself an RTL version
+    if sass_file.endswith('-rtl.scss'):
+        return False
+
+    # Don't generate RTL CSS if there is an explicit Sass version for RTL
+    rtl_sass_file = path(sass_file.replace('.scss', '-rtl.scss'))
+    if rtl_sass_file.exists():
+        return False
+
+    return True
+
+
 def process_npm_assets():
     """
     Process vendor libraries installed via NPM.