Files
michaelschiemer/resources/css/components/badge.css
Michael Schiemer 5050c7d73a docs: consolidate documentation into organized structure
- Move 12 markdown files from root to docs/ subdirectories
- Organize documentation by category:
  • docs/troubleshooting/ (1 file)  - Technical troubleshooting guides
  • docs/deployment/      (4 files) - Deployment and security documentation
  • docs/guides/          (3 files) - Feature-specific guides
  • docs/planning/        (4 files) - Planning and improvement proposals

Root directory cleanup:
- Reduced from 16 to 4 markdown files in root
- Only essential project files remain:
  • CLAUDE.md (AI instructions)
  • README.md (Main project readme)
  • CLEANUP_PLAN.md (Current cleanup plan)
  • SRC_STRUCTURE_IMPROVEMENTS.md (Structure improvements)

This improves:
 Documentation discoverability
 Logical organization by purpose
 Clean root directory
 Better maintainability
2025-10-05 11:05:04 +02:00

72 lines
1.4 KiB
CSS

/* Badge Component
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
font-size: var(--font-size-xs, 0.75rem);
font-weight: 500;
line-height: 1;
white-space: nowrap;
border-radius: var(--radius-sm, 0.25rem);
transition: background-color 0.15s ease-in-out;
}
/* Badge Sizes */
.badge--sm {
padding: 0.125rem var(--space-1, 0.25rem);
font-size: 0.625rem;
}
.badge--md {
/* Default size - already defined above */
}
.badge--lg {
padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
font-size: var(--font-size-sm, 0.875rem);
}
/* Badge Variants */
.badge--default {
background-color: var(--color-surface-secondary, #f3f4f6);
color: var(--color-text-primary, #1a1a1a);
}
.badge--primary {
background-color: var(--color-primary, #3b82f6);
color: white;
}
.badge--success {
background-color: var(--color-success, #10b981);
color: white;
}
.badge--warning {
background-color: var(--color-warning, #f59e0b);
color: white;
}
.badge--danger {
background-color: var(--color-danger, #dc2626);
color: white;
}
.badge--info {
background-color: var(--color-info, #0ea5e9);
color: white;
}
/* Badge Pill Variant */
.badge--pill {
border-radius: 9999px;
padding-inline: var(--space-3, 0.75rem);
}
/* Badge with Icon Support */
.badge__icon {
margin-inline-end: var(--space-1, 0.25rem);
}