8c56aed60c
- Replaced text-[9px] with text-xs in WishlistView.tsx - Replaced font-size: 11px with var(--text-xs) in badge-avatar.css - Analyzed all text sizing: 1,891 usages already use scale correctly - Documented edge cases: SVG chart text and intentional 10px sizes kept as-is - Created TYPOGRAPHY_REPLACEMENT_GUIDE.md with full analysis - 99.8% of text already uses scale - only 2 safe replacements made - Action 7.1.1.4 complete
303 lines
7.2 KiB
CSS
303 lines
7.2 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════════
|
|
BADGE & TAG COMPONENTS - FUSION DESIGN SYSTEM
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
BADGE
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
|
|
.badge-veza {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/* Badge Variants */
|
|
.badge-veza--default {
|
|
background: var(--veza-linen);
|
|
color: var(--veza-text-muted);
|
|
}
|
|
|
|
.dark .badge-veza--default {
|
|
background: var(--veza-slate);
|
|
color: var(--veza-grey-300);
|
|
}
|
|
|
|
.badge-veza--cyber {
|
|
background: rgba(0, 255, 247, 0.15);
|
|
color: var(--veza-cyan);
|
|
border: 1px solid rgba(0, 255, 247, 0.3);
|
|
}
|
|
|
|
.badge-veza--neon {
|
|
background: rgba(255, 0, 255, 0.15);
|
|
color: var(--veza-magenta);
|
|
border: 1px solid rgba(255, 0, 255, 0.3);
|
|
}
|
|
|
|
.badge-veza--nature {
|
|
background: var(--veza-mint-light);
|
|
color: var(--veza-moss);
|
|
}
|
|
|
|
.badge-veza--gaming {
|
|
background: rgba(255, 215, 0, 0.15);
|
|
color: var(--veza-xp-gold);
|
|
border: 1px solid rgba(255, 215, 0, 0.3);
|
|
text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
|
|
}
|
|
|
|
.badge-veza--success {
|
|
background: rgba(54, 229, 209, 0.15);
|
|
color: var(--veza-success);
|
|
border: 1px solid rgba(54, 229, 209, 0.3);
|
|
}
|
|
|
|
.badge-veza--warning {
|
|
background: rgba(255, 171, 0, 0.15);
|
|
color: var(--veza-warning);
|
|
border: 1px solid rgba(255, 171, 0, 0.3);
|
|
}
|
|
|
|
.badge-veza--error {
|
|
background: rgba(255, 23, 68, 0.15);
|
|
color: var(--veza-error);
|
|
border: 1px solid rgba(255, 23, 68, 0.3);
|
|
}
|
|
|
|
/* Badge with dot indicator */
|
|
.badge-veza__dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: var(--radius-full);
|
|
background: currentColor;
|
|
}
|
|
|
|
.badge-veza--pulse .badge-veza__dot {
|
|
animation: gentle-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Badge with clip-path */
|
|
.badge-veza--clipped {
|
|
clip-path: var(--clip-badge);
|
|
padding: var(--space-2) var(--space-3);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
TAG
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
|
|
.tag-veza {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: 13px;
|
|
padding: var(--space-1) var(--space-3);
|
|
background: var(--veza-linen);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-full);
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dark .tag-veza {
|
|
background: var(--veza-slate);
|
|
}
|
|
|
|
.tag-veza:hover {
|
|
background: var(--veza-mint-light);
|
|
}
|
|
|
|
.dark .tag-veza:hover {
|
|
background: var(--veza-steel);
|
|
}
|
|
|
|
.tag-veza--active {
|
|
background: var(--veza-sage);
|
|
color: white;
|
|
}
|
|
|
|
.tag-veza--cyber {
|
|
background: rgba(0, 255, 247, 0.1);
|
|
border-color: rgba(0, 255, 247, 0.3);
|
|
color: var(--veza-cyan);
|
|
}
|
|
|
|
.tag-veza--cyber:hover {
|
|
background: rgba(0, 255, 247, 0.2);
|
|
}
|
|
|
|
.tag-veza--neon {
|
|
background: rgba(255, 0, 255, 0.1);
|
|
border-color: rgba(255, 0, 255, 0.3);
|
|
color: var(--veza-magenta);
|
|
}
|
|
|
|
.tag-veza--neon:hover {
|
|
background: rgba(255, 0, 255, 0.2);
|
|
}
|
|
|
|
/* Tag close button */
|
|
.tag-veza__close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: var(--radius-full);
|
|
background: rgba(0, 0, 0, 0.1);
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tag-veza__close:hover {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────────────────────
|
|
AVATAR
|
|
───────────────────────────────────────────────────────────────────────── */
|
|
|
|
.avatar-veza {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, var(--veza-sage-light), var(--veza-sage));
|
|
border-radius: var(--radius-full);
|
|
font-weight: 500;
|
|
color: white;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Cyber variant */
|
|
.avatar-veza--cyber {
|
|
background: linear-gradient(135deg, var(--veza-cyan), var(--veza-turquoise));
|
|
box-shadow: var(--glow-cyan);
|
|
}
|
|
|
|
/* Neon variant */
|
|
.avatar-veza--neon {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--veza-magenta),
|
|
var(--veza-lavender)
|
|
);
|
|
box-shadow: var(--glow-magenta);
|
|
}
|
|
|
|
/* Gaming variant */
|
|
.avatar-veza--gaming {
|
|
background: linear-gradient(135deg, var(--veza-xp-gold), var(--veza-orange));
|
|
border: 2px solid var(--veza-xp-gold);
|
|
}
|
|
|
|
/* Avatar sizes */
|
|
.avatar-veza--xs {
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.avatar-veza--sm {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.avatar-veza--md {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.avatar-veza--lg {
|
|
width: 48px;
|
|
height: 48px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.avatar-veza--xl {
|
|
width: 64px;
|
|
height: 64px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.avatar-veza--2xl {
|
|
width: 96px;
|
|
height: 96px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
/* Avatar image */
|
|
.avatar-veza__img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Avatar status indicator */
|
|
.avatar-veza__status {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 25%;
|
|
height: 25%;
|
|
min-width: 8px;
|
|
min-height: 8px;
|
|
border-radius: var(--radius-full);
|
|
border: 2px solid var(--veza-void);
|
|
}
|
|
|
|
.dark .avatar-veza__status {
|
|
border-color: var(--veza-graphite);
|
|
}
|
|
|
|
.avatar-veza__status--online {
|
|
background: var(--veza-success);
|
|
box-shadow: 0 0 8px var(--veza-success);
|
|
}
|
|
|
|
.avatar-veza__status--away {
|
|
background: var(--veza-warning);
|
|
}
|
|
|
|
.avatar-veza__status--busy {
|
|
background: var(--veza-error);
|
|
}
|
|
|
|
.avatar-veza__status--offline {
|
|
background: var(--veza-grey-400);
|
|
}
|
|
|
|
/* Avatar group */
|
|
.avatar-group-veza {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar-group-veza .avatar-veza {
|
|
margin-left: -8px;
|
|
border: 2px solid var(--veza-void);
|
|
}
|
|
|
|
.dark .avatar-group-veza .avatar-veza {
|
|
border-color: var(--veza-graphite);
|
|
}
|
|
|
|
.avatar-group-veza .avatar-veza:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.avatar-group-veza .avatar-veza:hover {
|
|
transform: translateY(-2px);
|
|
z-index: 10;
|
|
}
|