Refector sass

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-19 10:28:41 +05:30
parent 85c3240b54
commit ce9f140ddf
46 changed files with 407 additions and 703 deletions

View file

@ -26,7 +26,7 @@ function Avatar({
: ( : (
<span <span
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }} style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
className={`avatar__border${iconSrc !== null ? ' avatar__bordered' : ''} inline-flex--center`} className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
> >
{ {
iconSrc !== null iconSrc !== null

View file

@ -1,3 +1,5 @@
@use '../../partials/flex';
.avatar-container { .avatar-container {
display: inline-flex; display: inline-flex;
width: 42px; width: 42px;
@ -31,11 +33,9 @@
border-radius: inherit; border-radius: inherit;
} }
.avatar__bordered {
box-shadow: var(--bs-surface-border);
}
.avatar__border { .avatar__border {
@extend .cp-fx__row--c-c;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -47,5 +47,9 @@
.text { .text {
color: white; color: white;
} }
&--active {
@extend .avatar__border;
box-shadow: var(--bs-surface-border);
}
} }
} }

View file

@ -1,4 +1,5 @@
@use 'state'; @use 'state';
@use '../../partials/dir';
.btn-surface, .btn-surface,
.btn-primary, .btn-primary,
@ -18,27 +19,10 @@
@include state.disabled; @include state.disabled;
&--icon { &--icon {
padding: { @include dir.side(padding, var(--sp-tight), var(--sp-loose));
left: var(--sp-tight);
right: var(--sp-loose);
}
[dir=rtl] & {
padding: {
left: var(--sp-loose);
right: var(--sp-tight);
}
}
.ic-raw { .ic-raw {
margin-right: var(--sp-extra-tight); @include dir.side(margin, 0, var(--sp-extra-tight));
[dir=rtl] & {
margin: {
right: 0;
left: var(--sp-extra-tight);
}
}
} }
} }
} }

View file

@ -1,3 +1,5 @@
@use '../../partials/dir';
.toggle { .toggle {
width: 44px; width: 44px;
height: 24px; height: 24px;
@ -27,13 +29,13 @@
background-color: var(--bg-positive); background-color: var(--bg-positive);
&::before { &::before {
background-color: white; --ltr: translateX(calc(125%));
transform: translateX(calc(125%)); --rtl: translateX(calc(-125%));
opacity: 1; @include dir.prop(transform, var(--ltr), var(--rtl));
[dir=rtl] & { transform: translateX(calc(125%));
transform: translateX(calc(-125%)); background-color: white;
} opacity: 1;
} }
} }
} }

View file

@ -1,3 +1,5 @@
@use '../../partials/dir';
.chip { .chip {
padding: var(--sp-ultra-tight) var(--sp-extra-tight); padding: var(--sp-ultra-tight) var(--sp-extra-tight);
@ -24,10 +26,6 @@
& > .ic-raw { & > .ic-raw {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: var(--sp-ultra-tight); @include dir.side(margin, 0, var(--sp-ultra-tight));
[dir=rtl] & {
margin-right: 0;
margin-left: var(--sp-ultra-tight);
}
} }
} }

View file

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

View file

@ -1,21 +1,14 @@
@use '../../partials/text';
@use '../../partials/dir';
.header { .header {
padding: { @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
left: var(--sp-normal);
right: var(--sp-extra-tight);
}
width: 100%; width: 100%;
height: var(--header-height); height: var(--header-height);
border-bottom: 1px solid var(--bg-surface-border); border-bottom: 1px solid var(--bg-surface-border);
display: flex; display: flex;
align-items: center; align-items: center;
[dir=rtl] & {
padding: {
left: var(--sp-extra-tight);
right: var(--sp-normal);
}
}
&__title-wrapper { &__title-wrapper {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
@ -24,40 +17,27 @@
margin: 0 var(--sp-tight); margin: 0 var(--sp-tight);
&:first-child { &:first-child {
margin-left: 0; @include dir.side(margin, 0, var(--sp-tight));
[dir=rtl] & {
margin-right: 0;
}
} }
& > .text:first-child { & > .text:first-child {
@extend .cp-txt__ellipsis;
min-width: 0; min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
& > .text-b3{ & > .text-b3{
flex: 1; flex: 1;
min-width: 0; min-width: 0;
margin-top: var(--sp-ultra-tight); margin-top: var(--sp-ultra-tight);
margin-left: var(--sp-tight); @include dir.side(margin, var(--sp-tight), 0);
padding-left: var(--sp-tight); @include dir.side(padding, var(--sp-tight), 0);
border-left: 1px solid var(--bg-surface-border); @include dir.side(border, 1px solid var(--bg-surface-border), none);
max-height: calc(2 * var(--lh-b3)); max-height: calc(2 * var(--lh-b3));
overflow: hidden; overflow: hidden;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
display: -webkit-box; 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);
}
} }
} }
} }

View file

@ -1,4 +1,5 @@
@use '../button/state'; @use '../button/state';
@use '../../partials/dir';
.segmented-controls { .segmented-controls {
background-color: var(--bg-surface-low); background-color: var(--bg-surface-low);
@ -20,12 +21,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-left: 1px solid var(--bg-surface-border); @include dir.side(border, 1px solid var(--bg-surface-border), none);
[dir=rtl] & {
border-left: none;
border-right: 1px solid var(--bg-surface-border);
}
& .text:nth-child(2) { & .text:nth-child(2) {
margin: 0 var(--sp-extra-tight); margin: 0 var(--sp-extra-tight);

View file

@ -1,3 +1,4 @@
@use '../../partials/text';
.following-members { .following-members {
width: 100%; width: 100%;
@ -13,9 +14,7 @@
margin: 0 var(--sp-extra-tight); margin: 0 var(--sp-extra-tight);
} }
& .text { & .text {
overflow: hidden; @extend .cp-txt__ellipsis;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--tc-surface-low); color: var(--tc-surface-low);
b { b {
color: var(--tc-surface-normal); color: var(--tc-surface-normal);

View file

@ -1,3 +1,5 @@
@use '../../partials/text';
@use '../../partials/dir';
.import-e2e-room-keys { .import-e2e-room-keys {
&__file { &__file {
@ -22,17 +24,9 @@
} }
& .text { & .text {
margin-left: var(--sp-tight); @extend .cp-txt__ellipsis;
margin-right: var(--sp-loose); @include dir.side(margin, var(--sp-tight), var(--sp-loose));
max-width: 86px; max-width: 86px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
[dir=rtl] {
margin-right: var(--sp-tight);
margin-left: var(--sp-loose);
}
} }
} }

View file

@ -1,3 +1,5 @@
@use '../../partials/text';
.file-header { .file-header {
display: flex; display: flex;
align-items: center; align-items: center;
@ -5,11 +7,9 @@
min-height: 42px; min-height: 42px;
& .file-name { & .file-name {
@extend .cp-txt__ellipsis;
flex: 1; flex: 1;
color: var(--tc-surface-low); color: var(--tc-surface-low);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
& a { & a {

View file

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

View file

@ -1,6 +1,9 @@
@use '../../partials/dir';
.timeline-change { .timeline-change {
padding: var(--sp-ultra-tight) var(--sp-normal); padding: var(--sp-ultra-tight);
padding-right: var(--sp-extra-tight); @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
@ -9,13 +12,6 @@
background-color: var(--bg-surface-hover); background-color: var(--bg-surface-hover);
} }
[dir=rtl] & {
padding: {
left: var(--sp-extra-tight);
right: var(--sp-normal);
}
}
&__avatar-container { &__avatar-container {
width: var(--av-small); width: var(--av-small);
display: inline-flex; display: inline-flex;

View file

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

View file

@ -1,3 +1,5 @@
@use '../../partials/dir';
.pw-model { .pw-model {
--modal-height: 656px; --modal-height: 656px;
max-height: var(--modal-height) !important; max-height: var(--modal-height) !important;
@ -16,14 +18,7 @@
&__drawer { &__drawer {
width: var(--popup-window-drawer-width); width: var(--popup-window-drawer-width);
background-color: var(--bg-surface-low); background-color: var(--bg-surface-low);
border-right: 1px solid var(--bg-surface-border); @include dir.side(border, none, 1px solid var(--bg-surface-border));
[dir=rtl] & {
border: {
right: none;
left: 1px solid var(--bg-surface-border);
}
}
} }
&__content { &__content {
flex: 1; flex: 1;
@ -52,12 +47,9 @@
.pw__drawer { .pw__drawer {
& .header { & .header {
padding-left: var(--sp-tight); padding-left: var(--sp-tight);
@include dir.side(padding, var(--sp-tight), var(--sp-tight));
& .header__title-wrapper { & .header__title-wrapper {
margin: 0 var(--sp-extra-tight) 0 var(--sp-ultra-tight); @include dir.side(margin, var(--sp-ultra-tight), var(--sp-extra-tight));
}
[dir=rtl] & {
padding-right: var(--sp-tight);
margin: 0 var(--sp-ultra-tight) 0 var(--sp-extra-tight);
} }
} }
} }
@ -82,11 +74,7 @@
color: var(--tc-surface-normal); color: var(--tc-surface-normal);
} }
& .ic-raw { & .ic-raw {
margin-right: var(--sp-tight); @include dir.side(margin, 0, var(--sp-tight));
[dir=rtl] & {
margin-right: 0;
margin-left: var(--sp-tight);
}
} }
} }
} }

View file

@ -1,15 +1,10 @@
@use '../../partials/dir';
.room-intro { .room-intro {
margin-top: calc(2 * var(--sp-extra-loose)); margin-top: calc(2 * var(--sp-extra-loose));
margin-bottom: var(--sp-extra-loose); margin-bottom: var(--sp-extra-loose);
padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight)); --left-pad: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
padding-right: var(--sp-extra-tight); @include dir.side(padding, var(--left-pad), var(--sp-extra-tight));
[dir=rtl] & {
padding: {
left: var(--sp-extra-tight);
right: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
}
}
.room-intro__content { .room-intro__content {
margin-top: var(--sp-extra-loose); margin-top: var(--sp-extra-loose);

View file

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

View file

@ -1,3 +1,5 @@
@use '../../partials/dir';
.setting-tile { .setting-tile {
&__title__wrapper { &__title__wrapper {
display: flex; display: flex;
@ -6,11 +8,6 @@
&__title { &__title {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
margin-right: var(--sp-normal); @include dir.side(margin, 0, var(--sp-normal));
[dir=rtl] & {
margin-right: 0;
margin-left: var(--sp-normal);
} }
} }
}

View file

@ -1,3 +1,5 @@
@use '../../partials/dir';
.sidebar-avatar { .sidebar-avatar {
position: relative; position: relative;
display: flex; display: flex;
@ -7,10 +9,11 @@
& .notification-badge { & .notification-badge {
position: absolute; position: absolute;
right: 0; @include dir.prop(left, unset, 0);
@include dir.prop(right, 0, unset);
top: 0; top: 0;
box-shadow: 0 0 0 2px var(--bg-surface-low); 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; margin: 0 !important;
} }
@ -19,10 +22,12 @@
transition: transform 200ms var(--fluid-push); transition: transform 200ms var(--fluid-push);
} }
&:hover .avatar-container { &:hover .avatar-container {
transform: translateX(4px) @include dir.prop(transform, translateX(4px), translateX(-4px));
} }
&:hover .notification-badge { &: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 { &:focus {
outline: none; outline: none;
@ -37,21 +42,16 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: -11px; @include dir.prop(left, -11px, unset);
@include dir.prop(right, unset, -11px);
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 3px; width: 3px;
height: 12px; height: 12px;
background-color: var(--tc-surface-high); 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; transition: height 200ms linear;
[dir=rtl] & {
left: unset;
right: -11px;
border-radius: 4px 0 0 4px;
}
} }
&--active:hover::before, &--active:hover::before,
&--active:focus::before, &--active:focus::before,

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -0,0 +1,5 @@
.cp-txt__ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

View file

@ -533,7 +533,7 @@ function Auth() {
<div className="auth__wrapper"> <div className="auth__wrapper">
{loginToken && <LoadingScreen message="Redirecting..." />} {loginToken && <LoadingScreen message="Redirecting..." />}
{!loginToken && ( {!loginToken && (
<div className="auth-card flex-v"> <div className="auth-card">
<Header> <Header>
<Avatar size="extra-small" imageSrc={CinnySvg} /> <Avatar size="extra-small" imageSrc={CinnySvg} />
<TitleWrapper> <TitleWrapper>

View file

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

View file

@ -442,45 +442,8 @@ textarea {
supported by Chrome, Edge, Opera and Firefox */ supported by Chrome, Edge, Opera and Firefox */
} }
.flex { .flex--center {
display: flex; display: flex;
}
.flex-v {
display: flex;
flex-direction: column;
}
.flex--center,
.flex--spaceBetween-center,
.flex--end-center {
@extend .flex;
justify-content: center; justify-content: center;
align-items: 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;
}