@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.
256 lines (219 loc) • 6.93 kB
CSS
/**
* Tabs-Komponente
*
* Tab-Navigation für das Umschalten zwischen verschiedenen Inhaltsbereichen.
* Tabs ermöglichen ein platzsparendes Design für verschiedene Inhaltsgruppen.
*
* @layer components.tabs
*
* Grundlegende Verwendung:
* <div class="tabs">
* <div class="nav">
* <button class="tab active">Tab 1</button>
* <button class="tab">Tab 2</button>
* <button class="tab">Tab 3</button>
* </div>
* <div class="content">
* <div class="panel active">Inhalt Tab 1</div>
* <div class="panel">Inhalt Tab 2</div>
* <div class="panel">Inhalt Tab 3</div>
* </div>
* </div>
*
* Varianten:
* <div class="tabs pills">...</div> <!-- Pill-Style Tabs -->
* <div class="tabs underline">...</div> <!-- Unterstrichene Tabs -->
* <div class="tabs boxed">...</div> <!-- Box-Style Tabs -->
*
* Ausrichtungen:
* <div class="tabs horizontal">...</div> <!-- Horizontal (Standard) -->
* <div class="tabs vertical">...</div> <!-- Vertikale Tabs -->
*
* Größen:
* <div class="tabs sm">...</div> <!-- Klein -->
* <div class="tabs md">...</div> <!-- Medium (Standard) -->
* <div class="tabs lg">...</div> <!-- Groß -->
*/
/**
* Tabs Component Structure:
*
* <div class="tabs">
* <div class="tabs-list" role="tablist">
* <button class="tab-item" role="tab" aria-selected="true">Tab 1</button>
* <button class="tab-item" role="tab">Tab 2</button>
* </div>
* <div class="tab-panels">
* <div class="tab-panel" role="tabpanel">Panel 1 content</div>
* <div class="tab-panel" role="tabpanel" hidden>Panel 2 content</div>
* </div>
* </div>
*
* Variants: .tabs--vertical, .tabs--pills, .tabs--underlined
* Modifiers: .tabs--justify, .tabs--center
*/
@layer components {
.tabs {
display: flex;
flex-direction: column;
/* Tab-Navigation */
.nav {
border-bottom: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
display: flex;
gap: var(--tab-gap, var(--space-4, 1rem));
}
/* Tab-Buttons */
.tab {
background: none;
border: none;
color: var(--color-text-muted, var(--color-neutral-700, #374151));
cursor: pointer;
font-size: var(--text-base, var(--font-size-base, 1rem));
padding: var(--tab-padding, 0.5rem 1rem);
transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease),
border-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
&.active {
border-bottom: 2px solid var(--color-primary-500, #3b82f6);
color: var(--color-primary-600, #2563eb);
font-weight: var(--font-medium, var(--font-weight-medium, 500));
}
&:hover:not(.active) {
color: var(--color-primary-500, #3b82f6);
}
&:focus {
box-shadow: 0 0 0 2px var(--color-primary-200, #bfdbfe);
outline: none;
}
&:disabled {
color: var(--color-neutral-400, #9ca3af);
cursor: not-allowed;
&:hover {
color: var(--color-neutral-400, #9ca3af);
}
}
}
/* Inhaltsbereich */
.content {
padding: var(--tab-content-padding, 1rem 0);
}
/* Panel (Inhaltsbereich je Tab) */
.panel {
display: none;
&.active {
display: block;
}
}
/* Varianten */
&.pills {
.nav {
border-bottom: none;
gap: var(--space-2, 0.5rem);
}
.tab {
border-radius: var(--radius-full, 9999px);
padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
&.active {
background-color: var(--color-primary-500, #3b82f6);
border-bottom: none;
color: var(--color-text-inverse, white);
}
&:hover:not(.active) {
background-color: var(--color-neutral-100, #f3f4f6);
}
}
}
&.underline {
.tab {
border-bottom: 2px solid transparent;
margin-bottom: -1px;
&.active {
border-bottom-color: var(--color-primary-500, #3b82f6);
}
}
}
&.boxed {
.nav {
border-bottom: none;
gap: 0;
}
.tab {
background-color: var(--color-neutral-50, #f9fafb);
border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
border-bottom: none;
border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;
margin-right: -1px;
&.active {
background-color: var(--color-background, white);
position: relative;
z-index: 1;
}
}
.content {
border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);
padding: var(--space-4, 1rem);
}
}
/* Ausrichtungen */
&.horizontal {
/* Standard (wie oben definiert) */
}
&.vertical {
align-items: flex-start;
flex-direction: row;
.nav {
border-bottom: none;
border-right: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
flex-direction: column;
gap: var(--space-2, 0.5rem);
margin-right: var(--space-4, 1rem);
padding-right: var(--space-4, 1rem);
}
.tab {
border-bottom: none;
text-align: left;
width: 100%;
&.active {
border-bottom: none;
border-right: 2px solid var(--color-primary-500, #3b82f6);
margin-right: -1px;
}
}
}
/* Größenvarianten */
&.sm {
.tab {
font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
}
.content {
padding: var(--space-2, 0.5rem) 0;
}
}
&.lg {
.tab {
font-size: var(--text-lg, var(--font-size-lg, 1.125rem));
padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
}
.content {
padding: var(--space-6, 1.5rem) 0;
}
}
/* Farbvarianten */
&.success .tab.active {
border-bottom-color: var(--color-success-500, #10b981);
color: var(--color-success-600, #059669);
}
&.warning .tab.active {
border-bottom-color: var(--color-warning-500, #f59e0b);
color: var(--color-warning-600, #d97706);
}
&.error .tab.active {
border-bottom-color: var(--color-error-500, #ef4444);
color: var(--color-error-600, #dc2626);
}
&.secondary .tab.active {
border-bottom-color: var(--color-secondary-500, #6b7280);
color: var(--color-secondary-600, #4b5563);
}
}
}