From 97eaedd85f54b705faeefc8ce9b49a9ac4a77c8c Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Tue, 1 Sep 2020 22:27:32 +0200
Subject: [PATCH] Delete button for tags

---
 components/01_Atoms/tag/_tag.scss | 13 +++++++++++++
 components/01_Atoms/tag/tag.hbs   | 12 +++++++++++-
 components/_tagify.scss           |  3 ++-
 public/main.css                   | 21 ++++++++++++++++++---
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/components/01_Atoms/tag/_tag.scss b/components/01_Atoms/tag/_tag.scss
index 011a2b1..ee94ce3 100644
--- a/components/01_Atoms/tag/_tag.scss
+++ b/components/01_Atoms/tag/_tag.scss
@@ -3,6 +3,19 @@
     background-color: $-beige;
     border-radius: 2px;
     width: max-content;
+    @include RV-FlexRow__Container;
+    height: min-content;
+    gap: 3px;
+
+    &__Remove {
+        .RV-Iconized__Icon {
+            fill: $-wine-red;
+
+            &:hover {
+                fill: $-grey;
+            }
+        }
+    }
 
     &:hover {
         background-color: #bdbdbd;
diff --git a/components/01_Atoms/tag/tag.hbs b/components/01_Atoms/tag/tag.hbs
index a8ded11..346b30a 100644
--- a/components/01_Atoms/tag/tag.hbs
+++ b/components/01_Atoms/tag/tag.hbs
@@ -1,3 +1,13 @@
 <div class="LP-Tag">
-    {{> @paragraph text=text}}
+    {{> @link text=text url="#"}}
+    <a href="#" class="LP-Link">
+        <span class="LP-Tag__Remove RV-Iconized__Container RV-Iconized__Container--extraSmall">
+            <svg class="RV-Iconized__Icon" height="24" viewBox="0 0 24 24" width="24"
+                xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z">
+                </path>
+            </svg>
+        </span>
+    </a>
 </div>
\ No newline at end of file
diff --git a/components/_tagify.scss b/components/_tagify.scss
index 1cb4ead..2fb3c3a 100644
--- a/components/_tagify.scss
+++ b/components/_tagify.scss
@@ -43,12 +43,13 @@
     position: relative;
     white-space: pre-wrap;
     margin-left: 15px;
+    height: 1em;
 }
 
 .tagify__tag__removeBtn {
     order: 5;
     cursor: pointer;
-    font: 1em/1 Arial;
+    font: 1.5em/1 Arial;
     transition: .2s ease-out;
     color: $-wine-red;
 }
diff --git a/public/main.css b/public/main.css
index 8489e0c..5ffabcf 100644
--- a/public/main.css
+++ b/public/main.css
@@ -692,7 +692,21 @@ body {
   padding: 8px 14px;
   background-color: #D7CEC7;
   border-radius: 2px;
-  width: max-content; }
+  width: max-content;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  height: min-content;
+  gap: 3px; }
+  .LP-Tag--multiRow {
+    flex-wrap: wrap; }
+  .LP-Tag--column {
+    display: flex;
+    flex-direction: column; }
+  .LP-Tag__Remove .RV-Iconized__Icon {
+    fill: #76323F; }
+    .LP-Tag__Remove .RV-Iconized__Icon:hover {
+      fill: #565656; }
   .LP-Tag:hover, .tagify__tag:hover {
     background-color: #bdbdbd; }
   .LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph {
@@ -1472,12 +1486,13 @@ body {
   line-height: inherit;
   position: relative;
   white-space: pre-wrap;
-  margin-left: 15px; }
+  margin-left: 15px;
+  height: 1em; }
 
 .tagify__tag__removeBtn {
   order: 5;
   cursor: pointer;
-  font: 1em/1 Arial;
+  font: 1.5em/1 Arial;
   transition: .2s ease-out;
   color: #76323F; }