editor scrollbars

src/containers/examples/EditorExample/index.tsx

@@ -2,18 +2,47 @@ import React, { FC } from 'react';
 import { Card } from "~/components/containers/Card";
 import * as styles from './styles.scss';
 import { Group } from "~/components/containers/Group";
+import { Padder } from "~/components/containers/Padder";
+import { CellGrid } from "~/components/containers/CellGrid";
+import { Panel } from "~/components/containers/Panel";
+import { TextInput } from "~/components/input/TextInput";
+import classNames = require("classnames");
+import { Scroll } from "~/components/containers/Scroll";
 
 interface IProps {}
 
 const EditorExample: FC<IProps> = () => (
     <Card className={styles.wrap}>
-      <Group horizontal className={styles.group}>
+      <Group horizontal className={styles.group} seamless>
         <div className={styles.editor}>
-          editor
+          <Panel className={styles.editor_panel}>
+            <TextInput onChange={console.log} label="Название" />
+          </Panel>
+
+          <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>
+            <Scroll>
+              <CellGrid className={styles.editor_image_container} size={200}>
+                <div className={styles.editor_image} />
+                <div className={styles.editor_image} />
+                <div className={styles.editor_image} />
+                <div className={styles.editor_image} />
+              </CellGrid>
+            </Scroll>
+          </Panel>
+
+          <Panel className={styles.editor_panel}>
+            Cover panel
+          </Panel>
         </div>
 
         <div className={styles.panel}>
-          panel
+          <Group>
+            <Card>
+              <Padder>
+                panel
+              </Padder>
+            </Card>
+          </Group>
         </div>
       </Group>
     </Card>

src/containers/examples/EditorExample/styles.scss

@@ -3,6 +3,7 @@
   align-items: stretch;
   justify-content: center;
   display: flex;
+  background: $editor_bg;
 }
 
 .group {
@@ -13,10 +14,35 @@
 }
 
 .panel {
-  background: red;
+  background: $editor_panel_bg;
   flex: 0 0 33%;
+  border-radius: 0 $radius $radius 0;
+  padding: $gap;
+  box-sizing: border-box;
+  @include outer_shadow();
 }
 
 .editor {
   flex: 1;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+
+.editor_panel {
+  padding: $gap;
+}
+
+.editor_image_panel {
+  flex: 1;
+}
+
+.editor_image_container {
+  flex: 1;
+}
+
+.editor_image {
+  background: lighten($main_bg_color, 20%);
+  padding-bottom: 100%;
+  border-radius: $radius;
 }