MOBILE-3814 style: Fix some rtl styles

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;
+                    @include margin-horizontal(0px, 8px);
-                    margin-right: 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;
-        }
-    }
-}

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

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;
+            @include border-end(0);
-            padding-left: 8px;
+            @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;
+            @include margin(0.6em, null, 0.6em, 4px);
-            margin-bottom: 0.6em;
-            margin-right: 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);
 }

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

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

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>

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);
     }
 }