From a68c7523256f240b69d96b9ebd181046d6f758f6 Mon Sep 17 00:00:00 2001 From: muerwre Date: Tue, 20 Aug 2019 22:24:08 +0700 Subject: [PATCH] node buttons --- src/components/node/NodePanel/index.tsx | 8 ++++++-- src/components/node/NodePanel/styles.scss | 15 +++++++++++++-- src/sprites/Sprites.tsx | 20 ++++++++++++++++++++ 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/src/components/node/NodePanel/index.tsx b/src/components/node/NodePanel/index.tsx index 243484e8..fb1a980f 100644 --- a/src/components/node/NodePanel/index.tsx +++ b/src/components/node/NodePanel/index.tsx @@ -15,9 +15,13 @@ const NodePanel: FC = () => ( - +
+ + +
+ - +
); diff --git a/src/components/node/NodePanel/styles.scss b/src/components/node/NodePanel/styles.scss index bd755630..e16e8a1a 100644 --- a/src/components/node/NodePanel/styles.scss +++ b/src/components/node/NodePanel/styles.scss @@ -41,6 +41,17 @@ flex: 0; padding-right: $gap; fill: transparentize(white, 0.7); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + & > * { + margin: 0 $gap; + + &:first-child { margin-left: 0; } + &:last-child { margin-right: 0; } + } //height: 54px; //border-radius: $radius $radius 0 0; //background: linear-gradient(176deg, #f42a00, #5c1085); @@ -69,9 +80,9 @@ } .sep { - flex: 0 0 12px; + flex: 0 0 6px; height: 6px; - width: 12px; + width: 6px; border-radius: 4px; background: transparentize(black, 0.7); } diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index 6b9e3017..64b6116b 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -44,6 +44,26 @@ const Sprites: FC<{}> = () => ( + + + + + + + + + + + + + + + + + + + + );