Refector sass
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura
parent
85c3240b54
commit
ce9f140ddf
46 changed files with 407 additions and 703 deletions
|
|
@ -26,7 +26,7 @@ function Avatar({
|
|||
: (
|
||||
<span
|
||||
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
|
||||
className={`avatar__border${iconSrc !== null ? ' avatar__bordered' : ''} inline-flex--center`}
|
||||
className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
|
||||
>
|
||||
{
|
||||
iconSrc !== null
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import CinnySvg from '../../../../public/res/svg/cinny.svg';
|
|||
function Welcome() {
|
||||
return (
|
||||
<div className="app-welcome flex--center">
|
||||
<div className="flex-v--center">
|
||||
<div>
|
||||
<img className="app-welcome__logo noselect" src={CinnySvg} alt="Cinny logo" />
|
||||
<Text className="app-welcome__heading" variant="h1" weight="medium" primary>Welcome to Cinny</Text>
|
||||
<Text className="app-welcome__subheading" variant="s1">Yet another matrix client</Text>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
26
src/app/partials/_dir.scss
Normal file
26
src/app/partials/_dir.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
58
src/app/partials/_flex.scss
Normal file
58
src/app/partials/_flex.scss
Normal 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;
|
||||
}
|
||||
5
src/app/partials/_text.scss
Normal file
5
src/app/partials/_text.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.cp-txt__ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -533,7 +533,7 @@ function Auth() {
|
|||
<div className="auth__wrapper">
|
||||
{loginToken && <LoadingScreen message="Redirecting..." />}
|
||||
{!loginToken && (
|
||||
<div className="auth-card flex-v">
|
||||
<div className="auth-card">
|
||||
<Header>
|
||||
<Avatar size="extra-small" imageSrc={CinnySvg} />
|
||||
<TitleWrapper>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue