diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
index 360eeed8c0..e5a46cbdeb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html
@@ -6,7 +6,7 @@
ng-focus="block.focus">
- {{block.label}}
+ {{block.label}}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
index 2be20946b8..08306deeba 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.less
@@ -22,6 +22,7 @@
background-color: white;
.caret {
+ vertical-align: middle;
transform: rotate(-90deg);
transition: transform 80ms ease-out;
}
@@ -32,7 +33,8 @@
vertical-align: middle;
}
- span {
+ span.name {
+ position: relative;
display: inline-block;
vertical-align: middle;
}
@@ -54,10 +56,55 @@
}
}
- &.--error {
- border-color: @formErrorBorder !important;
+
+ ng-form.ng-invalid-val-server-match-content > .umb-block-list__block > .umb-block-list__block--content > div > & {
+ > button {
+ color: @formErrorText;
+ span.caret {
+ border-top-color: @formErrorText;
+ }
+ }
+ }
+ ng-form.ng-invalid-val-server-match-content > .umb-block-list__block:not(.--active) > .umb-block-list__block--content > div > & {
+ > button {
+ span.name {
+ &::after {
+ content: "!";
+ text-align: center;
+ position: absolute;
+ top: -6px;
+ right: -15px;
+ min-width: 10px;
+ color: @white;
+ background-color: @ui-active-type;
+ border: 2px solid @white;
+ border-radius: 50%;
+ font-size: 10px;
+ font-weight: bold;
+ padding: 2px;
+ line-height: 10px;
+ background-color: @formErrorText;
+ font-weight: 900;
+
+ animation-duration: 1.4s;
+ animation-iteration-count: infinite;
+ animation-name: blockelement-inlineblock-editor--badge-bounce;
+ animation-timing-function: ease;
+ @keyframes blockelement-inlineblock-editor--badge-bounce {
+ 0% { transform: translateY(0); }
+ 20% { transform: translateY(-4px); }
+ 40% { transform: translateY(0); }
+ 55% { transform: translateY(-2px); }
+ 70% { transform: translateY(0); }
+ 100% { transform: translateY(0); }
+ }
+ }
+ }
+ }
}
}
+
+
.blockelement-inlineblock-editor__inner {
border-top: 1px solid @gray-8;
background-color: @gray-12;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
index 51fb7242ef..f589249f97 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less
@@ -24,6 +24,7 @@
}
span {
+ position: relative;
display: inline-block;
vertical-align: middle;
}
@@ -39,7 +40,42 @@
background-color: @ui-active;
}
- &.--error {
- border-color: @formErrorBorder !important;
+ ng-form.ng-invalid-val-server-match-content > .umb-block-list__block > .umb-block-list__block--content > div > & {
+ color: @formErrorText;
+ }
+ ng-form.ng-invalid-val-server-match-content > .umb-block-list__block:not(.--active) > .umb-block-list__block--content > div > & {
+ span {
+ &::after {
+ content: "!";
+ text-align: center;
+ position: absolute;
+ top: -6px;
+ right: -15px;
+ min-width: 10px;
+ color: @white;
+ background-color: @ui-active-type;
+ border: 2px solid @white;
+ border-radius: 50%;
+ font-size: 10px;
+ font-weight: bold;
+ padding: 2px;
+ line-height: 10px;
+ background-color: @formErrorText;
+ font-weight: 900;
+
+ animation-duration: 1.4s;
+ animation-iteration-count: infinite;
+ animation-name: blockelement-inlineblock-editor--badge-bounce;
+ animation-timing-function: ease;
+ @keyframes blockelement-inlineblock-editor--badge-bounce {
+ 0% { transform: translateY(0); }
+ 20% { transform: translateY(-4px); }
+ 40% { transform: translateY(0); }
+ 55% { transform: translateY(-2px); }
+ 70% { transform: translateY(0); }
+ 100% { transform: translateY(0); }
+ }
+ }
+ }
}
}