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

styling

Browse Source
This commit is contained in:
Jesper Møller Jensen
2023-06-09 17:43:03 +12:00
parent cceeb5b099
commit f7b18a16d8
2 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
View File

@@ -89,7 +89,6 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
.onSubmit((submitData) => {
this._select(submitData.id);
this._submit();
});
this.#init();
@@ -238,12 +237,10 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
uis,
(propertyEditorUI) => propertyEditorUI.alias,
(propertyEditorUI) => html` <li class="item">
<uui-button
type="button"
href=${this._dataTypePickerModalRouteBuilder!({ uiAlias: propertyEditorUI.alias })}>
<a type="button" href=${this._dataTypePickerModalRouteBuilder!({ uiAlias: propertyEditorUI.alias })}>
<uui-icon name="${propertyEditorUI.meta.icon}" class="icon"></uui-icon>
${propertyEditorUI.meta.label || propertyEditorUI.name}
</uui-button>
</a>
</li>`
)
: ''}
@@ -259,25 +256,27 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
}
#filter-icon {
height: 100%;
padding-left: var(--uui-size-space-2);
display: flex;
color: var(--uui-color-border);
}
#item-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
margin: 0;
padding: 0;
grid-gap: var(--uui-size-space-4);
}
#item-grid .item {
display: flex;
align-items: flex-start;
justify-content: center;
list-style: none;
height: 100%;
width: 100%;
border: 1px solid transparent;
border-radius: var(--uui-border-radius);
box-sizing: border-box;
color: var(--uui-color-interactive);
}
#item-grid .item:hover {
@@ -286,17 +285,28 @@ export class UmbDataTypePickerFlowModalElement extends UmbLitElement {
cursor: pointer;
}
#item-grid .item uui-button {
padding: var(--uui-size-space-3);
#item-grid .item a {
border: none;
padding: 0;
margin: 0;
color: inherit;
text-decoration: none;
text-align: center;
box-sizing: border-box;
padding: var(--uui-size-space-2);
display: grid;
grid-template-rows: 40px 1fr;
height: 100%;
width: 100%;
color: var(--uui-color-interactive);
border-radius: var(--uui-border-radius);
}
#item-grid .item .icon {
font-size: 2em;
margin-bottom: var(--uui-size-space-2);
margin: auto;
/* width: fit-content;
height: fit-content; */
}
`,
];

3
src/Umbraco.Web.UI.Client/src/packages/settings/data-types/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.ts
View File

@@ -136,7 +136,10 @@ export class UmbPropertyEditorUIPickerModalElement extends UmbLitElement {
}
#filter-icon {
height: 100%;
padding-left: var(--uui-size-space-2);
display: flex;
color: var(--uui-color-border);
}
#item-grid {