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

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

@ -3,6 +3,12 @@
cursor: pointer; cursor: pointer;
} }
.bd-drawer-open-button { .bd-drawer-open-button {
position: relative;
margin-right: 15px;
.bd-chevron-1, .bd-chevron-2 {
position: absolute;
}
svg { svg {
transition: transform 0.5s ease; transition: transform 0.5s ease;
transform: none; transform: none;
@ -20,8 +26,17 @@
&.bd-drawer-open { &.bd-drawer-open {
.bd-drawer-open-button { .bd-drawer-open-button {
.bd-chevron-1 {
svg { svg {
transform: scaleY(-1); 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-drawer', {'bd-drawer-open': open}]">
<div class="bd-form-header bd-drawer-header" @click="() => 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-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>
<div class="bd-drawer-contents"> <div class="bd-drawer-contents">
<slot /> <slot />