TelegramPWA/src/components/middle/PinnedMessageNavigation.module.scss
Alexander Zinchuk d965b6c479 Middle Column: Better pinned message animation (#2716)
Co-authored-by: Alexander Zinchuk <alx.zinchuk@gmail.com>
2023-03-30 18:28:51 -05:00

36 lines
767 B
SCSS

.pinned-message-border {
position: relative;
height: 2.25rem;
margin: 0.125rem 0;
width: 0.125rem;
min-width: 0.125rem;
overflow: hidden;
}
.pinned-message-border-wrapper-1 {
height: 2.25rem;
width: 0.125rem;
border-radius: 0.0625rem;
background: var(--color-primary);
}
.pinned-message-border-wrapper {
background-color: var(--color-primary-opacity);
position: relative;
will-change: transform;
transition: transform 0.25s ease-in-out;
}
.pinned-message-border-mark {
position: absolute;
left: 0;
top: 0;
width: 0.125rem;
background: var(--color-primary);
border-radius: 0.0625rem;
will-change: transform;
transition: transform 0.25s ease-in-out;
transform: translateY(var(--translate-y));
height: var(--height);
}