diff --git a/src/components/containers/TagField/index.tsx b/src/components/containers/TagField/index.tsx new file mode 100644 index 00000000..a5ed4620 --- /dev/null +++ b/src/components/containers/TagField/index.tsx @@ -0,0 +1,14 @@ +import React, {FC, HTMLAttributes} from 'react'; +import * as styles from './styles.scss'; + +type IProps = HTMLAttributes & {} + +const TagField: FC = ({ + children, +}) => ( +
+ {children} +
+); + +export { TagField }; diff --git a/src/components/containers/TagField/styles.scss b/src/components/containers/TagField/styles.scss new file mode 100644 index 00000000..ea2913ee --- /dev/null +++ b/src/components/containers/TagField/styles.scss @@ -0,0 +1,7 @@ +.wrap { + flex: 1; + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; +} diff --git a/src/components/input/Info/style.scss b/src/components/input/Info/style.scss index 55419617..f58aec2d 100644 --- a/src/components/input/Info/style.scss +++ b/src/components/input/Info/style.scss @@ -11,18 +11,17 @@ &:global(.danger) { color: white; - background: transparentize($color_red, 0.5); + background: transparentize($red, 0.5); } &:global(.warning) { color: white; - background: transparentize($color_yellow, 0.5); + background: transparentize($red, 0.5); } &:global(.primary) { color: white; - background: transparentize($color_blue, 0.5); + background: transparentize($red, 0.5); } - } diff --git a/src/components/node/Comment/styles.scss b/src/components/node/Comment/styles.scss index 3dab603c..ab64f657 100644 --- a/src/components/node/Comment/styles.scss +++ b/src/components/node/Comment/styles.scss @@ -2,6 +2,7 @@ background: $comment_bg; min-height: 200px; display: flex; + box-shadow: $comment_shadow; } .text { diff --git a/src/components/node/NodePanel/styles.scss b/src/components/node/NodePanel/styles.scss index 4fd4fc3b..5829de1a 100644 --- a/src/components/node/NodePanel/styles.scss +++ b/src/components/node/NodePanel/styles.scss @@ -52,7 +52,6 @@ .mark { flex: 0 0 32px; - background: red; position: relative; &::after { @@ -62,7 +61,7 @@ right: 4px; width: 24px; height: 52px; - background: #ff3344; + background: $olive; box-shadow: transparentize(black, 0.8) 4px 2px; } } diff --git a/src/components/node/Tag/index.tsx b/src/components/node/Tag/index.tsx new file mode 100644 index 00000000..51123d50 --- /dev/null +++ b/src/components/node/Tag/index.tsx @@ -0,0 +1,20 @@ +import React, { FC } from 'react'; +import * as styles from './styles.scss'; +import classNames = require("classnames"); + +interface IProps { + title: string; + color?: 'red' | 'blue' | 'green' | 'olive' | 'black'; +} + +const Tag: FC = ({ + title, + color, +}) => ( +
+
+
{title}
+
+); + +export { Tag }; diff --git a/src/components/node/Tag/styles.scss b/src/components/node/Tag/styles.scss new file mode 100644 index 00000000..3f6b0e0d --- /dev/null +++ b/src/components/node/Tag/styles.scss @@ -0,0 +1,63 @@ +.tag { + height: $tag_height; + background: #333333; + display: flex; + flex-direction: row; + align-items: center; + justify-content: stretch; + border-radius: ($tag_height / 2) 3px 3px ($tag_height / 2); + font: $font_12_semibold; + align-self: flex-start; + padding: 0 8px 0 0; + box-shadow: $shadow_depth_2; + margin: ($gap / 2) $gap ($gap / 2) 0; + + &:global(.red) { + background: $red; + } + + &:global(.blue) { + background: $blue; + //color: transparentize(black, 0.4); + } + + &:global(.green) { + background: $green; + color: transparentize(black, 0.4); + } + + &:global(.olive) { + background: $olive; + color: transparentize(black, 0.4); + } + + &:global(.black) { + background: transparentize(black, 0.7); + box-shadow: none; + color: transparentize(white, 0.6); + + .hole::after { background: transparentize(white, 0.98); } + } +} + +.hole { + width: $tag_height; + height: $tag_height; + display: flex; + margin-right: 3px; + align-items: center; + justify-content: center; + + &::after { + content: ' '; + position: absolute; + background: transparentize(black, 0.7); + width: 14px; + height: 14px; + border-radius: 14px; + } +} + +.title { + white-space: nowrap; +} diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx index 78654efe..1967e401 100644 --- a/src/containers/examples/ImageExample/index.tsx +++ b/src/containers/examples/ImageExample/index.tsx @@ -7,6 +7,8 @@ import range from 'ramda/es/range'; import { Comment } from "~/components/node/Comment"; import { NodePanel } from "~/components/node/NodePanel"; import { Filler } from "~/components/containers/Filler"; +import { Tag } from "~/components/node/Tag"; +import { TagField } from "~/components/containers/TagField"; interface IProps {} @@ -22,10 +24,10 @@ const ImageExample: FC = () => (
- - + - + + { @@ -38,45 +40,56 @@ const ImageExample: FC = () => (
- - -
- -
- -
+ + + +
+ +
+ +
- -
На главной
- - -
+ +
На главной
+ + +
-
- -
- -
+
+ +
+ +
- -
Видно всем
- - -
+ +
Видно всем
+ + +
-
- -
- -
+
+ +
+ +
- -
Редактировать
- - -
- - + +
Редактировать
+ + +
+ + + + + + + + + + + +
diff --git a/src/containers/examples/ImageExample/styles.scss b/src/containers/examples/ImageExample/styles.scss index 48d4cf5e..3245a833 100644 --- a/src/containers/examples/ImageExample/styles.scss +++ b/src/containers/examples/ImageExample/styles.scss @@ -30,6 +30,7 @@ .node { background: $node_bg; + box-shadow: $node_shadow; } .image { @@ -40,7 +41,7 @@ background: #161616; flex: 1; border-radius: $panel_radius; - box-shadow: transparentize(black, 0.3) 0 4px, inset transparentize(white, 0.98) 0 1px; + box-shadow: $comment_shadow; //position: relative; //top: -64px } diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 0fda5a3e..6056f6c8 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -1,6 +1,9 @@ -$color_red: #ff3344; -$color_yellow: #ffd60f; -$color_blue: complement($color_red); +$red: #ff3344; +$yellow: #ffd60f; +$dark_blue: #3c75ff; +$blue: #3ca1ff; +$green: #00d2b9; +$olive: #8bc12a; //$color_yellow: complement($color_red); //$color_yellow: yellow; @@ -19,7 +22,7 @@ $text_big: 20px; $text_sign: 22px; $input_bg_color: transparentize(black, 0.8); -$button_bg_color: #ff3344; +$button_bg_color: $red; $comment_bg: #191919; $panel_bg: #191919; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 67122224..11708e31 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -49,6 +49,14 @@ $font_10_semibold: $semibold 10px $font; $font_cell_title: $font_24_bold; $font_hero_title: $font_48_semibold; +$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px; +$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px; + +$comment_shadow: $shadow_depth_2; +$node_shadow: transparentize(black, 0.8) 1px 2px; + +$tag_height: 24px; + @mixin outer_shadow() { box-shadow: inset transparentize(white, 0.95) 0 1px, inset transparentize(black, 0.5) 0 -1px;