chore(Tooltip): keyframes in snake case

This commit is contained in:
Benjamin Canac
2024-03-11 17:40:15 +01:00
parent 37c14186a0
commit 55c47288a5
2 changed files with 5 additions and 5 deletions

View File

@@ -63,7 +63,7 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
</template>
<style>
@keyframes tooltipSlideDown {
@keyframes tooltip-down {
from {
opacity: 0;
transform: translateY(-0.25rem);
@@ -73,7 +73,7 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
transform: translateY(0);
}
}
@keyframes tooltipSlideRight {
@keyframes tooltip-right {
from {
opacity: 0;
transform: translateX(-0.25rem);
@@ -83,7 +83,7 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
transform: translateY(0);
}
}
@keyframes tooltipSlideUp {
@keyframes tooltip-up {
from {
opacity: 0;
transform: translateY(0.25rem);
@@ -93,7 +93,7 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
transform: translateY(0);
}
}
@keyframes tooltipSlideLeft {
@keyframes tooltip-left {
from {
opacity: 0;
transform: translateX(0.25rem);

View File

@@ -1,6 +1,6 @@
export default {
slots: {
content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[tooltipSlideDown_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltipSlideLeft_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltipSlideRight_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltipSlideUp_200ms_ease-out]',
content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[tooltip-down_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltip-left_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltip-right_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltip-up_200ms_ease-out]',
arrow: 'fill-white dark:fill-gray-700'
}
}