@vialiq/flux-ui 0.6.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/_badge.scss +43 -0
- package/components/_index.scss +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Badge component base styles.
|
|
3
|
+
*
|
|
4
|
+
* Shared foundation styles for the badge component.
|
|
5
|
+
* Provides flexbox layout, spacing via tokens, and interaction states.
|
|
6
|
+
* Component-specific colors and sizing defined by consuming components.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
@use '../styles/variables' as tokens;
|
|
10
|
+
|
|
11
|
+
@layer components {
|
|
12
|
+
.badge {
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
|
|
19
|
+
font-size: var(--vi-badge-font-size, 11px);
|
|
20
|
+
font-weight: var(--vi-badge-font-weight, #{tokens.$font-weight-semibold});
|
|
21
|
+
padding: var(--vi-badge-padding, 2px 8px);
|
|
22
|
+
border-radius: var(--vi-badge-border-radius, 9999px);
|
|
23
|
+
gap: var(--vi-badge-gap, 4px);
|
|
24
|
+
|
|
25
|
+
border: #{tokens.$border-width-thin} solid transparent;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.dot {
|
|
29
|
+
display: inline-block;
|
|
30
|
+
width: var(--vi-badge-dot-size, 8px);
|
|
31
|
+
height: var(--vi-badge-dot-size, 8px);
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
background-color: currentColor;
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.icon {
|
|
38
|
+
display: inline-flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
flex-shrink: 0;
|
|
42
|
+
}
|
|
43
|
+
}
|
package/components/_index.scss
CHANGED