Refector sass

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/create-room/CreateRoom.scss

@@ -1,6 +1,8 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
 .create-room {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form > * {
     margin-top: var(--sp-normal);
@@ -23,12 +25,8 @@
       margin-bottom: var(--sp-ultra-tight);
     }
     &__tip {
-      margin-left: 46px;
       margin-top: var(--sp-ultra-tight);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: 46px;
-      }
+      @include dir.side(margin, 46px, 0);
     }
     & .text {
       display: flex;
@@ -46,24 +44,20 @@
       }
     }
     & .text:first-child {
-      border-right-width: 0;
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      @include dir.prop(border-width, 1px 0 1px 1px, 1px 1px 1px 0);
+      @include dir.prop(
+        border-radius,
+        var(--bo-radius) 0 0 var(--bo-radius),
+        0 var(--bo-radius) var(--bo-radius) 0,
+      );
     }
     & .text:last-child {
-      border-left-width: 0;
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-    }
-    [dir=rtl] & {
-      & .text:first-child {
-        border-left-width: 0;
-        border-right-width: 1px;
-        border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      }
-      & .text:last-child {
-        border-right-width: 0;
-        border-left-width: 1px;
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-      }
+      @include dir.prop(border-width, 1px 1px 1px 0, 1px 0 1px 1px);
+      @include dir.prop(
+        border-radius,
+        0 var(--bo-radius) var(--bo-radius) 0,
+        var(--bo-radius) 0 0 var(--bo-radius),
+      );
     }
   }
 
@@ -74,11 +68,7 @@
     & .input-container {
       flex: 1;
       min-width: 0;
-      margin-right: var(--sp-normal);
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-normal);
-      }
+      @include dir.side(margin, 0, var(--sp-normal));
     }
     & .btn-primary {
       padding-top: 11px;
@@ -87,24 +77,13 @@
   }
 
   &__loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    @extend .cp-fx__row--c-c;
     & .text {
-      margin-left: var(--sp-normal);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-normal);
-      }
+      @include dir.side(margin, var(--sp-normal), 0);
     }
   }
   &__error {
     text-align: center;
     color: var(--bg-danger) !important;
   }
-
-  [dir=rtl] & {
-    margin-right: var(--sp-normal);
-    margin-left: var(--sp-extra-tight);
-  }
 }

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -1,32 +1,22 @@
-.emoji-board-flexBoxV {
-  display: flex;
-  flex-direction: column;
-}
-.emoji-board-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .emoji-board {
   display: flex;
   &__content {
-    @extend .emoji-board-flexItem;
-    @extend .emoji-board-flexBoxV;
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__column;
     height: 400px;
     width: 286px;
   }
   &__nav {
-    @extend .emoji-board-flexBoxV;
+    @extend .cp-fx__column;
     justify-content: center;
 
     padding: 4px 6px;
     background-color: var(--bg-surface-low);
-    border-left: 1px solid var(--bg-surface-border);
-    [dir=rtl] & {
-      border-left: none;
-      border-right: 1px solid var(--bg-surface-border);
-    }
+    @include dir.side(border, 1px solid var(--bg-surface-border), none);
 
     & > .ic-btn-surface {
       margin: calc(var(--sp-ultra-tight) / 2) 0;
@@ -41,13 +31,10 @@
   
   & .ic-raw {
     position: absolute;
-    left: var(--sp-normal);
+    @include dir.prop(left, var(--sp-normal), unset);
+    @include dir.prop(right, unset, var(--sp-normal));
     top: var(--sp-normal);
     transform: translateY(1px);
-    [dir=rtl] & {
-      left: unset;
-      right: var(--sp-normal);
-    }
   }
 
   & .input-container {
@@ -60,8 +47,8 @@
   }
 }
 .emoji-board__content__emojis {
-  @extend .emoji-board-flexItem;
-  @extend .emoji-board-flexBoxV;
+  @extend .cp-fx__item-one;
+  @extend .cp-fx__column;
 }
 .emoji-board__content__info {
   margin: 0 var(--sp-extra-tight);
@@ -79,11 +66,9 @@
     }
   }
   & > p:last-child {
-    @extend .emoji-board-flexItem;
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
     margin: 0 var(--sp-tight);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
 
@@ -98,23 +83,17 @@
     z-index: 99;
     background-color: var(--bg-surface);
 
-    margin-left: var(--sp-extra-tight);
+    @include dir.side(margin, var(--sp-extra-tight), 0);
     padding: var(--sp-extra-tight) var(--sp-ultra-tight);
     text-transform: uppercase;
     box-shadow: 0 -4px 0 0 var(--bg-surface);
     border-bottom: 1px solid var(--bg-surface-border);
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: var(--sp-extra-tight);
-    }
   }
   & .emoji-set {
-    margin: var(--sp-extra-tight) calc(var(--sp-normal) - var(--emoji-padding));
-    margin-right: calc(var(--sp-extra-tight) - var(--emoji-padding));
-    [dir=rtl] & {
-      margin-right: calc(var(--sp-normal) - var(--emoji-padding));
-      margin-left: calc(var(--sp-extra-tight) - var(--emoji-padding));
-    }
+    --left-margin: calc(var(--sp-normal) - var(--emoji-padding));
+    --right-margin: calc(var(--sp-extra-tight) - var(--emoji-padding));
+    margin: var(--sp-extra-tight);
+    @include dir.side(margin, var(--left-margin), var(--right-margin));
   }
   & .emoji {
     width: 38px;

src/app/organisms/invite-list/InviteList.scss

@@ -1,6 +1,7 @@
+@use '../../partials/dir';
+
 .invites-content {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__subheading {
     margin-top: var(--sp-extra-loose);
@@ -20,19 +21,6 @@
     }
   }
   & .invite-btn__container .btn-surface {
-    margin-right: var(--sp-normal);
-    [dir=rtl] & {
-      margin: {
-        right: 0;
-        left: var(--sp-normal);
-      }
-    }
-  }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
+    @include dir.side(margin, 0, var(--sp-normal));
   }
 }

src/app/organisms/invite-user/InviteUser.scss

@@ -1,7 +1,8 @@
+@use '../../partials/dir';
+
 .invite-user {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
   margin-top: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form {
     display: flex;
@@ -10,11 +11,7 @@
     & .input-container {
       flex: 1;
       min-width: 0;
-      margin-right: var(--sp-normal);
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-normal);
-      }
+      @include dir.side(margin, 0, var(--sp-normal));
     }
 
     & .btn-primary {
@@ -45,11 +42,4 @@
       align-self: flex-end;
     }
   }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
 }

src/app/organisms/navigation/Drawer.scss

@@ -1,33 +1,24 @@
-.drawer-flexBox {
-  display: flex;
-  flex-direction: column;
-}
-.drawer-flexItem {
-  flex: 1;
-  min-height: 0;
-}
+@use '../../partials/flex';
+@use '../../partials/dir';
 
 .drawer {
-  @extend .drawer-flexItem;
-  @extend .drawer-flexBox;
+  @extend .cp-fx__column;
+  @extend .cp-fx__item-one;
   min-width: 0;
-  border-right: 1px solid var(--bg-surface-border);
-
-  [dir=rtl] & {
-    border-right: none;
-    border-left: 1px solid var(--bg-surface-border);
-  }
+  @include dir.side(border,
+    none,
+    1px solid var(--bg-surface-border),
+  );
 
   &__content-wrapper {
-    @extend .drawer-flexItem;
-    @extend .drawer-flexBox;
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__column;
   }
 
   &__state {
     padding: var(--sp-extra-tight);
     border-top: 1px solid var(--bg-surface-border);
-    display: flex;
-    justify-content: center;
+    @extend .cp-fx__row--c-c;
 
     & .text {
       color: var(--tc-danger-high);
@@ -35,7 +26,7 @@
   }
 }
 .rooms__wrapper {
-  @extend .drawer-flexItem;
+  @extend .cp-fx__item-one;
   position: relative;
 }
 
@@ -58,13 +49,7 @@
 
   & > .room-selector {
     width: calc(100% - var(--sp-extra-tight));
-    margin-left: auto;
-
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: auto;
-    }
-
+    @include dir.side(margin, auto, 0);
   }
 
   & > .room-selector:first-child {

src/app/organisms/navigation/DrawerBreadcrumb.scss

@@ -1,3 +1,6 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .breadcrumb__wrapper {
   height: var(--header-height);
   position: relative;
@@ -47,17 +50,12 @@
     white-space: nowrap;
     box-shadow: none;
     & p {
+      @extend .cp-txt__ellipsis;
       max-width: 86px;
-      overflow: hidden;
-      text-overflow: ellipsis;
     }
 
     & .notification-badge {
-      margin-left: var(--sp-extra-tight);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-extra-tight);
-      }
+      @include dir.side(margin, var(--sp-extra-tight), 0);
     }
   }
 

src/app/organisms/navigation/SideBar.scss

@@ -1,21 +1,16 @@
-.sidebar__flexBox {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-}
+@use '../../partials/flex';
+@use '../../partials/dir';
 
 .sidebar {
-  @extend .sidebar__flexBox;
+  @extend .cp-fx__column;
+
   width: var(--navigation-sidebar-width);
   height: 100%;
-  border-right: 1px solid var(--bg-surface-border);
   background-color: var(--bg-surface-extra-low);
-
-  [dir=rtl] & {
-    border-right: none;
-    border-left: 1px solid var(--bg-surface-border);
-  }
+  @include dir.side(border,
+    none,
+    1px solid var(--bg-surface-border),
+  );
 
   &__scrollable,
   &__sticky {
@@ -23,12 +18,7 @@
   }
 
   &__scrollable {
-    flex: 1;
-    min-height: 0px;
-  }
-
-  &__sticky {
-    align-items: center;
+    @extend .cp-fx__item-one;
   }
 }
 
@@ -53,7 +43,7 @@
 .featured-container,
 .space-container,
 .sticky-container {
-  @extend .sidebar__flexBox;
+  @extend .cp-fx__column--c-c;
   
   padding: var(--sp-ultra-tight) 0;
 

src/app/organisms/profile-editor/ProfileEditor.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .profile-editor {
   display: flex;
   align-items: flex-start;
@@ -21,10 +23,6 @@
   }
 
   & > * {
-    margin-left: var(--sp-normal);
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: var(--sp-normal);
-    }
+    @include dir.side(margin, var(--sp-normal), 0);
   }
 }

src/app/organisms/profile-viewer/ProfileViewer.scss

@@ -1,15 +1,13 @@
+@use '../../partials/dir';
+
 .profile-viewer__dialog {
   & .dialog__content__wrapper {
     position: relative;
   }
   & .dialog__content-container {
-    padding: var(--sp-normal);
+    padding-top: var(--sp-normal);
     padding-bottom: 89px;
-    padding-right: var(--sp-extra-tight);
-    [dir=rtl] & {
-      padding-right: var(--sp-normal);
-      padding-left: var(--sp-extra-tight);
-    }
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   }
 }
 
@@ -58,11 +56,7 @@
       margin: 0 var(--sp-normal)
     }
     & > *:last-child {
-      margin-left: auto;
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: auto;
-      }
+      @include dir.side(margin, auto, 0);
     }
   }
 }
@@ -74,13 +68,8 @@
   &__chips {
     padding-top: var(--sp-ultra-tight);
     & .chip {
-      margin: {
-        top: var(--sp-extra-tight);
-        right: var(--sp-extra-tight);
-      }
-      [dir=rtl] & {
-        margin: 0 0 var(--sp-extra-tight) var(--sp-extra-tight);
-      }
+      margin-top: var(--sp-extra-tight);
+      @include dir.side(margin, 0, var(--sp-extra-tight));
     }
   } 
 }

src/app/organisms/public-rooms/PublicRooms.scss

@@ -1,6 +1,7 @@
+@use '../../partials/dir';
+
 .public-rooms {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
   margin-top: var(--sp-extra-tight);
 
   &__form {
@@ -19,33 +20,28 @@
     min-width: 0;
 
     display: flex;
-    margin-right: var(--sp-normal);
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-normal);
-    }
+    @include dir.side(margin, 0, var(--sp-normal));
 
     & > div:first-child {
       flex: 1;
       min-width: 0;
 
       & .input {
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-        [dir=rtl] & {
-          border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-        }
+        @include dir.prop(border-radius,
+          var(--bo-radius) 0 0 var(--bo-radius),
+          0 var(--bo-radius) var(--bo-radius) 0,
+        );
       }
     }
 
     & > div:last-child .input {
       width: 120px;
-      border-left-width: 0;
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      [dir=rtl] & {
-        border-left-width: 1px;
-        border-right-width: 0;
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-      }
+      @include dir.prop(border-left-width, 0, 1px);
+      @include dir.prop(border-right-width, 1px, 0);
+      @include dir.prop(border-radius,
+        0 var(--bo-radius) var(--bo-radius) 0,
+        var(--bo-radius) 0 0 var(--bo-radius),
+      );
     }
   }
 
@@ -68,11 +64,7 @@
   }
   &__view-more {
     margin-top: var(--sp-loose);
-    margin-left: calc(var(--av-normal) + var(--sp-normal));
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: calc(var(--av-normal) + var(--sp-normal));
-    }
+    @include dir.side(margin, calc(var(--av-normal) + var(--sp-normal)), 0);
   }
   
   & .room-tile {
@@ -81,13 +73,6 @@
       align-self: flex-end;
     }
   }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
 }
 
 .try-join-with-alias {

src/app/organisms/room-optons/RoomOptions.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .context-menu__item {
   position: relative;
 }
@@ -8,13 +10,12 @@
   width: 3px;
   height: 12px;
   background: var(--bg-positive);
-  border-radius: 0 4px 4px 0;
+  @include dir.prop(
+    border-radius,
+    0 4px 4px 0,
+    4px 0 0 4px,
+  );
   position: absolute;
-  left: 0;
-
-  [dir=rtl] & {
-    left: unset;
-    right: 0;
-    border-radius: 4px 0 0 4px;
-  }
+  @include dir.prop(left, 0, unset);
+  @include dir.prop(right, unset, 0);
 }

src/app/organisms/room/PeopleDrawer.scss

@@ -1,38 +1,23 @@
-.people-drawer-flexBox {
-  display: flex;
-  flex-direction: column;
-}
-.people-drawer-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
-
+@use '../../partials/flex';
+@use '../../partials/dir';
 
 .people-drawer {
-  @extend .people-drawer-flexBox;
+  @extend .cp-fx__column;
   width: var(--people-drawer-width);
   background-color: var(--bg-surface-low);
-  border-left: 1px solid var(--bg-surface-border);
-
-  [dir=rtl] & {
-    border: {
-      left: none;
-      right: 1px solid var(--bg-surface-hover);
-    }
-  }
+  @include dir.side(border, 1px solid var(--bg-surface-border), none);
 
   &__member-count {
     color: var(--tc-surface-low);
   }
 
   &__content-wrapper {
-    @extend .people-drawer-flexItem;
-    @extend .people-drawer-flexBox;
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__column;
   }
 
   &__scrollable {
-    @extend .people-drawer-flexItem;
+    @extend .cp-fx__item-one;
   }
 
   &__noresult {
@@ -58,18 +43,12 @@
         z-index: 99;
       }
       & > .ic-raw {
-        left: var(--sp-tight);
-        [dir=rtl] & {
-          right: var(--sp-tight);
-          left: unset;
-        }
+        @include dir.prop(left, var(--sp-tight), unset);
+        @include dir.prop(left, unset, var(--sp-tight));
       }
       & > .ic-btn {
-        right: 2px;
-        [dir=rtl] & {
-          left: 2px;
-          right: unset;
-        }
+        @include dir.prop(right, 2px, unset);
+        @include dir.prop(left, unset, 2px);
       }
       & .input-container {
         flex: 1;
@@ -89,11 +68,7 @@
   & .segmented-controls {
     display: flex;
     margin-bottom: var(--sp-extra-tight);
-    margin-left: var(--sp-extra-tight);
-    [dir=rtl] & {
-      margin-left: unset;
-      margin-right: var(--sp-extra-tight);
-    }
+    @include dir.side(margin, var(--sp-extra-tight), 0);
   }
   & .segment-btn {
     flex: 1;
@@ -101,16 +76,8 @@
   }
 }
 .people-drawer__load-more {
-  padding: var(--sp-normal);
-  padding: {
-    bottom: 0;
-    right: var(--sp-extra-tight);
-  }
-
-  [dir=rtl] & {
-    padding-right: var(--sp-normal);
-    padding-left: var(--sp-extra-tight);
-  }
+  padding: var(--sp-normal) 0 0;
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
 
   & .btn-surface {
     width: 100%;

src/app/organisms/room/RoomView.scss

@@ -1,24 +1,16 @@
-.room-view-flexBox {
-  display: flex;
-  flex-direction: column;
-}
-.room-view-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
+@use '../../partials/flex';
 
 .room-view {
-  @extend .room-view-flexItem;
-  @extend .room-view-flexBox;
+  @extend .cp-fx__item-one;
+  @extend .cp-fx__column;
 
   &__content-wrapper {
-    @extend .room-view-flexItem;
-    @extend .room-view-flexBox;
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__column;
   }
 
   &__scrollable {
-    @extend .room-view-flexItem;
+    @extend .cp-fx__item-one;
     position: relative;
   }
   

src/app/organisms/room/RoomViewCmdBar.scss

@@ -1,8 +1,6 @@
-.overflow-ellipsis {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .cmd-bar {
   --cmd-bar-height: 28px;
@@ -12,18 +10,15 @@
   &__info {
     display: flex;
     width: 40px;
-    margin: 0 10px 0 14px;
-    [dir=rtl] & {
-      margin: 0 14px 0 10px;
-    }
+    @include dir.side(margin, 10px, 14px);
+
     & > * {
       margin: auto;
     }
   }
 
   &__content {
-    min-width: 0;
-    flex: 1;
+    @extend .cp-fx__item-one;
     display: flex;
 
     &-suggestions {
@@ -33,7 +28,7 @@
       align-items: center;
 
       & > .text {
-        @extend .overflow-ellipsis;
+        @extend .cp-txt__ellipsis;
       }
     }
   }
@@ -44,7 +39,7 @@
 
   display: inline-flex;
   align-items: center;
-  margin-right: var(--sp-extra-tight);
+  @include dir.side(margin, 0, var(--sp-extra-tight));
   padding: 0 var(--sp-extra-tight);
   height: 100%;
   border-radius: var(--bo-radius) var(--bo-radius) 0 0;
@@ -53,7 +48,7 @@
   & .emoji {
     width: 20px;
     height: 20px;
-    margin-right: var(--sp-ultra-tight);
+    @include dir.side(margin, 0, var(--sp-ultra-tight));
   }
 
   &:hover {
@@ -65,13 +60,4 @@
     border-bottom: 2px solid transparent;
     outline: none;
   }
-  
-  [dir=rtl] & {
-    margin-right: 0;
-    margin-left: var(--sp-extra-tight);
-    & .emoji {
-      margin-right: 0;
-      margin-left: var(--sp-ultra-tight);
-    }
-  }
 }

src/app/organisms/room/RoomViewContent.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .room-view__content {
   min-height: 100%;
   display: flex;
@@ -13,26 +15,16 @@
     & .message,
     & .ph-msg,
     & .timeline-change {
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      [dir=rtl] & {
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-      }
+      @include dir.prop(border-radius,
+      0 var(--bo-radius) var(--bo-radius) 0,
+      var(--bo-radius) 0 0 var(--bo-radius),
+      );
     }
     
     & > .divider {
-      margin: var(--sp-extra-tight) var(--sp-normal);
-      margin-right: var(--sp-extra-tight);
-      padding-left: calc(var(--av-small) + var(--sp-tight));
-      [dir=rtl] & {
-        padding: {
-          left: 0;
-          right: calc(var(--av-small) + var(--sp-tight));
-        }
-        margin: {
-          left: var(--sp-extra-tight);
-          right: var(--sp-normal);
-        }
-      }
+      margin: var(--sp-extra-tight);
+      @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
+      @include dir.side(padding, calc(var(--av-small) + var(--sp-tight)), 0);
     }
   }
 }

src/app/organisms/room/RoomViewFloating.scss

@@ -1,3 +1,7 @@
+ @use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .room-view {
   &__typing {
     display: flex;
@@ -10,12 +14,9 @@
     }
 
     & .text {
-      flex: 1;
-      min-width: 0;
+      @extend .cp-txt__ellipsis;
+      @extend .cp-fx__item-one;
 
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       margin: 0 var(--sp-tight);
     }
 
@@ -72,17 +73,14 @@
 
   &__STB {
     position: absolute;
-    right: var(--sp-normal);
+    @include dir.prop(right, var(--sp-normal), unset);
+    @include dir.prop(left, unset, var(--sp-normal));
     bottom: 0;
     border-radius: var(--bo-radius);
     box-shadow: var(--bs-surface-border);
     background-color: var(--bg-surface-low);
     transition: transform 200ms ease-in-out;
     transform: translateY(100%) scale(0);
-    [dir=rtl] & {
-      right: unset;
-      left: var(--sp-normal);
-    }
 
     &--open {
       transform: translateY(-28px) scale(1);
@@ -110,8 +108,7 @@
       border-radius: 0;
     }
     & .btn-primary {
-      flex: 1;
-      min-width: 0;
+      @extend .cp-fx__item-one;
       border-radius: 0;
       padding: 0 var(--sp-tight);
       &:focus {

src/app/organisms/room/RoomViewInput.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .room-input {
   padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
   display: flex;
@@ -30,11 +32,7 @@
       flex: 1;
 
       &:first-child {
-        margin-left: var(--sp-tight);
-        [dir=rtl] & {
-          margin-left: 0;
-          margin-right: var(--sp-tight);
-        }
+        @include dir.side(margin, var(--sp-tight), 0);
       }
     }
   }
@@ -65,13 +63,9 @@
   --side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
   display: flex;
   align-items: center;
-  margin-left: var(--side-spacing);
+  @include dir.side(margin, var(--side-spacing), 0);
   margin-top: var(--sp-extra-tight);
   line-height: 0;
-  [dir=rtl] & {
-    margin-left: 0;
-    margin-right: var(--side-spacing);
-  }
 
   &__preview > img {
     max-height: 40px;
@@ -107,10 +101,7 @@
   border-bottom: 1px solid var(--bg-surface-border);
 
   & .ic-btn-surface {
-    margin: 0 13px 0 17px;
+    @include dir.side(margin, 17px, 13px);
     border-radius: 0;
-    [dir=rtl] & {
-      margin: 0 17px 0 13px;
-    }
   }
 }

src/app/organisms/search/Search.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .search-dialog__model {
   --modal-height: 380px;
   height: 100%;
@@ -17,20 +19,16 @@
 
     & > .ic-raw {
       position: absolute;
-      left: calc(var(--sp-normal) + var(--sp-tight));
-      [dir=rtl] & {
-        left: unset;
-        right: calc(var(--sp-normal) + var(--sp-tight));
-      }
+      --away: calc(var(--sp-normal) + var(--sp-tight));
+      @include dir.prop(left, var(--away), unset);
+      @include dir.prop(right, unset, var(--away));
     }
     & > .ic-btn {
       border-radius: calc(var(--bo-radius) / 2);
       position: absolute;
-      right: calc(var(--sp-normal) + var(--sp-extra-tight));
-      [dir=rtl] & {
-        right: unset;
-        left: calc(var(--sp-normal) + var(--sp-extra-tight));
-      }
+      --away: calc(var(--sp-normal) + var(--sp-extra-tight));
+      @include dir.prop(right, var(--away), unset);
+      @include dir.prop(left, unset, var(--away));
     }
     & .input-container {
       min-width: 0;
@@ -69,13 +67,8 @@
   }
 
   &__content {
-    padding: var(--sp-extra-tight) var(--sp-normal);
-    padding-right: var(--sp-extra-tight);
-    
-    [dir=rtl] & {
-      padding-left: var(--sp-extra-tight);
-      padding-right: var(--sp-normal);
-    }
+    padding: var(--sp-extra-tight);
+    @include dir.side(padding,  var(--sp-normal), var(--sp-extra-tight));
   }
 
   &__footer {

src/app/organisms/settings/Settings.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .settings-window {
   & .pw__content-container {
     min-height: 100%;
@@ -5,12 +7,7 @@
 }
 
 .settings-content {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
-  [dir=rtl] & {
-    margin-left: var(--sp-extra-tight);
-    margin-right: var(--sp-normal);
-  }
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   & .setting-tile {
     margin-top: var(--sp-normal);

src/app/organisms/welcome/Welcome.jsx

@@ -8,7 +8,7 @@ import CinnySvg from '../../../../public/res/svg/cinny.svg';
 function Welcome() {
   return (
     <div className="app-welcome flex--center">
-      <div className="flex-v--center">
+      <div>
         <img className="app-welcome__logo noselect" src={CinnySvg} alt="Cinny logo" />
         <Text className="app-welcome__heading" variant="h1" weight="medium" primary>Welcome to Cinny</Text>
         <Text className="app-welcome__subheading" variant="s1">Yet another matrix client</Text>

src/app/organisms/welcome/Welcome.scss

@@ -1,10 +1,12 @@
+@use '../../partials/flex';
+
 .app-welcome {
   width: 100%;
   height: 100%;
 
   & > div {
+    @extend .cp-fx__column--c-c;
     max-width: 600px;
-    align-items: center;
   }
   &__logo {
     width: 64px;