diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less
index ce7dcf3faa..f1d12287e0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less
@@ -95,18 +95,13 @@ ng-form.ng-invalid-val-server-match-content > .umb-block-grid__block:not(.--acti
&::after {
display: var(--umb-block-grid--block-ui-display, block);
- animation: umb-block-grid__block__border-pulse 400ms ease-in-out alternate infinite;
- @keyframes umb-block-grid__block__border-pulse {
- 0% { border-color: rgba(@blueDark, 1); }
- 100% { border-color: rgba(@blueDark, 0.66); }
- }
+ border-color: @blueDark;
}
}
&.--active {
&::after {
display: block;
border-color: @pinkLight;
- animation: none;
}
> .umb-block-grid__block--context {
@@ -223,15 +218,16 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
.umb-block-grid__block--context {
position: absolute;
- top: -21px;
+ bottom: 100%;
right: -1px;
+ max-width: 100%;
font-size: 12px;
z-index: 4;
display: var(--umb-block-grid--block-ui-display, flex);
justify-content: end;
/** prevent interaction with inline-create button just beneath the context-bar: */
- ::after {
+ &::after {
content: '';
position: absolute;
top: 100%;
@@ -243,34 +239,62 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
.__context-bar {
padding: 0 9px;
padding-top: 1px;
- background-color: #3544B1;
+ background-color: @blueDark;
color: white;
border-top: rgba(255, 255, 255, .7) 1px solid;
border-left: rgba(255, 255, 255, .7) 1px solid;
border-right: rgba(255, 255, 255, .7) 1px solid;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
- display: inline-block;
+ display: inline-flex;
+ box-sizing: border-box;
+
+ max-width: 100%;
+ white-space: nowrap;
+
+ /* Ensure that the bar is visually connected with the border **/
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -1px;
+ width: 1px;
+ border-top: 1px solid @blueDark;
+ box-sizing: border-box;
+ background: none;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ right: 1px;
+ bottom: -2px;
+ height: 2px;
+ width: 2px;
+ border-top: 1px solid @blueDark;
+ border-right: 1px solid @blueDark;
+ box-sizing: border-box;
+ background: none;
+ }
+
.action {
color: currentColor;
font-size: 12px;
+ line-height: inherit;
+
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.__divider {
- display: inline-block;
margin: 0 3px;
}
.__label {
- display: inline-flex;
align-items: center;
padding: 0;
font-weight: 700;
user-select: none;
-
- .icon {
- font-size: 22px;
- margin-right: 5px;
- display: inline-block;
- }
+
+ overflow: hidden;
+ text-overflow: ellipsis;
}
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entry.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entry.html
index d8621f7a5b..567d20ff25 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entry.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umb-block-grid-entry.html
@@ -76,18 +76,10 @@
title="blockEditor_focusParentBlock"
ng-click="vm.parentBlock.showBlockUI()"
ng-class="{ '--error': false && vm.valFormManager.isShowingValidation() }"
- >
-
- {{vm.parentBlock.label}}
-
-
-