Merge pull request #6800 from matrix-org/t3chguy/fix/18694
Simplify Space Panel layout and fix some edge cases
This commit is contained in:
commit
1298fddebf
1 changed files with 2 additions and 13 deletions
|
@ -139,7 +139,6 @@ $activeBorderColor: $secondary-content;
|
||||||
&:not(.mx_SpaceButton_narrow) {
|
&:not(.mx_SpaceButton_narrow) {
|
||||||
.mx_SpaceButton_selectionWrapper {
|
.mx_SpaceButton_selectionWrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-right: 16px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -151,7 +150,6 @@ $activeBorderColor: $secondary-content;
|
||||||
display: block;
|
display: block;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-right: 8px;
|
|
||||||
font-size: $font-14px;
|
font-size: $font-14px;
|
||||||
line-height: $font-18px;
|
line-height: $font-18px;
|
||||||
}
|
}
|
||||||
|
@ -225,8 +223,7 @@ $activeBorderColor: $secondary-content;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: relative;
|
||||||
right: 4px;
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
top: 2px;
|
top: 2px;
|
||||||
|
@ -245,8 +242,6 @@ $activeBorderColor: $secondary-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_SpacePanel_badgeContainer {
|
.mx_SpacePanel_badgeContainer {
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
// Create a flexbox to make aligning dot badges easier
|
// Create a flexbox to make aligning dot badges easier
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -264,6 +259,7 @@ $activeBorderColor: $secondary-content;
|
||||||
&.collapsed {
|
&.collapsed {
|
||||||
.mx_SpaceButton {
|
.mx_SpaceButton {
|
||||||
.mx_SpacePanel_badgeContainer {
|
.mx_SpacePanel_badgeContainer {
|
||||||
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
|
@ -293,19 +289,12 @@ $activeBorderColor: $secondary-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.collapsed) {
|
&:not(.collapsed) {
|
||||||
.mx_SpacePanel_badgeContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx_SpaceButton:hover,
|
.mx_SpaceButton:hover,
|
||||||
.mx_SpaceButton:focus-within,
|
.mx_SpaceButton:focus-within,
|
||||||
.mx_SpaceButton_hasMenuOpen {
|
.mx_SpaceButton_hasMenuOpen {
|
||||||
&:not(.mx_SpaceButton_invite) {
|
&:not(.mx_SpaceButton_invite) {
|
||||||
// Hide the badge container on hover because it'll be a menu button
|
// Hide the badge container on hover because it'll be a menu button
|
||||||
.mx_SpacePanel_badgeContainer {
|
.mx_SpacePanel_badgeContainer {
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue