diff --git a/src/components/form-tags/_form-tags.scss b/src/components/form-tags/_form-tags.scss index ef35ba52b4c..dcf5382b441 100644 --- a/src/components/form-tags/_form-tags.scss +++ b/src/components/form-tags/_form-tags.scss @@ -1,4 +1,12 @@ .b-form-tags { + .b-form-tags-list { + margin-top: -0.25rem; + + .b-form-tag { + margin-top: 0.25rem; + } + } + &.focus { color: $input-focus-color; background-color: $input-focus-bg; @@ -32,6 +40,7 @@ font-size: 75%; font-weight: normal; line-height: $input-line-height; + margin-right: 0.25rem; &.disabled { opacity: 0.75; @@ -43,6 +52,7 @@ font-size: 125%; line-height: 1; float: none; + margin-left: 0.25rem; } } diff --git a/src/components/form-tags/form-tag.js b/src/components/form-tags/form-tag.js index 969d2eb47bc..a53e694c254 100644 --- a/src/components/form-tags/form-tag.js +++ b/src/components/form-tags/form-tag.js @@ -54,7 +54,7 @@ export const BFormTag = /*#__PURE__*/ Vue.extend({ let $remove = h() if (!this.disabled) { $remove = h(BButtonClose, { - staticClass: 'b-form-tag-remove ml-1', + staticClass: 'b-form-tag-remove', props: { ariaLabel: this.removeLabel }, attrs: { 'aria-controls': tagId, diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js index d23d5c265ee..0f4ac6ca570 100644 --- a/src/components/form-tags/form-tags.js +++ b/src/components/form-tags/form-tags.js @@ -557,7 +557,6 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ BFormTag, { key: `li-tag__${tag}`, - staticClass: 'mt-1 mr-1', class: tagClass, props: { // `BFormTag` will auto generate an ID @@ -639,7 +638,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ 'li', { key: '__li-input__', - staticClass: 'flex-grow-1 mt-1', + staticClass: 'flex-grow-1', attrs: { role: 'none', 'aria-live': 'off', @@ -654,7 +653,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({ 'ul', { key: '_tags_list_', - staticClass: 'list-unstyled mt-n1 mb-0 d-flex flex-wrap align-items-center', + staticClass: 'b-form-tags-list list-unstyled mb-0 d-flex flex-wrap align-items-center', attrs: { id: tagListId } }, [$tags, $field]