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%); }