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

Change highlighting around the room list filter

Browse source
This commit is contained in:
Michael Telatynski 2020-08-17 16:59:29 +01:00
parent b9f22aa569
commit a4d11cc190
7 changed files with 31 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

20
res/css/structures/_LeftPanel.scss
View file

@ -97,16 +97,18 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
display: flex;
align-items: center;
.mx_RoomSearch_expanded + .mx_LeftPanel_exploreButton {
// Cheaty way to return the occupied space to the filter input
flex-basis: 0;
margin: 0;
width: 0;
.mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
& + .mx_LeftPanel_exploreButton {
// Cheaty way to return the occupied space to the filter input
flex-basis: 0;
margin: 0;
width: 0;
// Don't forget to hide the masked ::before icon,
// using display:none or visibility:hidden would break accessibility
&::before {
content: none;
// Don't forget to hide the masked ::before icon,
// using display:none or visibility:hidden would break accessibility
&::before {
content: none;
}
}
}

15
res/css/structures/_RoomSearch.scss
View file

@ -19,6 +19,8 @@ limitations under the License.
flex: 1;
border-radius: 8px;
background-color: $roomlist-button-bg-color;
// keep border thickness consistent to prevent movement
border: 1px solid transparent;
height: 28px;
padding: 2px;
@ -50,7 +52,18 @@ limitations under the License.
}
}
&.mx_RoomSearch_expanded {
&.mx_RoomSearch_hasQuery {
border-color: $secondary-fg-color;
}
&.mx_RoomSearch_focused {
box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
border-color: transparent;
}
&.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
background-color: $roomlist-filter-active-bg-color;
.mx_RoomSearch_clearButton {
width: 16px;
height: 16px;