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

Drawer button animation

This commit is contained in:
Jiiks 2018-02-04 16:20:57 +02:00
parent 3034ea4934
commit 932d91876b
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,12 @@
cursor: pointer;
}
.bd-drawer-open-button {
position: relative;
margin-right: 15px;
.bd-chevron-1, .bd-chevron-2 {
position: absolute;
}
svg {
transition: transform 0.5s ease;
transform: none;
@ -20,8 +26,17 @@
&.bd-drawer-open {
.bd-drawer-open-button {
svg {
transform: scaleY(-1);
.bd-chevron-1 {
svg {
transform: rotate(90deg)
}
}
.bd-chevron-2 {
margin-left: -4px;
svg {
transform: rotate(270deg)
}
}
}

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

@ -12,7 +12,10 @@
<div :class="['bd-drawer', {'bd-drawer-open': open}]">
<div class="bd-form-header bd-drawer-header" @click="() => open = !open">
<span class="bd-form-header-text">{{ label }}</span>
<span class="bd-form-header-button bd-drawer-open-button"><MiChevronDown /></span>
<span class="bd-form-header-button bd-drawer-open-button">
<span class="bd-chevron-1"><MiChevronDown /></span>
<span class="bd-chevron-2"><MiChevronDown /></span>
</span>
</div>
<div class="bd-drawer-contents">
<slot />