great new editor!

src/components/input/Button/styles.scss

@@ -31,23 +31,21 @@
   align-items: center;
   justify-content: center;
 
-  // box-shadow: transparentize(#E933A5, 0.6) 0 2px 8px;
-  box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
   filter: grayscale(0);
 
   transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
   opacity: 0.8;
 
+  @include outer_shadow();
+
   span {
     flex: 1;
   }
 
   &:hover {
     opacity: 1;
-    box-shadow: transparentize(#e933a5, 0.4) 0 2px 8px;
 
     &:global(.disabled) {
-      box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
       cursor: auto;
     }
 

src/containers/examples/HorizontalExample/index.tsx

@@ -5,6 +5,9 @@ import {Padder} from "~/components/containers/Padder";
 import {Group} from "~/components/containers/Group";
 import {InputText} from "~/components/input/InputText";
 import {Button} from "~/components/input/Button";
+import {Filler} from "~/components/containers/Filler";
+import {Icon} from "~/components/input/Icon";
+import {CellGrid} from "~/components/containers/CellGrid";
 
 interface IProps {}
 
@@ -12,14 +15,39 @@ const HorizontalExample: FC<IProps> = () => (
   <div className={styles.wrap}>
     <Card seamless className={styles.card}>
       <div className={styles.editor}>
+        <Padder className={styles.uploads}>
+          <CellGrid size={150}>
+            <div className={styles.cell} />
+          </CellGrid>
+        </Padder>
 
+        <Padder className={styles.features}>
+          <Group horizontal>
+            <div className={styles.feature_add_btn}>
+              <Icon icon="plus" />
+            </div>
+
+            <div className={styles.feature}>
+              <Group horizontal>
+                <div>ОБЛОЖКА</div>
+                <Icon icon="close" />
+              </Group>
+            </div>
+
+            <Filler />
+
+            <div className={styles.feature_cell}>
+              <Icon icon="cell-single" size={24} />
+            </div>
+          </Group>
+        </Padder>
       </div>
 
       <Padder className={styles.panel}>
         <Group horizontal>
           <InputText title="Название" />
 
-          <Button title="Сохранить" iconRight="play" />
+          <Button title="Сохранить" iconRight="check" />
         </Group>
       </Padder>
     </Card>

src/containers/examples/HorizontalExample/styles.scss

@@ -11,12 +11,14 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  background: darken($content_bg, 4%);
 }
 
 .editor {
+  background: $content_bg;
   min-height: 200px;
   min-width: 50vw;
-  background: darken($content_bg, 4%);
+
   border-radius: $radius;
   display: flex;
   align-items: stretch;
@@ -27,4 +29,50 @@
 }
 
 .panel {
+
+}
+
+.features {
+  display: flex;
+}
+
+.feature_add_btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+  background: $red_gradient;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.feature {
+  background: lighten($content_bg, 4%);
+  padding: $gap $gap $gap 20px;
+  border-radius: 24px;
+  font: $font_14_semibold;
+  height: 40px;
+  box-sizing: border-box;
+}
+
+.feature_cell {
+  background: lighten($content_bg, 4%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  box-sizing: border-box;
+  border-radius: $radius;
+}
+
+.uploads {
+  flex: 1;
+  padding-bottom: 0;
+}
+
+.cell {
+  background: lighten($content_bg, 6%);
+  border-radius: $radius;
+  padding-bottom: 100%;
 }

src/sprites/Sprites.tsx

@@ -1,9 +1,9 @@
 import React, {FC} from 'react';
 
 const Sprites: FC<{}> = () => (
-  <svg width={0} height={0} viewBox="0 0 20 20">
+  <svg width={0} height={0} viewBox="0 0 24 24">
-    <g id="cell-single" stroke="none">
+    <g id="cell-single" stroke="none" transform="translate(2 2)">
-      <path d="M0,0 L9,0 L9,9 L0,9 L0,0 Z M1,1 L1,8 L8,8 L8,1 L1,1 Z"></path>
+      <path d="M0,0 L9,0 L9,9 L0,9 L0,0 Z"></path>
       <path d="M11,0 L20,0 L20,9 L11,9 L11,0 Z M12,1 L12,8 L19,8 L19,1 L12,1 Z"></path>
       <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
       <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
@@ -11,7 +11,7 @@ const Sprites: FC<{}> = () => (
 
     <g id="cell-double-h" stroke="none">
       <path d="M0,0 L20,0 L20,9 L0,9 L0,0 Z M1,1 L1,8 L19,8 L19,1 L1,1 Z"></path>
-      <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
+      <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"/>
       <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>
     </g>
 
@@ -24,6 +24,20 @@ const Sprites: FC<{}> = () => (
     <g id="play">
       <path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/>
     </g>
+
+    <g id="plus" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z"/>
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+    </g>
+
+    <g id="close" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z"/>
+      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+    </g>
+
+    <g id="check" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+    </g>
   </svg>
 );