mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
chore(Tooltip): keyframes in snake case
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user