forked from mirror/misskey
refactor(client): use css modules
This commit is contained in:
parent
01d5e385ec
commit
17fa5667b8
@ -1,6 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<Transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
|
<Transition
|
||||||
<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
|
:enter-active-class="$store.state.animation ? $style.transition_tooltip_enterActive : ''"
|
||||||
|
:leave-active-class="$store.state.animation ? $style.transition_tooltip_leaveActive : ''"
|
||||||
|
:enter-from-class="$store.state.animation ? $style.transition_tooltip_enterFrom : ''"
|
||||||
|
:leave-to-class="$store.state.animation ? $style.transition_tooltip_leaveTo : ''"
|
||||||
|
appear @after-leave="emit('closed')"
|
||||||
|
>
|
||||||
|
<div v-show="showing" ref="el" :class="$style.root" class="_acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
|
||||||
<slot>
|
<slot>
|
||||||
<Mfm v-if="asMfm" :text="text"/>
|
<Mfm v-if="asMfm" :text="text"/>
|
||||||
<span v-else>{{ text }}</span>
|
<span v-else>{{ text }}</span>
|
||||||
@ -74,20 +80,20 @@ onUnmounted(() => {
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
.tooltip-enter-active,
|
.transition_tooltip_enterActive,
|
||||||
.tooltip-leave-active {
|
.transition_tooltip_leaveActive {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
|
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||||
}
|
}
|
||||||
.tooltip-enter-from,
|
.transition_tooltip_enterFrom,
|
||||||
.tooltip-leave-active {
|
.transition_tooltip_leaveTo {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0.75);
|
transform: scale(0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
.buebdbiu {
|
.root {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
|
Loading…
Reference in New Issue
Block a user