Refector sass

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

diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx
index 0f554946f2f86f101cb9683222c0a88405b52dad..3a2206c2a46333aaea3e44c8c08555a09beec3e1 100644 (file)
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@@ -26,7 +26,7 @@ function Avatar({
           : (
             <span
               style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
-              className={`avatar__border${iconSrc !== null ? ' avatar__bordered' : ''} inline-flex--center`}
+              className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
             >
               {
                 iconSrc !== null

diff --git a/src/app/atoms/avatar/Avatar.scss b/src/app/atoms/avatar/Avatar.scss
index e45fe553c6d5494c638be42091584f4e886a4aed..3c10fe9c6535ccb312492b616b4999432cb72afa 100644 (file)
--- a/src/app/atoms/avatar/Avatar.scss
+++ b/src/app/atoms/avatar/Avatar.scss
@@ -1,3 +1,5 @@
+@use '../../partials/flex';
+
 .avatar-container {
   display: inline-flex;
   width: 42px;
@@ -31,11 +33,9 @@
     border-radius: inherit;
   }
 
-  .avatar__bordered {
-    box-shadow: var(--bs-surface-border);
-  }
-
   .avatar__border {
+    @extend .cp-fx__row--c-c;
+    
     position: absolute;
     top: 0;
     left: 0;
@@ -47,5 +47,9 @@
     .text {
       color: white;
     }
+    &--active {
+      @extend .avatar__border;
+      box-shadow: var(--bs-surface-border);
+    }
   }
 }
\ No newline at end of file

diff --git a/src/app/atoms/button/Button.scss b/src/app/atoms/button/Button.scss
index 14265007b85ea88cc552bc86a47aaea62985648c..98bd58aaaddeb65f057fae6195dbd6ff66f4e0f0 100644 (file)
--- a/src/app/atoms/button/Button.scss
+++ b/src/app/atoms/button/Button.scss
@@ -1,4 +1,5 @@
 @use 'state';
+@use '../../partials/dir';
 
 .btn-surface,
 .btn-primary,
@@ -18,27 +19,10 @@
   @include state.disabled;
 
   &--icon {
-    padding: {
-      left: var(--sp-tight);
-      right: var(--sp-loose);
-    }
-
-    [dir=rtl] & {
-      padding: {
-        left: var(--sp-loose);
-        right: var(--sp-tight);
-      }
-    }
+    @include dir.side(padding, var(--sp-tight), var(--sp-loose));
 
     .ic-raw {
-      margin-right: var(--sp-extra-tight);
-
-      [dir=rtl] & {
-        margin: {
-          right: 0;
-          left: var(--sp-extra-tight);
-        }
-      }
+      @include dir.side(margin, 0, var(--sp-extra-tight));
     }
   }
 }

diff --git a/src/app/atoms/button/Toggle.scss b/src/app/atoms/button/Toggle.scss
index 69e81fb7262e8ea71876972c4ade9c4a5cbd34a1..9980e7157eedaf4868baade7eabcd6d7a741151e 100644 (file)
--- a/src/app/atoms/button/Toggle.scss
+++ b/src/app/atoms/button/Toggle.scss
@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .toggle {
   width: 44px;
   height: 24px;
@@ -27,13 +29,13 @@
     background-color: var(--bg-positive);
 
     &::before {
-      background-color: white;
+      --ltr: translateX(calc(125%));
+      --rtl: translateX(calc(-125%));
+      @include dir.prop(transform, var(--ltr), var(--rtl));
+
       transform: translateX(calc(125%));
+      background-color: white;
       opacity: 1;
-
-      [dir=rtl] & {
-        transform: translateX(calc(-125%));
-      }
     }
   }
 }
\ No newline at end of file

diff --git a/src/app/atoms/chip/Chip.scss b/src/app/atoms/chip/Chip.scss
index 8318fcf6dbba35ca08429f1305721eb2dee305a0..7396b0dc81691d920c34ff72cabcbb27ae000726 100644 (file)
--- a/src/app/atoms/chip/Chip.scss
+++ b/src/app/atoms/chip/Chip.scss
@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .chip {
   padding: var(--sp-ultra-tight) var(--sp-extra-tight);
   
@@ -24,10 +26,6 @@
   & > .ic-raw {
     width: 16px;
     height: 16px;
-    margin-right: var(--sp-ultra-tight);
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-ultra-tight);
-    }
+    @include dir.side(margin, 0, var(--sp-ultra-tight));
   }
 }
\ No newline at end of file

diff --git a/src/app/atoms/context-menu/ContextMenu.scss b/src/app/atoms/context-menu/ContextMenu.scss
index a0919c13d3ea6f33e2076655935c17c3ec107e02..50e3d91a0782245d609688d84c4ba62d117f5083 100644 (file)
--- a/src/app/atoms/context-menu/ContextMenu.scss
+++ b/src/app/atoms/context-menu/ContextMenu.scss
@@ -1,3 +1,6 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .context-menu {
   background-color: var(--bg-surface);
   box-shadow: var(--bs-popup);
@@ -29,10 +32,8 @@
   border-bottom: 1px solid var(--bg-surface-border);
 
   .text {
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   &:not(:first-child) {
@@ -50,17 +51,11 @@
     white-space: nowrap;
 
     .text:first-child {
-      margin: {
-        left: calc(var(--ic-small) + var(--sp-ultra-tight));
-        right: var(--sp-extra-tight);
-      }
-
-      [dir=rtl] & {
-        margin: {
-          left: var(--sp-extra-tight);
-          right: calc(var(--ic-small) + var(--sp-ultra-tight));
-        }
-      }
+      @include dir.side(
+        margin,
+        calc(var(--ic-small) + var(--sp-ultra-tight)),
+        var(--sp-extra-tight)
+      );
     }
   }
   .btn-surface:focus {

diff --git a/src/app/atoms/header/Header.scss b/src/app/atoms/header/Header.scss
index 05b1a1590d8bfa6e76b554b57237d0d78eec4e90..9e45f8246697eac98c7e0b5ead4a238ee0e58b2f 100644 (file)
--- a/src/app/atoms/header/Header.scss
+++ b/src/app/atoms/header/Header.scss
@@ -1,63 +1,43 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .header {
-  padding: {
-    left: var(--sp-normal);
-    right: var(--sp-extra-tight);
-  }
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   width: 100%;
   height: var(--header-height);
   border-bottom: 1px solid var(--bg-surface-border);
   display: flex;
   align-items: center;
 
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
-
   &__title-wrapper {
     flex: 1;
     min-width: 0;
     display: flex;
     align-items: center;
     margin: 0 var(--sp-tight);
-
+    
     &:first-child {
-      margin-left: 0;
-      [dir=rtl] & {
-        margin-right: 0;
-      }
+      @include dir.side(margin, 0, var(--sp-tight));
     }
 
     & > .text:first-child {
+      @extend .cp-txt__ellipsis;
       min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
     & > .text-b3{
       flex: 1;
       min-width: 0;
 
       margin-top: var(--sp-ultra-tight);
-      margin-left: var(--sp-tight);
-      padding-left: var(--sp-tight);
-      border-left: 1px solid var(--bg-surface-border);
+      @include dir.side(margin, var(--sp-tight), 0);
+      @include dir.side(padding, var(--sp-tight), 0);
+      @include dir.side(border, 1px solid var(--bg-surface-border), none);
+
       max-height: calc(2 * var(--lh-b3));
       overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       display: -webkit-box;
-
-      [dir=rtl] & {
-        margin-left: 0;
-        padding-left: 0;
-        border-left: none;
-        margin-right: var(--sp-tight);
-        padding-right: var(--sp-tight);
-        border-right: 1px solid var(--bg-surface-border);
-      }
     }
   }
 }
\ No newline at end of file

diff --git a/src/app/atoms/segmented-controls/SegmentedControls.scss b/src/app/atoms/segmented-controls/SegmentedControls.scss
index 6df413018eec87b0dd3ff4815f95994bc2fc728a..fb1fd9875db27fdf2b1532c9a4941cdcc7c86c9c 100644 (file)
--- a/src/app/atoms/segmented-controls/SegmentedControls.scss
+++ b/src/app/atoms/segmented-controls/SegmentedControls.scss
@@ -1,4 +1,5 @@
 @use '../button/state';
+@use '../../partials/dir';
 
 .segmented-controls {
   background-color: var(--bg-surface-low);
@@ -20,12 +21,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    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);
 
     & .text:nth-child(2) {
       margin: 0 var(--sp-extra-tight);

diff --git a/src/app/molecules/following-members/FollowingMembers.scss b/src/app/molecules/following-members/FollowingMembers.scss
index 42885bf5a7096bad061b01c4c92707c9a2303085..a0daf5ad52d645aedbfcd19256478d5aa456031e 100644 (file)
--- a/src/app/molecules/following-members/FollowingMembers.scss
+++ b/src/app/molecules/following-members/FollowingMembers.scss
@@ -1,3 +1,4 @@
+@use '../../partials/text';
 
 .following-members {
   width: 100%;
@@ -13,9 +14,7 @@
     margin: 0 var(--sp-extra-tight);
   }
   & .text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
     b {
       color: var(--tc-surface-normal);

diff --git a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
index ec63892251c42e70f25d9003a29deba69525b81d..4f27fdfaa73a982a8c4a9674a57fa8932007e66a 100644 (file)
--- a/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
+++ b/src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
@@ -1,3 +1,5 @@
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .import-e2e-room-keys {
   &__file {
@@ -22,17 +24,9 @@
     }
     
     & .text {
-      margin-left: var(--sp-tight);
-      margin-right: var(--sp-loose);
+      @extend .cp-txt__ellipsis;
+      @include dir.side(margin, var(--sp-tight), var(--sp-loose));
       max-width: 86px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      [dir=rtl] {
-        margin-right: var(--sp-tight);
-        margin-left: var(--sp-loose);
-      }
     }
   }
 

diff --git a/src/app/molecules/media/Media.scss b/src/app/molecules/media/Media.scss
index 5a985513127d8d5ddb52c4ec493271bdc888a6cf..7b9d6f7c861f888df06ac6bdeda2d32c1bbac7a3 100644 (file)
--- a/src/app/molecules/media/Media.scss
+++ b/src/app/molecules/media/Media.scss
@@ -1,3 +1,5 @@
+@use '../../partials/text';
+
 .file-header {
   display: flex;
   align-items: center;
@@ -5,11 +7,9 @@
   min-height: 42px;
 
   & .file-name {
+    @extend .cp-txt__ellipsis;
     flex: 1;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   & a {

diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss
index fd7cd4fd117efe40a9f32db15bb5a38c7be5111a..b19e9d1ac4ced9f910c1eb96f8cf161f72a49f15 100644 (file)
--- a/src/app/molecules/message/Message.scss
+++ b/src/app/molecules/message/Message.scss
@@ -1,9 +1,11 @@
 @use '../../atoms/scroll/scrollbar';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .message,
 .ph-msg {
-  padding: var(--sp-ultra-tight) var(--sp-normal);
-  padding-right: var(--sp-extra-tight);
+  padding: var(--sp-ultra-tight);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   display: flex;
 
   &:hover {
@@ -12,17 +14,11 @@
       display: flex;
     }
   }
-
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
   
   &__avatar-container {
     padding-top: 6px;
-    margin-right: var(--sp-tight);
+    @include dir.side(margin, 0, var(--sp-tight));
+
     & .avatar-container {
       transition: transform 200ms var(--fluid-push);
       &:hover {
@@ -34,13 +30,6 @@
       cursor: pointer;
       display: flex;
     }
-
-    [dir=rtl] & {
-      margin: {
-        left: var(--sp-tight);
-        right: 0;
-      }
-    }
   }
 
   &__main-container {
@@ -62,7 +51,9 @@
     width: var(--av-small);
   }
   &--focus {
-    box-shadow: inset 2px 0 0 var(--bg-caution);
+    --ltr: inset 2px 0 0 var(--bg-caution);
+    --rtl: inset -2px 0 0 var(--bg-caution);
+    @include dir.prop(box-shadow, var(--ltr), var(--rtl));
     background-color: var(--bg-caution-hover);
   }
 }
@@ -77,20 +68,13 @@
 
   &__header,
   &__body > div {
-    margin: var(--sp-ultra-tight) 0;
-    margin-right: var(--sp-extra-tight);
+    margin: var(--sp-ultra-tight);
+    @include dir.side(margin, 0, var(--sp-extra-tight));
     height: var(--fs-b1);
     width: 100%;
     max-width: 100px;
     background-color: var(--bg-surface-hover);
     border-radius: calc(var(--bo-radius) / 2);
-
-    [dir=rtl] & {
-      margin: {
-        right: 0;
-        left: var(--sp-extra-tight);
-      }
-    }
   }
   &__body {
     display: flex;
@@ -121,18 +105,11 @@
   & .message__profile {
     min-width: 0;
     color: var(--tc-surface-high);
-    margin-right: var(--sp-tight);
-
-    [dir=rtl] & {
-      margin-left: var(--sp-tight);
-      margin-right: 0;
-    }
+    @include dir.side(margin, 0, var(--sp-tight));
 
     & > span {
+      @extend .cp-txt__ellipsis;
       color: inherit;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
     }
     & > span:last-child { display: none; }
     &:hover {
@@ -166,10 +143,8 @@
     }
   }
   .text {
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
   .ic-raw {
     width: 16px;
@@ -235,10 +210,8 @@
 .message__edit {
   padding: var(--sp-extra-tight) 0;
   &-btns button {
-    margin: var(--sp-tight) var(--sp-tight) 0 0;
-    [dir=rtl] & {
-      margin: var(--sp-tight) 0 0 var(--sp-tight);
-    }
+    margin: var(--sp-tight) 0 0 0;
+    @include dir.side(margin, 0, var(--sp-tight));
   }
 }
 .message__reactions {
@@ -255,7 +228,8 @@
   }
 }
 .msg__reaction {
-  margin: var(--sp-extra-tight) var(--sp-extra-tight) 0 0;
+  margin: var(--sp-extra-tight) 0 0 0;
+  @include dir.side(margin, 0, var(--sp-extra-tight));
   padding: 0 var(--sp-ultra-tight);
   min-height: 26px;
   display: inline-flex;
@@ -282,13 +256,6 @@
     margin-bottom: -2px;
   }
 
-  [dir=rtl] & {
-    margin: {
-      right: 0;
-      left: var(--sp-extra-tight);
-    }
-  }
-
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
@@ -314,7 +281,9 @@
 .message__options {
   position: absolute;
   top: 0;
-  right: 60px;
+  @include dir.prop(right, 60px, unset);
+  @include dir.prop(left, unset, 60px);
+
   z-index: 99;
   transform: translateY(-50%);
 
@@ -322,11 +291,6 @@
   box-shadow: var(--bs-surface-border);
   background-color: var(--bg-surface-low);
   display: none;
-
-  [dir=rtl] & {
-    left: 60px;
-    right: unset;
-  }
 }
 
 // markdown formating
@@ -406,41 +370,23 @@
   & blockquote {
     display: inline-block;
     max-width: 100%;
-    padding-left: var(--sp-extra-tight);
-    border-left: 4px solid var(--bg-surface-active);
+    @include dir.side(padding, var(--sp-extra-tight), 0);
+    @include dir.side(border, 4px solid var(--bg-surface-active), 0);
     white-space: initial !important;
 
     & > * {
       white-space: pre-wrap;
     }
-
-    [dir=rtl] & {
-      padding: {
-        left: 0;
-        right: var(--sp-extra-tight);
-      }
-      border: {
-        left: none;
-        right: 4px solid var(--bg-surface-active);
-      }
-    }
   }
   & ul,
   & ol {
     margin: var(--sp-ultra-tight) 0;
-    padding-left: 24px;
+    @include dir.side(padding, 24px, 0);
     white-space: initial !important;
     
     & > * {
       white-space: pre-wrap;
     }
-
-    [dir=rtl] & {
-      padding: {
-        left: 0;
-        right: 24px;
-      }
-    }
   }
   & ul.contains-task-list {
     padding: 0;

diff --git a/src/app/molecules/message/TimelineChange.scss b/src/app/molecules/message/TimelineChange.scss
index 078f438a0bb8bf45ba4f0809bddd31512fb1934b..ee1b1651af04a3542b1708b3925c3cb2d07e497f 100644 (file)
--- a/src/app/molecules/message/TimelineChange.scss
+++ b/src/app/molecules/message/TimelineChange.scss
@@ -1,6 +1,9 @@
+@use '../../partials/dir';
+
 .timeline-change {
-  padding: var(--sp-ultra-tight) var(--sp-normal);
-  padding-right: var(--sp-extra-tight);
+  padding: var(--sp-ultra-tight);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+
   display: flex;
   align-items: center;
   width: 100%;
@@ -9,13 +12,6 @@
     background-color: var(--bg-surface-hover);
   }
 
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
-
   &__avatar-container {
     width: var(--av-small);
     display: inline-flex;

diff --git a/src/app/molecules/people-selector/PeopleSelector.scss b/src/app/molecules/people-selector/PeopleSelector.scss
index 83637b8f599f66e892b268cdad04aed66457163a..1f1af5649c2f905a747a65671d68d32502239b7b 100644 (file)
--- a/src/app/molecules/people-selector/PeopleSelector.scss
+++ b/src/app/molecules/people-selector/PeopleSelector.scss
@@ -1,17 +1,14 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .people-selector {
   width: 100%;
   padding: var(--sp-extra-tight);
-  padding-left: var(--sp-normal);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   display: flex;
   align-items: center;
   cursor: pointer;
-  
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
+
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
@@ -26,13 +23,11 @@
   }
 
   &__name {
+    @extend .cp-txt__ellipsis;
     flex: 1;
     min-width: 0;
     margin: 0 var(--sp-tight);
     color: var(--tc-surface-normal);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
   &__role {
     color: var(--tc-surface-low);

diff --git a/src/app/molecules/popup-window/PopupWindow.scss b/src/app/molecules/popup-window/PopupWindow.scss
index 0b70d7a9d30911d8d04b4238dfdef846a494e729..e3a588b91761d4f1619d85233d19ab7f935eb538 100644 (file)
--- a/src/app/molecules/popup-window/PopupWindow.scss
+++ b/src/app/molecules/popup-window/PopupWindow.scss
@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .pw-model {
   --modal-height: 656px;
   max-height: var(--modal-height) !important;
@@ -16,14 +18,7 @@
   &__drawer {
     width: var(--popup-window-drawer-width);
     background-color: var(--bg-surface-low);
-    border-right: 1px solid var(--bg-surface-border);
-
-    [dir=rtl] & {
-      border: {
-        right: none;
-        left: 1px solid var(--bg-surface-border);
-      }
-    }
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
   }
   &__content {
     flex: 1;
@@ -52,12 +47,9 @@
 .pw__drawer {
   & .header {
     padding-left: var(--sp-tight);
+    @include dir.side(padding, var(--sp-tight), var(--sp-tight));
     & .header__title-wrapper {
-      margin: 0 var(--sp-extra-tight) 0 var(--sp-ultra-tight);
-    }
-    [dir=rtl] & {
-      padding-right: var(--sp-tight);
-      margin: 0 var(--sp-ultra-tight) 0 var(--sp-extra-tight);
+      @include dir.side(margin, var(--sp-ultra-tight), var(--sp-extra-tight));
     }
   }
 }
@@ -82,11 +74,7 @@
       color: var(--tc-surface-normal);
     }
     & .ic-raw {
-      margin-right: var(--sp-tight);
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-tight);
-      }
+      @include dir.side(margin, 0, var(--sp-tight));
     }
   }
 }
\ No newline at end of file

diff --git a/src/app/molecules/room-intro/RoomIntro.scss b/src/app/molecules/room-intro/RoomIntro.scss
index ca1c43a8594079a005a744716dfed40c64df4867..7e80249a70898d29fc6fb87bc43d4c00c013626d 100644 (file)
--- a/src/app/molecules/room-intro/RoomIntro.scss
+++ b/src/app/molecules/room-intro/RoomIntro.scss
@@ -1,15 +1,10 @@
+@use '../../partials/dir';
+
 .room-intro {
   margin-top: calc(2 * var(--sp-extra-loose));
   margin-bottom: var(--sp-extra-loose);
-  padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-  padding-right: var(--sp-extra-tight);
-
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-    }
-  }
+  --left-pad: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
+  @include dir.side(padding, var(--left-pad), var(--sp-extra-tight));
 
   .room-intro__content {
     margin-top: var(--sp-extra-loose);

diff --git a/src/app/molecules/room-selector/RoomSelector.scss b/src/app/molecules/room-selector/RoomSelector.scss
index a0f7ed18a15f231674c545026fd37888910b2e18..7ee8a3a2fb0756a58876b20eb4037132eef0cc27 100644 (file)
--- a/src/app/molecules/room-selector/RoomSelector.scss
+++ b/src/app/molecules/room-selector/RoomSelector.scss
@@ -1,15 +1,9 @@
-.room-selector-flex {
-  display: flex;
-  align-items: center;
-}
-.room-selector-flexItem {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .room-selector {
-  @extend .room-selector-flex;
+  @extend .cp-fx__row--s-c;
 
   border: 1px solid transparent;
   border-radius: var(--bo-radius);
@@ -55,35 +49,28 @@
 }
 
 .room-selector__content {
-  @extend .room-selector-flexItem;
-  @extend .room-selector-flex;
+  @extend .cp-fx__item-one;
+  @extend .cp-fx__row--s-c;
   padding: 0 var(--sp-extra-tight);
   min-height: 40px;
   cursor: inherit;
 
-  & > .avatar-container .avatar__bordered {
+  & > .avatar-container .avatar__border--active {
     box-shadow: none;
   }
 
   & > .text {
-    @extend .room-selector-flexItem;
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
     margin: 0 var(--sp-extra-tight);
 
     color: var(--tc-surface-normal-low);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
 .room-selector__options {
-  @extend .room-selector-flex;
+  @extend .cp-fx__row--s-c;
+  @include dir.side(margin, 0, var(--sp-ultra-tight));
   display: none;
-  margin-right: var(--sp-ultra-tight);
-
-  [dir=rtl] & {
-    margin-right: 0;
-    margin-left: var(--sp-ultra-tight);
-  }
 
   &:empty {
     margin: 0 !important;

diff --git a/src/app/molecules/setting-tile/SettingTile.scss b/src/app/molecules/setting-tile/SettingTile.scss
index e3ec1fe9ba26856004cc4faef1b7242634181b1c..ab21fb6e2241e8dda2bcfe0d1861020e4a3561e9 100644 (file)
--- a/src/app/molecules/setting-tile/SettingTile.scss
+++ b/src/app/molecules/setting-tile/SettingTile.scss
@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .setting-tile {
   &__title__wrapper {
     display: flex;
@@ -6,11 +8,6 @@
   &__title {
     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));
   }
-
 }
\ No newline at end of file

diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
index ce447aefb08648ea1c233d478350cff556d08925..d76dbc86d38b37cf04ba06f3011427e698bda2a7 100644 (file)
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
+++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss
@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .sidebar-avatar {
   position: relative;
   display: flex;
@@ -7,10 +9,11 @@
   
   & .notification-badge {
     position: absolute;
-    right: 0;
+    @include dir.prop(left, unset, 0);
+    @include dir.prop(right, 0, unset);
     top: 0;
     box-shadow: 0 0 0 2px var(--bg-surface-low);
-    transform: translate(20%, -20%);
+    @include dir.prop(transform, translate(20%, -20%), translate(-20%, -20%));
 
     margin: 0 !important;
   }
@@ -19,10 +22,12 @@
     transition: transform 200ms var(--fluid-push);
   }
   &:hover .avatar-container {
-    transform: translateX(4px)
+    @include dir.prop(transform, translateX(4px), translateX(-4px));
   }
   &:hover .notification-badge {
-    transform: translate(calc(20% + 4px), -20%);
+    --ltr: translate(calc(20% + 4px), -20%);
+    --rtl: translate(calc(-20% - 4px), -20%);
+    @include dir.prop(transform, var(--ltr), var(--rtl));
   }
   &:focus {
     outline: none;
@@ -37,21 +42,16 @@
     content: "";
     display: block;
     position: absolute;
-    left: -11px;
+    @include dir.prop(left, -11px, unset);
+    @include dir.prop(right, unset, -11px);
     top: 50%;
     transform: translateY(-50%);
 
     width: 3px;
     height: 12px;
     background-color: var(--tc-surface-high);
-    border-radius: 0 4px 4px 0;
+    @include dir.prop(border-radius, 0 4px 4px 0, 4px 0 0 4px);
     transition: height 200ms linear;
-
-    [dir=rtl] & {
-      left: unset;
-      right: -11px;
-      border-radius: 4px 0 0 4px;
-    }
   }
   &--active:hover::before,
   &--active:focus::before,

diff --git a/src/app/organisms/create-room/CreateRoom.scss b/src/app/organisms/create-room/CreateRoom.scss
index cb2d5565d9749ad04f5a43b36b015267d9c30b83..de9efdbd5a59f22a43ac5e2d59e703f101b5129f 100644 (file)
--- a/src/app/organisms/create-room/CreateRoom.scss
+++ b/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);
-  }
 }
\ No newline at end of file

diff --git a/src/app/organisms/emoji-board/EmojiBoard.scss b/src/app/organisms/emoji-board/EmojiBoard.scss
index db64ffa509c9eba65fa4d417447bb8ea52239dcd..7d68ebf33d732c9f8d0dc3c3c8521a76ec6162c1 100644 (file)
--- a/src/app/organisms/emoji-board/EmojiBoard.scss
+++ b/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;

diff --git a/src/app/organisms/invite-list/InviteList.scss b/src/app/organisms/invite-list/InviteList.scss
index 84d3c53b44328b766338da8254e5660c2555dff3..da1968c30cde153fc0659950ebc7d96f494970c8 100644 (file)
--- a/src/app/organisms/invite-list/InviteList.scss
+++ b/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));
   }
 }
\ No newline at end of file

diff --git a/src/app/organisms/invite-user/InviteUser.scss b/src/app/organisms/invite-user/InviteUser.scss
index 08313c7a75cab3b6c4dd2a028715e1a8b8aff7cf..30c9b9216134292295696e68a97afaa5c27b1acc 100644 (file)
--- a/src/app/organisms/invite-user/InviteUser.scss
+++ b/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);
-    }
-  }
 }
\ No newline at end of file

diff --git a/src/app/organisms/navigation/Drawer.scss b/src/app/organisms/navigation/Drawer.scss
index 6cb1a39f89665d0b0e3675f1c75560fe354c8be7..48b28554a9496c37be24a3f74ee3ebac4d8742ef 100644 (file)
--- a/src/app/organisms/navigation/Drawer.scss
+++ b/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 {

diff --git a/src/app/organisms/navigation/DrawerBreadcrumb.scss b/src/app/organisms/navigation/DrawerBreadcrumb.scss
index 60cd47f152587ef657ebc806ab4fe0b5433641dc..cd8519adb3c19b7b732abc081d4c3029936d524d 100644 (file)
--- a/src/app/organisms/navigation/DrawerBreadcrumb.scss
+++ b/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);
     }
   }
 

diff --git a/src/app/organisms/navigation/SideBar.scss b/src/app/organisms/navigation/SideBar.scss
index 67e117baa3fdf35ced398a0befc648548886541a..9f9ade726ef43385a7d2b48b592e449bff6d6945 100644 (file)
--- a/src/app/organisms/navigation/SideBar.scss
+++ b/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;
 

diff --git a/src/app/organisms/profile-editor/ProfileEditor.scss b/src/app/organisms/profile-editor/ProfileEditor.scss
index 10d62c75bdf3530c9512a782204f4b751e934a93..9f95e5b3fb96463afffccf4d96e2eefb96eebf40 100644 (file)
--- a/src/app/organisms/profile-editor/ProfileEditor.scss
+++ b/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);
   }
 }
\ No newline at end of file

diff --git a/src/app/organisms/profile-viewer/ProfileViewer.scss b/src/app/organisms/profile-viewer/ProfileViewer.scss
index ac9078634dffc5d43f99f833497298a6aafb4f35..230c8db7e012ee727448461dabd918bef5e3b5c8 100644 (file)
--- a/src/app/organisms/profile-viewer/ProfileViewer.scss
+++ b/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));
     }
   } 
 }
\ No newline at end of file

diff --git a/src/app/organisms/public-rooms/PublicRooms.scss b/src/app/organisms/public-rooms/PublicRooms.scss
index 66b77c0accfe15129f502777ea59a1d3ea3796eb..dc55c94733ddf157191298509d26be45b4e739af 100644 (file)
--- a/src/app/organisms/public-rooms/PublicRooms.scss
+++ b/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 {

diff --git a/src/app/organisms/room-optons/RoomOptions.scss b/src/app/organisms/room-optons/RoomOptions.scss
index ae3f9c3f2fb16531127ad9bf3f09bd414c5be407..c091100b8db46ce00f70e1e5767d88c279bc2867 100644 (file)
--- a/src/app/organisms/room-optons/RoomOptions.scss
+++ b/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);
 }
\ No newline at end of file

diff --git a/src/app/organisms/room/PeopleDrawer.scss b/src/app/organisms/room/PeopleDrawer.scss
index 5ec90ddbb7350607dba29c619945ac089623f739..d96abb0a3c474fbba3b9924f6dfd6c1436918eb8 100644 (file)
--- a/src/app/organisms/room/PeopleDrawer.scss
+++ b/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%;

diff --git a/src/app/organisms/room/RoomView.scss b/src/app/organisms/room/RoomView.scss
index dd7e961056dc6f00a95872ad7cb88596b875f30c..9e1c8b4ae5c165138d6d15d4655b6026ef52e36f 100644 (file)
--- a/src/app/organisms/room/RoomView.scss
+++ b/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;
   }
   

diff --git a/src/app/organisms/room/RoomViewCmdBar.scss b/src/app/organisms/room/RoomViewCmdBar.scss
index dd459062a763759cff3bd602631f2c521eabe0cf..9fc18214d323b10a8e69e45996b4c7fe2a859c3f 100644 (file)
--- a/src/app/organisms/room/RoomViewCmdBar.scss
+++ b/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);
-    }
-  }
 }
\ No newline at end of file

diff --git a/src/app/organisms/room/RoomViewContent.scss b/src/app/organisms/room/RoomViewContent.scss
index 285ec2799b806c2ad47c6639e7ba1da41a07a9a5..1afd187ef64a656731effe2367a4f9efcb6414b0 100644 (file)
--- a/src/app/organisms/room/RoomViewContent.scss
+++ b/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);
     }
   }
 }
\ No newline at end of file

diff --git a/src/app/organisms/room/RoomViewFloating.scss b/src/app/organisms/room/RoomViewFloating.scss
index 89a00ee16a34ead19fabee37575b747da94e6796..a6940014b814d05c0cb0dbb3d53215c70bac0e2e 100644 (file)
--- a/src/app/organisms/room/RoomViewFloating.scss
+++ b/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 {

diff --git a/src/app/organisms/room/RoomViewInput.scss b/src/app/organisms/room/RoomViewInput.scss
index ccf5d58c993a66ca2c6ec449c6f5c0bbf3b9435d..598c52741fe7d103998e5e47ad3649791e1377ae 100644 (file)
--- a/src/app/organisms/room/RoomViewInput.scss
+++ b/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;
-    }
   }
 }
\ No newline at end of file

diff --git a/src/app/organisms/search/Search.scss b/src/app/organisms/search/Search.scss
index 34309a45d1ec22d67618bc3c2a6fbf55fd6bb0bb..a6653615c9df63bf37f52984b702e5c6124846dc 100644 (file)
--- a/src/app/organisms/search/Search.scss
+++ b/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 {

diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss
index 134dbdb81373349df9b6605e13d624483a42d212..d1435d46c157ba0cd98e4b5563f87b4b1f8f4922 100644 (file)
--- a/src/app/organisms/settings/Settings.scss
+++ b/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);

diff --git a/src/app/organisms/welcome/Welcome.jsx b/src/app/organisms/welcome/Welcome.jsx
index f339df31deefbb99e641d1db332920b57fa77bf4..6d135bee27f94004c092fa28bd2e3912b17a79ab 100644 (file)
--- a/src/app/organisms/welcome/Welcome.jsx
+++ b/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>

diff --git a/src/app/organisms/welcome/Welcome.scss b/src/app/organisms/welcome/Welcome.scss
index 0fcf147895f7b1c2076a525ca290944a1d52dbd9..7f242c919a783ce0d3ee0b8b694c794256ffc9e6 100644 (file)
--- a/src/app/organisms/welcome/Welcome.scss
+++ b/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;

diff --git a/src/app/partials/_dir.scss b/src/app/partials/_dir.scss
new file mode 100644 (file)
index 0000000..b5d4a69
--- /dev/null
+++ b/src/app/partials/_dir.scss
@@ -0,0 +1,26 @@
+/*
+* NOTICE: only use this
+* when sides are un-even
+* if they are even just use $property: 0 $spacing; 
+*/
+
+@mixin side($property, $left, $right) {
+  #{$property}: {
+    left: $left;
+    right: $right;
+  };
+  
+  [dir=rtl] & {
+    #{$property}: {
+      left: $right;
+      right: $left;
+    };
+  }
+}
+
+@mixin prop($property, $ltr, $rtl) {
+  #{$property}: $ltr;
+  [dir=rtl] & {
+    #{$property}: $rtl;
+  }
+}
\ No newline at end of file

diff --git a/src/app/partials/_flex.scss b/src/app/partials/_flex.scss
new file mode 100644 (file)
index 0000000..950cd1e
--- /dev/null
+++ b/src/app/partials/_flex.scss
@@ -0,0 +1,58 @@
+._s-c {
+  justify-content: flex-start;
+  align-items: center;
+}
+._c-c {
+  justify-content: center;
+  align-items: center;
+}
+._e-c {
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.cp-fx__row {
+  display: flex;
+  flex-direction: row;
+}
+
+.cp-fx__column {
+  display: flex;
+  flex-direction: column;
+}
+
+.cp-fx__row--s-c {
+  @extend .cp-fx__row;
+  @extend ._s-c;
+}
+
+.cp-fx__row--c-c {
+  @extend .cp-fx__row;
+  @extend ._c-c;
+}
+
+.cp-fx__row--e-c {
+  @extend .cp-fx__row;
+  @extend ._e-c;
+}
+
+.cp-fx__column--s-c {
+  @extend .cp-fx__column;
+  @extend ._s-c;
+}
+
+.cp-fx__column--c-c {
+  @extend .cp-fx__column;
+  @extend ._c-c;
+}
+
+.cp-fx__column--e-c {
+  @extend .cp-fx__column;
+  @extend ._e-c;
+}
+
+.cp-fx__item-one {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}

diff --git a/src/app/partials/_text.scss b/src/app/partials/_text.scss
new file mode 100644 (file)
index 0000000..ab5e280
--- /dev/null
+++ b/src/app/partials/_text.scss
@@ -0,0 +1,5 @@
+.cp-txt__ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
\ No newline at end of file

diff --git a/src/app/templates/auth/Auth.jsx b/src/app/templates/auth/Auth.jsx
index 127965d609263ff086a494c4b1e4b6e81061004a..ceaf9f7d07cf0ec998e34b19f73b85aa27c6725c 100644 (file)
--- a/src/app/templates/auth/Auth.jsx
+++ b/src/app/templates/auth/Auth.jsx
@@ -533,7 +533,7 @@ function Auth() {
         <div className="auth__wrapper">
           {loginToken && <LoadingScreen message="Redirecting..." />}
           {!loginToken && (
-            <div className="auth-card flex-v">
+            <div className="auth-card">
               <Header>
                 <Avatar size="extra-small" imageSrc={CinnySvg} />
                 <TitleWrapper>

diff --git a/src/app/templates/auth/Auth.scss b/src/app/templates/auth/Auth.scss
index ce79c8e309af54cf441d33b898d778739bba87d9..9dfa22a33589e862d5227895fef6528e0db25fa9 100644 (file)
--- a/src/app/templates/auth/Auth.scss
+++ b/src/app/templates/auth/Auth.scss
@@ -1,3 +1,6 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
 .auth__base {
   --pattern-size: 48px;
   min-height: 100%;
@@ -60,25 +63,22 @@
   & > .input-container {
     flex: 1;
     & .input {
-      border-right: unset;
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
       background-color: var(--bg-surface);
+      @include dir.prop(border-right-width, 0, 1px);
+      @include dir.prop(border-left-width, 1px, 0 );
+      @include dir.prop(border-radius,
+        var(--bo-radius) 0 0 var(--bo-radius),
+        0 var(--bo-radius) var(--bo-radius) 0,
+      );
     }
   }
   & .ic-btn {
     height: 46px;
     border: 1px solid var(--bg-surface-border);
-    border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-  }
-  [dir=rtl] & {
-    & .input {
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      border-radius: 1px;
-      border-left: unset;
-    }
-    .ic-btn {
-      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),
+    );
   }
 
   &__status {
@@ -144,10 +144,7 @@
 }
 
 .process-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  @extend .cp-fx__column--c-c;
 
   min-height: 100%;
   width: 100%;

diff --git a/src/index.scss b/src/index.scss
index 8e0bdafad304708342362174923ce7f9e61fe3c3..3e78805c55b084b3bea98c19cc2c2e0e4a0a3e43 100644 (file)
--- a/src/index.scss
+++ b/src/index.scss
@@ -442,45 +442,8 @@ textarea {
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
-.flex {
+.flex--center {
   display: flex;
-}
-.flex-v {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex--center,
-.flex--spaceBetween-center,
-.flex--end-center {
-  @extend .flex;
   justify-content: center;
   align-items: center;
-}
-.flex--spaceBetween,
-.flex--spaceBetween-center {
-  @extend .flex;
-  justify-content: space-between;
-}
-.flex--end,
-.flex--end-center {
-  @extend .flex;
-  justify-content: flex-end;
-}
-.inline-flex--center {
-  @extend .flex--center;
-  display: inline-flex
-}
-.flex--center-baseline {
-  @extend .flex--center;
-  align-items: baseline;
-}
-
-.flex-v--center {
-  @extend .flex-v;
-  justify-content: center;
-}
-.flex-v--end {
-  @extend .flex-v;
-  justify-content: flex-end;
 }
\ No newline at end of file