diff --git a/services/web/frontend/stylesheets/components/tags-input.less b/services/web/frontend/stylesheets/components/tags-input.less index f10483022f..179893efbe 100644 --- a/services/web/frontend/stylesheets/components/tags-input.less +++ b/services/web/frontend/stylesheets/components/tags-input.less @@ -21,10 +21,8 @@ .tags-input .tags { .form-control; - border-radius: 3px; /* overriding .form-control */ -moz-appearance: textfield; -webkit-appearance: textfield; - padding: 3px; overflow: hidden; word-wrap: break-word; cursor: text; @@ -33,13 +31,19 @@ display: flex; flex-wrap: wrap; } -.tags-input .tags.focused, -.tags-input .tags:focus-within { +.tags-input .tags when(@is-new-css = false) { + padding: 3px; + border-radius: 3px; /* overriding .form-control */ +} +.tags-input .tags:focus-within when(@is-new-css = false) { outline: none; -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6); -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6); box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6); } +.tags-input .tags:focus-within when(@is-new-css = true) { + &:extend(.input-focus-style); +} .tags-input .tags .tag-list { margin: 0; padding: 0; @@ -75,13 +79,18 @@ .tags-input .tags .input { border: 0; outline: none; - margin: 2px; - padding: 0; - padding-left: 5px; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } +.tags-input .tags .input when(@is-new-css = false) { + margin: 2px; + padding: 0; + padding-left: 5px; +} +.tags-input .tags .input when(@is-new-css = true) { + .placeholder(); +} .tags-input .tags .input.invalid-tag { color: @brand-danger; }