r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjust chatlist badge transition

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-09-03 20:30:13 +03:00
parent fd2062a527
commit 54d55e7c9e
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/scss/partials/_chatlist.scss
View File

@ -277,13 +277,22 @@ ul.chatlist {
@include animation-level(2) { @include animation-level(2) {
transition: none; transition: none;
transform: scale(0); transform: scale(0);
opacity: 1;
&.is-visible:not(.backwards) { &.is-visible:not(.backwards) {
transform: scale(1); transform: scale(1);
} }
&.backwards {
opacity: 0;
}
&.animating { &.animating {
transition: background-color .2s var(--transition-standard-easing), transform .2s var(--transition-standard-easing); transition: background-color var(--chatlist-badge-transition-in), transform var(--chatlist-badge-transition-in);
&.backwards {
transition: background-color var(--chatlist-badge-transition-out), transform var(--chatlist-badge-transition-out), opacity var(--chatlist-badge-transition-out);
}
} }
} }
@ -333,8 +342,6 @@ ul.chatlist {
} }
.user-caption { .user-caption {
max-width: 100%;
max-height: 100%;
overflow: hidden; overflow: hidden;
color: var(--secondary-text-color); color: var(--secondary-text-color);
flex: 1 1 auto; flex: 1 1 auto;

2
src/scss/style.scss
View File

@ -66,6 +66,8 @@ $chat-input-inner-padding-handhelds: .25rem;
//--layer-transition: .3s cubic-bezier(.33, 1, .68, 1); //--layer-transition: .3s cubic-bezier(.33, 1, .68, 1);
//--layer-transition: none; //--layer-transition: none;
--btn-corner-transition: .2s cubic-bezier(.34, 1.56, .64, 1); --btn-corner-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
--chatlist-badge-transition-in: .2s cubic-bezier(.35,.35,.47,1); // 1.34
--chatlist-badge-transition-out: .2s cubic-bezier(.35,.35,.7,1);
--message-handhelds-margin: 5.5625rem; --message-handhelds-margin: 5.5625rem;
--message-beside-button-margin: 2.875rem; --message-beside-button-margin: 2.875rem;
--message-time-background: rgba(0, 0, 0, .35); --message-time-background: rgba(0, 0, 0, .35);