yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Properties: Implement container queries (#20832)

Browse Source 
implement container queries for properties
This commit is contained in:
Niels Lyngsø
2025-11-21 13:10:36 +01:00
committed by GitHub
parent 35acfcb7e2
commit 488f373fea
2 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.ts
View File

@@ -351,7 +351,7 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
grid-column: span 2;
}
@container (width > 600px) {
@container (width > 700px) {
:host(:not([orientation='vertical'])) > div {
grid-column: span 1;
}

27
src/Umbraco.Web.UI.Client/src/packages/core/property/components/property-layout/property-layout.element.ts
View File

@@ -105,29 +105,30 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
grid-template-columns: 200px minmax(0, 1fr);
column-gap: var(--uui-size-layout-2);
padding: var(--uui-size-layout-1) 0;
container-type: inline-size;
}
:host > div {
grid-column: span 2;
}
/*@container (width > 600px) {*/
:host(:not([orientation='vertical'])) > div {
grid-column: span 1;
@container (width > 700px) {
:host(:not([orientation='vertical'])) > div {
grid-column: span 1;
}
}
/*}*/
#headerColumn {
position: relative;
height: min-content;
top: var(--umb-property-layout-header-top);
}
/*@container (width > 600px) {*/
:host(:not([orientation='vertical'])) #headerColumn {
position: sticky;
top: var(--umb-property-layout-header-top, calc(var(--uui-size-space-2) * -1));
@container (width > 700px) {
:host(:not([orientation='vertical'])) #headerColumn {
position: sticky;
top: var(--umb-property-layout-header-top, calc(var(--uui-size-space-2) * -1));
}
}
/*}*/
:host {
/* TODO: Temp solution to not get a yellow asterisk when invalid. */
@@ -160,11 +161,11 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
#editorColumn {
margin-top: var(--uui-size-space-3);
}
/*@container (width > 600px) {*/
:host(:not([orientation='vertical'])) #editorColumn {
margin-top: 0;
@container (width > 700px) {
:host(:not([orientation='vertical'])) #editorColumn {
margin-top: 0;
}
}
/*}*/
`,
];
}