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

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 {
- margin: 0 -5px;
- padding: 0 5px;
- cursor: col-resize;
-}
-
-.mx_ResizeHandle.mx_ResizeHandle_vertical {
- 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 {
- height: 1px;
+ &.mx_ResizeHandle--horizontal {
+ margin: 0 -5px;
+ padding: 0 5px;
+ cursor: col-resize;
+
+ > div {
+ width: 1px;
+ height: 100%;
+ }
+ }
+
+ &.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: () => {