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

46
ts_web/elements/00group-chart/dees-chart-area/styles.ts
View File

@@ -4,52 +4,27 @@ export const chartAreaStyles = [
cssManager.defaultStyles,
css`
:host {
display: block;
height: 400px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
font-size: 14px;
}
.mainbox {
position: relative;
width: 100%;
height: 400px;
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;
}
.chartTitle {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: left;
padding: 16px 24px;
z-index: 10;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
dees-tile {
height: 100%;
}
.chartContainer {
position: absolute;
top: 44px;
left: 0;
bottom: 32px;
right: 0;
inset: 0;
}
.statsBar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 32px;
padding: 0 16px;
display: flex;
align-items: center;
gap: 24px;
padding: 0 16px;
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
width: 100%;
box-sizing: border-box;
}
.statsSeries {
display: flex;
@@ -68,9 +43,14 @@ export const chartAreaStyles = [
}
.statsName {
font-weight: 500;
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
margin-right: 4px;
}
.statsItem {
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
}
.statsItem strong {
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
}