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

fix(dees-stepper): Improve dees-stepper visual style and transitions

Browse Source
This commit is contained in:
Jürgen Kunz
2025-11-30 23:46:39 +00:00
parent caa954a539
commit d69f777b25
3 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
changelog.md
View File

@@ -1,5 +1,16 @@
# Changelog # Changelog
## 2025-11-30 - 2.0.1 - fix(dees-stepper)
Improve dees-stepper visual style and transitions
- Smooth animation: extend .step transition duration and use a cubic-bezier curve for smoother motion.
- Add .step.entrance class with a shorter easing for entrance animations to keep entrance timing distinct.
- Visual tweaks: reduce border-radius from 18px to 12px and increase inner content padding to 32px.
- Color and border updates: adjust background and border colors for light/dark themes to more consistent values.
- Shadow simplification: replace theme-dependent heavy shadows with a single subtle shadow (0 8px 32px rgba(0,0,0,0.4)).
- Remove selected-state border/box-shadow overrides (selection visuals simplified).
- Remove background-clip: padding-box to simplify rendering.
## 2025-11-17 - 2.0.0 - BREAKING CHANGE(decorators) ## 2025-11-17 - 2.0.0 - BREAKING CHANGE(decorators)
Migrate to TC39 standard decorators (accessor) across components, update tsconfig and bump dependencies Migrate to TC39 standard decorators (accessor) across components, update tsconfig and bump dependencies

2
ts_web/00_commitinfo_data.ts
View File

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

19
ts_web/elements/dees-stepper/dees-stepper.ts
View File

@@ -67,26 +67,23 @@ export class DeesStepper extends DeesElement {
position: relative; position: relative;
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, border 0.35s ease; transition: transform 0.7s cubic-bezier(0.87, 0, 0.13, 1), box-shadow 0.7s cubic-bezier(0.87, 0, 0.13, 1), filter 0.7s cubic-bezier(0.87, 0, 0.13, 1), border 0.7s cubic-bezier(0.87, 0, 0.13, 1);
max-width: 500px; max-width: 500px;
min-height: 300px; min-height: 300px;
border-radius: 18px; border-radius: 12px;
background: ${cssManager.bdTheme('#ffffff', '#18181b')}; background: ${cssManager.bdTheme('#ffffff', '#0f0f11')};
border: 1px solid ${cssManager.bdTheme('rgba(226, 232, 240, 0.9)', 'rgba(63, 63, 70, 0.85)')}; border: 1px solid ${cssManager.bdTheme('#e2e8f0', '#272729')};
color: ${cssManager.bdTheme('#0f172a', '#f5f5f5')}; color: ${cssManager.bdTheme('#0f172a', '#f5f5f5')};
margin: auto; margin: auto;
margin-bottom: 20px; margin-bottom: 20px;
filter: opacity(0.55) saturate(0.85); filter: opacity(0.55) saturate(0.85);
box-shadow: ${cssManager.bdTheme('0 20px 40px -25px rgba(15, 23, 42, 0.45)', '0 20px 36px -22px rgba(15, 23, 42, 0.65)')}; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
user-select: none; user-select: none;
background-clip: padding-box;
} }
.step.selected { .step.selected {
pointer-events: all; pointer-events: all;
filter: opacity(1) saturate(1); filter: opacity(1) saturate(1);
border: 1px solid ${cssManager.bdTheme(colors.dark.blue, colors.dark.blue)};
box-shadow: ${cssManager.bdTheme('0 28px 60px -30px rgba(15, 23, 42, 0.42)', '0 26px 55px -28px rgba(37, 99, 235, 0.6)')};
user-select: auto; user-select: auto;
} }
@@ -94,6 +91,10 @@ export class DeesStepper extends DeesElement {
filter: opacity(0); filter: opacity(0);
} }
.step.entrance {
transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, border 0.35s ease;
}
.step.entrance.hiddenStep { .step.entrance.hiddenStep {
transform: translateY(16px); transform: translateY(16px);
} }
@@ -165,7 +166,7 @@ export class DeesStepper extends DeesElement {
} }
.step .content { .step .content {
padding: 24px 28px 32px; padding: 32px;
} }
`, `,
]; ];