UX: animation tweaks + icon
This commit is contained in:
parent
63bdd93622
commit
9365d9fba7
|
@ -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,
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue