toasts without inline css

1 files changed, 66 insertions, 0 deletions

diff --git a/styles/toast.css b/styles/toast.css
new file mode 100644
index 0000000..2ecbcfb
--- /dev/null
+++ b/styles/toast.css
@@ -0,0 +1,66 @@
+.toast.error {
+	background-color: var(--error);
+}
+.toast.confirmation {
+	background-color: var(--confirm);
+}
+.toast.normal {
+	background-color: var(--gray-700);
+}
+
+.toast.confirmation,
+.toast.error {
+	color: var(--gray-900);
+}
+
+html.dark .toast.confirmation,
+html.dark .toast.error {
+	background-color: var(--gray-700);
+	color: var(--foreground);
+}
+html.dark .toast.error {
+	box-shadow: inset 0 0 0 2px var(--error);
+}
+html.dark .toast.confirmation {
+	box-shadow: inset 0 0 0 2px var(--confirm);
+}
+
+.toast {
+	margin-bottom: var(--spacing-medium);
+}
+
+#ToastArea {
+	white-space: nowrap;
+	bottom: var(--spacing-medium);
+	z-index: 1;
+	max-width: 600px;
+	width: calc(100% - 2 * 48px);
+	margin: 0 var(--spacing-large);
+}
+
+.toast .inner {
+	line-height: 0;
+	min-height: 24px;
+}
+
+.toast .inner.hasDescription {
+	min-height: 36px;
+}
+
+.toast .inner .icon,
+.toast .inner .content {
+	left: var(--spacing-medium);
+}
+
+.toast .inner.hasIcon .content {
+	left: calc(36px + var(--spacing-medium));
+}
+
+.toast .inner .content h2 {
+	font-size: 1rem;
+}
+
+.toast .inner .closeIcon {
+	right: var(--spacing-medium);
+	cursor: pointer;
+}