Iterate space panel toggle collapse interaction (#7335)

pull/21833/head
Michael Telatynski 2021-12-13 14:59:50 +00:00 committed by GitHub
parent ce570ab827
commit 58e79d836d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 26 deletions

View File

@ -36,49 +36,37 @@ $activeBorderColor: $primary-content;
flex-direction: column;
.mx_SpacePanel_toggleCollapse {
position: relative;
height: 32px;
width: 32px;
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: $tertiary-content;
top: 19px; // v-align with avatar
right: -8px;
&::before {
content: "";
position: absolute;
width: 32px;
height: 32px;
left: 0;
width: inherit;
height: inherit;
mask-position: center;
mask-size: 24px;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
background-color: $background;
mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
transform: rotate(270deg);
}
&:not(.expanded) {
position: absolute;
left: 68px;
top: 12px;
border-radius: 0 8px 8px 0;
background-color: $primary-content;
opacity: 0;
&::before {
background-color: $background;
mask-position: center 1px;
}
}
&.expanded {
margin-left: auto;
margin-right: -8px; // overflow into .mx_UserMenu's margin without butchering its bottom stroke
border-radius: 8px;
&::before {
transform: rotate(90deg);
}
&:hover {
background-color: $panel-actions;
}
&.expanded::before {
transform: rotate(90deg);
}
}