arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 00:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: move animations in tailwind.css

Browse Source 
Resolves #25
This commit is contained in:
Benjamin Canac
2024-04-03 17:08:16 +02:00
parent 17c7256864
commit 5f2a9ddc2e
13 changed files with 212 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/runtime/components/Popover.vue
View File

@@ -51,7 +51,7 @@ const rootProps = useForwardPropsEmits(pick, emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as PopoverContentProps)
const arrowProps = toRef(() => props.arrow as PopoverArrowProps)
const ui = computed(() => tv({ extend: popover, slots: props.ui })())
const ui = computed(() => tv({ extend: popover, slots: props.ui })({ side: contentProps.value.side }))
const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
</script>
@@ -71,86 +71,3 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
</Component.Portal>
</Component.Root>
</template>
<style>
@keyframes popover-down-open {
from {
opacity: 0;
transform: translateY(-0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes popover-down-closed {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-0.25rem);
}
}
@keyframes popover-right-open {
from {
opacity: 0;
transform: translateX(-0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes popover-right-closed {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateX(-0.25rem);
}
}
@keyframes popover-up-open {
from {
opacity: 0;
transform: translateY(0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes popover-up-closed {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(0.25rem);
}
}
@keyframes popover-left-open {
from {
opacity: 0;
transform: translateX(0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes popover-left-closed {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateX(0.25rem);
}
}
</style>