Add mixins to handle RTL languages

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/EventCard.vue

@@ -133,6 +133,7 @@ export default class EventCard extends Vue {
 </script>
 
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 @use "@/styles/_event-card";
 
 a.card {
@@ -170,7 +171,7 @@ a.card {
     position: absolute;
     top: 10px;
     right: 0;
-    margin-right: -3px;
+    @include margin-right(-3px);
     z-index: 10;
     max-width: 40%;
 
@@ -214,7 +215,7 @@ a.card {
         align-items: flex-end;
         align-self: flex-start;
         margin-bottom: 15px;
-        margin-left: 0rem;
+        @include margin-left(0);
       }
 
       & > .media-content {

js/src/components/Event/EventListViewCard.vue

@@ -128,6 +128,7 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
 </script>
 
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 article.box {
   div.content {
     padding: 5px;
@@ -148,7 +149,7 @@ article.box {
 
       div.date-component {
         flex: 0;
-        margin-right: 16px;
+        @include margin-right(16px);
       }
 
       .title {

js/src/components/Event/EventMap.vue

@@ -152,10 +152,11 @@ export default class EventMap extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 .modal-card-head {
   justify-content: flex-end;
   button.delete {
-    margin-right: 1rem;
+    @include margin-right(1rem);
   }
 }
 

js/src/components/Event/EventMetadataItem.vue

@@ -131,11 +131,12 @@ export default class EventMetadataItem extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 .card .media {
   align-items: center;
 
   & > button {
-    margin-left: 1rem;
+    @include margin-left(1rem);
   }
 }
 </style>

js/src/components/Event/EventMinimalistCard.vue

@@ -131,6 +131,7 @@ export default class EventMinimalistCard extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 @use "@/styles/_event-card";
 @import "~bulma/sass/utilities/mixins.sass";
 @import "@/variables.scss";
@@ -163,7 +164,7 @@ export default class EventMinimalistCard extends Vue {
   }
 
   .calendar-icon {
-    margin-right: 1rem;
+    @include margin-right(1rem);
   }
 
   .title-info-wrapper {

js/src/components/Event/EventParticipationCard.vue

@@ -392,6 +392,7 @@ export default class EventParticipationCard extends mixins(
 </script>
 
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 @use "@/styles/_event-card";
 @import "~bulma/sass/utilities/mixins.sass";
 
@@ -400,7 +401,7 @@ article.box {
     position: absolute;
     top: 10px;
     right: 0;
-    margin-right: -5px;
+    @include margin-left(-5px);
     z-index: 10;
     max-width: 40%;
 
@@ -516,7 +517,7 @@ article.box {
 
     figure,
     span.icon {
-      padding-right: 3px;
+      @include padding-right(3px);
     }
   }
 

js/src/components/Event/OrganizerPicker.vue

@@ -121,6 +121,7 @@ export default class OrganizerPicker extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 ::v-deep .list-item {
   box-sizing: content-box;
 
@@ -133,11 +134,11 @@ export default class OrganizerPicker extends Vue {
 
       figure.image,
       span.icon.media-left {
-        margin-right: 0.5rem;
+        @include margin-right(0.5rem);
       }
 
       span.icon.media-left {
-        margin-left: -0.25rem;
+        @include margin-left(-0.25rem);
       }
     }
   }