diff --git a/src/components/containers/Card/index.tsx b/src/components/containers/Card/index.tsx index 17aa681b..7a1e5905 100644 --- a/src/components/containers/Card/index.tsx +++ b/src/components/containers/Card/index.tsx @@ -2,15 +2,18 @@ import React, { FC } from 'react'; import classNames = require("classnames"); import * as styles from './styles.scss'; -type IProps = React.HTMLAttributes & {} +type IProps = React.HTMLAttributes & { + seamless?: boolean; +} const Card: FC = ({ className, children, + seamless, ...props }) => (
{children} diff --git a/src/components/containers/Card/styles.scss b/src/components/containers/Card/styles.scss index eecdee35..1c1e200d 100644 --- a/src/components/containers/Card/styles.scss +++ b/src/components/containers/Card/styles.scss @@ -1,6 +1,11 @@ .card { background-color: #111111; border-radius: $panel_radius; + padding: $gap; @include outer_shadow(); + + &:global(.seamless) { + padding: 0; + } } diff --git a/src/components/containers/Grid/index.tsx b/src/components/containers/Grid/index.tsx index 5c4089d4..cc20a109 100644 --- a/src/components/containers/Grid/index.tsx +++ b/src/components/containers/Grid/index.tsx @@ -22,7 +22,7 @@ const Grid: FC = ({ style = {}, columns = 'auto', rows = 'auto', - gap = 20, + gap = 10, ...props }) => (
& { - + seamless?: boolean; } const Panel: FC = ({ className, children, + seamless, ...props }) => ( -
+
{children}
); diff --git a/src/components/containers/Panel/styles.scss b/src/components/containers/Panel/styles.scss index c90e04dd..d225ab95 100644 --- a/src/components/containers/Panel/styles.scss +++ b/src/components/containers/Panel/styles.scss @@ -1,3 +1,7 @@ .panel { + padding: $gap; + @include outer_shadow(); + + &:global(.seamless) { padding: 0; } } diff --git a/src/components/containers/TagField/styles.scss b/src/components/containers/TagField/styles.scss index ea2913ee..f65e12d0 100644 --- a/src/components/containers/TagField/styles.scss +++ b/src/components/containers/TagField/styles.scss @@ -1,5 +1,4 @@ .wrap { - flex: 1; display: flex; align-items: flex-start; justify-content: flex-start; diff --git a/src/containers/examples/EditorExample/index.tsx b/src/containers/examples/EditorExample/index.tsx index 47297526..195813ba 100644 --- a/src/containers/examples/EditorExample/index.tsx +++ b/src/containers/examples/EditorExample/index.tsx @@ -8,11 +8,15 @@ import { Panel } from "~/components/containers/Panel"; import { TextInput } from "~/components/input/TextInput"; import classNames = require("classnames"); import { Scroll } from "~/components/containers/Scroll"; +import { Grid } from "~/components/containers/Grid"; +import { Tags } from "~/components/node/Tags"; +import { Button } from "~/components/input/Button"; +import { Filler } from "~/components/containers/Filler"; interface IProps {} const EditorExample: FC = () => ( - +
@@ -29,20 +33,36 @@ const EditorExample: FC = () => ( - - - Cover panel -
- - - - panel - - - + + + + + + + + + + + Cover changer + + Track + + + + + +
diff --git a/src/containers/examples/EditorExample/styles.scss b/src/containers/examples/EditorExample/styles.scss index 57a04c00..05a0628f 100644 --- a/src/containers/examples/EditorExample/styles.scss +++ b/src/containers/examples/EditorExample/styles.scss @@ -17,8 +17,9 @@ background: $editor_panel_bg; flex: 0 0 33%; border-radius: 0 $radius $radius 0; - padding: $gap; box-sizing: border-box; + display: flex; + flex-direction: column; @include outer_shadow(); } @@ -30,7 +31,6 @@ } .editor_panel { - padding: $gap; } .editor_image_panel { @@ -42,7 +42,16 @@ } .editor_image { - background: lighten($main_bg_color, 20%); + background: transparentize(white, 0.95); padding-bottom: 100%; border-radius: $radius; } + +.feature_card { + height: 100px; +} + +.panel_main { + flex: 1; + display: flex; +} diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx index c1b897d2..aeb925d7 100644 --- a/src/containers/examples/ImageExample/index.tsx +++ b/src/containers/examples/ImageExample/index.tsx @@ -60,17 +60,15 @@ const ImageExample: FC = () => ( - { - - } +