use custom prop for calculated width (#13451)

This commit is contained in:
Niels Lyngsø
2022-11-21 20:08:12 +01:00
committed by GitHub
parent 79b5484d23
commit d2c8ecf9ab
2 changed files with 3 additions and 3 deletions

View File

@@ -423,7 +423,7 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
}
.umb-block-grid__block--inline-create-button.--above {
left: 0;
width: 100%;
width: var(--umb-block-grid-editor--inline-create-width, 100%);
top: calc(var(--umb-block-grid--row-gap, 0px) * -0.5);
}
@@ -435,7 +435,7 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl
/* If at root, and full-width then become 40px wider: */
--calc: clamp(0, calc(var(--umb-block-grid--item-column-span) - (var(--umb-block-grid--grid-columns)-1)), 1);
left: calc(-20px * var(--calc));
width: calc(100% + 40px * var(--calc));
width: calc(var(--umb-block-grid-editor--inline-create-width, 100%) + 40px * var(--calc));
}
.umb-block-grid__block--inline-create-button.--after {

View File

@@ -1,7 +1,7 @@
<uui-button-inline-create
ng-if="!vm.blockEditorApi.readonly && !vm.hideInlineCreateAbove"
class="umb-block-grid__block--inline-create-button --above"
style="width: {{vm.inlineCreateAboveWidth}};"
style="--umb-block-grid-editor--inline-create-width: {{vm.inlineCreateAboveWidth}};"
ng-class="{'--at-root': vm.depth === '0'}"
ng-click="vm.clickInlineCreateAbove()"
ng-mouseover="vm.mouseOverInlineCreate()"