@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
274 lines (244 loc) • 6.98 kB
CSS
/*
* Wizard-Komponente
*
* Schrittweiser Navigationsablauf.
*/
/**
* Wizard-Komponente
*
* Schrittweise Navigationskomponenten für mehrstufige Prozesse.
* Wizards führen Benutzer durch komplexe Workflows wie Formulare oder Setups.
*
* @layer components.wizard
*
* Grundlegende Verwendung:
* <div class="wizard">
* <div class="steps">
* <div class="step completed">
* <span class="indicator">1</span>
* <span class="title">Schritt 1</span>
* </div>
* <div class="step active">
* <span class="indicator">2</span>
* <span class="title">Schritt 2</span>
* </div>
* <div class="step">
* <span class="indicator">3</span>
* <span class="title">Schritt 3</span>
* </div>
* </div>
* <div class="content">
* <!-- Aktuelle Schrittinhalte -->
* </div>
* <div class="actions">
* <button class="button">Zurück</button>
* <button class="button primary">Weiter</button>
* </div>
* </div>
*
* Varianten:
* <div class="wizard horizontal">...</div>
* <div class="wizard vertical">...</div>
*
* Stilvarianten:
* <div class="wizard numbered">...</div> <!-- Mit Nummern -->
* <div class="wizard with-icons">...</div> <!-- Mit Icons -->
* <div class="wizard with-progress">...</div> <!-- Mit Fortschrittsbalken -->
*
* Zustandsanzeige:
* <div class="step completed">...</div> <!-- Abgeschlossen -->
* <div class="step active">...</div> <!-- Aktiv -->
* <div class="step error">...</div> <!-- Mit Fehler -->
* <div class="step disabled">...</div> <!-- Deaktiviert -->
*/
@layer components {
.wizard {
display: flex;
flex-direction: column;
gap: var(--space-4);
width: 100%;
/* Schrittanzeige im Wizard */
.steps {
display: flex;
gap: var(--space-2);
justify-content: space-between;
margin-bottom: var(--space-6);
position: relative;
/* Verbindungslinie zwischen Schritten */
&::before {
background-color: var(--color-gray-300, #d1d5db);
content: '';
height: 2px;
left: 0%;
position: absolute;
top: calc(var(--step-size, 2rem) / 2);
width: 100%;
z-index: 0;
}
}
/* Einzelner Schritt */
.step {
--step-size: 2rem;
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
padding-top: calc(var(--step-size, 2rem) + var(--space-2));
position: relative;
text-align: center;
z-index: 1;
/* Schritt-Indikator (Kreis) */
.indicator {
align-items: center;
background-color: var(--color-white, #fff);
border: 2px solid var(--color-gray-300, #d1d5db);
border-radius: 50px;
color: var(--color-gray-600);
display: flex;
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-medium, 500);
height: var(--step-size, 2rem);
justify-content: center;
position: absolute;
top: 0%;
width: var(--step-size, 2rem);
z-index: 2;
}
/* Schritt-Titel */
.title {
color: var(--color-gray-700);
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-normal);
margin-top: var(--space-1);
}
/* Optionale Beschreibung */
.description {
color: var(--color-gray-600);
font-size: var(--font-size-xs);
margin-top: var(--space-1);
max-width: 14%0px;
}
/* Schritt-Zustände */
&.active {
.indicator {
background-color: var(--color-primary, #3b82f6);
border-color: var(--color-primary, #3b82f6);
color: white;
}
.title {
color: var(--color-primary, #3b82f6);
font-weight: var(--font-weight-medium, 500);
}
}
&.completed {
.indicator {
background-color: var(--color-success, #10b981);
border-color: var(--color-success, #10b981);
color: white;
/* Optional: Häkchen statt Nummer */
&::after {
content: '✓';
}
}
/* Verbindungslinie nach dem abgeschlossenen Schritt */
&::after {
background-color: var(--color-success, #10b981);
content: '';
height: 2px;
left: 50%;
position: absolute;
top: calc(var(--step-size, 2rem) / 2);
width: 100%;
z-index: 0;
}
&:last-child::after {
display: none;
}
}
&.error {
.indicator {
background-color: var(--color-error, #ef4444);
border-color: var(--color-error, #ef4444);
color: white;
}
.title {
color: var(--color-error, #ef4444);
}
}
&.disabled {
cursor: not-allowed;
opacity: 5000%;
}
}
/* Inhaltsbereich */
.content {
background-color: var(--color-white, #fff);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-md, 0.375rem);
padding: var(--space-6);
}
/* Aktionsbuttons */
.actions {
display: flex;
justify-content: space-between;
margin-top: var(--space-4);
/* Wenn nur ein Button (z.B. beim ersten Schritt) */
&.end {
justify-content: flex-end;
}
}
/* Ausrichtungsvarianten */
&.vertical {
align-items: flex-start;
flex-direction: row;
.steps {
flex-direction: column;
gap: var(--space-6);
margin-bottom: 0%;
margin-right: var(--space-8);
width: 24%0px;
&::before {
height: 100%;
left: calc(var(--step-size, 2rem) / 2);
top: 0%;
width: 2px;
}
}
.step {
align-items: flex-start;
flex-direction: row;
padding-left: calc(var(--step-size, 2rem) + var(--space-4));
padding-top: 0%;
text-align: left;
.indicator {
left: 0%;
top: 0%;
}
&.completed::after {
height: 100%;
left: calc(var(--step-size, 2rem) / 2);
top: 50%;
width: 2px;
}
}
.content {
flex: 1;
}
}
/* Mit Fortschrittsbalken */
&.with-progress {
.progress-bar {
background-color: var(--color-gray-200);
border-radius: var(--radius-full, 9999px);
height: 0%.5rem;
margin-bottom: var(--space-6);
overflow: hidden;
.fill {
background-color: var(--color-primary, #3b82f6);
height: 100%;
transition: width 0.3s ease-in-out;
}
}
}
}
}