lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Merge pull request #92 from samuelthomas2774/add-drawer-animation 

Add drawer open/close animation
This commit is contained in:
Alexei Stukov 2018-02-05 00:51:10 +02:00 committed by GitHub
parent 17f9487225 9245e921ce
commit 2da3fb95c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/styles/partials/generic/drawers.scss
View File

@ -1,5 +1,9 @@
.bd-drawer {
border-bottom: 1px solid rgba(114, 118, 126, 0.3);
margin-bottom: 15px;
.bd-form-header {
margin-top: 0;
cursor: pointer;
&:hover {
@ -21,13 +25,25 @@
}
}
.bd-drawer-contents {
display: none;
.bd-drawer-contents-wrap {
overflow: hidden;
}
&:not(.bd-drawer-open) {
padding-bottom: 5px;
border-bottom: 1px solid rgba(114, 118, 126, 0.3);
.bd-drawer-contents {
transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
transform: scaleY(0) translateY(0%);
margin-top: -50%;
opacity: 0;
> .bd-form-item:last-child > .bd-form-divider:last-child {
display: none;
}
&::after {
content: "";
display: block;
margin-top: 15px;
}
}
&.bd-drawer-open {
@ -47,7 +63,9 @@
}
.bd-drawer-contents {
display: block;
transform: scaleY(1) translateY(0%);
margin-top: 0%;
opacity: 1;
}
}
}

6
client/src/ui/components/common/Drawer.vue
View File

@ -17,8 +17,10 @@
<span class="bd-chevron-2"><MiChevronDown /></span>
</span>
</div>
<div class="bd-drawer-contents">
<slot />
<div class="bd-drawer-contents-wrap">
<div class="bd-drawer-contents">
<slot />
</div>
</div>
</div>
</template>