OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #5983 from matrix-org/t3chguy/fix/16994 

Improve style of notification badges on the space panel
pull/21833/head
Michael Telatynski 2021-05-07 13:49:41 +01:00 committed by GitHub
parent 74bcb921ff 03ca7e0107
commit 1e6c6e9d80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
res/css/structures/_SpacePanel.scss
View File

@ -237,7 +237,6 @@ $activeBorderColor: $secondary-fg-color;
.mx_SpacePanel_badgeContainer { .mx_SpacePanel_badgeContainer {
position: absolute; position: absolute;
height: 16px;
// Create a flexbox to make aligning dot badges easier // Create a flexbox to make aligning dot badges easier
display: flex; display: flex;
@ -249,23 +248,37 @@ $activeBorderColor: $secondary-fg-color;
.mx_NotificationBadge_dot { .mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering // make the smaller dot occupy the same width for centering
margin-left: 7px; margin: 0 7px;
margin-right: 7px;
} }
} }
&.collapsed { &.collapsed {
.mx_SpaceButton { .mx_SpaceButton {
.mx_SpacePanel_badgeContainer { .mx_SpacePanel_badgeContainer {
right: -3px; right: 0;
top: -3px; top: 0;
.mx_NotificationBadge {
background-clip: padding-box;
}
.mx_NotificationBadge_dot {
margin: 0 -1px 0 0;
border: 3px solid $groupFilterPanel-bg-color;
}
.mx_NotificationBadge_2char,
.mx_NotificationBadge_3char {
margin: -5px -5px 0 0;
border: 2px solid $groupFilterPanel-bg-color;
}
} }
&.mx_SpaceButton_active .mx_SpacePanel_badgeContainer { &.mx_SpaceButton_active .mx_SpacePanel_badgeContainer {
// when we draw the selection border we move the relative bounds of our parent // when we draw the selection border we move the relative bounds of our parent
// so update our position within the bounds of the parent to maintain position overall // so update our position within the bounds of the parent to maintain position overall
right: -6px; right: -3px;
top: -6px; top: -3px;
} }
} }
} }