diff --git a/README.md b/README.md index a35303b..df838e0 100644 --- a/README.md +++ b/README.md @@ -286,6 +286,7 @@ A pretty serious bug ([#53](../../issues/53)) was fixed in `v2.0.0`. The data fo - New option: `hide-input-on-limit` - New option: `typeahead-show-on-focus`. It is enabled by default and will make the typeahead (badges or dropdown) visible whenever the input field is focused and if there are any tags suggestions. - Adding `active` class to the wrapper element when the input field is focused. If you're using the default (provided) `style.css` file, note that your tags input will now get a "glow" around it when focused. +- Fix: [#50](../../issues/50) #### v.2.1.0 diff --git a/dist/style.css b/dist/style.css index 4f51f46..f9f04ab 100644 --- a/dist/style.css +++ b/dist/style.css @@ -20,41 +20,45 @@ } .tags-input-wrapper-default { - padding: .5rem .25rem; + padding: .5em .25em; background: #fff; border: 1px solid transparent; - border-radius: .25rem; + border-radius: .25em; border-color: #dbdbdb; } .tags-input-wrapper-default.active { border: 1px solid #8bbafe; - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + box-shadow: 0 0 0 0.2em rgba(13, 110, 253, 0.25); outline: 0 none; } /* The tag badges & the remove icon */ .tags-input span { - margin-right: 0.3rem; + margin-right: 0.3em; } .tags-input-remove { cursor: pointer; - position: relative; + position: absolute; display: inline-block; - width: 0.5rem; - height: 0.5rem; + right: 0.3em; + top: 0.3em; + padding: 0.5em; overflow: hidden; } +.tags-input-remove:focus { + outline: none; +} + .tags-input-remove:before, .tags-input-remove:after { content: ''; position: absolute; - width: 100%; - top: 50%; - left: 0; + width: 75%; + left: 0.15em; background: #5dc282; height: 2px; @@ -70,6 +74,7 @@ /* Tag badge styles */ .tags-input-badge { + position: relative; display: inline-block; padding: 0.25em 0.4em; font-size: 75%; @@ -78,13 +83,15 @@ text-align: center; white-space: nowrap; vertical-align: baseline; - border-radius: 0.25rem; + border-radius: 0.25em; + overflow: hidden; + text-overflow: ellipsis; } .tags-input-badge-pill { - padding-right: 0.6em; + padding-right: 1.25em; padding-left: 0.6em; - border-radius: 10rem; + border-radius: 10em; } .tags-input-badge-selected-default { @@ -101,7 +108,7 @@ /* Typeahead - badges */ .typeahead-badges > span { cursor: pointer; - margin-right: 0.3rem; + margin-right: 0.3em; } /* Typeahead - dropdown */ @@ -115,7 +122,7 @@ } .typeahead-dropdown li { - padding: .25rem 1rem; + padding: .25em 1em; cursor: pointer; } diff --git a/index.html b/index.html index 6ccef49..2bdec43 100644 --- a/index.html +++ b/index.html @@ -196,7 +196,7 @@