natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 💄 scope transition style

This commit is contained in:
ThatOneCalculator 2023-07-12 00:36:24 -07:00
parent d2c7e7cde5
commit c7ca8aed74
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/client/src/components/MkDonation.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<transition name="slide-fade"> <transition name="slide-fade">
<div v-if="show" class="_panel _shadow" :class="$style.root"> <div v-if="show" class="_panel _shadow _acrylic" :class="$style.root">
<div :class="$style.icon"> <div :class="$style.icon">
<i class="ph-hand-heart ph-bold ph-5x" /> <i class="ph-hand-heart ph-bold ph-5x" />
</div> </div>
@ -87,13 +87,30 @@ function openExternal(link) {
} }
</script> </script>
<style lang="scss" scoped>
.slide-fade-enter {
opacity: 1;
transform: translateY(0);
}
.slide-fade-enter-active {
transition: opacity 0.5s, transform 0.5s;
}
.slide-fade-leave-to {
opacity: 0;
transform: translateY(100%);
}
.slide-fade-leave-active {
transition: opacity 0.5s, transform 0.5s;
}
</style>
<style lang="scss" module> <style lang="scss" module>
.root { .root {
position: fixed; position: fixed;
z-index: v-bind(zIndex); z-index: v-bind(zIndex);
bottom: var(--margin); bottom: var(--margin);
left: 0; left: 2%;
right: 0; bottom: 2%;
margin: auto; margin: auto;
box-sizing: border-box; box-sizing: border-box;
width: calc(100% - (var(--margin) * 2)); width: calc(100% - (var(--margin) * 2));
@ -138,19 +155,4 @@ function openExternal(link) {
.text { .text {
margin: 0.7em 0 1em 0; margin: 0.7em 0 1em 0;
} }
.slide-fade-enter {
opacity: 1;
transform: translateY(0);
}
.slide-fade-enter-active {
transition: opacity 0.5s, transform 0.5s;
}
.slide-fade-leave-to {
opacity: 0;
transform: translateY(100%);
}
.slide-fade-leave-active {
transition: opacity 0.5s, transform 0.5s;
}
</style> </style>