From 4948cf9c3bd85f7ed1813daac34612722f2dfdde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Wed, 27 May 2020 20:59:20 +0200
Subject: [PATCH] Started adding action bars

---
 src/components/internal/Block.scss   | 20 ++++++++++++++++++++
 src/components/internal/Block.tsx    | 10 +++++++++-
 src/components/internal/Toolbar.scss |  1 +
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/internal/Block.scss b/src/components/internal/Block.scss
index f9c5e33..dffebf8 100644
--- a/src/components/internal/Block.scss
+++ b/src/components/internal/Block.scss
@@ -19,4 +19,24 @@
       outline: 1px solid var(--grey-2);
     }
   }
+
+  &__edit-cover {
+  }
+
+  &__remove {
+    position: absolute;
+    left: 100%;
+    top: 0;
+    max-height: 100%;
+    height: auto;
+    width: auto;
+  }
+
+  &__sliders {
+    position: absolute;
+    right: 100%;
+    width: auto;
+    max-width: 100%;
+    height: auto;
+  }
 }
diff --git a/src/components/internal/Block.tsx b/src/components/internal/Block.tsx
index d5f893c..7c5ac1b 100644
--- a/src/components/internal/Block.tsx
+++ b/src/components/internal/Block.tsx
@@ -10,6 +10,8 @@ import {
   SbMode,
 } from '@components/TreeElement';
 
+import SbButton from './Button';
+
 import './Block.scss';
 
 interface BlockProps {
@@ -64,7 +66,13 @@ export default defineComponent({
 
     return () => (<div class={classes.value}>
       <div class="sb-block__edit-cover"></div>
-      <div class="sb-block__mover"></div>
+      <div class="sb-block__remove">
+        <SbButton>x</SbButton>
+      </div>
+      <div class="sb-block__sliders">
+        <SbButton>&gt;</SbButton>
+        <SbButton>&lt;</SbButton>
+      </div>
       <BlockComponent
         data={props.block.data}
         block-id={props.block.blockId}
diff --git a/src/components/internal/Toolbar.scss b/src/components/internal/Toolbar.scss
index 5266a67..c840789 100644
--- a/src/components/internal/Toolbar.scss
+++ b/src/components/internal/Toolbar.scss
@@ -1,6 +1,7 @@
 .sb-toolbar {
   position: absolute;
   bottom: 100%;
+  left: 0;
   width: auto;
   max-width: 100%;
   height: auto;