Bootstrap RTL the correct way

build/build-modules-js/stylesheets/handle-scss.es6.js

@@ -1,5 +1,6 @@
 const Autoprefixer = require('autoprefixer');
 const CssNano = require('cssnano');
+const rtlcss = require('rtlcss');
 const { writeFile } = require('fs').promises;
 const { ensureDir } = require('fs-extra');
 const { dirname, sep } = require('path');
@@ -20,8 +21,11 @@ module.exports.handleScssFile = async (file) => {
     process.exit(1);
   }
 
+  const plugins = [Autoprefixer];
+  if (cssFile.endsWith('-rtl.css')) plugins.push(rtlcss);
+
   // Auto prefixing
-  const cleaner = Postcss([Autoprefixer()]);
+  const cleaner = Postcss(plugins);
   const res = await cleaner.process(compiled.css.toString(), { from: undefined });
 
   // Ensure the folder exists or create it

build/media_source/templates/administrator/atum/scss/blocks/_header.scss

@@ -58,10 +58,6 @@
       object-fit: contain;
       object-position: left center;
 
-      [dir=rtl] & {
-        object-position: right center;
-      }
-
       &.logo-collapsed {
         display: none;
       }

build/media_source/templates/administrator/atum/scss/blocks/_sidebar-nav.scss

@@ -19,24 +19,10 @@
       text-decoration: none;
 
       &::before {
-        margin-right: .5rem;
+        margin-inline-end: .5rem;
         font-family: "Font Awesome 5 Free";
         font-weight: 900;
-        content: "\f054";
-
-        [dir="rtl"] & {
-          margin-right: 0;
-          content: none;
-        }
-      }
-
-      &::after {
-        [dir="rtl"] & {
-          margin-inline-end: .5rem;
-          font-family: "Font Awesome 5 Free";
-          font-weight: 900;
-          content: "\f053";
-        }
+        content: "\f054" #{"/*!rtl:\"\f053\"*/"};
       }
     }
 

build/media_source/templates/administrator/atum/scss/blocks/_sidebar.scss

@@ -143,14 +143,7 @@
       width: 2rem;
       font-family: "Font Awesome 5 Free";
       font-weight: 900;
-
-      [dir="ltr"] & {
-        content: "\f054";
-      }
-
-      [dir="rtl"] & {
-        content: "\f053";
-      }
+      content: "\f054" #{"/*!rtl:\"\f053\"*/"};
     }
   }
 
@@ -256,11 +249,6 @@
     z-index: $zindex-mobile-toggle;
     padding: 10px 15px;
 
-    [dir="rtl"] & {
-      right: auto;
-      left: 0;
-    }
-
     &:focus {
       box-shadow: none;
     }

build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss

@@ -123,14 +123,7 @@
   .btn-group:not(:last-child) > .dropdown-toggle-split {
     order: 1;
     margin-inline-start: -$border-radius;
-
-    [dir="ltr"] & {
-      border-radius: 0 $border-radius $border-radius 0;
-    }
-
-    [dir="rtl"] & {
-      border-radius: $border-radius 0 0 $border-radius;
-    }
+    border-radius: 0 $border-radius $border-radius 0;
   }
 
   .dropdown-menu joomla-toolbar-button,

build/media_source/templates/administrator/atum/scss/template-rtl.scss

@@ -1,47 +1,2 @@
+// This file is a placeholder for the rtl template
 @import "template";
-@import "vendor/bootstrap/bootstrap-rtl";
-
-// Global
-dl,
-ol,
-ul {
-  padding-right: 0;
-}
-
-// Redirect urls fields
-#jform_new_url,
-#jform_old_url,
-#new_url {
-  text-align: left;
-}
-
-// Database prefix
-#jform_dbprefix {
-  text-align: right;
-  direction: ltr;
-}
-
-.input-group > .form-control:not(:last-child),
-.input-group > .form-select:not(:last-child) {
-  @include border-start-radius(0);
-  @include border-end-radius($border-radius);
-}
-
-.btn-group > .btn:first-child:not(.dropdown-toggle) {
-  @include border-end-radius($border-radius);
-}
-
-.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
-.btn-group > .btn-group:not(:last-child) > .btn {
-  @include border-start-radius(0);
-  margin-left: -1px;
-}
-
-.btn-group > .btn:last-child:not(.dropdown-toggle) {
-  @include border-start-radius($border-radius);
-}
-
-.btn-group > .btn:not(:first-child),
-.btn-group > .btn-group:not(:first-child) {
-  @include border-end-radius(0);
-}

build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_custom-forms.scss

@@ -7,16 +7,10 @@
 .form-select {
   max-width: $input-max-width;
   cursor: pointer;
-  background: $form-select-background;
+  background: $form-select-background #{"/* rtl:"}$form-select-background-rtl#{"*/"};;
   background-color: $form-select-bg;
   border: $input-border;
 
-  [dir=rtl] & {
-    padding: $form-select-padding-y $form-select-padding-x $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding);
-    background: $form-select-background-rtl;
-    background-color: $form-select-bg;
-  }
-
   &[multiple] {
     padding: 0;
     background-color: var(--white-offset);

build/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss

@@ -4,7 +4,7 @@
   margin-top: $cassiopeia-grid-gutter;
   color: $white;
   background-color: var(--cassiopeia-color-primary);
-  background-image: $cassiopeia-header-grad;
+  background-image: $cassiopeia-header-grad #{"/* rtl:"}$cassiopeia-header-grad-rtl #{"*/"};
 
   .grid-child {
     align-items: center;
@@ -16,10 +16,6 @@
     color: currentColor;
   }
 
-  [dir=rtl] & {
-    background-image: $cassiopeia-header-grad-rtl;
-  }
-
   .mod-menu {
     position: relative;
   }

build/media_source/templates/site/cassiopeia/scss/blocks/_frontend-edit.scss

@@ -12,7 +12,3 @@
   border-radius: .25rem;
 }
 
-[dir="rtl"] .btn.jmodedit {
-  right: auto;
-  left: 0;
-}