add ui

ui/components/react-splitpane/SplitPaneFillOverlay.page.styl

@@ -0,0 +1,9 @@
+.splitpane-fill
+  display: flex
+  position: absolute
+  overflow: hidden
+  left: 0
+  width: 100%
+  top: 0
+  height: 100%
+  user-select: none

ui/components/react-splitpane/SplitPaneFillOverlayComponent.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export default function SplitPaneFillOverlayComponent(props) {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  const cn = classNames(className, 'splitpane-fill');
+  return (
+    <div {...rest} className={cn}>{children}</div>
+  );
+}
+
+SplitPaneFillOverlayComponent.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

ui/components/react-splitpane/splitpane.page.styl

@@ -0,0 +1,27 @@
+$resizer-extend = 4px
+$resizer-extend-color = rgba($primary-color, 0.3)
+
+.Resizer
+  background: #000
+  opacity: .2
+  z-index: 1
+  box-sizing: border-box
+  background-clip: padding-box
+
+.Resizer.horizontal
+  height: ($resizer-extend * 2 + 1px)
+  margin: -($resizer-extend) 0
+  border-top: $resizer-extend solid transparent
+  border-bottom: $resizer-extend solid transparent
+  cursor: row-resize
+  width: 100%
+
+.Resizer.vertical
+  width: ($resizer-extend * 2 + 1px)
+  margin: 0 -($resizer-extend)
+  border-left: $resizer-extend solid transparent
+  border-right: $resizer-extend solid transparent
+  cursor: col-resize
+
+.Resizer:hover
+  border-color: $resizer-extend-color