|
@@ -6,8 +6,8 @@
|
|
|
>
|
|
|
<template v-slot="{ tags, disabled, addTag, removeTag }">
|
|
|
<b-dropdown
|
|
|
- :text="buttonText" size="sm"
|
|
|
- variant="outline-secondary" class="d-block rounded-0"
|
|
|
+ :text="buttonText"
|
|
|
+ variant="outline-dark" class="tags-dropdown d-tb-block"
|
|
|
>
|
|
|
<b-dropdown-item-button
|
|
|
v-for="tag in availableOptions" :key="tag"
|
|
@@ -20,7 +20,8 @@
|
|
|
<ul v-if="tags.length > 0" class="list-inline d-inline-block">
|
|
|
<li v-for="tag in tags" :key="tag + '-item'" class="list-inline-item">
|
|
|
<b-form-tag
|
|
|
- :title="tag" :disabled="disabled" pill
|
|
|
+ :title="tag" :disabled="disabled"
|
|
|
+ pill variant="dark"
|
|
|
@remove="removeTag(tag)"
|
|
|
>
|
|
|
{{ tag }}
|
|
@@ -50,4 +51,43 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.b-form-tags {
|
|
|
+ border: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tags-dropdown {
|
|
|
+ margin-right: .5rem;
|
|
|
+ margin-bottom: .25rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-inline {
|
|
|
+ margin: 0;
|
|
|
+ &-item {
|
|
|
+ margin-bottom: .25rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .dropdown-menu {
|
|
|
+ max-height: 30vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ max-width: 100vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .b-form-tag {
|
|
|
+ font-size: inherit;
|
|
|
+ font-weight: $font-weight-bold;
|
|
|
+ padding-top: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ border: $line;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .b-form-tag-remove {
|
|
|
+ opacity: 1;
|
|
|
+ line-height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|