feat(Toast): add Toast nearly identical to ChatGPT's (#1108)

This commit is contained in:
Danny Avila 2023-10-27 15:48:05 -04:00 committed by GitHub
parent ba5ab86037
commit 81a90d245b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 281 additions and 3 deletions

View file

@ -1532,3 +1532,64 @@ button.scroll-convo {
.hidden-visibility {
visibility: hidden;
}
.toast-root {
align-items:center;
display:flex;
flex-direction:column;
height:0;
transition:all .24s cubic-bezier(0,0,.2,1)
}
.toast-root[data-state=open] {
-webkit-animation:toast-open .24s cubic-bezier(.175,.885,.32,1.175) both;
animation:toast-open .24s cubic-bezier(.175,.885,.32,1.175) both
}
.toast-root[data-state=closed] {
-webkit-animation:toast-close .12s cubic-bezier(.4,0,1,1) both;
animation:toast-close .12s cubic-bezier(.4,0,1,1) both
}
.toast-root .alert-root {
box-shadow:0 0 1px rgba(67,90,111,.3),0 5px 8px -4px rgba(67,90,111,.3);
flex-shrink:0;
pointer-events:all
}
@-webkit-keyframes toast-open {
0% {
opacity:0;
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
to {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes toast-open {
0% {
opacity:0;
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
to {
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@-webkit-keyframes toast-close {
0% {
opacity:1
}
to {
opacity:0
}
}
@keyframes toast-close {
0% {
opacity:1
}
to {
opacity:0
}
}