mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-15 05:05:42 +01:00
✌️
This commit is contained in:
parent
64781efe52
commit
80929eb176
3 changed files with 46 additions and 23 deletions
12
src/web/app/animation.styl
Normal file
12
src/web/app/animation.styl
Normal file
|
@ -0,0 +1,12 @@
|
|||
.zoom-in-top-enter-active,
|
||||
.zoom-in-top-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transform-origin: center top;
|
||||
}
|
||||
.zoom-in-top-enter,
|
||||
.zoom-in-top-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
|
@ -1,4 +1,5 @@
|
|||
@import "../style"
|
||||
@import "../animation"
|
||||
|
||||
html
|
||||
&.progress
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
|
||||
<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
|
||||
</button>
|
||||
<transition name="zoom-in-top">
|
||||
<div class="menu" v-if="isOpen">
|
||||
<ul>
|
||||
<li>
|
||||
|
@ -27,6 +28,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -209,4 +211,12 @@ export default Vue.extend({
|
|||
background $theme-color
|
||||
color $theme-color-foreground
|
||||
|
||||
&:active
|
||||
background darken($theme-color, 10%)
|
||||
|
||||
.zoom-in-top-enter-active,
|
||||
.zoom-in-top-leave-active {
|
||||
transform-origin: center -16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue