toast test case + animate toasts

toast
Kit Kasune 3 years ago
parent 2bd5e5c2f3
commit 02d8bd7b77
  1. 2
      index.html
  2. 0
      scripts/toast/createtoast.js
  3. 43
      styles/toast.css

@ -9,6 +9,7 @@
<link href='./styles/controls.css' rel='stylesheet'>
<link href='./styles/context.css' rel='stylesheet'>
<link href='./styles/modal.css' rel='stylesheet'>
<link href="./styles/toast.css" rel="stylesheet">
<title>FileKade</title>
</head>
@ -36,6 +37,7 @@
</div>
<div id="ctx"></div>
<div id="toast-container"><div class="toast"><h2>Test</h2><p>This is a test toast toast toast</p></div></div>
<script src="./scripts/renderer.js"></script>

@ -0,0 +1,43 @@
@keyframes enter-toast {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 100;
transform: translateX(0);
}
}
#toast-container {
position: fixed;
top: 10px;
right: 10px;
display: flex;
flex-direction: column-reverse;
align-items: stretch;
align-content: stretch;
row-gap: 4px;
justify-content: flex-end;
width: auto;
}
.toast {
border-radius: 5px;
background-color: #a172a6;
color: white;
animation: enter-toast .25s ease-out 1;
animation-fill-mode: both;
animation-delay: 2s;
}
.toast p {
font-family: 'Montserrat', sans-serif;
margin: 8px;
}
.toast h2 {
font-size: 25px;
font-family: 'Nunito', sans-serif;
margin: 6px 0 8px 8px;
}
Loading…
Cancel
Save