Fix handlebar interaction

This commit is contained in:
Jorik Schellekens 2020-07-16 02:08:24 +01:00
parent 1f94986c88
commit d794e17d4d
4 changed files with 43 additions and 88 deletions

View file

@ -21,26 +21,18 @@ limitations under the License.
height: 100%;
}
// move hit area 5px to the right so it doesn't overlap with the timeline scrollbar
.mx_MainSplit > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -10px 0 0;
padding: 0 10px 0 0;
}
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
padding: 5px;
.mx_MainSplit > .mx_ResizeHandle_horizontal:hover {
position: relative;
&::before {
position: absolute;
left: 4px;
top: 50%;
&:hover .mx_RightPanel_ResizeHandle {
// Need to use important to override element style attributes
// set by re-resizable
top: 50% !important;
transform: translate(0, -50%);
height: 30%;
width: 4px;
border-radius: 4px;
content: ' ';
height: 30% !important;
width: 4px !important;
border-radius: 4px !important;
background-color: $primary-fg-color;
opacity: 0.8;

View file

@ -79,12 +79,13 @@ limitations under the License.
height: 100%;
}
.mx_MatrixChat > .mx_LeftPanel2:hover + .mx_ResizeHandle_horizontal,
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
position: relative;
&::before {
position: absolute;
left: -2px;
left: 5px;
top: 50%;
transform: translate(0, -50%);

View file

@ -19,13 +19,12 @@ limitations under the License.
overflow-x: hidden;
flex: 0 0 auto;
position: relative;
min-width: 264px;
max-width: 50%;
display: flex;
flex-direction: column;
border-radius: 8px;
margin: 5px;
padding: 4px 0;
box-sizing: border-box;
height: 100%;
.mx_RoomView_MessageList {
padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above