diff --git a/app/components/tag_list_input_component/tag_list_input_component.html.haml b/app/components/tag_list_input_component/tag_list_input_component.html.haml index 52b024c25a..ef4b02d199 100644 --- a/app/components/tag_list_input_component/tag_list_input_component.html.haml +++ b/app/components/tag_list_input_component/tag_list_input_component.html.haml @@ -9,11 +9,11 @@ .tag-template %span %a.remove-button{ "data-action": "click->tag-list-input-component--tag-list-input#removeTag" } - ✖ + × - tags.each do |tag| %li.tag-item .tag-template %span=tag %a.remove-button{ "data-action": "click->tag-list-input-component--tag-list-input#removeTag" } - ✖ + × = text_field_tag "variant_add_tag_#{f.object.id}".to_sym, nil, class: "input", placeholder: placeholder, "data-action": "keydown.enter->tag-list-input-component--tag-list-input#addTag keyup->tag-list-input-component--tag-list-input#filterInput", "data-tag-list-input-component--tag-list-input-target": "newTag" diff --git a/app/components/tag_list_input_component/tag_list_input_component.scss b/app/components/tag_list_input_component/tag_list_input_component.scss index 7e3882214c..ddfbe81942 100644 --- a/app/components/tag_list_input_component/tag_list_input_component.scss +++ b/app/components/tag_list_input_component/tag_list_input_component.scss @@ -30,7 +30,7 @@ li.tag-item { border-radius: 3px; margin: 2px 0 2px 3px; - padding: 0 5px; + padding: 0 0 0 5px; display: inline-block; float: left; font-size: 14px; @@ -42,16 +42,18 @@ background-color: $teal; .remove-button { - margin: 0 0 0 5px; - padding: 0; - border: none; + border-left: 1px solid darken($teal, 5); + margin-left: 2px; + padding: 0 6px; background: 0 0; cursor: pointer; vertical-align: middle; - font: - 700 16px Arial, - sans-serif; + font-size: 14px; color: white; + + &:hover { + background: rgba(0, 0, 0, 0.05); + } } }