fee5ffbfdc
Layout fixes in left sidebar Added animation to chatlist menu button Changed chat layer transition
115 lines
2.0 KiB
SCSS
115 lines
2.0 KiB
SCSS
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
.animated-close-icon {
|
|
position: absolute;
|
|
transform: rotate(-45deg);
|
|
pointer-events: none;
|
|
|
|
&, &:before, &:after {
|
|
width: 1.125rem;
|
|
height: .125rem;
|
|
border-radius: .125rem;
|
|
background-color: var(--secondary-text-color);
|
|
}
|
|
|
|
&:before, &:after {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
content: "";
|
|
}
|
|
|
|
&:before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
@include animation-level(2) {
|
|
&, &:before, &:after {
|
|
transition: transform var(--slide-header-transition);
|
|
}
|
|
|
|
&.no-transition {
|
|
&, &:before, &:after {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.state-back {
|
|
transform: rotate(180deg);
|
|
|
|
&:before {
|
|
transform: rotate(45deg) scaleX(.75) translateY(-.375rem);
|
|
}
|
|
|
|
&:after {
|
|
transform: rotate(-45deg) scaleX(.75) translateY(.375rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
.animated-menu-icon {
|
|
position: absolute;
|
|
|
|
&, &:before, &:after {
|
|
width: 1.125rem;
|
|
height: .125rem;
|
|
border-radius: .125rem;
|
|
background-color: var(--secondary-text-color);
|
|
transform: rotate(0);
|
|
}
|
|
|
|
@include animation-level(2) {
|
|
&, &:before, &:after {
|
|
transition: transform .25s;
|
|
}
|
|
}
|
|
|
|
&:before, &:after {
|
|
position: absolute;
|
|
left: 0;
|
|
content: "";
|
|
}
|
|
|
|
&:before {
|
|
top: -.3125rem;
|
|
}
|
|
|
|
&:after {
|
|
top: .3125rem;
|
|
}
|
|
|
|
&.state-back {
|
|
transform: rotate(180deg);
|
|
|
|
&:before {
|
|
transform: rotate(45deg) scaleX(.75) translate(.375rem, -.1875rem);
|
|
}
|
|
|
|
&:after {
|
|
transform: rotate(-45deg) scaleX(.75) translate(.375rem, .1875rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
.animated-button-icon {
|
|
> .tgico {
|
|
position: absolute;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
|
|
body:not(.animation-level-0) & {
|
|
animation: hide-icon .4s forwards ease-in-out;
|
|
}
|
|
|
|
@include animation-level(0) {
|
|
visibility: hidden;
|
|
animation: none !important;
|
|
}
|
|
}
|
|
}
|