Created
November 12, 2021 23:40
-
-
Save davidjbeaver/bba8a9bfc9ce2079f5c35949addd474b to your computer and use it in GitHub Desktop.
SolidJS Toast Tutorial - toasts.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--primary-blue: #3b82f6; | |
--primary-red: #ef4444; | |
--primary-green: #059669; | |
--primary-yellow: #f59e0b; | |
} | |
.toast-container { | |
position: fixed; | |
top: 1.5em; | |
right: 1.5em; | |
display: flex; | |
flex-direction: column; | |
transition: transform 0.6s ease-in-out; | |
animation: toast-in-right 0.7s; | |
z-index: 99999; | |
} | |
.toast-container .toast { | |
min-width: 22em; | |
color: white; | |
margin-bottom: 1em; | |
transition: 0.3s ease; | |
animation: toast-in-right 0.5s; | |
box-shadow: var(--card-shadow); | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.toast-container .toast i, | |
.toast-container .toast button { | |
flex: 0 1 0; | |
text-align: center; | |
padding: 1em; | |
} | |
.toast-container .toast span { | |
flex: 1 1 0; | |
margin: 0em 0.5em; | |
} | |
.toast-container .toast button { | |
background: none; | |
border: none; | |
color: white; | |
display: block; | |
margin: 0; | |
cursor: pointer; | |
border-left: 1px solid white; | |
} | |
.toast-container .toast.is-error { | |
background-color: var(--primary-red); | |
} | |
.toast-container .toast.is-success { | |
background-color: var(--primary-green); | |
} | |
.toast-container .toast.is-info { | |
background-color: var(--primary-blue); | |
} | |
.toast-container .toast.is-warning { | |
background-color: var(--primary-yellow); | |
} | |
@keyframes toast-in-right { | |
from { | |
transform: translateX(100%); | |
} | |
to { | |
transform: translateX(0); | |
} | |
} | |
@media (max-width: 48em) { | |
.toast-container { | |
top: unset; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
flex-direction: column-reverse; | |
} | |
.toast-container .toast { | |
margin-bottom: 0em; | |
margin-top: 0.5em; | |
} | |
} | |
@font-face { | |
font-family: "icomoon"; | |
src: url("/fonts/icomoon.ttf?fmmix6") format("truetype"), | |
url("/fonts/icomoon.woff?fmmix6") format("woff"), | |
url("/fonts/icomoon.svg?fmmix6#icomoon") format("svg"); | |
font-weight: normal; | |
font-style: normal; | |
font-display: block; | |
} | |
i { | |
/* use !important to prevent issues with browser extensions that change fonts */ | |
font-family: "icomoon" !important; | |
font-style: normal; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
line-height: 1; | |
/* Better Font Rendering =========== */ | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.icon-alert-circle:before { | |
content: "\e917"; | |
} | |
.icon-info:before { | |
content: "\e918"; | |
} | |
.icon-check-circle:before { | |
content: "\e912"; | |
} | |
.icon-x-circle:before { | |
content: "\e913"; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment