refined horizontal editor

src/containers/examples/HorizontalExample/index.tsx

@@ -1,66 +1,29 @@
 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 { Padder } from "~/components/containers/Padder";
+import {Group} from "~/components/containers/Group";
-import { CellGrid } from "~/components/containers/CellGrid";
+import {InputText} from "~/components/input/InputText";
-import { Panel } from "~/components/containers/Panel";
+import {Button} from "~/components/input/Button";
-import classNames = require("classnames");
-import { Scroll } from "~/components/containers/Scroll";
-import { Tags } from "~/components/node/Tags";
-import { Button } from "~/components/input/Button";
-import { InputText } from "~/components/input/InputText";
-import { Grid } from "~/components/containers/Grid";
 
 interface IProps {}
 
 const HorizontalExample: FC<IProps> = () => (
-  <Card className={styles.wrap} seamless>
+  <div className={styles.wrap}>
-    <Group className={styles.group} seamless>
+    <Card seamless className={styles.card}>
       <div className={styles.editor}>
-        <Scroll>
+
-          <Padder>
-            <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} />
-              <div className={styles.editor_image} />
-              <div className={styles.editor_image} />
-              <div className={styles.editor_image} />
-              <div className={styles.editor_image} />
-            </CellGrid>
-          </Padder>
-        </Scroll>
       </div>
 
-      <div className={styles.panel}>
+      <Padder className={styles.panel}>
-        <Padder>
+        <Group horizontal>
-          <Grid columns="2fr 1fr 1fr">
+          <InputText title="Название" />
-            <div>
-              <Group>
-                <InputText title="Название" />
 
-                <Tags
+          <Button title="Сохранить" iconRight="play" />
-                  tags={[
+        </Group>
-                    { title: "Избранный", feature: "red" },
+      </Padder>
-                    { title: "Плейлист", feature: "green" },
+    </Card>
-                    { title: "Просто" },
+  </div>
-                    { title: "+ фото", feature: "black" },
-                    { title: "+ с музыкой", feature: "black" }
-                  ]}
-                />
-              </Group>
-            </div>
-
-            <div />
-
-            <div />
-          </Grid>
-        </Padder>
-      </div>
-    </Group>
-  </Card>
 );
 
 export { HorizontalExample };

src/containers/examples/HorizontalExample/styles.scss

@@ -1,65 +1,30 @@
 .wrap {
-  align-items: stretch;
+  flex: 1;
+  align-items: center;
   justify-content: center;
   display: flex;
-  background: $editor_bg;
+  flex-direction: column;
-  flex: 1;
 }
 
-.group {
+.card {
-  display: flex;
+  padding: 0;
-  align-items: stretch !important;
-  justify-content: stretch;
-  //flex: 1;
-}
-
-.panel {
-  background: $editor_panel_bg;
-  //flex: 1;
-  border-radius: $radius;
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  justify-content: center;
 }
 
 .editor {
-  flex: 1;
+  min-height: 200px;
+  min-width: 50vw;
+  background: darken($content_bg, 4%);
+  border-radius: $radius;
   display: flex;
   align-items: stretch;
+  justify-content: stretch;
   flex-direction: column;
-}
-
-.editor_panel {
-}
-
-.editor_image_panel {
-  // flex: 1;
-}
-
-.editor_image_container {
   flex: 1;
+  @include outer_shadow();
 }
 
-.editor_image {
+.panel {
-  background: transparentize(white, 0.95);
-  padding-bottom: 100%;
-  border-radius: $radius;
-}
-
-.feature_card {
-  height: 100px;
-  background: darken($main_bg_color, 3%);
-}
-
-.panel_main {
-  flex: 1;
-  display: flex;
-}
-
-.close_icon {
-  height: 24px;
-  width: 24px;
-  background: transparentize(white, 0.95);
-  flex: 0 0 24px;
-  border-radius: $radius;
 }

src/styles/variables.scss

@@ -64,7 +64,7 @@ $input_shadow_filled: $input_shadow;
 
 @mixin outer_shadow() {
   box-shadow: inset transparentize(white, 0.95) 0 1px,
-              inset transparentize(black, 0.5) 0 -1px;
+              transparentize(black, 0.8) 0 3px;
 }
 
 @mixin inner_shadow() {