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

Update _ResizeHandle.pcss (#10772)

Browse source 
* Nesting: `mx_ResizeHandle`

* Nesting: `> div`

* Run prettier

* Use a custom property

* Remove a redundant declaration: `cursor: row-resize`

The resizer is either vertical or horizontal, and since `cursor: row-resize` is applied by default, it does not need to be repeated here.

* Conform the class names to the naming policy

* Revert "Use a custom property"

This reverts commit 6116939eec7d9e4220b89a638623e5876e143adf.
This commit is contained in:
Suguru Hirahara 2023-05-04 15:19:55 +00:00 • committed by GitHub
parent 0d2af83dbe
commit 3ca957b541
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 26 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/structures/_MainSplit.pcss
View file

@ -29,7 +29,7 @@ limitations under the License.
padding-left: calc(var(--container-gap-width) / 2);
height: calc(100vh - 51px); /* height of .mx_RoomHeader.light-panel */
&:hover .mx_ResizeHandle_horizontal::before {
&:hover .mx_ResizeHandle--horizontal::before {
position: absolute;
top: 50%;
left: 50%;

4
res/css/structures/_MatrixChat.pcss
View file

@ -80,7 +80,7 @@ limitations under the License.
/* negative margin greater than its positive padding. If it's the same */
/* or less, Safari and other WebKit based browsers get confused about overflows somehow and */
/* https://github.com/vector-im/element-web/issues/19863 happens. */
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle--horizontal {
margin: 0 calc(-5.5px - var(--container-gap-width) / 2) 0 calc(-6.5px + var(--container-gap-width) / 2);
/* The condition to prevent bleeding is: (margin-left + margin-right < -11px) */
/* (IF there is NO margin on the leftPanel_wrapper) */
@ -94,7 +94,7 @@ limitations under the License.
/* We want the handle to be in the middle of the gap so it is shifted by (var(--container-gap-width) / 2) */
}
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
position: relative;
&::before {

33
res/css/views/elements/_ResizeHandle.pcss
View file

@ -18,25 +18,24 @@ limitations under the License.
cursor: row-resize;
flex: 0 0 auto;
z-index: 100;
}
.mx_ResizeHandle.mx_ResizeHandle_horizontal {
margin: 0 -5px;
padding: 0 5px;
cursor: col-resize;
}
&.mx_ResizeHandle--horizontal {
margin: 0 -5px;
padding: 0 5px;
cursor: col-resize;
.mx_ResizeHandle.mx_ResizeHandle_vertical {
margin: -5px 0;
padding: 5px 0;
cursor: row-resize;
}
> div {
width: 1px;
height: 100%;
}
}
.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
width: 1px;
height: 100%;
}
&.mx_ResizeHandle--vertical {
margin: -5px 0;
padding: 5px 0;
.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
height: 1px;
> div {
height: 1px;
}
}
}

4
res/css/views/rooms/_AppsDrawer.pcss
View file

@ -75,7 +75,7 @@ $MinWidth: 240px;
background: $primary-content;
}
.mx_ResizeHandle_horizontal::before {
.mx_ResizeHandle--horizontal::before {
position: absolute;
left: 3px;
top: 50%;
@ -140,7 +140,7 @@ $MinWidth: 240px;
border-radius: 0 10px 10px 0;
}
.mx_ResizeHandle_horizontal {
.mx_ResizeHandle--horizontal {
position: relative;
> div {