Fix top right header button layout and hover consistency

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-16 14:38:46 +01:00
parent cb4f4c96b4
commit a2b5e5a6a1
3 changed files with 22 additions and 11 deletions

View file

@ -22,7 +22,7 @@ limitations under the License.
content: "";
background-color: $header-divider-color;
opacity: 0.5;
margin: 0 15px;
margin: 6px 8px;
border-radius: 1px;
width: 1px;
}

View file

@ -61,10 +61,10 @@ limitations under the License.
&::before {
content: '';
position: absolute;
top: 6px; // center with parent of 32px
left: 6px; // center with parent of 32px
height: 20px;
width: 20px;
top: 4px; // center with parent of 32px
left: 4px; // center with parent of 32px
height: 24px;
width: 24px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;

View file

@ -75,7 +75,6 @@ limitations under the License.
.mx_RoomHeader_buttons {
display: flex;
background-color: $primary-bg-color;
padding-right: 5px;
}
.mx_RoomHeader_info {
@ -209,20 +208,32 @@ limitations under the License.
.mx_RoomHeader_button {
position: relative;
margin-left: 10px;
margin-left: 1px;
margin-right: 1px;
cursor: pointer;
height: 20px;
width: 20px;
height: 32px;
width: 32px;
border-radius: 100%;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
top: 4px; // center with parent of 32px
left: 4px; // center with parent of 32px
height: 24px;
width: 24px;
background-color: $roomheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
&:hover {
background: rgba($accent-color, 0.1);
&::before {
background-color: $accent-color;
}
}
}
.mx_RoomHeader_settingsButton::before {