From 7dc81feb9240b7ca5bb348b919461ee03e2fdd7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 16 Mar 2022 15:17:09 +0100
Subject: [PATCH] MOBILE-3814 style: Fix some rtl styles

---
 .../components/onlineusers/onlineusers.scss   | 26 ++--------
 .../recentactivity/recentactivity.scss        | 10 ++--
 .../components/calendar/calendar.scss         | 47 +++----------------
 .../calendar/components/filter/filter.scss    | 13 ++---
 src/addons/messages/messages-common.scss      | 23 ++-------
 .../core-horizontal-scroll-controls.html      |  4 +-
 .../course-list-item/course-list-item.scss    |  4 +-
 7 files changed, 27 insertions(+), 100 deletions(-)

diff --git a/src/addons/block/onlineusers/components/onlineusers/onlineusers.scss b/src/addons/block/onlineusers/components/onlineusers/onlineusers.scss
index c34c11af4..9c3d9a059 100644
--- a/src/addons/block/onlineusers/components/onlineusers/onlineusers.scss
+++ b/src/addons/block/onlineusers/components/onlineusers/onlineusers.scss
@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 :host .core-block-content ::ng-deep {
     max-height: 200px;
     overflow-y: auto;
@@ -17,14 +19,13 @@
             list-style-type: none;
 
             .user {
-                float: left;
+                @include float(start);
                 position: relative;
                 padding-bottom: 16px;
 
                 .core-adapted-img-container {
                     display: inline;
-                    margin-left: 0;
-                    margin-right: 8px;
+                    @include margin-horizontal(0px, 8px);
                 }
 
                 .userpicture {
@@ -33,7 +34,7 @@
             }
 
             .message {
-                float: right;
+                @include float(end);
                 margin-top: 3px;
             }
 
@@ -48,20 +49,3 @@
     }
 
 }
-
-:host-context([dir=rtl]) .core-block-content ::ng-deep {
-    .list li.listentry {
-        .user {
-            float: right;
-
-            .core-adapted-img-container {
-                margin-left: 8px;
-                margin-right: 0;
-            }
-        }
-
-        .message {
-            float: left;
-        }
-    }
-}
diff --git a/src/addons/block/recentactivity/components/recentactivity/recentactivity.scss b/src/addons/block/recentactivity/components/recentactivity/recentactivity.scss
index a2e9d77a2..a72a303fb 100644
--- a/src/addons/block/recentactivity/components/recentactivity/recentactivity.scss
+++ b/src/addons/block/recentactivity/components/recentactivity/recentactivity.scss
@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 :host .core-block-content ::ng-deep {
     .activitydate, .activityhead {
         text-align: center;
@@ -12,14 +14,8 @@
             margin-bottom: 1em;
 
             .head .date {
-                float: right;
+                @include float(end);
             }
         }
     }
 }
-
-:host-context([dir=rtl]) .core-block-content ::ng-deep {
-    .unlist li .head .date {
-        float: left;
-    }
-}
diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss
index 5e8f8188d..b5c40fd10 100644
--- a/src/addons/calendar/components/calendar/calendar.scss
+++ b/src/addons/calendar/components/calendar/calendar.scss
@@ -22,17 +22,17 @@
 
     .addon-calendar-day {
         border-bottom: 1px solid var(--addon-calendar-border-color);
-        border-right: 1px solid var(--addon-calendar-border-color);
+        @include border-end(1px, solid var(--addon-calendar-border-color));
         overflow: hidden;
         min-height: 60px;
         cursor: pointer;
 
         &:first-child {
-            padding-left: 10px;
+            @include padding-horizontal(10px, null);
         }
         &:last-child {
-            border-right: 0;
-            padding-left: 8px;
+            @include border-end(0);
+            @include padding-horizontal(8px, null);
         }
 
         &.addon-calendar-event-past-day > .addon-calendar-dot-types,
@@ -89,9 +89,7 @@
         }
 
         .addon-calendar-day-more {
-            margin-top: 0.6em;
-            margin-bottom: 0.6em;
-            margin-right: 4px;
+            @include margin(0.6em, null, 0.6em, 4px);
         }
 
         .addon-calendar-dot-types {
@@ -117,10 +115,10 @@
     }
 
     .addon-calendar-day-events {
-        text-align: left;
+        text-align: start;
 
         ion-icon {
-            margin-right: 2px;
+            @include margin-horizontal(null, 2px);
             font-size: 1em;
         }
     }
@@ -154,37 +152,6 @@
     }
 }
 
-:host-context([dir=rtl]) {
-    .addon-calendar-day-events {
-        text-align: right;
-
-        ion-icon {
-            margin-right: unset;
-            margin-left: 2px;
-        }
-    }
-
-    .addon-calendar-day {
-        border-left: 1px solid var(--addon-calendar-border-color);
-        border-right: unset;
-
-        &:first-child {
-            padding-right: 10px;
-            padding-left: unset;
-        }
-        &:last-child {
-            border-left: 0;
-            border-right: unset;
-            padding-right: 8px;
-            padding-left: unset;
-        }
-        .addon-calendar-day-more {
-            margin-left: 4px;
-            margin-right: unset;
-        }
-    }
-}
-
 :host-context(body.dark) {
     --addon-calendar-blank-day-background-color: var(--gray-900);
 }
diff --git a/src/addons/calendar/components/filter/filter.scss b/src/addons/calendar/components/filter/filter.scss
index 904ccbfab..29e652dd0 100644
--- a/src/addons/calendar/components/filter/filter.scss
+++ b/src/addons/calendar/components/filter/filter.scss
@@ -1,7 +1,9 @@
+@import "~theme/globals";
+
 :host {
     ion-item {
         ion-icon, ion-radio {
-            margin-right: 8px;
+            @include margin-horizontal(null, 8px);
         }
 
         > ion-icon {
@@ -10,12 +12,3 @@
         }
     }
 }
-
-:host-context([dir=rtl]) {
-    ion-item {
-        ion-icon, ion-radio {
-            margin-left: 8px;
-            margin-right: unset;
-        }
-    }
-}
diff --git a/src/addons/messages/messages-common.scss b/src/addons/messages/messages-common.scss
index 8b480f462..255a9a156 100644
--- a/src/addons/messages/messages-common.scss
+++ b/src/addons/messages/messages-common.scss
@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 :host {
     .addon-messages-conversation-item,
     .addon-message-discussion {
@@ -12,7 +14,7 @@
             }
 
             ion-icon {
-                margin-left: 2px;
+                @include margin-horizontal(2px, null);
             }
         }
 
@@ -20,7 +22,7 @@
             display: flex;
             flex-direction: column;
             align-self: flex-start;
-            margin-left: 2px;
+            @include margin-horizontal(2px, null);
 
             ion-badge, ion-icon {
                 margin-top: 3px;
@@ -40,7 +42,7 @@
         .addon-message-last-message-user {
             white-space: nowrap;
             color: var(--ion-text-color);
-            margin-right: 2px;
+            @include margin-horizontal(null, 2px);
         }
 
         .addon-message-last-message-text {
@@ -62,18 +64,3 @@
         margin-right: 16px;
     }
 }
-
-:host-context([dir=rtl]) {
-    .addon-messages-conversation-item,
-    .addon-message-discussion {
-        .item-heading ion-icon {
-            margin-right: 2px;
-            margin-left: 0;
-        }
-
-        .addon-message-last-message-user {
-            margin-left: 2px;
-            margin-right: 0;
-        }
-    }
-}
diff --git a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
index 787cea97b..b49f2c683 100644
--- a/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
+++ b/src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
@@ -1,9 +1,9 @@
 <ion-button fill="clear" (click)="scroll('backward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'start'"
     [attr.aria-label]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
-    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true" flip-rtl="false"></ion-icon>
 </ion-button>
 
 <ion-button fill="clear" (click)="scroll('forward')" [hidden]="scrollPosition === 'hidden'" [disabled]="scrollPosition === 'end'"
     [attr.aria-label]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
-    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
+    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true" flip-rtl="false"></ion-icon>
 </ion-button>
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index 48e3c7284..7d1bb34dc 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -35,7 +35,7 @@
 
 // Common styles.
 .item-heading ion-icon {
-    margin-right: 4px;
+    @include margin-horizontal(null, 4px);
     color: var(--core-star-color);
 }
 
@@ -130,7 +130,7 @@ ion-card.core-course-list-item {
     }
 
     .core-course-maininfo {
-        margin-right: 32px;
+        @include margin-horizontal(null, 32px);
     }
 }