|
1 | 1 | /* Base Avatar Styles */ |
2 | | -.avatar { |
| 2 | +.kroma-avatar { |
3 | 3 | display: inline-flex; |
4 | 4 | align-items: center; |
5 | 5 | justify-content: center; |
|
11 | 11 | position: relative; |
12 | 12 | transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; |
13 | 13 | box-shadow: var(--shadow-sm); |
| 14 | + isolation: isolate; /* Prevent nested contexts from affecting styles */ |
14 | 15 | } |
15 | 16 |
|
16 | 17 | /* Avatar Sizes */ |
17 | | -.avatar[data-size="sm"] { |
| 18 | +.kroma-avatar[data-size="sm"] { |
18 | 19 | width: clamp(2rem, 2vw, 3rem); |
19 | 20 | height: clamp(2rem, 2vw, 3rem); |
20 | 21 | font-size: clamp(0.75rem, 1vw + 0.25rem, 1rem); |
21 | 22 | } |
22 | 23 |
|
23 | | -.avatar[data-size="md"] { |
| 24 | +.kroma-avatar[data-size="md"] { |
24 | 25 | width: clamp(3rem, 3vw, 4rem); |
25 | 26 | height: clamp(3rem, 3vw, 4rem); |
26 | 27 | font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem); |
27 | 28 | } |
28 | 29 |
|
29 | | -.avatar[data-size="lg"] { |
| 30 | +.kroma-avatar[data-size="lg"] { |
30 | 31 | width: clamp(4rem, 4vw, 5rem); |
31 | 32 | height: clamp(4rem, 4vw, 5rem); |
32 | 33 | font-size: clamp(1.25rem, 1vw + 0.75rem, 1.5rem); |
33 | 34 | } |
34 | 35 |
|
35 | | -.avatar[data-size="xl"] { |
| 36 | +.kroma-avatar[data-size="xl"] { |
36 | 37 | width: clamp(5rem, 5vw, 6rem); |
37 | 38 | height: clamp(5rem, 5vw, 6rem); |
38 | 39 | font-size: clamp(1.5rem, 1vw + 1rem, 1.75rem); |
39 | 40 | } |
40 | 41 |
|
41 | 42 | /* Avatar Shapes */ |
42 | | -.avatar[data-shape="rounded"] { |
| 43 | +.kroma-avatar[data-shape="rounded"] { |
43 | 44 | border-radius: var(--radius-lg); |
44 | 45 | } |
45 | | -.avatar[data-shape="square"] { |
| 46 | + |
| 47 | +.kroma-avatar[data-shape="square"] { |
46 | 48 | border-radius: 0; |
47 | 49 | } |
48 | 50 |
|
49 | 51 | /* Avatar Variants */ |
50 | | -.avatar[data-variant] { |
| 52 | +.kroma-avatar[data-variant] { |
51 | 53 | background-color: var(--variant-bg); |
52 | 54 | color: var(--variant-text); |
53 | 55 | } |
54 | 56 |
|
55 | 57 | /* Ghost Variant */ |
56 | | -.avatar[data-variant="ghost"] { |
| 58 | +.kroma-avatar[data-variant="ghost"] { |
57 | 59 | background-color: transparent; |
58 | 60 | border: 1.5px dashed var(--variant-border, var(--neutral-400)); |
59 | 61 | color: var(--neutral-500); |
60 | 62 | box-shadow: none; |
61 | 63 | } |
62 | | -.avatar[data-variant="ghost"] .avatar-status { |
| 64 | + |
| 65 | +.kroma-avatar[data-variant="ghost"] .avatar-status { |
63 | 66 | background-color: transparent; |
64 | 67 | border: 2px dashed var(--neutral-400); |
65 | 68 | } |
66 | 69 |
|
67 | 70 | /* Avatar with Image */ |
68 | | -.avatar img { |
| 71 | +.kroma-avatar img { |
69 | 72 | width: 100%; |
70 | 73 | height: 100%; |
71 | 74 | object-fit: cover; |
72 | 75 | display: block; |
73 | 76 | transition: transform 0.3s ease; |
74 | 77 | } |
75 | | -.avatar img:hover { |
| 78 | + |
| 79 | +.kroma-avatar img:hover { |
76 | 80 | transform: scale(1.1); |
77 | 81 | } /* Zoom effect on hover */ |
78 | 82 |
|
79 | 83 | /* Initials Avatar */ |
80 | | -.avatar-initials { |
| 84 | +.kroma-avatar-initials { |
81 | 85 | font-size: inherit; |
| 86 | + font-weight: 700; /* Bold initials for better visibility */ |
| 87 | + line-height: 1; /* Prevent misalignment */ |
| 88 | + text-transform: uppercase; /* Uniform appearance for initials */ |
82 | 89 | } |
83 | 90 |
|
84 | 91 | /* Status Indicators */ |
85 | | -.avatar-status { |
| 92 | +.kroma-avatar-status { |
86 | 93 | position: absolute; |
87 | 94 | bottom: 0; |
88 | 95 | right: 0; |
89 | 96 | width: 0.75rem; |
90 | 97 | height: 0.75rem; |
91 | 98 | border-radius: 50%; |
92 | | - border: 2px solid #fff; |
| 99 | + border: 2px solid var(--status-border-color, #fff); /* Customizable border color */ |
93 | 100 | background-color: var(--status-color, var(--success-bg)); |
94 | 101 | box-shadow: var(--shadow-sm); |
95 | 102 | } |
96 | 103 |
|
97 | 104 | /* Status Colors */ |
98 | | -.avatar[data-status="online"] .avatar-status { |
| 105 | +.kroma-avatar[data-status="online"] .kroma-avatar-status { |
99 | 106 | --status-color: var(--success-bg); |
100 | 107 | } |
101 | | -.avatar[data-status="offline"] .avatar-status { |
| 108 | + |
| 109 | +.kroma-avatar[data-status="offline"] .kroma-avatar-status { |
102 | 110 | --status-color: var(--neutral-400); |
103 | 111 | } |
104 | | -.avatar[data-status="busy"] .avatar-status { |
| 112 | + |
| 113 | +.kroma-avatar[data-status="busy"] .kroma-avatar-status { |
105 | 114 | --status-color: var(--danger-bg); |
106 | 115 | } |
107 | | -.avatar[data-status="away"] .avatar-status { |
| 116 | + |
| 117 | +.kroma-avatar[data-status="away"] .kroma-avatar-status { |
108 | 118 | --status-color: var(--warning-bg); |
109 | 119 | } |
110 | 120 |
|
111 | 121 | /* Avatar Group */ |
112 | | -.avatar-group { |
| 122 | +.kroma-avatar-group { |
113 | 123 | display: flex; |
114 | 124 | align-items: center; |
115 | 125 | } |
116 | | -.avatar-group .avatar:not(:first-child) { |
117 | | - margin-left: -0.5rem; |
118 | | - border: 2px solid #fff; |
119 | | - box-shadow: var(--shadow-sm); /* Slight shadow for overlap */ |
| 126 | + |
| 127 | +.kroma-avatar-group .kroma-avatar:not(:first-child) { |
| 128 | + margin-left: -0.5rem; /* Overlap effect */ |
| 129 | + border: 2px solid var(--group-border-color, #fff); /* Customizable overlap border */ |
| 130 | + box-shadow: var(--shadow-sm); /* Slight shadow for depth */ |
120 | 131 | } |
121 | 132 |
|
122 | | -/* Pulsing Avatar */ |
123 | | -.avatar[data-effect="pulsing"] { |
| 133 | +/* Pulsing Avatar Effect */ |
| 134 | +.kroma-avatar[data-effect="pulsing"] { |
124 | 135 | position: relative; |
125 | 136 | z-index: 1; |
126 | 137 | } |
127 | | -.avatar[data-effect="pulsing"]::after { |
| 138 | + |
| 139 | +.kroma-avatar[data-effect="pulsing"]::after { |
128 | 140 | content: ""; |
129 | 141 | position: absolute; |
130 | 142 | top: 0; |
|
136 | 148 | animation: avatarPulse 3s ease-in-out infinite; |
137 | 149 | z-index: -1; |
138 | 150 | } |
| 151 | + |
139 | 152 | @keyframes avatarPulse { |
140 | 153 | 0% { |
141 | 154 | transform: scale(1); |
|
148 | 161 | } |
149 | 162 |
|
150 | 163 | /* Disabled Avatar */ |
151 | | -.avatar[data-disabled="true"] { |
| 164 | +.kroma-avatar[data-disabled="true"] { |
152 | 165 | opacity: 0.5; |
153 | 166 | cursor: not-allowed; |
| 167 | + pointer-events: none; /* Prevent interaction */ |
154 | 168 | } |
155 | 169 |
|
156 | 170 | /* Bordered Avatar */ |
157 | | -.avatar-bordered { |
| 171 | +.kroma-avatar-bordered { |
158 | 172 | position: relative; |
159 | 173 | display: inline-flex; |
160 | 174 | align-items: center; |
|
164 | 178 | overflow: hidden; |
165 | 179 | box-shadow: var(--shadow-xs); |
166 | 180 | } |
167 | | -.avatar[data-variant].avatar-bordered { |
| 181 | + |
| 182 | +.kroma-avatar[data-variant].kroma-avatar-bordered { |
168 | 183 | border-color: var(--variant-border); |
169 | 184 | } |
0 commit comments