Update _ResizeHandle.pcss (#10772)

* 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.

res/css/structures/_MainSplit.pcss

@@ -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%;

res/css/structures/_MatrixChat.pcss

@@ -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 {

res/css/views/elements/_ResizeHandle.pcss

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

res/css/views/rooms/_AppsDrawer.pcss

@@ -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 {

src/components/structures/LoggedInView.tsx

@@ -264,7 +264,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
         resizer.setClassNames({
             handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle_vertical",
+            vertical: "mx_ResizeHandle--vertical",
         });
         return resizer;
     }

src/components/structures/MainSplit.tsx

@@ -87,7 +87,7 @@ export default class MainSplit extends React.Component<IProps> {
                     onResize={this.onResize}
                     onResizeStop={this.onResizeStop}
                     className="mx_RightPanel_ResizeWrapper"
-                    handleClasses={{ left: "mx_ResizeHandle_horizontal" }}
+                    handleClasses={{ left: "mx_ResizeHandle--horizontal" }}
                 >
                     {panelView}
                 </Resizable>

src/components/views/elements/ResizeHandle.tsx

@@ -26,9 +26,9 @@ interface IResizeHandleProps {
 const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, id, passRef }) => {
     const classNames = ["mx_ResizeHandle"];
     if (vertical) {
-        classNames.push("mx_ResizeHandle_vertical");
+        classNames.push("mx_ResizeHandle--vertical");
     } else {
-        classNames.push("mx_ResizeHandle_horizontal");
+        classNames.push("mx_ResizeHandle--horizontal");
     }
     return (
         <div ref={passRef} className={classNames.join(" ")} data-id={id}>

src/components/views/rooms/AppsDrawer.tsx

@@ -109,7 +109,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
         // (ie. a vertical resize handle because, the handle itself is vertical...)
         const classNames = {
             handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle_vertical",
+            vertical: "mx_ResizeHandle--vertical",
         };
         const collapseConfig = {
             onResizeStart: () => {