@skygraph/styles 0.2.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.
Files changed (68) hide show
  1. package/README.md +98 -98
  2. package/components/autocomplete.css +35 -35
  3. package/components/autofield.css +67 -67
  4. package/components/avatar.css +37 -37
  5. package/components/badge.css +102 -102
  6. package/components/breadcrumb.css +29 -29
  7. package/components/button.css +181 -181
  8. package/components/calendar.css +408 -408
  9. package/components/carousel.css +102 -102
  10. package/components/cascader.css +380 -380
  11. package/components/charts.css +408 -408
  12. package/components/checkbox.css +114 -114
  13. package/components/collapse.css +166 -166
  14. package/components/colorpicker.css +252 -252
  15. package/components/context-menu.css +95 -95
  16. package/components/descriptions.css +82 -82
  17. package/components/diagram.css +435 -435
  18. package/components/drawer.css +124 -124
  19. package/components/dropdown.css +110 -110
  20. package/components/empty.css +25 -25
  21. package/components/event-timeline.css +134 -134
  22. package/components/field.css +35 -35
  23. package/components/form.css +115 -115
  24. package/components/gantt.css +166 -166
  25. package/components/input-number.css +76 -76
  26. package/components/input-password.css +104 -104
  27. package/components/input.css +211 -211
  28. package/components/list.css +366 -366
  29. package/components/mentions.css +54 -54
  30. package/components/menu.css +326 -326
  31. package/components/modal.css +1 -0
  32. package/components/notification.css +128 -128
  33. package/components/pagination.css +162 -162
  34. package/components/popconfirm.css +95 -95
  35. package/components/progress.css +116 -116
  36. package/components/radio.css +95 -95
  37. package/components/rate.css +48 -48
  38. package/components/resource-calendar.css +224 -224
  39. package/components/result.css +45 -45
  40. package/components/schema-form-editor.css +433 -433
  41. package/components/search-input.css +112 -112
  42. package/components/segmented.css +76 -76
  43. package/components/select.css +181 -181
  44. package/components/skeleton.css +72 -72
  45. package/components/slider.css +51 -51
  46. package/components/spin.css +102 -102
  47. package/components/steps.css +194 -194
  48. package/components/switch.css +75 -75
  49. package/components/table.css +9 -1
  50. package/components/tabs.css +137 -137
  51. package/components/tag.css +61 -61
  52. package/components/textarea.css +22 -22
  53. package/components/timeline.css +169 -169
  54. package/components/timepicker.css +224 -224
  55. package/components/tooltip.css +91 -91
  56. package/components/transfer.css +140 -140
  57. package/components/tree.css +601 -601
  58. package/components/treeselect.css +221 -221
  59. package/components/upload.css +124 -124
  60. package/index.css +70 -70
  61. package/index.d.ts +9 -9
  62. package/package.json +1 -1
  63. package/print.css +88 -88
  64. package/reset.css +17 -17
  65. package/themes/dark.css +17 -17
  66. package/themes/default.css +14 -14
  67. package/tokens.css +310 -310
  68. package/transitions.css +158 -158
package/transitions.css CHANGED
@@ -1,158 +1,158 @@
1
- /* ============================
2
- SkyGraph Transitions
3
- ============================ */
4
-
5
- /* --- Fade --- */
6
- .sg-fade-enter-from,
7
- .sg-fade-leave-to {
8
- opacity: 0;
9
- }
10
-
11
- .sg-fade-enter-to,
12
- .sg-fade-leave-from {
13
- opacity: 1;
14
- }
15
-
16
- .sg-fade-enter-active,
17
- .sg-fade-leave-active {
18
- transition: opacity 0.2s ease;
19
- }
20
-
21
- /* --- Slide Up --- */
22
- .sg-slide-up-enter-from,
23
- .sg-slide-up-leave-to {
24
- opacity: 0;
25
- transform: translateY(8px);
26
- }
27
-
28
- .sg-slide-up-enter-to,
29
- .sg-slide-up-leave-from {
30
- opacity: 1;
31
- transform: translateY(0);
32
- }
33
-
34
- .sg-slide-up-enter-active,
35
- .sg-slide-up-leave-active {
36
- transition: opacity 0.2s ease, transform 0.2s ease;
37
- }
38
-
39
- /* --- Slide Down --- */
40
- .sg-slide-down-enter-from,
41
- .sg-slide-down-leave-to {
42
- opacity: 0;
43
- transform: translateY(-8px);
44
- }
45
-
46
- .sg-slide-down-enter-to,
47
- .sg-slide-down-leave-from {
48
- opacity: 1;
49
- transform: translateY(0);
50
- }
51
-
52
- .sg-slide-down-enter-active,
53
- .sg-slide-down-leave-active {
54
- transition: opacity 0.2s ease, transform 0.2s ease;
55
- }
56
-
57
- /* --- Slide Left --- */
58
- .sg-slide-left-enter-from,
59
- .sg-slide-left-leave-to {
60
- opacity: 0;
61
- transform: translateX(-100%);
62
- }
63
-
64
- .sg-slide-left-enter-to,
65
- .sg-slide-left-leave-from {
66
- opacity: 1;
67
- transform: translateX(0);
68
- }
69
-
70
- .sg-slide-left-enter-active,
71
- .sg-slide-left-leave-active {
72
- transition: opacity 0.3s ease, transform 0.3s ease;
73
- }
74
-
75
- /* --- Slide Right --- */
76
- .sg-slide-right-enter-from,
77
- .sg-slide-right-leave-to {
78
- opacity: 0;
79
- transform: translateX(100%);
80
- }
81
-
82
- .sg-slide-right-enter-to,
83
- .sg-slide-right-leave-from {
84
- opacity: 1;
85
- transform: translateX(0);
86
- }
87
-
88
- .sg-slide-right-enter-active,
89
- .sg-slide-right-leave-active {
90
- transition: opacity 0.3s ease, transform 0.3s ease;
91
- }
92
-
93
- /* --- Zoom --- */
94
- .sg-zoom-enter-from,
95
- .sg-zoom-leave-to {
96
- opacity: 0;
97
- transform: scale(0.85);
98
- }
99
-
100
- .sg-zoom-enter-to,
101
- .sg-zoom-leave-from {
102
- opacity: 1;
103
- transform: scale(1);
104
- }
105
-
106
- .sg-zoom-enter-active,
107
- .sg-zoom-leave-active {
108
- transition: opacity 0.2s ease, transform 0.2s ease;
109
- }
110
-
111
- /* --- Collapse --- */
112
- .sg-collapse-enter-from,
113
- .sg-collapse-leave-to {
114
- max-height: 0;
115
- overflow: hidden;
116
- opacity: 0;
117
- }
118
-
119
- .sg-collapse-enter-to,
120
- .sg-collapse-leave-from {
121
- max-height: 1000px;
122
- overflow: hidden;
123
- opacity: 1;
124
- }
125
-
126
- .sg-collapse-enter-active,
127
- .sg-collapse-leave-active {
128
- transition: max-height 0.3s ease, opacity 0.3s ease;
129
- }
130
-
131
- /* --- Reduced motion --- */
132
- @media (prefers-reduced-motion: reduce) {
133
- .sg-fade-enter-active,
134
- .sg-fade-leave-active,
135
- .sg-slide-up-enter-active,
136
- .sg-slide-up-leave-active,
137
- .sg-slide-down-enter-active,
138
- .sg-slide-down-leave-active,
139
- .sg-slide-left-enter-active,
140
- .sg-slide-left-leave-active,
141
- .sg-slide-right-enter-active,
142
- .sg-slide-right-leave-active,
143
- .sg-zoom-enter-active,
144
- .sg-zoom-leave-active,
145
- .sg-collapse-enter-active,
146
- .sg-collapse-leave-active {
147
- transition-duration: 0.01ms !important;
148
- }
149
-
150
- .sg-spin,
151
- .sg-skeleton-active .sg-skeleton-avatar,
152
- .sg-skeleton-active .sg-skeleton-title,
153
- .sg-skeleton-active .sg-skeleton-paragraph li,
154
- .sg-badge-status-processing {
155
- animation-duration: 0.01ms !important;
156
- animation-iteration-count: 1 !important;
157
- }
158
- }
1
+ /* ============================
2
+ SkyGraph Transitions
3
+ ============================ */
4
+
5
+ /* --- Fade --- */
6
+ .sg-fade-enter-from,
7
+ .sg-fade-leave-to {
8
+ opacity: 0;
9
+ }
10
+
11
+ .sg-fade-enter-to,
12
+ .sg-fade-leave-from {
13
+ opacity: 1;
14
+ }
15
+
16
+ .sg-fade-enter-active,
17
+ .sg-fade-leave-active {
18
+ transition: opacity 0.2s ease;
19
+ }
20
+
21
+ /* --- Slide Up --- */
22
+ .sg-slide-up-enter-from,
23
+ .sg-slide-up-leave-to {
24
+ opacity: 0;
25
+ transform: translateY(8px);
26
+ }
27
+
28
+ .sg-slide-up-enter-to,
29
+ .sg-slide-up-leave-from {
30
+ opacity: 1;
31
+ transform: translateY(0);
32
+ }
33
+
34
+ .sg-slide-up-enter-active,
35
+ .sg-slide-up-leave-active {
36
+ transition: opacity 0.2s ease, transform 0.2s ease;
37
+ }
38
+
39
+ /* --- Slide Down --- */
40
+ .sg-slide-down-enter-from,
41
+ .sg-slide-down-leave-to {
42
+ opacity: 0;
43
+ transform: translateY(-8px);
44
+ }
45
+
46
+ .sg-slide-down-enter-to,
47
+ .sg-slide-down-leave-from {
48
+ opacity: 1;
49
+ transform: translateY(0);
50
+ }
51
+
52
+ .sg-slide-down-enter-active,
53
+ .sg-slide-down-leave-active {
54
+ transition: opacity 0.2s ease, transform 0.2s ease;
55
+ }
56
+
57
+ /* --- Slide Left --- */
58
+ .sg-slide-left-enter-from,
59
+ .sg-slide-left-leave-to {
60
+ opacity: 0;
61
+ transform: translateX(-100%);
62
+ }
63
+
64
+ .sg-slide-left-enter-to,
65
+ .sg-slide-left-leave-from {
66
+ opacity: 1;
67
+ transform: translateX(0);
68
+ }
69
+
70
+ .sg-slide-left-enter-active,
71
+ .sg-slide-left-leave-active {
72
+ transition: opacity 0.3s ease, transform 0.3s ease;
73
+ }
74
+
75
+ /* --- Slide Right --- */
76
+ .sg-slide-right-enter-from,
77
+ .sg-slide-right-leave-to {
78
+ opacity: 0;
79
+ transform: translateX(100%);
80
+ }
81
+
82
+ .sg-slide-right-enter-to,
83
+ .sg-slide-right-leave-from {
84
+ opacity: 1;
85
+ transform: translateX(0);
86
+ }
87
+
88
+ .sg-slide-right-enter-active,
89
+ .sg-slide-right-leave-active {
90
+ transition: opacity 0.3s ease, transform 0.3s ease;
91
+ }
92
+
93
+ /* --- Zoom --- */
94
+ .sg-zoom-enter-from,
95
+ .sg-zoom-leave-to {
96
+ opacity: 0;
97
+ transform: scale(0.85);
98
+ }
99
+
100
+ .sg-zoom-enter-to,
101
+ .sg-zoom-leave-from {
102
+ opacity: 1;
103
+ transform: scale(1);
104
+ }
105
+
106
+ .sg-zoom-enter-active,
107
+ .sg-zoom-leave-active {
108
+ transition: opacity 0.2s ease, transform 0.2s ease;
109
+ }
110
+
111
+ /* --- Collapse --- */
112
+ .sg-collapse-enter-from,
113
+ .sg-collapse-leave-to {
114
+ max-height: 0;
115
+ overflow: hidden;
116
+ opacity: 0;
117
+ }
118
+
119
+ .sg-collapse-enter-to,
120
+ .sg-collapse-leave-from {
121
+ max-height: 1000px;
122
+ overflow: hidden;
123
+ opacity: 1;
124
+ }
125
+
126
+ .sg-collapse-enter-active,
127
+ .sg-collapse-leave-active {
128
+ transition: max-height 0.3s ease, opacity 0.3s ease;
129
+ }
130
+
131
+ /* --- Reduced motion --- */
132
+ @media (prefers-reduced-motion: reduce) {
133
+ .sg-fade-enter-active,
134
+ .sg-fade-leave-active,
135
+ .sg-slide-up-enter-active,
136
+ .sg-slide-up-leave-active,
137
+ .sg-slide-down-enter-active,
138
+ .sg-slide-down-leave-active,
139
+ .sg-slide-left-enter-active,
140
+ .sg-slide-left-leave-active,
141
+ .sg-slide-right-enter-active,
142
+ .sg-slide-right-leave-active,
143
+ .sg-zoom-enter-active,
144
+ .sg-zoom-leave-active,
145
+ .sg-collapse-enter-active,
146
+ .sg-collapse-leave-active {
147
+ transition-duration: 0.01ms !important;
148
+ }
149
+
150
+ .sg-spin,
151
+ .sg-skeleton-active .sg-skeleton-avatar,
152
+ .sg-skeleton-active .sg-skeleton-title,
153
+ .sg-skeleton-active .sg-skeleton-paragraph li,
154
+ .sg-badge-status-processing {
155
+ animation-duration: 0.01ms !important;
156
+ animation-iteration-count: 1 !important;
157
+ }
158
+ }