bastian/flat-pilot
1
0
Fork 0
generated from bastian/boilerplate
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Bastian Wagner
2026-07-21 08:57:49 +02:00
parent c1d5e0bd0f
commit bf830f825d
2 changed files with 115 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
apps/frontend/src/app/features/projects/furniture-section.component.scss
View File

@@ -83,12 +83,13 @@ p {
width: min(42rem, calc(100vw - 2 * var(--space-3)));
max-width: none;
max-height: calc(100dvh - 2 * var(--space-3));
border: 0;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
border-top: 0.25rem solid var(--color-primary);
border-radius: var(--radius-2xl);
padding: 0;
color: var(--color-text-primary);
background: var(--color-surface);
box-shadow: var(--shadow-md);
box-shadow: var(--shadow-lg);
}
.editor-dialog--wide {
@@ -100,18 +101,26 @@ p {
}
.editor-dialog::backdrop {
background: color-mix(in srgb, var(--color-text-primary) 52%, transparent);
background: color-mix(in srgb, var(--color-text-primary) 48%, transparent);
backdrop-filter: blur(0.2rem);
}
.editor-dialog form {
display: grid;
gap: var(--space-5);
padding: var(--space-5);
gap: var(--space-6);
padding: var(--space-6);
}
.editor-dialog header {
display: grid;
gap: var(--space-2);
padding-block-end: var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.editor-dialog header h3 {
font-size: var(--font-size-xl);
letter-spacing: -0.015em;
}
.editor-dialog header p {
@@ -127,7 +136,7 @@ p {
label {
display: grid;
gap: var(--space-2);
color: var(--color-text-secondary);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
@@ -144,9 +153,62 @@ textarea {
width: 100%;
}
.editor-dialog input:not([type='checkbox'], [type='radio']),
.editor-dialog select,
.editor-dialog textarea {
min-height: 3rem;
border: 1px solid transparent;
border-radius: var(--radius-xl);
padding-inline: var(--space-4);
color: var(--color-text-primary);
background: var(--color-neutral-subtle);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent);
transition:
background-color var(--transition-fast) ease,
border-color var(--transition-fast) ease,
box-shadow var(--transition-fast) ease;
}
.editor-dialog textarea {
min-height: 7rem;
padding-block: var(--space-4);
resize: vertical;
}
.editor-dialog input:not([type='checkbox'], [type='radio']):hover,
.editor-dialog select:hover,
.editor-dialog textarea:hover {
border-color: var(--color-border-strong);
background: var(--color-surface);
}
.editor-dialog input:not([type='checkbox'], [type='radio']):focus,
.editor-dialog select:focus,
.editor-dialog textarea:focus {
border-color: var(--color-focus);
outline: 0;
background: var(--color-surface);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-focus) 20%, transparent);
}
.editor-dialog input::placeholder,
.editor-dialog textarea::placeholder {
color: var(--color-text-muted);
}
.editor-dialog input[type='checkbox'],
.editor-dialog input[type='radio'] {
width: 1.2rem;
height: 1.2rem;
flex: 0 0 auto;
accent-color: var(--color-primary);
}
details {
border-top: 1px solid var(--color-border);
padding-block-start: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-4);
background: color-mix(in srgb, var(--color-neutral-subtle) 55%, var(--color-surface));
}
summary {
@@ -165,7 +227,8 @@ summary {
align-items: center;
color: var(--color-text-secondary);
background: var(--color-primary-subtle);
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
border-radius: var(--radius-xl);
padding: var(--space-4);
}
@@ -189,8 +252,24 @@ fieldset {
display: flex;
align-items: center;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-3);
border-radius: var(--radius-xl);
padding: var(--space-4);
background: var(--color-surface);
transition:
border-color var(--transition-fast) ease,
background-color var(--transition-fast) ease,
box-shadow var(--transition-fast) ease;
}
.option-choice:hover {
border-color: var(--color-primary);
background: var(--color-primary-subtle);
}
.option-choice:has(input:checked) {
border-color: var(--color-primary);
background: var(--color-primary-subtle);
box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.option-choice input {
@@ -212,7 +291,11 @@ fieldset {
gap: var(--space-3);
border-top: 1px solid var(--color-border);
background: var(--color-surface);
padding-block-start: var(--space-4);
margin-inline: calc(-1 * var(--space-6));
margin-block-end: calc(-1 * var(--space-6));
padding: var(--space-4) var(--space-6);
border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
box-shadow: 0 -0.25rem 1rem color-mix(in srgb, var(--color-text-primary) 5%, transparent);
}
@media (min-width: 36rem) {
@@ -238,12 +321,28 @@ fieldset {
}
@media (max-width: 35.99rem) {
.editor-dialog,
.editor-dialog--wide,
.editor-dialog--small {
inset: auto 0 0;
width: 100%;
max-height: 92dvh;
margin: 0;
border-inline: 0;
border-bottom: 0;
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.editor-dialog form {
padding: var(--space-4);
}
.editor-dialog footer {
flex-direction: column-reverse;
margin-inline: calc(-1 * var(--space-4));
margin-block-end: calc(-1 * var(--space-4));
padding: var(--space-4);
border-radius: 0;
}
.editor-dialog footer .ui-button {

3
apps/frontend/src/styles/_tokens.scss
View File

@@ -53,9 +53,12 @@
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.875rem;
--radius-2xl: 1.25rem;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgb(24 35 49 / 8%);
--shadow-md: 0 8px 24px rgb(24 35 49 / 12%);
--shadow-lg: 0 20px 60px rgb(24 35 49 / 20%);
--z-header: 20;
--z-drawer: 30;
--z-overlay: 40;