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

style: apply prettier formatting

Browse Source
This commit is contained in:
printcalc-ci
2026-03-03 11:46:26 +00:00
parent dd6f723271
commit 20293cc044
131 changed files with 5674 additions and 3482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/app/features/calculator/calculator-page.component.scss
View File

@@ -1,36 +1,44 @@
.hero { padding: var(--space-12) 0; text-align: center; }
.subtitle { font-size: 1.25rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; }
.hero {
padding: var(--space-12) 0;
text-align: center;
}
.subtitle {
font-size: 1.25rem;
color: var(--color-text-muted);
max-width: 600px;
margin: 0 auto;
}
.content-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
@media(min-width: 768px) {
@media (min-width: 768px) {
grid-template-columns: 1.5fr 1fr;
gap: var(--space-8);
}
}
.centered-col {
align-self: flex-start; /* Default */
@media(min-width: 768px) {
align-self: center;
}
align-self: flex-start; /* Default */
@media (min-width: 768px) {
align-self: center;
}
}
.col-input {
min-width: 0;
min-width: 0;
}
.col-result {
min-width: 0;
display: flex;
flex-direction: column;
min-width: 0;
display: flex;
flex-direction: column;
}
/* Stretch only the loading card so the spinner stays centered */
.col-result > .loading-state {
flex: 1;
flex: 1;
}
/* Mode Selector (Segmented Control style) */
@@ -56,55 +64,64 @@
transition: all 0.2s ease;
user-select: none;
&:hover { color: var(--color-text); }
&:hover {
color: var(--color-text);
}
&.active {
background-color: var(--color-brand);
color: #000;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
}
.benefits { padding-left: var(--space-4); color: var(--color-text-muted); line-height: 2; }
.benefits {
padding-left: var(--space-4);
color: var(--color-text-muted);
line-height: 2;
}
.loader-content {
text-align: center;
max-width: 300px;
margin: 0 auto;
/* Center content vertically within the stretched card */
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
max-width: 300px;
margin: 0 auto;
/* Center content vertically within the stretched card */
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.loading-title {
font-size: 1.1rem;
font-weight: 600;
margin: var(--space-4) 0 var(--space-2);
color: var(--color-text);
font-size: 1.1rem;
font-weight: 600;
margin: var(--space-4) 0 var(--space-2);
color: var(--color-text);
}
.loading-text {
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.5;
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.spinner {
border: 3px solid var(--color-neutral-200);
border-left-color: var(--color-brand);
border-radius: 50%;
width: 48px;
height: 48px;
animation: spin 1s linear infinite;
margin: 0 auto;
border: 3px solid var(--color-neutral-200);
border-left-color: var(--color-brand);
border-radius: 50%;
width: 48px;
height: 48px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}