diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx index 0f55494..3a2206c 100644 --- a/src/app/atoms/avatar/Avatar.jsx +++ b/src/app/atoms/avatar/Avatar.jsx @@ -26,7 +26,7 @@ function Avatar({ : ( { iconSrc !== null diff --git a/src/app/atoms/avatar/Avatar.scss b/src/app/atoms/avatar/Avatar.scss index e45fe55..3c10fe9 100644 --- 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 1426500..98bd58a 100644 --- 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 69e81fb..9980e71 100644 --- 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; - transform: translateX(calc(125%)); - opacity: 1; + --ltr: translateX(calc(125%)); + --rtl: translateX(calc(-125%)); + @include dir.prop(transform, var(--ltr), var(--rtl)); - [dir=rtl] & { - transform: translateX(calc(-125%)); - } + transform: translateX(calc(125%)); + background-color: white; + opacity: 1; } } } \ No newline at end of file diff --git a/src/app/atoms/chip/Chip.scss b/src/app/atoms/chip/Chip.scss index 8318fcf..7396b0d 100644 --- 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 a0919c1..50e3d91 100644 --- 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 05b1a15..9e45f82 100644 --- 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 6df4130..fb1fd98 100644 --- 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 42885bf..a0daf5a 100644 --- 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 ec63892..4f27fdf 100644 --- 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 5a98551..7b9d6f7 100644 --- 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 fd7cd4f..b19e9d1 100644 --- 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 078f438..ee1b165 100644 --- 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 83637b8..1f1af56 100644 --- 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 0b70d7a..e3a588b 100644 --- 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 ca1c43a..7e80249 100644 --- 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 a0f7ed1..7ee8a3a 100644 --- 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 e3ec1fe..ab21fb6 100644 --- 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 ce447ae..d76dbc8 100644 --- 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 cb2d556..de9efdb 100644 --- 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 db64ffa..7d68ebf 100644 --- 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 84d3c53..da1968c 100644 --- 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 08313c7..30c9b92 100644 --- 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 6cb1a39..48b2855 100644 --- 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 60cd47f..cd8519a 100644 --- 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 67e117b..9f9ade7 100644 --- 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 10d62c7..9f95e5b 100644 --- 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 ac90786..230c8db 100644 --- 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 66b77c0..dc55c94 100644 --- 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 ae3f9c3..c091100 100644 --- 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 5ec90dd..d96abb0 100644 --- 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 dd7e961..9e1c8b4 100644 --- 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 dd45906..9fc1821 100644 --- 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 285ec27..1afd187 100644 --- 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 89a00ee..a694001 100644 --- 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 ccf5d58..598c527 100644 --- 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 34309a4..a665361 100644 --- 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 134dbdb..d1435d4 100644 --- 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 f339df3..6d135be 100644 --- 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 (
-
+
Cinny logo Welcome to Cinny Yet another matrix client diff --git a/src/app/organisms/welcome/Welcome.scss b/src/app/organisms/welcome/Welcome.scss index 0fcf147..7f242c9 100644 --- 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 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 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 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 127965d..ceaf9f7 100644 --- a/src/app/templates/auth/Auth.jsx +++ b/src/app/templates/auth/Auth.jsx @@ -533,7 +533,7 @@ function Auth() {
{loginToken && } {!loginToken && ( -
+
diff --git a/src/app/templates/auth/Auth.scss b/src/app/templates/auth/Auth.scss index ce79c8e..9dfa22a 100644 --- 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 8e0bdaf..3e78805 100644 --- 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