Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 f94951147e) 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.
This commit is contained in:
Osama Sayegh 2023-05-31 01:27:38 +03:00 committed by GitHub
parent 6c3a51328c
commit 0b9f035eac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -1,7 +1,5 @@
// Styles for /admin section
@import "common/foundation/helpers";
$mobile-breakpoint: 700px;
// Common admin styles

86
app/assets/stylesheets/common/base/rtl.scss
View File

@ -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;