UX: animation tweaks + icon

This commit is contained in:
chapoi 2023-09-07 11:50:00 +02:00
parent 63bdd93622
commit 9365d9fba7
2 changed files with 33 additions and 28 deletions

View File

@ -97,34 +97,6 @@
position: relative;
cursor: pointer;
color: var(--primary-high);
transition: height 0.25s ease-out, opacity 0.25s ease-out;
transform-origin: top center;
opacity: 1;
will-change: height, opacity, left;
&__action-btn {
display: flex;
align-items: center;
position: absolute;
top: 0px;
bottom: 0px;
padding-inline: 0.5rem;
color: var(--primary);
&.-cancel {
background: var(--tertiary);
}
&.-remove {
background: var(--danger);
}
}
&.-fade-out {
opacity: 0;
height: 0 !important;
overflow: hidden;
}
@media (hover: none) {
&:hover,

View File

@ -19,6 +19,39 @@
padding: 0 1.5rem;
border-radius: 0;
border-bottom: 1px solid var(--primary-low);
transition: height 0.25s ease-in-out, opacity 0.25s ease-out;
transform-origin: top center;
will-change: height, left;
&__action-btn {
display: flex;
align-items: center;
position: absolute;
top: 0px;
bottom: 0px;
padding-inline: 1rem;
&.-cancel {
background: var(--primary-low);
color: var(--primary);
}
&.-remove {
background: var(--danger);
color: var(--primary-very-low);
}
}
&__action-btn-icon {
margin-left: 0.5rem;
}
&.-fade-out {
background-color: var(--danger-low);
height: 0 !important;
overflow: hidden;
opacity: 0.5 !important;
}
.chat-channel-metadata {
.chat-channel-unread-indicator {