design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): introduce dees-tile component for unified tile layout

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-03 11:49:58 +00:00
parent 472132e8cf
commit 6e5def5708
10 changed files with 296 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
ts_web/elements/00group-dataview/dees-table/styles.ts
View File

@@ -12,17 +12,11 @@ export const tableStyles: CSSResult[] = [
width: 100%;
}
.mainbox {
dees-tile {
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
font-family: ${cssGeistFontFamily};
font-weight: 400;
font-size: 14px;
display: block;
width: 100%;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 8px;
overflow: hidden;
cursor: default;
}
@@ -30,30 +24,31 @@ export const tableStyles: CSSResult[] = [
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
min-height: 64px;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
padding: 0 16px;
height: 40px;
}
.headingContainer {
flex: 1;
display: flex;
align-items: baseline;
}
.heading {
line-height: 1.5;
line-height: 1;
}
.heading1 {
font-size: 18px;
font-weight: 600;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
letter-spacing: -0.025em;
}
.heading2 {
font-size: 14px;
font-weight: 500;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
letter-spacing: -0.01em;
}
.heading2 {
font-size: 12px;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
margin-top: 2px;
margin-left: 8px;
}
.headingSeparation {
@@ -70,14 +65,14 @@ export const tableStyles: CSSResult[] = [
.headerAction {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 14px;
gap: 4px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
background: transparent;
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 6px;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
}
@@ -199,7 +194,7 @@ export const tableStyles: CSSResult[] = [
}
tbody tr:hover {
background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.06)', 'hsl(217.2 91.2% 59.8% / 0.08)')};
}
/* Column hover effect for better traceability */
@@ -214,7 +209,7 @@ export const tableStyles: CSSResult[] = [
bottom: 0;
left: 0;
right: 0;
background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.05)')};
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
@@ -238,15 +233,19 @@ export const tableStyles: CSSResult[] = [
border-top: none;
}
:host([show-grid]) th:first-child,
:host([show-grid]) td:first-child {
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
}
:host([show-grid]) tbody tr:first-child td {
border-top: none;
}
/* Remove edge borders that would double with tile frame */
:host([show-grid]) th:last-child,
:host([show-grid]) td:last-child {
border-right: none;
}
:host([show-grid]) tbody tr:last-child td {
border-bottom: none;
}
/* Sticky Actions column (right pinned) */
thead th.actionsCol,
tbody td.actionsCol {
@@ -261,7 +260,7 @@ export const tableStyles: CSSResult[] = [
}
tbody tr.selected {
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.12)')};
}
tbody tr.hasAttachment {
@@ -269,10 +268,11 @@ export const tableStyles: CSSResult[] = [
}
th {
height: 48px;
padding: 12px 24px;
height: 36px;
padding: 8px 16px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
letter-spacing: -0.01em;
}
@@ -282,8 +282,9 @@ export const tableStyles: CSSResult[] = [
}
td {
padding: 12px 24px;
padding: 8px 16px;
vertical-align: middle;
font-size: 13px;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
}
@@ -293,18 +294,23 @@ export const tableStyles: CSSResult[] = [
th:first-child,
td:first-child {
padding-left: 24px;
padding-left: 16px;
}
th:last-child,
td:last-child {
padding-right: 24px;
padding-right: 16px;
}
:host([show-vertical-lines]) th:last-child,
:host([show-vertical-lines]) td:last-child {
border-right: none;
}
/* Default bottom border on last row removed — tile frame handles it */
:host(:not([show-horizontal-lines])) tbody tr:last-child {
border-bottom: none;
}
.innerCellContainer {
position: relative;
@@ -389,12 +395,12 @@ export const tableStyles: CSSResult[] = [
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
padding: 0 24px;
font-size: 14px;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
height: 32px;
padding: 0 16px;
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
width: 100%;
box-sizing: border-box;
}
.tableStatistics {
@@ -409,9 +415,10 @@ export const tableStyles: CSSResult[] = [
.footerActions .footerAction {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
gap: 4px;
padding: 2px 8px;
font-weight: 500;
font-size: 11px;
color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
border-radius: 6px;
cursor: pointer;