mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-16 04:00:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

5
src/app/molecules/following-members/FollowingMembers.scss
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);

14
src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss
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);
}
}
}

6
src/app/molecules/media/Media.scss
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 {

102
src/app/molecules/message/Message.scss
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 {
@ -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;

14
src/app/molecules/message/TimelineChange.scss
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;

17
src/app/molecules/people-selector/PeopleSelector.scss
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);

24
src/app/molecules/popup-window/PopupWindow.scss
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));
}
}
}

13
src/app/molecules/room-intro/RoomIntro.scss
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);

35
src/app/molecules/room-selector/RoomSelector.scss
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;

9
src/app/molecules/setting-tile/SettingTile.scss
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));
}
}

24
src/app/molecules/sidebar-avatar/SidebarAvatar.scss
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,