Anpassung Progress Bar Event erstellen
This commit is contained in:
parent
9a2c66e026
commit
2015454f6c
@ -126,7 +126,14 @@ fieldset {
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
label,
|
||||
|
||||
label {
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
legend {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
@ -146,11 +153,15 @@ input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="number"],
|
||||
textarea {
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;;
|
||||
padding: 1rem 1.25rem;
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--butter-light);
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
}
|
||||
|
||||
/* Blendet die Standard-Buttons für number inputs aus */
|
||||
@ -320,16 +331,24 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.flow-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
margin-top: auto;
|
||||
background: var(--color-bg);
|
||||
backdrop-filter: none;
|
||||
padding-top: var(--space-4);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.flow-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
order: -1; /* nach oben verschieben */
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
width: min(100%, var(--content-width));
|
||||
margin: 0 auto;
|
||||
@ -349,8 +368,8 @@ textarea:focus {
|
||||
.progress {
|
||||
flex: 1;
|
||||
height: 0.3rem;
|
||||
background: var(--color-progress-bg);
|
||||
border-radius: 999px;
|
||||
background: var(--olive-lightg);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -508,9 +527,10 @@ textarea:focus-visible {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/*
|
||||
.button--primary {
|
||||
width: 100%;
|
||||
}
|
||||
*/
|
||||
|
||||
.event-flow-header {
|
||||
justify-content: flex-start;
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
/*
|
||||
.hero__button-primarys {
|
||||
.hero__buttons {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
@ -356,7 +356,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* --- CTA button-primary --- */
|
||||
/* --- CTA button --- */
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
|
||||
@ -97,13 +97,18 @@ h2 {
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
color: var(--black);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--error);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
|
||||
.main-content {
|
||||
@ -161,7 +166,7 @@ p {
|
||||
.nav-tab {
|
||||
color: var(--black);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--ls-sm);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
@ -222,27 +227,49 @@ p {
|
||||
/* Buttons */
|
||||
.button-primary {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.5rem;
|
||||
padding: 0.375rem 1.5rem;
|
||||
background-color: var(--olive);
|
||||
border: none;
|
||||
border: 1.5px solid var(--olive);
|
||||
border-radius: var(--radius-lg);
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: var(--butter-light);
|
||||
color: var(--butter);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background-color: var(--olive-dark);
|
||||
border-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 1.5rem;
|
||||
background-color: var(--butter);
|
||||
border: 1.5px solid var(--olive);
|
||||
border-radius: var(--radius-lg);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: var(--olive);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.button-secondary:hover {
|
||||
color: var(--olive-dark);
|
||||
background-color: var(--olive-light);
|
||||
border-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
.button--outline {
|
||||
background-color: transparent;
|
||||
color: var(--olive);
|
||||
border: 2px solid var(--olive);
|
||||
border: 1.5px solid var(--olive);
|
||||
}
|
||||
|
||||
.button--outline:hover {
|
||||
@ -251,29 +278,30 @@ p {
|
||||
}
|
||||
|
||||
.counter-button {
|
||||
padding: 0.5rem 1rem;
|
||||
width: 46px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-color: var(--olive);
|
||||
border: none;
|
||||
border: 1.5px solid var(--olive);
|
||||
border-radius: var(--radius-lg);
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: var(--butter-light);
|
||||
color: var(--butter);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.counter-button:hover, .counter-button:focus-visible {
|
||||
background-color: var(--olive-dark);
|
||||
border-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
.button-small {
|
||||
background: var(--olive);
|
||||
color: var(--butter-light);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--ls-sm);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
@ -314,7 +342,7 @@ p {
|
||||
background: var(--tomato);
|
||||
color: var(--white);
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--ls-ui);
|
||||
line-height: 1.3;
|
||||
display: inline-flex;
|
||||
|
||||
@ -373,23 +373,35 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="flow-footer" id="flowFooter" hidden>
|
||||
<div class="progress-wrap" aria-hidden="true">
|
||||
<span class="progress-label" id="progressMarkerLabel">Schritt 1 von 7</span>
|
||||
|
||||
<div class="flow-footer" id="flowFooter" hidden>
|
||||
|
||||
<p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
|
||||
|
||||
<div class="flow-actions">
|
||||
<button type="button" id="backButton" class="button-secondary">
|
||||
Zurück
|
||||
</button>
|
||||
|
||||
<div class="progress-wrap">
|
||||
<span class="progress-label" id="progressMarkerLabel">
|
||||
Schritt 1 von 7
|
||||
</span>
|
||||
<div class="progress">
|
||||
<span id="progressBar" class="progress-bar"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-actions">
|
||||
<button type="button" id="backButton" class="button-primary">Zurück</button>
|
||||
<button type="button" id="nextButton" class="button-primary">
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flow-actions-right">
|
||||
<p id="errorMessage" class="error-message" role="alert" aria-live="assertive"></p>
|
||||
<button type="button" id="nextButton" class="button-primary button--primary">Weiter</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section
|
||||
id="submissionSuccess"
|
||||
@ -410,7 +422,7 @@
|
||||
|
||||
<div class="review-card review-card--success">
|
||||
<div class="submission-success-actions">
|
||||
<a class="button-primary button--primary" href="my_profil.html">Weiter zu deinem Profil</a>
|
||||
<a class="button-primary" href="my_profil.html">Weiter zu deinem Profil</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user