diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml deleted file mode 100644 index 512ab5a..0000000 --- a/pnpm-workspace.yaml +++ /dev/null @@ -1,4 +0,0 @@ -onlyBuiltDependencies: - - esbuild - - mongodb-memory-server - - puppeteer diff --git a/ts_web/elements/dees-stepper/dees-stepper.ts b/ts_web/elements/dees-stepper/dees-stepper.ts index be72120..470ece0 100644 --- a/ts_web/elements/dees-stepper/dees-stepper.ts +++ b/ts_web/elements/dees-stepper/dees-stepper.ts @@ -60,7 +60,6 @@ export class DeesStepper extends DeesElement { position: absolute; width: 100%; height: 100%; - background: ${cssManager.bdTheme('#eeeeeb', '#000')}; overflow: hidden; } @@ -86,7 +85,6 @@ export class DeesStepper extends DeesElement { .step.selected { pointer-events: all; filter: opacity(1) saturate(1); - transform: translateY(-6px); 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; @@ -94,6 +92,9 @@ export class DeesStepper extends DeesElement { .step.hiddenStep { filter: opacity(0); + } + + .step.entrance.hiddenStep { transform: translateY(16px); } @@ -179,7 +180,7 @@ export class DeesStepper extends DeesElement { ? 'selected' : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep) ? 'hiddenStep' - : ''}" + : ''} ${this.getIndexOfStep(stepArg) === 0 ? 'entrance' : ''}" > ${this.getIndexOfStep(stepArg) > 0 ? html`
<- go to previous step
` @@ -205,6 +206,9 @@ export class DeesStepper extends DeesElement { await this.domtools.convenience.smartdelay.delayFor(0); this.selectedStep = this.steps[0]; this.setScrollStatus(); + // Remove entrance class after initial animation completes + await this.domtools.convenience.smartdelay.delayFor(350); + this.shadowRoot.querySelector('.step.entrance')?.classList.remove('entrance'); } public async updated() {