rsuite/useToaster/styles/index.css

A suite of react components

@keyframes notificationMoveIn{
  0%{
    opacity:0;
    transform-origin:0% 0%;
    transform:scaleY(0.8);
  }
  100%{
    opacity:1;
    transform-origin:0% 0%;
    transform:scaleY(1);
  }
}
@keyframes notificationMoveInLeft{
  from{
    opacity:0;
    transform:translate3d(-100%, 0, 0);
  }
  to{
    opacity:1;
    transform:none;
  }
}
@keyframes notificationMoveInRight{
  from{
    opacity:0;
    transform:translate3d(100%, 0, 0);
  }
  to{
    opacity:1;
    transform:none;
  }
}
@keyframes notificationMoveOut{
  0%{
    opacity:1;
    transform-origin:0% 0%;
    transform:scaleY(1);
    max-height:100px;
  }
  100%{
    opacity:0;
    transform-origin:0% 0%;
    transform:scaleY(0.8);
    max-height:0;
    overflow:hidden;
  }
}
.rs-toast{
  --rs-toast-shadow:var(--rs-shadow-md);
  pointer-events:auto;
}

.rs-toast-container{
  --rs-toast-spacing:1.5rem;
  position:fixed;
  z-index:var(--rs-zindex-notification);
  pointer-events:none;
  display:flex;
  flex-direction:column;
}
.rs-toast-container .rs-toast:not(.rs-notification){
  box-shadow:var(--rs-toast-shadow);
}
.rs-toast-container-top-center, .rs-toast-container-bottom-center{
  align-items:center;
  width:100%;
}
.rs-toast-container-top-center .rs-toast-fade-entered, .rs-toast-container-bottom-center .rs-toast-fade-entered{
  animation-name:notificationMoveIn;
}
.rs-toast-container-bottom-start, .rs-toast-container-top-start{
  align-items:flex-start;
  inset-inline-start:var(--rs-toast-spacing);
}
.rs-toast-container-bottom-start .rs-toast-fade-entered, .rs-toast-container-top-start .rs-toast-fade-entered{
  animation-name:notificationMoveInLeft;
}
[dir=rtl] .rs-toast-container-bottom-start .rs-toast-fade-entered, [dir=rtl] .rs-toast-container-top-start .rs-toast-fade-entered{
  animation-name:notificationMoveInRight;
}
.rs-toast-container-bottom-end, .rs-toast-container-top-end{
  align-items:flex-end;
  inset-inline-end:var(--rs-toast-spacing);
}
.rs-toast-container-bottom-end .rs-toast-fade-entered, .rs-toast-container-top-end .rs-toast-fade-entered{
  margin-inline-start:auto;
  animation-name:notificationMoveInRight;
}
[dir=rtl] .rs-toast-container-bottom-end .rs-toast-fade-entered, [dir=rtl] .rs-toast-container-top-end .rs-toast-fade-entered{
  animation-name:notificationMoveInLeft;
}
.rs-toast-container-top-center, .rs-toast-container-top-start, .rs-toast-container-top-end{
  top:var(--rs-toast-spacing);
}
.rs-toast-container-bottom-center, .rs-toast-container-bottom-start, .rs-toast-container-bottom-end{
  bottom:var(--rs-toast-spacing);
}

.rs-toast-fade-entered,
.rs-toast-fade-exiting{
  animation-fill-mode:forwards;
}

.rs-toast-fade-entered{
  animation-duration:0.4s;
  animation-timing-function:cubic-bezier(0.99, 0.44, 0.44, 1.35);
}

.rs-toast-fade-exited,
.rs-toast-fade-entering{
  opacity:0;
}

.rs-toast-fade-exited{
  transform-origin:0 0;
  transform:scaleY(0.8);
  max-height:0;
  overflow:hidden;
}

.rs-toast-fade-exiting{
  animation-duration:0.3s;
  animation-timing-function:cubic-bezier(0.64, 0.65, 0.57, 1.13);
  animation-name:notificationMoveOut;
}