From 8d9cb86ae8a4181c8f43d77c055825791525fe20 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 20 Nov 2018 15:20:02 +0100
Subject: [PATCH] Move style for icon button

---
 .../content-block-form/ContentsForm.vue          | 15 ++-------------
 client/src/styles/_buttons.scss                  | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/client/src/components/content-block-form/ContentsForm.vue b/client/src/components/content-block-form/ContentsForm.vue
index b873590e..7fd3644e 100644
--- a/client/src/components/content-block-form/ContentsForm.vue
+++ b/client/src/components/content-block-form/ContentsForm.vue
@@ -14,7 +14,6 @@
                 @input="setContentBlockType"
                 class="contents-form__task"
       ></checkbox>
-
     </template>
 
     <add-content-element class="contents-form__add"
@@ -44,9 +43,9 @@
         v-on:assignment-change-assignment="changeAssignmentAssignment"
       >
       </component>
-      <a class="contents-form__remove" v-on:click="removeElement(index)">
+      <a class="contents-form__remove icon-button" @click="removeElement(index)">
         <trash-icon v-if="type(element) !== 'content-block-element-chooser-widget'"
-                    class="contents-form__trash-icon"></trash-icon>
+                    class="contents-form__trash-icon icon-button__icon"></trash-icon>
       </a>
 
       <add-content-element class="contents-form__add"
@@ -267,19 +266,9 @@
     }
 
     &__remove {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 50px;
-      height: 50px;
     }
 
     &__trash-icon {
-      width: 25px;
-      height: 25px;
-      fill: $color-grey;
-      cursor: pointer;
-      justify-self: center;
     }
 
     &__chooser {
diff --git a/client/src/styles/_buttons.scss b/client/src/styles/_buttons.scss
index f8eb684d..79ddbe94 100644
--- a/client/src/styles/_buttons.scss
+++ b/client/src/styles/_buttons.scss
@@ -24,3 +24,19 @@
     background-color: $color-lightgrey;
   }
 }
+
+.icon-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+
+  &__icon {
+    width: 25px;
+    height: 25px;
+    fill: $color-grey;
+    cursor: pointer;
+    justify-self: center;
+  }
+}