From e00c9318fa9f2e97ee89e7315ceb3d6eb7786665 Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Tue, 1 Sep 2020 18:31:46 +0200
Subject: [PATCH] Tagify dropdown styling

---
 lostplaces/lostplaces_app/static/main.css | 57 ++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css
index 5d6f195..8489e0c 100644
--- a/lostplaces/lostplaces_app/static/main.css
+++ b/lostplaces/lostplaces_app/static/main.css
@@ -604,7 +604,7 @@ body {
   .LP-Input--tagging .LP-Button {
     height: 53px; }
   .LP-Input--tagging .LP-Input__Field, .LP-Input--tagging .tagify {
-    min-height: 35px;
+    min-height: 36px;
     height: max-content;
     font-family: Montserrat, Helvetica, sans-serif;
     font-size: 1em;
@@ -1500,3 +1500,58 @@ body {
 
 .tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn {
   display: none; }
+
+.tagify__dropdown {
+  position: absolute;
+  z-index: 9999;
+  transform: translateY(1px);
+  overflow: hidden; }
+
+.tagify__dropdown[placement=top] {
+  margin-top: 0;
+  transform: translateY(-100%); }
+
+.tagify__dropdown[placement=top] .tagify__dropdown__wrapper {
+  border-top-width: 1px;
+  border-bottom-width: 0; }
+
+.tagify__dropdown[position=text] {
+  box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), 0.1);
+  font-size: .9em; }
+
+.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
+  border-width: 1px; }
+
+.tagify__dropdown__wrapper {
+  max-height: 300px;
+  overflow: hidden;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
+  transition: 0.25s cubic-bezier(0, 1, 0.5, 1); }
+
+.tagify__dropdown__wrapper:hover {
+  overflow: auto; }
+
+.tagify__dropdown--initial .tagify__dropdown__wrapper {
+  max-height: 20px;
+  transform: translateY(-1em); }
+
+.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper {
+  transform: translateY(2em); }
+
+.tagify__dropdown__item {
+  box-sizing: inherit;
+  padding: .3em .5em;
+  margin: 1px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: relative;
+  outline: 0;
+  font-family: Montserrat, Helvetica, sans-serif; }
+
+.tagify__dropdown__item--active {
+  color: #f9f9f9;
+  background-color: gray; }
+
+.tagify__dropdown__item:active {
+  filter: brightness(105%); }