From 0b9f035eac0057ede4e8922df0147accf302db4e Mon Sep 17 00:00:00 2001
From: Osama Sayegh <asooomaasoooma90@gmail.com>
Date: Wed, 31 May 2023 01:27:38 +0300
Subject: [PATCH] FIX: Remove unneeded RTL-specific CSS rules

We currently have some CSS rules in `common/base/rtl.scss` that were added to workaround shortcomings of the R2 gem that we used to use to generate versions of our CSS that are suitable for RTL layouts. Those workarounds are mostly duplicates of existing rules with the only difference being that they're flipped to suit RTL layouts (e.g. `padding-left` is changed to `padding-right` and vice versa).

However, we've recently replaced R2 with `rtlcss` which doesn't have those shortcomings of R2 (see https://github.com/discourse/discourse/commit/f94951147ea9d1c48ea68f0dabd568e70cb94674) which means those workarounds/duplicate rules need to be removed because they're getting flipped by `rltcss`, essentially reverting them to their original LTR version and causing issues with RTL layouts.

This commit removes those workarounds that are no longer needed, and cleans up the the file that contains our RTL-specific CSS.

Meta topic: https://meta.discourse.org/t/avatar-in-rtl-website-in-wrong-place/264676?u=osama.
---
 .../stylesheets/common/admin/admin_base.scss  |  2 -
 app/assets/stylesheets/common/base/rtl.scss   | 86 +++++--------------
 2 files changed, 21 insertions(+), 67 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 28044352472..e0121b18b4d 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -1,7 +1,5 @@
 // Styles for /admin section
 
-@import "common/foundation/helpers";
-
 $mobile-breakpoint: 700px;
 
 // Common admin styles
diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index 74b40404733..fcfa7f904af 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -1,35 +1,27 @@
 // Right to left styles.
-// *** These styles are all going to be flipped by the r2 gem ***
-// Adding the !important declaration to a rule prevents it from being flipped.
 
-// This is used to flip the .d-icon-caret-right
-@mixin rotate($degrees) {
-  transform: rotate(#{$degrees}deg);
-}
+.rtl {
+  .d-icon-align-right,
+  .d-icon-angle-double-right,
+  .d-icon-angle-right,
+  .d-icon-arrow-right,
+  .d-icon-caret-right,
+  .d-icon-chevron-right,
+  .d-icon-hand-point-right,
+  .d-icon-quote-right {
+    transform: rotate(180deg);
+  }
 
-// Get the right caret to point left
-.rtl .d-icon-caret-right {
-  @include rotate(180);
-}
-
-// Changes the triangle arrow direction in .nav-stacked .active
-// The 'left' and 'right' in these selectors is not being flipped by r2.
-.rtl .nav-stacked a.active::after {
-  border-left-color: transparent !important;
-  border-right-color: var(--secondary) !important;
-}
-.rtl code {
-  direction: ltr !important;
-  text-align: left !important;
-}
-.rtl .pull-left {
-  float: right !important;
-}
-.rtl .pull-right {
-  float: left !important;
-}
-.rtl .autocomplete {
-  left: 27px;
+  .d-icon-align-left,
+  .d-icon-angle-double-left,
+  .d-icon-angle-left,
+  .d-icon-arrow-left,
+  .d-icon-caret-left,
+  .d-icon-chevron-left,
+  .d-icon-hand-point-left,
+  .d-icon-quote-left {
+    transform: rotate(180deg);
+  }
 }
 
 .rtl .admin-customize .current-style .toggle-mobile {
@@ -40,12 +32,6 @@
   position: static !important;
   float: left !important;
 }
-.rtl .dashboard-left {
-  float: right !important;
-}
-.rtl .dashboard-right {
-  float: left !important;
-}
 
 // For the support_mixed_text_direction setting
 html:not(.rtl) .cooked ul[dir="rtl"],
@@ -57,36 +43,6 @@ html:not(.rtl) .d-editor-preview ul[dir="rtl"],
   margin-right: 1.25em;
 }
 
-// Fixes github oneboxes for RTL sites
-.rtl aside.onebox.githubblob {
-  padding: 12px 25px 12px 12px !important;
-  direction: ltr !important;
-}
-
-.rtl aside.onebox.githubblob .source {
-  background-position: 0 50% !important;
-  padding-right: 20px;
-}
-
-.rtl pre.onebox code ol.lines {
-  margin: 0 0 0 40px !important;
-}
-
-.rtl pre.onebox code ol.lines li:before {
-  right: -40px;
-  padding-left: 5px;
-  padding-right: 0;
-  text-align: right !important;
-}
-
-.rtl pre.onebox code ol.lines li {
-  padding-right: 5px;
-  padding-left: 0;
-  margin-right: 0;
-  border-right: 1px solid #cfcfcf;
-  border-left: none !important;
-}
-
 .rtl {
   $mobile-breakpoint: 700px;