@skygraph/styles 0.6.4 → 0.6.6
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/README.md +98 -98
- package/components/autocomplete.css +35 -35
- package/components/autofield.css +67 -67
- package/components/avatar.css +37 -37
- package/components/badge.css +102 -102
- package/components/breadcrumb.css +29 -29
- package/components/button.css +181 -181
- package/components/calendar.css +408 -408
- package/components/carousel.css +102 -102
- package/components/cascader.css +380 -380
- package/components/charts.css +408 -408
- package/components/checkbox.css +114 -114
- package/components/collapse.css +166 -166
- package/components/colorpicker.css +252 -252
- package/components/context-menu.css +95 -95
- package/components/descriptions.css +82 -82
- package/components/diagram.css +435 -435
- package/components/drawer.css +124 -124
- package/components/dropdown.css +110 -110
- package/components/empty.css +25 -25
- package/components/event-timeline.css +134 -134
- package/components/field.css +35 -35
- package/components/form.css +115 -115
- package/components/gantt.css +166 -166
- package/components/input-number.css +76 -76
- package/components/input-password.css +104 -104
- package/components/input.css +211 -211
- package/components/list.css +366 -366
- package/components/mentions.css +54 -54
- package/components/menu.css +326 -326
- package/components/modal.css +1 -0
- package/components/notification.css +128 -128
- package/components/pagination.css +162 -162
- package/components/popconfirm.css +95 -95
- package/components/progress.css +116 -116
- package/components/radio.css +95 -95
- package/components/rate.css +48 -48
- package/components/resource-calendar.css +224 -224
- package/components/result.css +45 -45
- package/components/schema-form-editor.css +433 -433
- package/components/search-input.css +112 -112
- package/components/segmented.css +76 -76
- package/components/select.css +181 -181
- package/components/skeleton.css +72 -72
- package/components/slider.css +51 -51
- package/components/spin.css +102 -102
- package/components/steps.css +194 -194
- package/components/switch.css +75 -75
- package/components/table.css +9 -1
- package/components/tabs.css +137 -137
- package/components/tag.css +61 -61
- package/components/textarea.css +22 -22
- package/components/timeline.css +169 -169
- package/components/timepicker.css +224 -224
- package/components/tooltip.css +91 -91
- package/components/transfer.css +140 -140
- package/components/tree.css +601 -601
- package/components/treeselect.css +221 -221
- package/components/upload.css +124 -124
- package/index.css +70 -70
- package/index.d.ts +9 -9
- package/package.json +1 -1
- package/print.css +88 -88
- package/reset.css +17 -17
- package/themes/dark.css +17 -17
- package/themes/default.css +14 -14
- package/tokens.css +310 -310
- package/transitions.css +158 -158
package/README.md
CHANGED
|
@@ -1,98 +1,98 @@
|
|
|
1
|
-
# @skygraph/styles
|
|
2
|
-
|
|
3
|
-
Framework-agnostic CSS for SkyGraph — design tokens, themes, transitions, print
|
|
4
|
-
layer and per-component stylesheets. Zero JS, no runtime, just CSS Variables.
|
|
5
|
-
|
|
6
|
-
This package is the styling foundation shared by **all** SkyGraph adapters
|
|
7
|
-
(`@skygraph/react`, future `@skygraph/vue`, `@skygraph/angular`, …). The CSS
|
|
8
|
-
selectors target `.sg-*` class names, which are emitted identically by every
|
|
9
|
-
adapter — so a single import gives you consistent visuals regardless of the
|
|
10
|
-
framework you ship the components in.
|
|
11
|
-
|
|
12
|
-
## Install
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
pnpm add @skygraph/styles
|
|
16
|
-
# or: npm install @skygraph/styles
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
If you install one of the meta-packages (`skygraph-react`, `skygraph-vue`)
|
|
20
|
-
or an adapter directly (`@skygraph/react`, `@skygraph/vue`,
|
|
21
|
-
`@skygraph/angular`), this package is a transitive dependency — you don't
|
|
22
|
-
need to install or import it separately.
|
|
23
|
-
|
|
24
|
-
## Usage
|
|
25
|
-
|
|
26
|
-
The simplest path is to import the bundle once at the entry of your app:
|
|
27
|
-
|
|
28
|
-
```ts
|
|
29
|
-
import '@skygraph/styles'
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
That ships tokens, reset, themes, transitions, print layer and every component
|
|
33
|
-
stylesheet (≈ one CSS file per component).
|
|
34
|
-
|
|
35
|
-
### Cherry-pick component stylesheets
|
|
36
|
-
|
|
37
|
-
If you only use a subset of components and want a smaller payload, import per
|
|
38
|
-
slice:
|
|
39
|
-
|
|
40
|
-
```ts
|
|
41
|
-
import '@skygraph/styles/tokens'
|
|
42
|
-
import '@skygraph/styles/reset'
|
|
43
|
-
import '@skygraph/styles/components/button'
|
|
44
|
-
import '@skygraph/styles/components/input'
|
|
45
|
-
import '@skygraph/styles/components/table'
|
|
46
|
-
import '@skygraph/styles/transitions'
|
|
47
|
-
import '@skygraph/styles/print'
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Themes
|
|
51
|
-
|
|
52
|
-
Both light and dark semantic tokens live in `tokens.css` — switch by setting a
|
|
53
|
-
data attribute on any wrapper element:
|
|
54
|
-
|
|
55
|
-
```html
|
|
56
|
-
<html data-sg-theme="dark"> ... </html>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
The dedicated `./themes/default` and `./themes/dark` entrypoints are
|
|
60
|
-
convenience re-exports of the same `tokens.css` (kept for parity with older
|
|
61
|
-
docs and tutorials).
|
|
62
|
-
|
|
63
|
-
## Subpath exports
|
|
64
|
-
|
|
65
|
-
| Subpath | What it ships |
|
|
66
|
-
| -------------------------------- | ----------------------------------- |
|
|
67
|
-
| `@skygraph/styles` | full bundle (`index.css`) |
|
|
68
|
-
| `@skygraph/styles/tokens` | design tokens only |
|
|
69
|
-
| `@skygraph/styles/reset` | minimal CSS reset |
|
|
70
|
-
| `@skygraph/styles/transitions` | transition keyframes / classes |
|
|
71
|
-
| `@skygraph/styles/print` | global `@media print` layer |
|
|
72
|
-
| `@skygraph/styles/themes/*` | theme presets (`default`, `dark`) |
|
|
73
|
-
| `@skygraph/styles/components/*` | one stylesheet per component |
|
|
74
|
-
|
|
75
|
-
## Customisation
|
|
76
|
-
|
|
77
|
-
Stylesheets only read CSS Variables — override tokens to re-skin globally or
|
|
78
|
-
per-component, no `!important` wars:
|
|
79
|
-
|
|
80
|
-
```css
|
|
81
|
-
:root {
|
|
82
|
-
--sg-color-primary: #7c3aed;
|
|
83
|
-
--sg-border-radius: 8px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.dashboard-area {
|
|
87
|
-
/* component-scoped override */
|
|
88
|
-
--sg-table-row-hover-bg: rgba(124, 58, 237, 0.06);
|
|
89
|
-
}
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
Full reference of stable tokens, slot classes and `classNames` / `styles` API
|
|
93
|
-
contract lives in the root repo:
|
|
94
|
-
[`docs/styling-contract.md`](../../docs/styling-contract.md).
|
|
95
|
-
|
|
96
|
-
## License
|
|
97
|
-
|
|
98
|
-
MIT — same as the rest of SkyGraph.
|
|
1
|
+
# @skygraph/styles
|
|
2
|
+
|
|
3
|
+
Framework-agnostic CSS for SkyGraph — design tokens, themes, transitions, print
|
|
4
|
+
layer and per-component stylesheets. Zero JS, no runtime, just CSS Variables.
|
|
5
|
+
|
|
6
|
+
This package is the styling foundation shared by **all** SkyGraph adapters
|
|
7
|
+
(`@skygraph/react`, future `@skygraph/vue`, `@skygraph/angular`, …). The CSS
|
|
8
|
+
selectors target `.sg-*` class names, which are emitted identically by every
|
|
9
|
+
adapter — so a single import gives you consistent visuals regardless of the
|
|
10
|
+
framework you ship the components in.
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
pnpm add @skygraph/styles
|
|
16
|
+
# or: npm install @skygraph/styles
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
If you install one of the meta-packages (`skygraph-react`, `skygraph-vue`)
|
|
20
|
+
or an adapter directly (`@skygraph/react`, `@skygraph/vue`,
|
|
21
|
+
`@skygraph/angular`), this package is a transitive dependency — you don't
|
|
22
|
+
need to install or import it separately.
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
The simplest path is to import the bundle once at the entry of your app:
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import '@skygraph/styles'
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
That ships tokens, reset, themes, transitions, print layer and every component
|
|
33
|
+
stylesheet (≈ one CSS file per component).
|
|
34
|
+
|
|
35
|
+
### Cherry-pick component stylesheets
|
|
36
|
+
|
|
37
|
+
If you only use a subset of components and want a smaller payload, import per
|
|
38
|
+
slice:
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import '@skygraph/styles/tokens'
|
|
42
|
+
import '@skygraph/styles/reset'
|
|
43
|
+
import '@skygraph/styles/components/button'
|
|
44
|
+
import '@skygraph/styles/components/input'
|
|
45
|
+
import '@skygraph/styles/components/table'
|
|
46
|
+
import '@skygraph/styles/transitions'
|
|
47
|
+
import '@skygraph/styles/print'
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Themes
|
|
51
|
+
|
|
52
|
+
Both light and dark semantic tokens live in `tokens.css` — switch by setting a
|
|
53
|
+
data attribute on any wrapper element:
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<html data-sg-theme="dark"> ... </html>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
The dedicated `./themes/default` and `./themes/dark` entrypoints are
|
|
60
|
+
convenience re-exports of the same `tokens.css` (kept for parity with older
|
|
61
|
+
docs and tutorials).
|
|
62
|
+
|
|
63
|
+
## Subpath exports
|
|
64
|
+
|
|
65
|
+
| Subpath | What it ships |
|
|
66
|
+
| -------------------------------- | ----------------------------------- |
|
|
67
|
+
| `@skygraph/styles` | full bundle (`index.css`) |
|
|
68
|
+
| `@skygraph/styles/tokens` | design tokens only |
|
|
69
|
+
| `@skygraph/styles/reset` | minimal CSS reset |
|
|
70
|
+
| `@skygraph/styles/transitions` | transition keyframes / classes |
|
|
71
|
+
| `@skygraph/styles/print` | global `@media print` layer |
|
|
72
|
+
| `@skygraph/styles/themes/*` | theme presets (`default`, `dark`) |
|
|
73
|
+
| `@skygraph/styles/components/*` | one stylesheet per component |
|
|
74
|
+
|
|
75
|
+
## Customisation
|
|
76
|
+
|
|
77
|
+
Stylesheets only read CSS Variables — override tokens to re-skin globally or
|
|
78
|
+
per-component, no `!important` wars:
|
|
79
|
+
|
|
80
|
+
```css
|
|
81
|
+
:root {
|
|
82
|
+
--sg-color-primary: #7c3aed;
|
|
83
|
+
--sg-border-radius: 8px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.dashboard-area {
|
|
87
|
+
/* component-scoped override */
|
|
88
|
+
--sg-table-row-hover-bg: rgba(124, 58, 237, 0.06);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Full reference of stable tokens, slot classes and `classNames` / `styles` API
|
|
93
|
+
contract lives in the root repo:
|
|
94
|
+
[`docs/styling-contract.md`](../../docs/styling-contract.md).
|
|
95
|
+
|
|
96
|
+
## License
|
|
97
|
+
|
|
98
|
+
MIT — same as the rest of SkyGraph.
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
.sg-autocomplete {
|
|
2
|
-
position: relative;
|
|
3
|
-
display: inline-block;
|
|
4
|
-
width: 100%;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.sg-autocomplete-loading {
|
|
8
|
-
--sg-spin-color: var(--sg-color-text-tertiary);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.sg-autocomplete-dropdown {
|
|
12
|
-
position: absolute;
|
|
13
|
-
top: 100%;
|
|
14
|
-
left: 0;
|
|
15
|
-
right: 0;
|
|
16
|
-
z-index: var(--sg-z-dropdown);
|
|
17
|
-
margin-top: 4px;
|
|
18
|
-
padding: var(--sg-padding-xs) 0;
|
|
19
|
-
background: var(--sg-color-bg-elevated);
|
|
20
|
-
border-radius: var(--sg-border-radius);
|
|
21
|
-
box-shadow: var(--sg-shadow-lg);
|
|
22
|
-
max-height: 256px;
|
|
23
|
-
overflow-y: auto;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.sg-autocomplete-option {
|
|
27
|
-
padding: var(--sg-padding-xs) var(--sg-padding-md);
|
|
28
|
-
cursor: pointer;
|
|
29
|
-
color: var(--sg-color-text);
|
|
30
|
-
transition: background var(--sg-transition-duration);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.sg-autocomplete-option:hover {
|
|
34
|
-
background: var(--sg-color-bg-hover);
|
|
35
|
-
}
|
|
1
|
+
.sg-autocomplete {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: inline-block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.sg-autocomplete-loading {
|
|
8
|
+
--sg-spin-color: var(--sg-color-text-tertiary);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.sg-autocomplete-dropdown {
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 100%;
|
|
14
|
+
left: 0;
|
|
15
|
+
right: 0;
|
|
16
|
+
z-index: var(--sg-z-dropdown);
|
|
17
|
+
margin-top: 4px;
|
|
18
|
+
padding: var(--sg-padding-xs) 0;
|
|
19
|
+
background: var(--sg-color-bg-elevated);
|
|
20
|
+
border-radius: var(--sg-border-radius);
|
|
21
|
+
box-shadow: var(--sg-shadow-lg);
|
|
22
|
+
max-height: 256px;
|
|
23
|
+
overflow-y: auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.sg-autocomplete-option {
|
|
27
|
+
padding: var(--sg-padding-xs) var(--sg-padding-md);
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
color: var(--sg-color-text);
|
|
30
|
+
transition: background var(--sg-transition-duration);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.sg-autocomplete-option:hover {
|
|
34
|
+
background: var(--sg-color-bg-hover);
|
|
35
|
+
}
|
package/components/autofield.css
CHANGED
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
/* AutoField — schema-driven field renderer.
|
|
2
|
-
*
|
|
3
|
-
* Inputs are plain native elements (no Input wrapping) so the control stays
|
|
4
|
-
* framework-agnostic and round-trips native form behaviour. This sheet is the
|
|
5
|
-
* single source of truth for both adapters (`AutoField.tsx` / `AutoField.vue`)
|
|
6
|
-
* so the rendered look is identical across React and Vue. */
|
|
7
|
-
|
|
8
|
-
.sg-autofield {
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: column;
|
|
11
|
-
gap: 4px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.sg-autofield-label {
|
|
15
|
-
font-weight: 500;
|
|
16
|
-
font-size: 14px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.sg-autofield-input {
|
|
20
|
-
width: 100%;
|
|
21
|
-
padding: 6px 12px;
|
|
22
|
-
border: 1px solid var(--sg-color-border, #d9d9d9);
|
|
23
|
-
border-radius: var(--sg-border-radius, 6px);
|
|
24
|
-
background: var(--sg-color-bg-container, #fff);
|
|
25
|
-
color: var(--sg-color-text);
|
|
26
|
-
font-size: 14px;
|
|
27
|
-
font-family: inherit;
|
|
28
|
-
line-height: 1.4;
|
|
29
|
-
box-sizing: border-box;
|
|
30
|
-
outline: none;
|
|
31
|
-
transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.sg-autofield-input:disabled {
|
|
35
|
-
background: var(--sg-color-bg-disabled, #f5f5f5);
|
|
36
|
-
color: var(--sg-color-text-disabled);
|
|
37
|
-
cursor: not-allowed;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.sg-autofield-input:focus,
|
|
41
|
-
.sg-autofield-input:focus-visible {
|
|
42
|
-
border-color: var(--sg-color-primary);
|
|
43
|
-
box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.sg-autofield-input-error {
|
|
47
|
-
border-color: var(--sg-color-error, #ff4d4f);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.sg-autofield-input-warning {
|
|
51
|
-
border-color: var(--sg-color-warning, #faad14);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.sg-autofield-input-textarea {
|
|
55
|
-
min-height: 80px;
|
|
56
|
-
resize: vertical;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.sg-autofield-input-multiple {
|
|
60
|
-
min-height: 80px;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.sg-autofield-input-color {
|
|
64
|
-
width: 48px;
|
|
65
|
-
height: 32px;
|
|
66
|
-
padding: 2px;
|
|
67
|
-
}
|
|
1
|
+
/* AutoField — schema-driven field renderer.
|
|
2
|
+
*
|
|
3
|
+
* Inputs are plain native elements (no Input wrapping) so the control stays
|
|
4
|
+
* framework-agnostic and round-trips native form behaviour. This sheet is the
|
|
5
|
+
* single source of truth for both adapters (`AutoField.tsx` / `AutoField.vue`)
|
|
6
|
+
* so the rendered look is identical across React and Vue. */
|
|
7
|
+
|
|
8
|
+
.sg-autofield {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
gap: 4px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.sg-autofield-label {
|
|
15
|
+
font-weight: 500;
|
|
16
|
+
font-size: 14px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.sg-autofield-input {
|
|
20
|
+
width: 100%;
|
|
21
|
+
padding: 6px 12px;
|
|
22
|
+
border: 1px solid var(--sg-color-border, #d9d9d9);
|
|
23
|
+
border-radius: var(--sg-border-radius, 6px);
|
|
24
|
+
background: var(--sg-color-bg-container, #fff);
|
|
25
|
+
color: var(--sg-color-text);
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
font-family: inherit;
|
|
28
|
+
line-height: 1.4;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
outline: none;
|
|
31
|
+
transition: border-color var(--sg-transition-duration) var(--sg-transition-timing);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.sg-autofield-input:disabled {
|
|
35
|
+
background: var(--sg-color-bg-disabled, #f5f5f5);
|
|
36
|
+
color: var(--sg-color-text-disabled);
|
|
37
|
+
cursor: not-allowed;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.sg-autofield-input:focus,
|
|
41
|
+
.sg-autofield-input:focus-visible {
|
|
42
|
+
border-color: var(--sg-color-primary);
|
|
43
|
+
box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.sg-autofield-input-error {
|
|
47
|
+
border-color: var(--sg-color-error, #ff4d4f);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.sg-autofield-input-warning {
|
|
51
|
+
border-color: var(--sg-color-warning, #faad14);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.sg-autofield-input-textarea {
|
|
55
|
+
min-height: 80px;
|
|
56
|
+
resize: vertical;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.sg-autofield-input-multiple {
|
|
60
|
+
min-height: 80px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.sg-autofield-input-color {
|
|
64
|
+
width: 48px;
|
|
65
|
+
height: 32px;
|
|
66
|
+
padding: 2px;
|
|
67
|
+
}
|
package/components/avatar.css
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
.sg-avatar {
|
|
2
|
-
display: inline-flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
justify-content: center;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
background: var(--sg-color-text-disabled);
|
|
7
|
-
color: var(--sg-color-white, #fff);
|
|
8
|
-
font-weight: 500;
|
|
9
|
-
vertical-align: middle;
|
|
10
|
-
white-space: nowrap;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.sg-avatar-circle {
|
|
14
|
-
border-radius: 50%;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.sg-avatar-square {
|
|
18
|
-
border-radius: var(--sg-border-radius);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.sg-avatar-image {
|
|
22
|
-
width: 100%;
|
|
23
|
-
height: 100%;
|
|
24
|
-
object-fit: cover;
|
|
25
|
-
display: block;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.sg-avatar-icon {
|
|
29
|
-
display: flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
justify-content: center;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.sg-avatar-text {
|
|
35
|
-
white-space: nowrap;
|
|
36
|
-
user-select: none;
|
|
37
|
-
}
|
|
1
|
+
.sg-avatar {
|
|
2
|
+
display: inline-flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
background: var(--sg-color-text-disabled);
|
|
7
|
+
color: var(--sg-color-white, #fff);
|
|
8
|
+
font-weight: 500;
|
|
9
|
+
vertical-align: middle;
|
|
10
|
+
white-space: nowrap;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.sg-avatar-circle {
|
|
14
|
+
border-radius: 50%;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.sg-avatar-square {
|
|
18
|
+
border-radius: var(--sg-border-radius);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.sg-avatar-image {
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: 100%;
|
|
24
|
+
object-fit: cover;
|
|
25
|
+
display: block;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.sg-avatar-icon {
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.sg-avatar-text {
|
|
35
|
+
white-space: nowrap;
|
|
36
|
+
user-select: none;
|
|
37
|
+
}
|
package/components/badge.css
CHANGED
|
@@ -1,102 +1,102 @@
|
|
|
1
|
-
.sg-badge {
|
|
2
|
-
position: relative;
|
|
3
|
-
display: inline-block;
|
|
4
|
-
line-height: 1;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
/* Standalone mode: count/dot rendered without a wrapped child.
|
|
8
|
-
Lays out the indicator inline instead of as an absolute overlay so it
|
|
9
|
-
does not get clipped by parents (table cells, flex rows, etc.). */
|
|
10
|
-
.sg-badge-standalone {
|
|
11
|
-
display: inline-flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
vertical-align: middle;
|
|
14
|
-
line-height: var(--sg-line-height);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.sg-badge-standalone > .sg-badge-count,
|
|
18
|
-
.sg-badge-standalone > .sg-badge-dot {
|
|
19
|
-
position: static;
|
|
20
|
-
transform: none;
|
|
21
|
-
box-shadow: none;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.sg-badge-count {
|
|
25
|
-
position: absolute;
|
|
26
|
-
top: 0;
|
|
27
|
-
right: 0;
|
|
28
|
-
transform: translate(50%, -50%);
|
|
29
|
-
min-width: 20px;
|
|
30
|
-
height: 20px;
|
|
31
|
-
padding: 0 6px;
|
|
32
|
-
font-size: var(--sg-font-size-sm);
|
|
33
|
-
font-weight: 500;
|
|
34
|
-
line-height: 20px;
|
|
35
|
-
text-align: center;
|
|
36
|
-
white-space: nowrap;
|
|
37
|
-
color: var(--sg-color-white, #fff);
|
|
38
|
-
background: var(--sg-color-error);
|
|
39
|
-
border-radius: 10px;
|
|
40
|
-
box-shadow: 0 0 0 1px var(--sg-color-bg);
|
|
41
|
-
z-index: var(--sg-z-base);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.sg-badge-dot {
|
|
45
|
-
position: absolute;
|
|
46
|
-
top: 0;
|
|
47
|
-
right: 0;
|
|
48
|
-
transform: translate(50%, -50%);
|
|
49
|
-
width: 8px;
|
|
50
|
-
height: 8px;
|
|
51
|
-
background: var(--sg-color-error);
|
|
52
|
-
border-radius: 50%;
|
|
53
|
-
box-shadow: 0 0 0 1px var(--sg-color-bg);
|
|
54
|
-
z-index: var(--sg-z-base);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/* Status badge (standalone) */
|
|
58
|
-
.sg-badge-status {
|
|
59
|
-
display: inline-flex;
|
|
60
|
-
align-items: center;
|
|
61
|
-
gap: var(--sg-padding-sm);
|
|
62
|
-
line-height: var(--sg-line-height);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.sg-badge-status-dot {
|
|
66
|
-
width: 6px;
|
|
67
|
-
height: 6px;
|
|
68
|
-
border-radius: 50%;
|
|
69
|
-
flex-shrink: 0;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.sg-badge-status-success {
|
|
73
|
-
background: var(--sg-color-success);
|
|
74
|
-
}
|
|
75
|
-
.sg-badge-status-error {
|
|
76
|
-
background: var(--sg-color-error);
|
|
77
|
-
}
|
|
78
|
-
.sg-badge-status-warning {
|
|
79
|
-
background: var(--sg-color-warning);
|
|
80
|
-
}
|
|
81
|
-
.sg-badge-status-default {
|
|
82
|
-
background: var(--sg-color-text-disabled);
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.sg-badge-status-processing {
|
|
86
|
-
background: var(--sg-color-primary);
|
|
87
|
-
animation: sg-badge-processing 1.2s ease-in-out infinite;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@keyframes sg-badge-processing {
|
|
91
|
-
0% {
|
|
92
|
-
box-shadow: 0 0 0 0 var(--sg-color-primary);
|
|
93
|
-
}
|
|
94
|
-
100% {
|
|
95
|
-
box-shadow: 0 0 0 4px transparent;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.sg-badge-status-text {
|
|
100
|
-
font-size: var(--sg-font-size);
|
|
101
|
-
color: var(--sg-color-text);
|
|
102
|
-
}
|
|
1
|
+
.sg-badge {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: inline-block;
|
|
4
|
+
line-height: 1;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* Standalone mode: count/dot rendered without a wrapped child.
|
|
8
|
+
Lays out the indicator inline instead of as an absolute overlay so it
|
|
9
|
+
does not get clipped by parents (table cells, flex rows, etc.). */
|
|
10
|
+
.sg-badge-standalone {
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
vertical-align: middle;
|
|
14
|
+
line-height: var(--sg-line-height);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.sg-badge-standalone > .sg-badge-count,
|
|
18
|
+
.sg-badge-standalone > .sg-badge-dot {
|
|
19
|
+
position: static;
|
|
20
|
+
transform: none;
|
|
21
|
+
box-shadow: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.sg-badge-count {
|
|
25
|
+
position: absolute;
|
|
26
|
+
top: 0;
|
|
27
|
+
right: 0;
|
|
28
|
+
transform: translate(50%, -50%);
|
|
29
|
+
min-width: 20px;
|
|
30
|
+
height: 20px;
|
|
31
|
+
padding: 0 6px;
|
|
32
|
+
font-size: var(--sg-font-size-sm);
|
|
33
|
+
font-weight: 500;
|
|
34
|
+
line-height: 20px;
|
|
35
|
+
text-align: center;
|
|
36
|
+
white-space: nowrap;
|
|
37
|
+
color: var(--sg-color-white, #fff);
|
|
38
|
+
background: var(--sg-color-error);
|
|
39
|
+
border-radius: 10px;
|
|
40
|
+
box-shadow: 0 0 0 1px var(--sg-color-bg);
|
|
41
|
+
z-index: var(--sg-z-base);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.sg-badge-dot {
|
|
45
|
+
position: absolute;
|
|
46
|
+
top: 0;
|
|
47
|
+
right: 0;
|
|
48
|
+
transform: translate(50%, -50%);
|
|
49
|
+
width: 8px;
|
|
50
|
+
height: 8px;
|
|
51
|
+
background: var(--sg-color-error);
|
|
52
|
+
border-radius: 50%;
|
|
53
|
+
box-shadow: 0 0 0 1px var(--sg-color-bg);
|
|
54
|
+
z-index: var(--sg-z-base);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Status badge (standalone) */
|
|
58
|
+
.sg-badge-status {
|
|
59
|
+
display: inline-flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
gap: var(--sg-padding-sm);
|
|
62
|
+
line-height: var(--sg-line-height);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.sg-badge-status-dot {
|
|
66
|
+
width: 6px;
|
|
67
|
+
height: 6px;
|
|
68
|
+
border-radius: 50%;
|
|
69
|
+
flex-shrink: 0;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.sg-badge-status-success {
|
|
73
|
+
background: var(--sg-color-success);
|
|
74
|
+
}
|
|
75
|
+
.sg-badge-status-error {
|
|
76
|
+
background: var(--sg-color-error);
|
|
77
|
+
}
|
|
78
|
+
.sg-badge-status-warning {
|
|
79
|
+
background: var(--sg-color-warning);
|
|
80
|
+
}
|
|
81
|
+
.sg-badge-status-default {
|
|
82
|
+
background: var(--sg-color-text-disabled);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.sg-badge-status-processing {
|
|
86
|
+
background: var(--sg-color-primary);
|
|
87
|
+
animation: sg-badge-processing 1.2s ease-in-out infinite;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@keyframes sg-badge-processing {
|
|
91
|
+
0% {
|
|
92
|
+
box-shadow: 0 0 0 0 var(--sg-color-primary);
|
|
93
|
+
}
|
|
94
|
+
100% {
|
|
95
|
+
box-shadow: 0 0 0 4px transparent;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.sg-badge-status-text {
|
|
100
|
+
font-size: var(--sg-font-size);
|
|
101
|
+
color: var(--sg-color-text);
|
|
102
|
+
}
|