MCorange/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refector sass

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

61
src/app/organisms/room/PeopleDrawer.scss
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%;

20
src/app/organisms/room/RoomView.scss
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;
}

32
src/app/organisms/room/RoomViewCmdBar.scss
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);
}
}
}

26
src/app/organisms/room/RoomViewContent.scss
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);
}
}
}

21
src/app/organisms/room/RoomViewFloating.scss
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 {

19
src/app/organisms/room/RoomViewInput.scss
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;
}
}
}