arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-17 13:38:07 +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

20
src/runtime/components/Accordion.vue
View File

@@ -85,23 +85,3 @@ const ui = computed(() => tv({ extend: accordion, slots: props.ui })())
</AccordionItem>
</AccordionRoot>
</template>
<style>
@keyframes accordion-down {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
@keyframes accordion-up {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}
</style>

20
src/runtime/components/Collapsible.vue
View File

@@ -47,23 +47,3 @@ const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
</CollapsibleContent>
</CollapsibleRoot>
</template>
<style>
@keyframes collapsible-down {
from {
height: 0;
}
to {
height: var(--radix-collapsible-content-height);
}
}
@keyframes collapsible-up {
from {
height: var(--radix-collapsible-content-height);
}
to {
height: 0;
}
}
</style>

23
src/runtime/components/DropdownMenu.vue
View File

@@ -77,26 +77,3 @@ const ui = computed(() => tv({ extend: dropdownMenu, slots: props.ui })())
</UDropdownMenuContent>
</DropdownMenuRoot>
</template>
<style>
@keyframes dropdown-menu-open {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes dropdown-menu-closed {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
</style>

39
src/runtime/components/Modal.vue
View File

@@ -128,42 +128,3 @@ const ui = computed(() => tv({ extend: modal, slots: props.ui })({
</DialogPortal>
</DialogRoot>
</template>
<style>
@keyframes modal-overlay-open {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes modal-overlay-closed {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes modal-content-open {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes modal-content-closed {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
</style>

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>

83
src/runtime/components/Slideover.vue
View File

@@ -129,86 +129,3 @@ const ui = computed(() => tv({ extend: slideover, slots: props.ui })({
</DialogPortal>
</DialogRoot>
</template>
<style>
@keyframes slideover-overlay-open {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideover-overlay-closed {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes slideover-content-right-open {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideover-content-right-closed {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes slideover-content-left-open {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes slideover-content-left-closed {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slideover-content-top-open {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideover-content-top-closed {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes slideover-content-bottom-open {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideover-content-bottom-closed {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
</style>

45
src/runtime/components/Tooltip.vue
View File

@@ -45,7 +45,7 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open'
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as TooltipContentProps)
const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
const ui = computed(() => tv({ extend: tooltip, slots: props.ui })({ side: contentProps.value.side }))
</script>
<template>
@@ -73,46 +73,3 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
</TooltipPortal>
</TooltipRoot>
</template>
<style>
@keyframes tooltip-down {
from {
opacity: 0;
transform: translateY(-0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tooltip-right {
from {
opacity: 0;
transform: translateX(-0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tooltip-up {
from {
opacity: 0;
transform: translateY(0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tooltip-left {
from {
opacity: 0;
transform: translateX(0.25rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>