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

fix(dees-modal): refine modal styling, spacing, and animations for a cleaner overlay presentation

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-03 13:16:44 +00:00
parent a2e0760cc6
commit 236b83d0a0
3 changed files with 74 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -1,5 +1,12 @@
# Changelog
## 2026-04-03 - 3.52.1 - fix(dees-modal)
refine modal styling, spacing, and animations for a cleaner overlay presentation
- Adjust modal entrance and exit transitions with updated transform, opacity, and timing values
- Refresh heading and action button styling with tighter spacing, smaller controls, and improved theme-aware colors
- Update tile shadow, margins, and content scrollbar styling to improve modal visual polish and readability
## 2026-04-03 - 3.52.0 - feat(dees-chart-area)
add full page toggle control for chart area

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '3.52.0',
version: '3.52.1',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
}

125
ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
View File

@@ -129,8 +129,7 @@ export class DeesModal extends DeesElement {
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
font-family: ${cssGeistFontFamily};
color: ${cssManager.bdTheme('#333', '#fff')};
will-change: transform;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
}
.modalContainer {
display: flex;
@@ -144,18 +143,21 @@ export class DeesModal extends DeesElement {
justify-content: center;
}
dees-tile {
will-change: transform;
transform: translateY(0px) scale(0.95);
will-change: transform, opacity;
transform: translateY(8px) scale(0.98);
opacity: 0;
min-height: 120px;
max-height: calc(100vh - 40px);
transition: all 0.2s ease;
margin: 20px;
max-height: calc(100vh - 80px);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
margin: 40px;
overscroll-behavior: contain;
}
dees-tile::part(outer) {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
box-shadow:
0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
}
/* Width variations */
@@ -207,37 +209,45 @@ export class DeesModal extends DeesElement {
dees-tile.show {
opacity: 1;
transform: translateY(0px) scale(1);
transform: translateY(0) scale(1);
}
dees-tile.show.predestroy {
opacity: 0;
transform: translateY(10px) scale(1);
transform: translateY(6px) scale(0.98);
transition: transform 0.15s ease-in, opacity 0.15s ease-in;
}
.heading {
height: 40px;
font-family: ${cssGeistFontFamily};
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
padding: 0 8px 0 16px;
position: relative;
}
.heading .heading-text {
flex: 1;
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.heading .header-buttons {
display: flex;
align-items: center;
gap: 4px;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
gap: 2px;
flex-shrink: 0;
margin-left: 8px;
}
.heading .header-button {
width: 28px;
height: 28px;
width: 24px;
height: 24px;
border-radius: 4px;
display: flex;
align-items: center;
@@ -245,88 +255,85 @@ export class DeesModal extends DeesElement {
cursor: pointer;
transition: all 0.15s ease;
background: transparent;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
}
.heading .header-button:hover {
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
}
.heading .header-button:active {
background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
}
.heading .header-button dees-icon {
width: 16px;
height: 16px;
width: 14px;
height: 14px;
display: block;
}
.heading .heading-text {
flex: 1;
text-align: center;
font-weight: 600;
font-size: 14px;
line-height: 40px;
padding: 0 40px;
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
}
.content {
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
}
.bottomButtons {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 8px;
padding: 8px;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.bottomButtons .bottomButton {
padding: 8px 16px;
border-radius: 4px;
line-height: 16px;
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 14px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
background: ${cssManager.bdTheme('#ffffff', '#27272a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
background: transparent;
border: none;
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
white-space: nowrap;
display: flex;
align-items: center;
}
.bottomButtons .bottomButton:first-child {
border-left: none;
}
.bottomButtons .bottomButton:hover {
background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
}
.bottomButtons .bottomButton:active {
background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
}
.bottomButtons .bottomButton:last-child {
border-right: none;
background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
}
.bottomButtons .bottomButton.primary {
background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
color: #ffffff;
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.bottomButtons .bottomButton.primary:hover {
background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.bottomButtons .bottomButton.primary:active {
background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.12)', 'hsl(213.1 93.9% 67.8% / 0.12)')};
}
`,
];