hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-12 13:18:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixing toast animation

Browse Source
This commit is contained in:
Ronan Berder
2025-04-23 07:37:17 +08:00
parent cc04460478
commit 4f3e9c70b9
4 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/basecoat.css
Vendored
+13 -3
View File
@@ -3155,7 +3155,6 @@
.toaster {
pointer-events: none;
position: fixed;
right: calc(var(--spacing) * 0);
bottom: calc(var(--spacing) * 0);
z-index: 50;
display: flex;
@@ -3165,12 +3164,23 @@
@media (width >= 40rem) {
max-width: calc(var(--spacing) * 90);
}
&:not([data-align]), &[data-align='end'] {
right: calc(var(--spacing) * 0);
}
&[data-align='start'] {
left: calc(var(--spacing) * 0);
}
&[data-align='center'] {
left: calc(1/2 * 100%);
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.toast {
pointer-events: auto;
margin-top: calc(var(--spacing) * 4);
display: grid;
width: 100%;
animation: toast-in 0.3s ease-in-out;
animation: toast-up 0.3s ease-in-out;
grid-template-rows: 1fr;
transition-property: grid-template-rows,opacity,margin;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3206,7 +3216,7 @@
}
}
}
@keyframes toast-in {
@keyframes toast-up {
from {
opacity: 0;
transform: translateY(100%);
dist/basecoat.tailwind.css
Vendored
+14 -4
View File
@@ -773,13 +773,23 @@
/* Toasts */
@layer components {
.toaster {
@apply fixed bottom-0 right-0 p-4 pointer-events-none z-50 w-full sm:max-w-90 flex flex-col-reverse;
@apply fixed bottom-0 p-4 pointer-events-none z-50 w-full sm:max-w-90 flex flex-col-reverse;
&:not([data-align]),
&[data-align='end'] {
@apply right-0;
}
&[data-align='start'] {
@apply left-0;
}
&[data-align='center'] {
@apply left-1/2 -translate-x-1/2;
}
.toast {
@apply pointer-events-auto w-full mt-4 animate-[toast-in_0.3s_ease-in-out] grid grid-rows-[1fr] transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out;
@apply pointer-events-auto w-full mt-4 animate-[toast-up_0.3s_ease-in-out] grid grid-rows-[1fr] transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out;
.toast-content {
@apply text-popover-foreground text-[13px] bg-popover border shadow-lg rounded-lg overflow-hidden;
@apply text-popover-foreground text-[13px] bg-popover border shadow-lg rounded-lg overflow-hidden;
}
&[aria-hidden='true'] {
@apply grid-rows-[0fr] opacity-0 m-0 border-0 p-0 overflow-hidden;
@@ -791,7 +801,7 @@
}
}
}
@keyframes toast-in {
@keyframes toast-up {
from {
opacity: 0;
transform: translateY(100%);
docs/_includes/components/select.njk
+4
View File
@@ -140,6 +140,10 @@
$filter: {
'@input'(e) { this.filterOptions(e.target.value) },
'@keydown.escape.prevent'() {
this.open = false;
this.$refs.trigger.focus();
},
'@keydown.down.prevent'() { this.moveOptionFocus(+1); },
'@keydown.up.prevent'() { this.moveOptionFocus(-1); },
'@keydown.home.prevent'() { this.focusOption(0) },
docs/_includes/components/toast.njk
+3 -3
View File
@@ -8,13 +8,13 @@
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('toaster', { isPaused: false });
Alpine.data('toast', (category = []) => ({
Alpine.data('toast', (category = '', timeoutDuration = null) => ({
open: false,
timeoutDuration: null,
timeoutId: null,
init() {
this.timeoutDuration = category === 'error' ? 5000 : 3000;
this.timeoutDuration = timeoutDuration || (category === 'error' ? 5000 : 3000);
this.timeoutId = setTimeout(() => { this.close() }, this.timeoutDuration);
this.open = true;
this.$watch('$store.toaster.isPaused', (isPaused) => {
@@ -74,7 +74,7 @@
aria-hidden="false"
:aria-hidden="!open"
{% if toast.category %}data-category="{{ toast.category }}"{% endif %}
x-data="toast('{{ toast.category }}')"
x-data="toast('{{ toast.category }}', {{ toast.timeoutDuration }})"
x-bind="$toast"
>
<div class="toast-content">