@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.
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/components/search-input.css CHANGED
@@ -1,112 +1,112 @@
1
- /* SearchInput */
2
- .sg-search-input {
3
- position: relative;
4
- display: inline-flex;
5
- align-items: center;
6
- width: 100%;
7
- }
8
-
9
- .sg-search-input-icon {
10
- position: absolute;
11
- left: var(--sg-padding-sm);
12
- top: 0;
13
- bottom: 0;
14
- display: flex;
15
- align-items: center;
16
- color: var(--sg-color-text-tertiary);
17
- font-size: var(--sg-font-size-lg);
18
- pointer-events: none;
19
- z-index: 1;
20
- }
21
-
22
- /*
23
- * `.sg-search-input-field` — тот же элемент, что и `.sg-input`.
24
- * `padding` shorthand в `.sg-input` ставится первым (по порядку @import),
25
- * поэтому longhand-правила здесь (ниже по каскаду) корректно перебивают его
26
- * без `!important`.
27
- */
28
- .sg-search-input-field {
29
- padding-left: calc(var(--sg-padding-sm) + 20px);
30
- padding-right: calc(var(--sg-padding-sm) + 24px);
31
- }
32
-
33
- .sg-search-input-with-button .sg-search-input-field {
34
- border-top-right-radius: 0;
35
- border-bottom-right-radius: 0;
36
- }
37
-
38
- .sg-search-input .sg-spin {
39
- position: absolute;
40
- right: var(--sg-padding-sm);
41
- top: 0;
42
- bottom: 0;
43
- margin: auto 0;
44
- }
45
-
46
- .sg-search-input-clear {
47
- position: absolute;
48
- right: var(--sg-padding-sm);
49
- top: 0;
50
- bottom: 0;
51
- display: flex;
52
- align-items: center;
53
- padding: 0;
54
- background: none;
55
- border: none;
56
- cursor: pointer;
57
- color: var(--sg-color-text-quaternary);
58
- font-size: var(--sg-font-size);
59
- line-height: 1;
60
- transition: color var(--sg-transition-duration) var(--sg-transition-timing);
61
- }
62
-
63
- .sg-search-input-with-button .sg-search-input-clear {
64
- right: calc(var(--sg-height-md) + var(--sg-padding-sm));
65
- }
66
-
67
- .sg-search-input-clear:hover {
68
- color: var(--sg-color-text-secondary);
69
- }
70
-
71
- .sg-search-input-btn {
72
- flex-shrink: 0;
73
- height: var(--sg-height-md);
74
- min-width: var(--sg-height-md);
75
- padding: 0 var(--sg-padding-md);
76
- background: var(--sg-color-primary);
77
- color: var(--sg-color-white);
78
- border: 1px solid var(--sg-color-primary);
79
- border-left: none;
80
- border-radius: 0 var(--sg-border-radius) var(--sg-border-radius) 0;
81
- cursor: pointer;
82
- font-size: var(--sg-font-size);
83
- transition: background var(--sg-transition-duration) var(--sg-transition-timing);
84
- }
85
-
86
- .sg-search-input-btn:hover {
87
- background: var(--sg-color-primary-hover);
88
- }
89
-
90
- .sg-search-input-btn:disabled {
91
- background: var(--sg-color-bg-disabled);
92
- border-color: var(--sg-color-border);
93
- color: var(--sg-color-text-disabled);
94
- cursor: not-allowed;
95
- }
96
-
97
- /* Sizes */
98
- .sg-search-input-small .sg-search-input-btn {
99
- height: var(--sg-height-sm);
100
- min-width: var(--sg-height-sm);
101
- font-size: var(--sg-font-size-sm);
102
- }
103
-
104
- .sg-search-input-large .sg-search-input-btn {
105
- height: var(--sg-height-lg);
106
- min-width: var(--sg-height-lg);
107
- font-size: var(--sg-font-size-lg);
108
- }
109
-
110
- .sg-search-input-disabled {
111
- opacity: 0.65;
112
- }
1
+ /* SearchInput */
2
+ .sg-search-input {
3
+ position: relative;
4
+ display: inline-flex;
5
+ align-items: center;
6
+ width: 100%;
7
+ }
8
+
9
+ .sg-search-input-icon {
10
+ position: absolute;
11
+ left: var(--sg-padding-sm);
12
+ top: 0;
13
+ bottom: 0;
14
+ display: flex;
15
+ align-items: center;
16
+ color: var(--sg-color-text-tertiary);
17
+ font-size: var(--sg-font-size-lg);
18
+ pointer-events: none;
19
+ z-index: 1;
20
+ }
21
+
22
+ /*
23
+ * `.sg-search-input-field` — тот же элемент, что и `.sg-input`.
24
+ * `padding` shorthand в `.sg-input` ставится первым (по порядку @import),
25
+ * поэтому longhand-правила здесь (ниже по каскаду) корректно перебивают его
26
+ * без `!important`.
27
+ */
28
+ .sg-search-input-field {
29
+ padding-left: calc(var(--sg-padding-sm) + 20px);
30
+ padding-right: calc(var(--sg-padding-sm) + 24px);
31
+ }
32
+
33
+ .sg-search-input-with-button .sg-search-input-field {
34
+ border-top-right-radius: 0;
35
+ border-bottom-right-radius: 0;
36
+ }
37
+
38
+ .sg-search-input .sg-spin {
39
+ position: absolute;
40
+ right: var(--sg-padding-sm);
41
+ top: 0;
42
+ bottom: 0;
43
+ margin: auto 0;
44
+ }
45
+
46
+ .sg-search-input-clear {
47
+ position: absolute;
48
+ right: var(--sg-padding-sm);
49
+ top: 0;
50
+ bottom: 0;
51
+ display: flex;
52
+ align-items: center;
53
+ padding: 0;
54
+ background: none;
55
+ border: none;
56
+ cursor: pointer;
57
+ color: var(--sg-color-text-quaternary);
58
+ font-size: var(--sg-font-size);
59
+ line-height: 1;
60
+ transition: color var(--sg-transition-duration) var(--sg-transition-timing);
61
+ }
62
+
63
+ .sg-search-input-with-button .sg-search-input-clear {
64
+ right: calc(var(--sg-height-md) + var(--sg-padding-sm));
65
+ }
66
+
67
+ .sg-search-input-clear:hover {
68
+ color: var(--sg-color-text-secondary);
69
+ }
70
+
71
+ .sg-search-input-btn {
72
+ flex-shrink: 0;
73
+ height: var(--sg-height-md);
74
+ min-width: var(--sg-height-md);
75
+ padding: 0 var(--sg-padding-md);
76
+ background: var(--sg-color-primary);
77
+ color: var(--sg-color-white);
78
+ border: 1px solid var(--sg-color-primary);
79
+ border-left: none;
80
+ border-radius: 0 var(--sg-border-radius) var(--sg-border-radius) 0;
81
+ cursor: pointer;
82
+ font-size: var(--sg-font-size);
83
+ transition: background var(--sg-transition-duration) var(--sg-transition-timing);
84
+ }
85
+
86
+ .sg-search-input-btn:hover {
87
+ background: var(--sg-color-primary-hover);
88
+ }
89
+
90
+ .sg-search-input-btn:disabled {
91
+ background: var(--sg-color-bg-disabled);
92
+ border-color: var(--sg-color-border);
93
+ color: var(--sg-color-text-disabled);
94
+ cursor: not-allowed;
95
+ }
96
+
97
+ /* Sizes */
98
+ .sg-search-input-small .sg-search-input-btn {
99
+ height: var(--sg-height-sm);
100
+ min-width: var(--sg-height-sm);
101
+ font-size: var(--sg-font-size-sm);
102
+ }
103
+
104
+ .sg-search-input-large .sg-search-input-btn {
105
+ height: var(--sg-height-lg);
106
+ min-width: var(--sg-height-lg);
107
+ font-size: var(--sg-font-size-lg);
108
+ }
109
+
110
+ .sg-search-input-disabled {
111
+ opacity: 0.65;
112
+ }
package/components/segmented.css CHANGED
@@ -1,76 +1,76 @@
1
- .sg-segmented {
2
- display: inline-flex;
3
- align-items: stretch;
4
- padding: 2px;
5
- background: var(--sg-color-bg-secondary);
6
- border-radius: var(--sg-border-radius);
7
- font-size: var(--sg-font-size);
8
- gap: 2px;
9
- }
10
-
11
- .sg-segmented-block {
12
- display: flex;
13
- width: 100%;
14
- }
15
-
16
- .sg-segmented-block .sg-segmented-item {
17
- flex: 1;
18
- justify-content: center;
19
- }
20
-
21
- .sg-segmented-item {
22
- display: inline-flex;
23
- align-items: center;
24
- gap: var(--sg-padding-xs);
25
- padding: 0 var(--sg-padding-md);
26
- height: var(--sg-height-md);
27
- cursor: pointer;
28
- border-radius: var(--sg-border-radius-sm);
29
- color: var(--sg-color-text-secondary);
30
- transition: all var(--sg-transition-duration) var(--sg-transition-timing);
31
- user-select: none;
32
- white-space: nowrap;
33
- }
34
-
35
- .sg-segmented-item:hover:not(.sg-segmented-item-disabled):not(.sg-segmented-item-selected) {
36
- color: var(--sg-color-text);
37
- }
38
-
39
- .sg-segmented-item-selected {
40
- background: var(--sg-color-bg-container);
41
- color: var(--sg-color-text);
42
- box-shadow: var(--sg-shadow-sm);
43
- }
44
-
45
- .sg-segmented-item-disabled {
46
- color: var(--sg-color-text-disabled);
47
- cursor: not-allowed;
48
- }
49
-
50
- .sg-segmented-item-icon {
51
- display: inline-flex;
52
- align-items: center;
53
- font-size: var(--sg-font-size);
54
- }
55
-
56
- /* Sizes */
57
- .sg-segmented-small .sg-segmented-item {
58
- height: var(--sg-height-sm);
59
- padding: 0 var(--sg-padding-sm);
60
- font-size: var(--sg-font-size-sm);
61
- }
62
-
63
- .sg-segmented-large .sg-segmented-item {
64
- height: var(--sg-height-lg);
65
- padding: 0 var(--sg-padding-lg);
66
- font-size: var(--sg-font-size-lg);
67
- }
68
-
69
- .sg-segmented-disabled {
70
- opacity: 0.65;
71
- cursor: not-allowed;
72
- }
73
-
74
- .sg-segmented-disabled .sg-segmented-item {
75
- cursor: not-allowed;
76
- }
1
+ .sg-segmented {
2
+ display: inline-flex;
3
+ align-items: stretch;
4
+ padding: 2px;
5
+ background: var(--sg-color-bg-secondary);
6
+ border-radius: var(--sg-border-radius);
7
+ font-size: var(--sg-font-size);
8
+ gap: 2px;
9
+ }
10
+
11
+ .sg-segmented-block {
12
+ display: flex;
13
+ width: 100%;
14
+ }
15
+
16
+ .sg-segmented-block .sg-segmented-item {
17
+ flex: 1;
18
+ justify-content: center;
19
+ }
20
+
21
+ .sg-segmented-item {
22
+ display: inline-flex;
23
+ align-items: center;
24
+ gap: var(--sg-padding-xs);
25
+ padding: 0 var(--sg-padding-md);
26
+ height: var(--sg-height-md);
27
+ cursor: pointer;
28
+ border-radius: var(--sg-border-radius-sm);
29
+ color: var(--sg-color-text-secondary);
30
+ transition: all var(--sg-transition-duration) var(--sg-transition-timing);
31
+ user-select: none;
32
+ white-space: nowrap;
33
+ }
34
+
35
+ .sg-segmented-item:hover:not(.sg-segmented-item-disabled):not(.sg-segmented-item-selected) {
36
+ color: var(--sg-color-text);
37
+ }
38
+
39
+ .sg-segmented-item-selected {
40
+ background: var(--sg-color-bg-container);
41
+ color: var(--sg-color-text);
42
+ box-shadow: var(--sg-shadow-sm);
43
+ }
44
+
45
+ .sg-segmented-item-disabled {
46
+ color: var(--sg-color-text-disabled);
47
+ cursor: not-allowed;
48
+ }
49
+
50
+ .sg-segmented-item-icon {
51
+ display: inline-flex;
52
+ align-items: center;
53
+ font-size: var(--sg-font-size);
54
+ }
55
+
56
+ /* Sizes */
57
+ .sg-segmented-small .sg-segmented-item {
58
+ height: var(--sg-height-sm);
59
+ padding: 0 var(--sg-padding-sm);
60
+ font-size: var(--sg-font-size-sm);
61
+ }
62
+
63
+ .sg-segmented-large .sg-segmented-item {
64
+ height: var(--sg-height-lg);
65
+ padding: 0 var(--sg-padding-lg);
66
+ font-size: var(--sg-font-size-lg);
67
+ }
68
+
69
+ .sg-segmented-disabled {
70
+ opacity: 0.65;
71
+ cursor: not-allowed;
72
+ }
73
+
74
+ .sg-segmented-disabled .sg-segmented-item {
75
+ cursor: not-allowed;
76
+ }