Tony's Collections
Tony's Bundles
tony /
Styled Toasts
Styled Toasts
These toasts fly in and and fly out, and consist of a title and a description.
Div Structure
<div class="louder-torso">
<div class="--toast">
<div class="--wrapper" >
<div class="--content">
<div class="--close-button"><svg ...></svg></div>
<div class="--title">Title</div>
<div class="--message">Content</div>
</div>
</div>
</div>
</div>
</div>
CSS
/* Toasts */
.louder-torso {
max-width: 300px;
position: fixed;
top: 5px;
right: 10px;
}
.louder-torso > .--toast {
transform: translateY(-120%);
grid-template-rows: 1fr ;
display: grid;
opacity: 0;
padding-bottom: 1rem;
width: 300px;
max-width: 300px;
}
.louder-torso > .--toast > .--wrapper {
overflow: hidden;
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.louder-torso > .--toast > .--wrapper .--content {
position: relative;
padding: 1rem;
border-radius: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
background: #fff;
}
.louder-torso > .--toast > .--wrapper > .--content > .--title {
display: block;
font-weight: bold;
margin-bottom: 0.5rem;
padding-right: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1rem;
line-height: 1.5rem;
}
.louder-torso > .--toast-animate-in {
transition: 0.5s;
transform: translateY(0%);
opacity: 1;
}
.louder-torso > .--toast-animate-out {
transform: translateX(120%);
transition: 0.5s;
grid-template-rows: 0fr ;
}
Add this to the <head> of your page