JoeKung/print-calculator
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(back-end and front-end) 3d visualization for cad
All checks were successful
Build and Deploy / test-backend (push) Successful in 33s
Details
Build and Deploy / test-frontend (push) Successful in 1m5s
Details
Build and Deploy / build-and-push (push) Successful in 43s
Details
Build and Deploy / deploy (push) Successful in 9s
Details
PR Checks / prettier-autofix (pull_request) Successful in 11s
Details
PR Checks / test-backend (pull_request) Successful in 26s
Details
PR Checks / security-sast (pull_request) Successful in 32s
Details
PR Checks / test-frontend (pull_request) Successful in 1m6s
Details

Browse Source
This commit is contained in:
Joe Küng
2026-03-04 16:49:18 +01:00
parent 57360bacd0
commit 0ef97eeb9b
11 changed files with 359 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/src/app/features/checkout/checkout.component.scss
View File

@@ -244,6 +244,77 @@ app-toggle-selector.user-type-selector-compact {
color: var(--color-text-muted);
margin-top: 2px;
}
.item-preview {
margin-top: var(--space-3);
.preview-trigger {
display: block;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: center;
.preview-surface {
position: relative;
width: min(320px, 100%);
margin-inline: auto;
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease;
}
.preview-pill {
position: absolute;
top: 8px;
right: 8px;
background: rgba(17, 24, 39, 0.84);
color: #fff;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
padding: 4px 10px;
pointer-events: none;
}
&:hover .preview-surface,
&:focus-visible .preview-surface {
border-color: var(--color-brand);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
transform: translateY(-1px);
}
&:focus-visible {
outline: none;
}
}
.preview-state {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-neutral-50);
color: var(--color-text-muted);
font-size: 0.8rem;
min-height: 74px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-2);
}
.preview-state-error {
color: var(--color-danger-600, #dc2626);
}
}
}
.item-price {
@@ -316,6 +387,53 @@ app-toggle-selector.user-type-selector-compact {
font-weight: 500;
}
.preview-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(12, 16, 22, 0.72);
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.preview-modal {
width: min(820px, 96vw);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background: var(--color-bg-card);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
padding: var(--space-4);
}
.preview-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
h4 {
margin: 0;
font-size: 1rem;
line-height: 1.2;
word-break: break-word;
}
}
.preview-modal-close {
border: 1px solid var(--color-border);
background: var(--color-neutral-50);
color: var(--color-text);
width: 32px;
height: 32px;
border-radius: 999px;
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
}
.mb-6 {
margin-bottom: var(--space-6);
}