fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(ui): refresh core grid table ux foundation

Browse Source
This commit is contained in:
Felix Schneider
2026-04-22 19:56:23 +02:00
parent fecbbdde24
commit 0c8ccae0fb
3 changed files with 385 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
web/css/components/app-list-toolbar.css
View File

@@ -1,48 +1,46 @@
@layer components {
/* List toolbar — page-size selector, filter toggle, and search controls above grids. */
.app-list-toolbar {
--app-list-toolbar-gap: 10px;
--app-list-toolbar-padding-x: 10px;
--app-list-toolbar-padding-y: 6px;
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 10px;
margin-bottom: calc(var(--app-spacing) * 1);
gap: var(--app-list-toolbar-gap);
margin-bottom: var(--app-spacing);
}
.app-list-toolbar > * {
margin: 0 !important;
width: auto !important;
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
font-size: var(--text-sm) !important;
height: auto !important;
}
.app-list-toolbar > * > * {
margin: 0 !important;
width: auto !important;
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
font-size: var(--text-sm) !important;
height: auto !important;
}
.app-list-toolbar > * > * > * {
margin: 0 !important;
width: auto !important;
--app-form-element-spacing-horizontal: 10px;
--app-form-element-spacing-vertical: 6px;
font-size: var(--text-sm) !important;
height: auto !important;
margin: 0;
width: auto;
font-size: var(--text-sm);
height: auto;
}
.app-list-toolbar > button {
padding: 6px 10px;
.app-list-toolbar :is(.app-field, label, button, [role="button"], input, select, .multi-select) {
margin: 0;
width: auto;
}
.app-list-toolbar :is(button, [role="button"], input, select) {
--app-form-element-spacing-horizontal: var(--app-list-toolbar-padding-x);
--app-form-element-spacing-vertical: var(--app-list-toolbar-padding-y);
font-size: var(--text-sm);
min-height: calc(var(--app-list-toolbar-padding-y) * 2 + 1.4em);
}
.app-list-toolbar > button,
.app-list-toolbar > [role="button"] {
padding: var(--app-list-toolbar-padding-y) var(--app-list-toolbar-padding-x);
}
.app-list-toolbar
input:not(
[type="checkbox"],
.app-list-toolbar [type="radio"],
.app-list-toolbar [type="range"],
.app-list-toolbar [type="file"]
[type="radio"],
[type="range"],
[type="file"]
):is(
[type="date"],
[type="datetime-local"],
@@ -53,29 +51,26 @@
width: auto;
}
.app-list-toolbar > label > span {
.app-list-toolbar > label > span,
.app-list-toolbar > .app-field > span {
display: block;
font-size: var(--text-xs) !important;
font-size: var(--text-xs);
margin-bottom: 2px;
}
.app-list-toolbar .app-grid-page-size {
margin-inline-start: auto;
}
.app-list-toolbar .app-grid-page-size select {
min-width: 84px;
}
.app-list-toolbar .app-grid-page-size {
margin-inline-start: auto !important;
.app-list-toolbar .multi-select {
width: 200px;
}
@media (max-width: 768px) {
.app-list-toolbar .app-grid-page-size {
margin-inline-start: 0 !important;
}
}
.app-list-toolbar
.multi-select
.multi-select-header
.multi-select-header-placeholder {
.app-list-toolbar .multi-select .multi-select-header .multi-select-header-placeholder {
font-size: var(--text-sm);
}
@@ -86,15 +81,16 @@
padding-left: 5px;
}
.app-list-toolbar .multi-select {
width: 200px !important;
.app-list-toolbar span.multi-select-header-option {
background: transparent;
border: 0;
padding: 0 0 0 3px;
font-size: var(--text-xs);
}
.app-list-toolbar span.multi-select-header-option {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
padding-left: 3px !important;
font-size: var(--text-xs) !important;
@media (max-width: 768px) {
.app-list-toolbar .app-grid-page-size {
margin-inline-start: 0;
}
}
}