imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Iterate space panel toggle collapse interaction (#7335)

Browse source
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

40
res/css/structures/_SpacePanel.scss
View file

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