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}} - - - Focus parent block - - + ng-bind="vm.parentBlock.label" + >
/
-
- {{vm.layoutEntry.$block.label}} -
+