diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tags/umbtagseditor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tags/umbtagseditor.directive.js
index 40def728ed..7d1def43a8 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tags/umbtagseditor.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tags/umbtagseditor.directive.js
@@ -41,6 +41,7 @@
vm.removeTag = removeTag;
vm.showPrompt = showPrompt;
vm.hidePrompt = hidePrompt;
+ vm.onKeyUpOnTag = onKeyUpOnTag;
vm.htmlId = "t" + String.CreateGuid();
vm.isLoading = true;
@@ -272,6 +273,12 @@
vm.promptIsVisible = "-1";
}
+ function onKeyUpOnTag(tag, $event) {
+ if ($event.keyCode === 8 || $event.keyCode === 46) {
+ removeTag(tag);
+ }
+ }
+
// helper method to remove current tags
function removeCurrentTagsFromSuggestions(suggestions) {
return $.grep(suggestions, function (suggestion) {
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index c666a69166..9f9bbce310 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -118,7 +118,6 @@ h5.-black {
.umb-control-group {
border-bottom: 1px solid @gray-11;
padding-bottom: 20px;
- margin-bottom: 15px !important;
}
.umb-control-group.-no-border {
diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index a75c73df60..435b64ad34 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -852,9 +852,10 @@
//
// Tags
// --------------------------------------------------
-.umb-tags{
+.umb-tags {
border: @inputBorder solid 1px;
- padding: 10px;
+ padding: 5px;
+ min-height: 54px;
font-size: 13px;
text-shadow: none;
box-sizing: border-box;
@@ -862,17 +863,19 @@
.tag {
cursor: default;
- margin: 7px;
- padding: 10px;
- background: @blueDark;
+ margin: 10px;
+ padding: 10px 15px;
+ background: @blueExtraDark;
position: relative;
-
- .icon-trash{
- cursor: pointer;
- padding: 2px;
- font-size: 12px;
+ user-select: all;
+
+ .icon-trash {
position: relative;
- right: -6px;
+ cursor: pointer;
+ padding-left: 2px;
+ font-size: 15px;
+ right: -5px;
+ bottom: -1px;
}
.umb_confirm-action__overlay.-left{
@@ -882,10 +885,19 @@
}
}
- input{
+ input {
border: none;
background: @white;
}
+
+ .twitter-typeahead {
+ margin: 10px;
+ margin-top: 16px;
+ vertical-align: top;
+ input {
+ padding-left: 0;
+ }
+ }
}
//
diff --git a/src/Umbraco.Web.UI.Client/src/less/typeahead.less b/src/Umbraco.Web.UI.Client/src/less/typeahead.less
index 884f44974a..4822605200 100644
--- a/src/Umbraco.Web.UI.Client/src/less/typeahead.less
+++ b/src/Umbraco.Web.UI.Client/src/less/typeahead.less
@@ -31,8 +31,8 @@
padding: 8px 0;
background-color: @white;
border: 1px solid @gray-8;
- border-radius: 8px;
- box-shadow: 0 5px 10px rgba(0,0,0,.2);
+ border-radius: 3px;
+ box-shadow: 0 3px 6px rgba(0,0,0,.16);
}
.tt-suggestion {
@@ -44,7 +44,7 @@
.tt-suggestion.tt-cursor {
color: @white;
- background-color: @turquoise;
+ background-color: @ui-selected-type-hover;
}
.tt-suggestion p {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html b/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
index 804a3516f8..9de5726341 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tags/umb-tags-editor.html
@@ -8,7 +8,7 @@
-
+