BetterDiscordApp-v2/client/src/styles/partials/generic/drawers.scss

86 lines
1.9 KiB
SCSS
Raw Normal View History

.bd-drawer {
2018-02-04 23:47:27 +01:00
margin-bottom: 15px;
2018-02-21 16:58:45 +01:00
.bd-settings-category > & {
border-bottom: 1px solid rgba(114, 118, 126, 0.3);
.bd-drawer-contents > .bd-form-item:last-child > .bd-form-divider:last-child {
display: none;
}
}
.bd-form-header {
2018-02-04 23:47:27 +01:00
margin-top: 0;
cursor: pointer;
&:hover {
color: rgba(255, 255, 255, 0.25);
}
}
.bd-drawer-open-button {
2018-02-04 15:20:57 +01:00
position: relative;
margin-right: 15px;
2018-02-04 15:20:57 +01:00
.bd-chevron-1, .bd-chevron-2 {
position: absolute;
}
svg {
transition: transform 0.5s ease;
transform: none;
}
}
2018-02-04 23:47:27 +01:00
.bd-drawer-contents-wrap {
overflow: hidden;
2018-02-12 20:05:28 +01:00
min-height: 5px;
}
2018-02-04 23:47:27 +01:00
.bd-drawer-contents {
// margin-top is set in JavaScript when the drawer is animating
// It still needs to be set here for it to animate
2018-02-04 23:47:27 +01:00
transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
transform: scaleY(0) translateY(0%);
margin-top: -100%;
2018-02-04 23:47:27 +01:00
opacity: 0;
> .bd-form-item:last-child > .bd-form-divider:last-child {
display: none;
}
}
&.bd-drawer-open {
> .bd-drawer-contents-wrap {
overflow: visible;
}
2018-02-21 16:58:45 +01:00
> .bd-drawer-header .bd-drawer-open-button {
2018-02-04 15:20:57 +01:00
.bd-chevron-1 {
svg {
transform: rotate(90deg)
}
}
.bd-chevron-2 {
margin-left: -4px;
svg {
transform: rotate(270deg)
}
}
}
2018-02-21 16:58:45 +01:00
> .bd-drawer-contents-wrap > .bd-drawer-contents {
2018-02-04 23:47:27 +01:00
transform: scaleY(1) translateY(0%);
margin-top: 0%;
opacity: 1;
&::after {
content: "";
display: block;
margin-top: 15px;
}
}
}
}