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