move react-split-pane classes out of App.css

cybersemics · Oct 23, 2024 · 7fb151f · 7fb151f
1 parent 3c72562
commit 7fb151f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 55 deletions.
diff --git a/src/App.css b/src/App.css
@@ -209,57 +209,6 @@
 
 /* Prose View */
 
-.SplitPane,
-.SplitPane .Resizer,
-.SplitPane .Pane {
-  user-select: none;
-}
-
-.Resizer {
-  background: #fff;
-  opacity: 0.2;
-  z-index: var(--z-index-resizer);
-  box-sizing: border-box;
-  background-clip: padding-box;
-}
-
-.Resizer:hover {
-  transition: all 0.2s ease-out;
-}
-
-.Resizer.horizontal {
-  height: 11px;
-  margin: -5px 0;
-  border-top: 5px solid rgba(255, 255, 255, 0);
-  border-bottom: 5px solid rgba(255, 255, 255, 0);
-  cursor: row-resize;
-  width: 100%;
-}
-
-.Resizer.horizontal:hover {
-  border-top: 5px solid rgba(0, 0, 0, 0.5);
-  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-}
-
-.Resizer.vertical {
-  width: 11px;
-  margin: 0 -5px;
-  border-left: 5px solid rgba(255, 255, 255, 0);
-  border-right: 5px solid rgba(255, 255, 255, 0);
-  cursor: col-resize;
-}
-
-.Resizer.vertical:hover {
-  border-left: 5px solid rgba(255, 255, 255, 0.5);
-  border-right: 5px solid rgba(255, 255, 255, 0.5);
-}
-.Resizer.disabled {
-  cursor: not-allowed;
-}
-.Resizer.disabled:hover {
-  border-color: transparent;
-}
-
 .MuiDrawer-paperAnchorLeft {
   top: var(--safe-area-top) !important;
 }
diff --git a/src/components/AppComponent.tsx b/src/components/AppComponent.tsx
@@ -219,11 +219,46 @@ const AppComponent: FC = () => {
               </div>
             ) : (
               <SplitPane
-                className={css({
-                  position: 'relative',
-                  '& .Pane': {
-                    transition: isSplitting ? 'width 0.2s ease' : undefined,
+                paneClassName={css({ transition: isSplitting ? 'width 0.2s ease' : undefined, userSelect: 'none' })}
+                resizerClassName={css({
+                  background: '#fff',
+                  opacity: 0.2,
+                  zIndex: 'resizer',
+                  boxSizing: 'border-box',
+                  backgroundClip: 'padding-box',
+                  userSelect: 'none',
+                  '&:hover': {
+                    transition: 'all 0.2s ease-out',
+                  },
+                  '&.horizontal': {
+                    height: '11px',
+                    margin: '-5px 0',
+                    borderTop: '5px solid rgba(255, 255, 255, 0)',
+                    borderBottom: '5px solid rgba(255, 255, 255, 0)',
+                    cursor: 'row-resize',
+                    width: '100%',
+                  },
+                  '&.horizontal:hover': {
+                    borderTop: '5px solid rgba(0, 0, 0, 0.5)',
+                    borderBottom: '5px solid rgba(0, 0, 0, 0.5)',
+                  },
+                  '&.vertical': {
+                    width: '11px',
+                    margin: '0 -5px',
+                    borderLeft: '5px solid rgba(255, 255, 255, 0)',
+                    borderRight: '5px solid rgba(255, 255, 255, 0)',
+                    cursor: 'col-resize',
                   },
+                  '&.vertical:hover': {
+                    borderLeft: '5px solid rgba(255, 255, 255, 0.5)',
+                    borderRight: '5px solid rgba(255, 255, 255, 0.5)',
+                  },
+                  '&.disabled': { cursor: 'not-allowed' },
+                  '&.disabled:hover': { borderColor: 'transparent' },
+                })}
+                className={css({
+                  position: 'relative', // not applied due to `position: absolute` in style prop of react-split-pane
+                  userSelect: 'none',
                 })}
                 defaultSize={!showSplitView ? '100%' : splitPosition || '50%'}
                 onChange={onSplitResize}