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 { .bd-drawer {
border-bottom: 1px solid rgba(114, 118, 126, 0.3);
margin-bottom: 15px;
.bd-form-header { .bd-form-header {
margin-top: 0;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -21,13 +25,25 @@
} }
} }
.bd-drawer-contents { .bd-drawer-contents-wrap {
display: none; overflow: hidden;
} }
&:not(.bd-drawer-open) { .bd-drawer-contents {
padding-bottom: 5px; transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
border-bottom: 1px solid rgba(114, 118, 126, 0.3); 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 { &.bd-drawer-open {
@ -47,7 +63,9 @@
} }
.bd-drawer-contents { .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 class="bd-chevron-2"><MiChevronDown /></span>
</span> </span>
</div> </div>
<div class="bd-drawer-contents"> <div class="bd-drawer-contents-wrap">
<slot /> <div class="bd-drawer-contents">
<slot />
</div>
</div> </div>
</div> </div>
</template> </template>