100 lines
2.1 KiB
SCSS
100 lines
2.1 KiB
SCSS
.bd-drawer {
|
|
margin-bottom: 15px;
|
|
|
|
.bd-settingsCategory > & {
|
|
border-bottom: 1px solid rgba(114, 118, 126, .3);
|
|
|
|
.bd-drawerContents > .bd-formItem {
|
|
&:last-child > .bd-formDivider {
|
|
&:last-child {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bd-formHeader {
|
|
margin-top: 0;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: rgba(255, 255, 255, .25);
|
|
}
|
|
}
|
|
|
|
.bd-drawerOpenButton {
|
|
position: relative;
|
|
margin-right: 15px;
|
|
|
|
.bd-chevron1,
|
|
.bd-chevron2 {
|
|
position: absolute;
|
|
}
|
|
|
|
svg {
|
|
transition: transform .5s ease;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.bd-drawerContentsWrap {
|
|
min-height: 5px;
|
|
}
|
|
|
|
.bd-drawerContents {
|
|
// margin-top is set in JavaScript when the drawer is animating
|
|
// It still needs to be set here for it to animate
|
|
transition: transform .2s ease, margin-top .2s ease, opacity .2s ease;
|
|
transform: scaleY(0) translateY(0%);
|
|
margin-top: -100%;
|
|
opacity: 0;
|
|
|
|
> .bd-formItem {
|
|
&:last-child > .bd-formDivider {
|
|
&:last-child {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bd-animating,
|
|
&:not(.bd-drawerOpen) {
|
|
> .bd-drawerContentsWrap {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
&.bd-drawerOpen {
|
|
> .bd-drawerHeader {
|
|
.bd-drawerOpenButton {
|
|
.bd-chevron1 {
|
|
svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bd-chevron2 {
|
|
margin-left: -4px;
|
|
|
|
svg {
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
> .bd-drawerContentsWrap > .bd-drawerContents {
|
|
transform: scaleY(1) translateY(0%);
|
|
margin-top: 0;
|
|
opacity: 1;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|