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
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
className={`avatar__border${iconSrc !== null ? ' avatar__bordered' : ''} inline-flex--center`}
className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
>
{
iconSrc !== null

View file

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

View file

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

View file

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

View file

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

View file

@ -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 {

View file

@ -1,21 +1,14 @@
@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;
@ -24,40 +17,27 @@
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);
}
}
}
}

View file

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

View file

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

View file

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

View file

@ -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 {

View file

@ -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 {
@ -13,16 +15,10 @@
}
}
[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;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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,

View file

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

View file

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

View file

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

View file

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

View file

@ -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 {

View file

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

View file

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

View file

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

View file

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

View file

@ -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 {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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 {

View file

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

View file

@ -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 {

View file

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

View file

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

View file

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

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">
{loginToken && <LoadingScreen message="Redirecting..." />}
{!loginToken && (
<div className="auth-card flex-v">
<div className="auth-card">
<Header>
<Avatar size="extra-small" imageSrc={CinnySvg} />
<TitleWrapper>

View file

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

View file

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