@qn-pandora/pandora-component 5.1.0 → 5.1.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.
Files changed (105) hide show
  1. package/es/components/AutoComplete/index.js +2 -2
  2. package/es/components/AutoComplete/style.css +110 -22
  3. package/es/components/Breadcrumb/style.css +13 -3
  4. package/es/components/Button/style.css +215 -109
  5. package/es/components/Card/RowExtra/style.css +6 -0
  6. package/es/components/Card/style.css +50 -55
  7. package/es/components/CheckTransformList/style.css +327 -103
  8. package/es/components/Checkbox/style.css +5 -0
  9. package/es/components/CheckboxList/style.css +5 -0
  10. package/es/components/Collapse/style.css +34 -2
  11. package/es/components/DateTimePicker/Base/style.css +446 -56
  12. package/es/components/DateTimePicker/DisplayInput/style.css +218 -40
  13. package/es/components/DateTimePicker/index.js +1 -1
  14. package/es/components/DateTimePicker/style.css +77 -46
  15. package/es/components/Descriptions/style.css +77 -46
  16. package/es/components/Drawer/index.d.ts +6 -6
  17. package/es/components/Drawer/index.js +4 -4
  18. package/es/components/Drawer/style.css +244 -169
  19. package/es/components/Drawer/style.less +8 -0
  20. package/es/components/FileResumable/style.css +12 -42
  21. package/es/components/Input/index.d.ts +1 -1
  22. package/es/components/Input/style.css +218 -40
  23. package/es/components/Menu/style.css +16 -7
  24. package/es/components/Modal/style.css +10 -7
  25. package/es/components/NameLimiter/index.js +1 -1
  26. package/es/components/NameLimiter/style.css +83 -55
  27. package/es/components/OptionList/InlineOptionList/style.css +21 -8
  28. package/es/components/OptionList/OptionItem/style.css +83 -55
  29. package/es/components/OptionList/PopoverOptionList/index.js +1 -1
  30. package/es/components/OptionList/PopoverOptionList/style.css +77 -46
  31. package/es/components/OptionList/style.css +181 -109
  32. package/es/components/RadioGroup/style.css +27 -16
  33. package/es/components/RangeInput/style.css +581 -64
  34. package/es/components/RemarkName/style.css +83 -55
  35. package/es/components/Selector/style.css +110 -22
  36. package/es/components/Spin/style.css +8 -6
  37. package/es/components/Steps/style.css +43 -5
  38. package/es/components/Table/ColumnSetting/style.css +2 -5
  39. package/es/components/Table/ColumnSetting/style.less +2 -3
  40. package/es/components/Table/index.d.ts +12 -9
  41. package/es/components/Table/index.js +73 -84
  42. package/es/components/Table/style.css +99 -61
  43. package/es/components/Tabs/style.css +117 -68
  44. package/es/components/TopologyChart/index.d.ts +7 -0
  45. package/es/components/TopologyChart/index.js +19 -0
  46. package/es/components/TopologyChart/style.css +14 -0
  47. package/es/components/TopologyChart/style.less +14 -0
  48. package/es/components/TreeSelector/style.css +21 -9
  49. package/es/index.css +8149 -7069
  50. package/es/index.d.ts +1 -0
  51. package/es/index.js +1 -0
  52. package/es/index.less +17 -16
  53. package/lib/components/AutoComplete/index.js +2 -2
  54. package/lib/components/AutoComplete/style.css +110 -22
  55. package/lib/components/Breadcrumb/style.css +13 -3
  56. package/lib/components/Button/style.css +215 -109
  57. package/lib/components/Card/RowExtra/style.css +6 -0
  58. package/lib/components/Card/style.css +50 -55
  59. package/lib/components/CheckTransformList/style.css +327 -103
  60. package/lib/components/Checkbox/style.css +5 -0
  61. package/lib/components/CheckboxList/style.css +5 -0
  62. package/lib/components/Collapse/style.css +34 -2
  63. package/lib/components/DateTimePicker/Base/style.css +446 -56
  64. package/lib/components/DateTimePicker/DisplayInput/style.css +218 -40
  65. package/lib/components/DateTimePicker/index.js +1 -1
  66. package/lib/components/DateTimePicker/style.css +77 -46
  67. package/lib/components/Descriptions/style.css +77 -46
  68. package/lib/components/Drawer/index.d.ts +6 -6
  69. package/lib/components/Drawer/index.js +4 -4
  70. package/lib/components/Drawer/style.css +244 -169
  71. package/lib/components/Drawer/style.less +8 -0
  72. package/lib/components/FileResumable/style.css +12 -42
  73. package/lib/components/Input/index.d.ts +1 -1
  74. package/lib/components/Input/style.css +218 -40
  75. package/lib/components/Menu/style.css +16 -7
  76. package/lib/components/Modal/style.css +10 -7
  77. package/lib/components/NameLimiter/index.js +1 -1
  78. package/lib/components/NameLimiter/style.css +83 -55
  79. package/lib/components/OptionList/InlineOptionList/style.css +21 -8
  80. package/lib/components/OptionList/OptionItem/style.css +83 -55
  81. package/lib/components/OptionList/PopoverOptionList/index.js +1 -1
  82. package/lib/components/OptionList/PopoverOptionList/style.css +77 -46
  83. package/lib/components/OptionList/style.css +181 -109
  84. package/lib/components/RadioGroup/style.css +27 -16
  85. package/lib/components/RangeInput/style.css +581 -64
  86. package/lib/components/RemarkName/style.css +83 -55
  87. package/lib/components/Selector/style.css +110 -22
  88. package/lib/components/Spin/style.css +8 -6
  89. package/lib/components/Steps/style.css +43 -5
  90. package/lib/components/Table/ColumnSetting/style.css +2 -5
  91. package/lib/components/Table/ColumnSetting/style.less +2 -3
  92. package/lib/components/Table/index.d.ts +12 -9
  93. package/lib/components/Table/index.js +73 -84
  94. package/lib/components/Table/style.css +99 -61
  95. package/lib/components/Tabs/style.css +117 -68
  96. package/lib/components/TopologyChart/index.d.ts +7 -0
  97. package/lib/components/TopologyChart/index.js +28 -0
  98. package/lib/components/TopologyChart/style.css +14 -0
  99. package/lib/components/TopologyChart/style.less +14 -0
  100. package/lib/components/TreeSelector/style.css +21 -9
  101. package/lib/index.css +4307 -3227
  102. package/lib/index.d.ts +1 -0
  103. package/lib/index.js +6 -1
  104. package/lib/index.less +18 -17
  105. package/package.json +7 -6
package/es/components/NameLimiter/style.css CHANGED
@@ -20,31 +20,35 @@
20
20
  width: -webkit-max-content;
21
21
  width: -moz-max-content;
22
22
  width: max-content;
23
+ width: intrinsic;
23
24
  max-width: 250px;
24
25
  visibility: visible;
25
26
  }
27
+ .ant-tooltip-content {
28
+ position: relative;
29
+ }
26
30
  .ant-tooltip-hidden {
27
31
  display: none;
28
32
  }
29
33
  .ant-tooltip-placement-top,
30
34
  .ant-tooltip-placement-topLeft,
31
35
  .ant-tooltip-placement-topRight {
32
- padding-bottom: 8px;
36
+ padding-bottom: 14.3137085px;
33
37
  }
34
38
  .ant-tooltip-placement-right,
35
39
  .ant-tooltip-placement-rightTop,
36
40
  .ant-tooltip-placement-rightBottom {
37
- padding-left: 8px;
41
+ padding-left: 14.3137085px;
38
42
  }
39
43
  .ant-tooltip-placement-bottom,
40
44
  .ant-tooltip-placement-bottomLeft,
41
45
  .ant-tooltip-placement-bottomRight {
42
- padding-top: 8px;
46
+ padding-top: 14.3137085px;
43
47
  }
44
48
  .ant-tooltip-placement-left,
45
49
  .ant-tooltip-placement-leftTop,
46
50
  .ant-tooltip-placement-leftBottom {
47
- padding-right: 8px;
51
+ padding-right: 14.3137085px;
48
52
  }
49
53
  .ant-tooltip-inner {
50
54
  min-width: 30px;
@@ -61,44 +65,62 @@
61
65
  }
62
66
  .ant-tooltip-arrow {
63
67
  position: absolute;
68
+ z-index: 2;
64
69
  display: block;
65
- width: 13.07106781px;
66
- height: 13.07106781px;
70
+ width: 22px;
71
+ height: 22px;
67
72
  overflow: hidden;
68
73
  background: transparent;
69
74
  pointer-events: none;
70
75
  }
71
76
  .ant-tooltip-arrow-content {
77
+ --antd-arrow-background-color: linear-gradient(to right bottom, rgba(35, 44, 59, 0.7), rgba(35, 44, 59, 0.8));
72
78
  position: absolute;
73
79
  top: 0;
74
80
  right: 0;
75
81
  bottom: 0;
76
82
  left: 0;
77
83
  display: block;
78
- width: 5px;
79
- height: 5px;
84
+ width: 11.3137085px;
85
+ height: 11.3137085px;
80
86
  margin: auto;
81
- background-color: rgba(35, 44, 59, 0.8);
82
87
  content: '';
83
88
  pointer-events: auto;
89
+ border-radius: 0 0 2px;
90
+ pointer-events: none;
91
+ }
92
+ .ant-tooltip-arrow-content::before {
93
+ position: absolute;
94
+ top: -11.3137085px;
95
+ left: -11.3137085px;
96
+ width: 33.9411255px;
97
+ height: 33.9411255px;
98
+ background: var(--antd-arrow-background-color);
99
+ background-repeat: no-repeat;
100
+ background-position: -10px -10px;
101
+ content: '';
102
+ clip-path: inset(33% 33%);
103
+ clip-path: path('M 9.849242404917499 24.091883092036785 A 5 5 0 0 1 13.384776310850237 22.627416997969522 L 20.627416997969522 22.627416997969522 A 2 2 0 0 0 22.627416997969522 20.627416997969522 L 22.627416997969522 13.384776310850237 A 5 5 0 0 1 24.091883092036785 9.849242404917499 L 23.091883092036785 9.849242404917499 L 9.849242404917499 23.091883092036785 Z');
84
104
  }
85
105
  .ant-tooltip-placement-top .ant-tooltip-arrow,
86
106
  .ant-tooltip-placement-topLeft .ant-tooltip-arrow,
87
107
  .ant-tooltip-placement-topRight .ant-tooltip-arrow {
88
- bottom: -5.07106781px;
108
+ bottom: 0;
109
+ -webkit-transform: translateY(100%);
110
+ transform: translateY(100%);
89
111
  }
90
112
  .ant-tooltip-placement-top .ant-tooltip-arrow-content,
91
113
  .ant-tooltip-placement-topLeft .ant-tooltip-arrow-content,
92
114
  .ant-tooltip-placement-topRight .ant-tooltip-arrow-content {
93
115
  -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
94
116
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
95
- -webkit-transform: translateY(-6.53553391px) rotate(45deg);
96
- transform: translateY(-6.53553391px) rotate(45deg);
117
+ -webkit-transform: translateY(-11px) rotate(45deg);
118
+ transform: translateY(-11px) rotate(45deg);
97
119
  }
98
120
  .ant-tooltip-placement-top .ant-tooltip-arrow {
99
121
  left: 50%;
100
- -webkit-transform: translateX(-50%);
101
- transform: translateX(-50%);
122
+ -webkit-transform: translateY(100%) translateX(-50%);
123
+ transform: translateY(100%) translateX(-50%);
102
124
  }
103
125
  .ant-tooltip-placement-topLeft .ant-tooltip-arrow {
104
126
  left: 13px;
@@ -109,20 +131,22 @@
109
131
  .ant-tooltip-placement-right .ant-tooltip-arrow,
110
132
  .ant-tooltip-placement-rightTop .ant-tooltip-arrow,
111
133
  .ant-tooltip-placement-rightBottom .ant-tooltip-arrow {
112
- left: -5.07106781px;
134
+ left: 0;
135
+ -webkit-transform: translateX(-100%);
136
+ transform: translateX(-100%);
113
137
  }
114
138
  .ant-tooltip-placement-right .ant-tooltip-arrow-content,
115
139
  .ant-tooltip-placement-rightTop .ant-tooltip-arrow-content,
116
140
  .ant-tooltip-placement-rightBottom .ant-tooltip-arrow-content {
117
141
  -webkit-box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
118
142
  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
119
- -webkit-transform: translateX(6.53553391px) rotate(45deg);
120
- transform: translateX(6.53553391px) rotate(45deg);
143
+ -webkit-transform: translateX(11px) rotate(135deg);
144
+ transform: translateX(11px) rotate(135deg);
121
145
  }
122
146
  .ant-tooltip-placement-right .ant-tooltip-arrow {
123
147
  top: 50%;
124
- -webkit-transform: translateY(-50%);
125
- transform: translateY(-50%);
148
+ -webkit-transform: translateX(-100%) translateY(-50%);
149
+ transform: translateX(-100%) translateY(-50%);
126
150
  }
127
151
  .ant-tooltip-placement-rightTop .ant-tooltip-arrow {
128
152
  top: 5px;
@@ -133,20 +157,22 @@
133
157
  .ant-tooltip-placement-left .ant-tooltip-arrow,
134
158
  .ant-tooltip-placement-leftTop .ant-tooltip-arrow,
135
159
  .ant-tooltip-placement-leftBottom .ant-tooltip-arrow {
136
- right: -5.07106781px;
160
+ right: 0;
161
+ -webkit-transform: translateX(100%);
162
+ transform: translateX(100%);
137
163
  }
138
164
  .ant-tooltip-placement-left .ant-tooltip-arrow-content,
139
165
  .ant-tooltip-placement-leftTop .ant-tooltip-arrow-content,
140
166
  .ant-tooltip-placement-leftBottom .ant-tooltip-arrow-content {
141
167
  -webkit-box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
142
168
  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
143
- -webkit-transform: translateX(-6.53553391px) rotate(45deg);
144
- transform: translateX(-6.53553391px) rotate(45deg);
169
+ -webkit-transform: translateX(-11px) rotate(315deg);
170
+ transform: translateX(-11px) rotate(315deg);
145
171
  }
146
172
  .ant-tooltip-placement-left .ant-tooltip-arrow {
147
173
  top: 50%;
148
- -webkit-transform: translateY(-50%);
149
- transform: translateY(-50%);
174
+ -webkit-transform: translateX(100%) translateY(-50%);
175
+ transform: translateX(100%) translateY(-50%);
150
176
  }
151
177
  .ant-tooltip-placement-leftTop .ant-tooltip-arrow {
152
178
  top: 5px;
@@ -157,20 +183,22 @@
157
183
  .ant-tooltip-placement-bottom .ant-tooltip-arrow,
158
184
  .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,
159
185
  .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
160
- top: -5.07106781px;
186
+ top: 0;
187
+ -webkit-transform: translateY(-100%);
188
+ transform: translateY(-100%);
161
189
  }
162
190
  .ant-tooltip-placement-bottom .ant-tooltip-arrow-content,
163
191
  .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow-content,
164
192
  .ant-tooltip-placement-bottomRight .ant-tooltip-arrow-content {
165
193
  -webkit-box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
166
194
  box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
167
- -webkit-transform: translateY(6.53553391px) rotate(45deg);
168
- transform: translateY(6.53553391px) rotate(45deg);
195
+ -webkit-transform: translateY(11px) rotate(225deg);
196
+ transform: translateY(11px) rotate(225deg);
169
197
  }
170
198
  .ant-tooltip-placement-bottom .ant-tooltip-arrow {
171
199
  left: 50%;
172
- -webkit-transform: translateX(-50%);
173
- transform: translateX(-50%);
200
+ -webkit-transform: translateY(-100%) translateX(-50%);
201
+ transform: translateY(-100%) translateX(-50%);
174
202
  }
175
203
  .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow {
176
204
  left: 13px;
@@ -181,80 +209,80 @@
181
209
  .ant-tooltip-pink .ant-tooltip-inner {
182
210
  background-color: #eb2f96;
183
211
  }
184
- .ant-tooltip-pink .ant-tooltip-arrow-content {
185
- background-color: #eb2f96;
212
+ .ant-tooltip-pink .ant-tooltip-arrow-content::before {
213
+ background: #eb2f96;
186
214
  }
187
215
  .ant-tooltip-magenta .ant-tooltip-inner {
188
216
  background-color: #eb2f96;
189
217
  }
190
- .ant-tooltip-magenta .ant-tooltip-arrow-content {
191
- background-color: #eb2f96;
218
+ .ant-tooltip-magenta .ant-tooltip-arrow-content::before {
219
+ background: #eb2f96;
192
220
  }
193
221
  .ant-tooltip-red .ant-tooltip-inner {
194
222
  background-color: #f5222d;
195
223
  }
196
- .ant-tooltip-red .ant-tooltip-arrow-content {
197
- background-color: #f5222d;
224
+ .ant-tooltip-red .ant-tooltip-arrow-content::before {
225
+ background: #f5222d;
198
226
  }
199
227
  .ant-tooltip-volcano .ant-tooltip-inner {
200
228
  background-color: #fa541c;
201
229
  }
202
- .ant-tooltip-volcano .ant-tooltip-arrow-content {
203
- background-color: #fa541c;
230
+ .ant-tooltip-volcano .ant-tooltip-arrow-content::before {
231
+ background: #fa541c;
204
232
  }
205
233
  .ant-tooltip-orange .ant-tooltip-inner {
206
234
  background-color: #fa8c16;
207
235
  }
208
- .ant-tooltip-orange .ant-tooltip-arrow-content {
209
- background-color: #fa8c16;
236
+ .ant-tooltip-orange .ant-tooltip-arrow-content::before {
237
+ background: #fa8c16;
210
238
  }
211
239
  .ant-tooltip-yellow .ant-tooltip-inner {
212
240
  background-color: #fadb14;
213
241
  }
214
- .ant-tooltip-yellow .ant-tooltip-arrow-content {
215
- background-color: #fadb14;
242
+ .ant-tooltip-yellow .ant-tooltip-arrow-content::before {
243
+ background: #fadb14;
216
244
  }
217
245
  .ant-tooltip-gold .ant-tooltip-inner {
218
246
  background-color: #faad14;
219
247
  }
220
- .ant-tooltip-gold .ant-tooltip-arrow-content {
221
- background-color: #faad14;
248
+ .ant-tooltip-gold .ant-tooltip-arrow-content::before {
249
+ background: #faad14;
222
250
  }
223
251
  .ant-tooltip-cyan .ant-tooltip-inner {
224
252
  background-color: #13c2c2;
225
253
  }
226
- .ant-tooltip-cyan .ant-tooltip-arrow-content {
227
- background-color: #13c2c2;
254
+ .ant-tooltip-cyan .ant-tooltip-arrow-content::before {
255
+ background: #13c2c2;
228
256
  }
229
257
  .ant-tooltip-lime .ant-tooltip-inner {
230
258
  background-color: #a0d911;
231
259
  }
232
- .ant-tooltip-lime .ant-tooltip-arrow-content {
233
- background-color: #a0d911;
260
+ .ant-tooltip-lime .ant-tooltip-arrow-content::before {
261
+ background: #a0d911;
234
262
  }
235
263
  .ant-tooltip-green .ant-tooltip-inner {
236
264
  background-color: #52c41a;
237
265
  }
238
- .ant-tooltip-green .ant-tooltip-arrow-content {
239
- background-color: #52c41a;
266
+ .ant-tooltip-green .ant-tooltip-arrow-content::before {
267
+ background: #52c41a;
240
268
  }
241
269
  .ant-tooltip-blue .ant-tooltip-inner {
242
270
  background-color: #1890ff;
243
271
  }
244
- .ant-tooltip-blue .ant-tooltip-arrow-content {
245
- background-color: #1890ff;
272
+ .ant-tooltip-blue .ant-tooltip-arrow-content::before {
273
+ background: #1890ff;
246
274
  }
247
275
  .ant-tooltip-geekblue .ant-tooltip-inner {
248
276
  background-color: #2f54eb;
249
277
  }
250
- .ant-tooltip-geekblue .ant-tooltip-arrow-content {
251
- background-color: #2f54eb;
278
+ .ant-tooltip-geekblue .ant-tooltip-arrow-content::before {
279
+ background: #2f54eb;
252
280
  }
253
281
  .ant-tooltip-purple .ant-tooltip-inner {
254
282
  background-color: #722ed1;
255
283
  }
256
- .ant-tooltip-purple .ant-tooltip-arrow-content {
257
- background-color: #722ed1;
284
+ .ant-tooltip-purple .ant-tooltip-arrow-content::before {
285
+ background: #722ed1;
258
286
  }
259
287
  .ant-tooltip-rtl {
260
288
  direction: rtl;
package/es/components/OptionList/InlineOptionList/style.css CHANGED
@@ -39,6 +39,9 @@
39
39
  display: -webkit-box;
40
40
  display: -ms-flexbox;
41
41
  display: flex;
42
+ -webkit-box-align: center;
43
+ -ms-flex-align: center;
44
+ align-items: center;
42
45
  margin: 16px 0;
43
46
  color: #333;
44
47
  font-weight: 500;
@@ -51,7 +54,6 @@
51
54
  .ant-divider-horizontal.ant-divider-with-text::before,
52
55
  .ant-divider-horizontal.ant-divider-with-text::after {
53
56
  position: relative;
54
- top: 50%;
55
57
  width: 50%;
56
58
  border-top: 1px solid transparent;
57
59
  border-top-color: inherit;
@@ -61,19 +63,15 @@
61
63
  content: '';
62
64
  }
63
65
  .ant-divider-horizontal.ant-divider-with-text-left::before {
64
- top: 50%;
65
66
  width: 5%;
66
67
  }
67
68
  .ant-divider-horizontal.ant-divider-with-text-left::after {
68
- top: 50%;
69
69
  width: 95%;
70
70
  }
71
71
  .ant-divider-horizontal.ant-divider-with-text-right::before {
72
- top: 50%;
73
72
  width: 95%;
74
73
  }
75
74
  .ant-divider-horizontal.ant-divider-with-text-right::after {
76
- top: 50%;
77
75
  width: 5%;
78
76
  }
79
77
  .ant-divider-inner-text {
@@ -86,9 +84,6 @@
86
84
  border-style: dashed;
87
85
  border-width: 1px 0 0;
88
86
  }
89
- .ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed {
90
- border-top: 0;
91
- }
92
87
  .ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed::before,
93
88
  .ant-divider-horizontal.ant-divider-with-text.ant-divider-dashed::after {
94
89
  border-style: dashed none none;
@@ -101,6 +96,24 @@
101
96
  font-weight: normal;
102
97
  font-size: 14px;
103
98
  }
99
+ .ant-divider-horizontal.ant-divider-with-text-left.ant-divider-no-default-orientation-margin-left::before {
100
+ width: 0;
101
+ }
102
+ .ant-divider-horizontal.ant-divider-with-text-left.ant-divider-no-default-orientation-margin-left::after {
103
+ width: 100%;
104
+ }
105
+ .ant-divider-horizontal.ant-divider-with-text-left.ant-divider-no-default-orientation-margin-left .ant-divider-inner-text {
106
+ padding-left: 0;
107
+ }
108
+ .ant-divider-horizontal.ant-divider-with-text-right.ant-divider-no-default-orientation-margin-right::before {
109
+ width: 100%;
110
+ }
111
+ .ant-divider-horizontal.ant-divider-with-text-right.ant-divider-no-default-orientation-margin-right::after {
112
+ width: 0;
113
+ }
114
+ .ant-divider-horizontal.ant-divider-with-text-right.ant-divider-no-default-orientation-margin-right .ant-divider-inner-text {
115
+ padding-right: 0;
116
+ }
104
117
  .ant-divider-rtl {
105
118
  direction: rtl;
106
119
  }
package/es/components/OptionList/OptionItem/style.css CHANGED
@@ -20,31 +20,35 @@
20
20
  width: -webkit-max-content;
21
21
  width: -moz-max-content;
22
22
  width: max-content;
23
+ width: intrinsic;
23
24
  max-width: 250px;
24
25
  visibility: visible;
25
26
  }
27
+ .ant-tooltip-content {
28
+ position: relative;
29
+ }
26
30
  .ant-tooltip-hidden {
27
31
  display: none;
28
32
  }
29
33
  .ant-tooltip-placement-top,
30
34
  .ant-tooltip-placement-topLeft,
31
35
  .ant-tooltip-placement-topRight {
32
- padding-bottom: 8px;
36
+ padding-bottom: 14.3137085px;
33
37
  }
34
38
  .ant-tooltip-placement-right,
35
39
  .ant-tooltip-placement-rightTop,
36
40
  .ant-tooltip-placement-rightBottom {
37
- padding-left: 8px;
41
+ padding-left: 14.3137085px;
38
42
  }
39
43
  .ant-tooltip-placement-bottom,
40
44
  .ant-tooltip-placement-bottomLeft,
41
45
  .ant-tooltip-placement-bottomRight {
42
- padding-top: 8px;
46
+ padding-top: 14.3137085px;
43
47
  }
44
48
  .ant-tooltip-placement-left,
45
49
  .ant-tooltip-placement-leftTop,
46
50
  .ant-tooltip-placement-leftBottom {
47
- padding-right: 8px;
51
+ padding-right: 14.3137085px;
48
52
  }
49
53
  .ant-tooltip-inner {
50
54
  min-width: 30px;
@@ -61,44 +65,62 @@
61
65
  }
62
66
  .ant-tooltip-arrow {
63
67
  position: absolute;
68
+ z-index: 2;
64
69
  display: block;
65
- width: 13.07106781px;
66
- height: 13.07106781px;
70
+ width: 22px;
71
+ height: 22px;
67
72
  overflow: hidden;
68
73
  background: transparent;
69
74
  pointer-events: none;
70
75
  }
71
76
  .ant-tooltip-arrow-content {
77
+ --antd-arrow-background-color: linear-gradient(to right bottom, rgba(35, 44, 59, 0.7), rgba(35, 44, 59, 0.8));
72
78
  position: absolute;
73
79
  top: 0;
74
80
  right: 0;
75
81
  bottom: 0;
76
82
  left: 0;
77
83
  display: block;
78
- width: 5px;
79
- height: 5px;
84
+ width: 11.3137085px;
85
+ height: 11.3137085px;
80
86
  margin: auto;
81
- background-color: rgba(35, 44, 59, 0.8);
82
87
  content: '';
83
88
  pointer-events: auto;
89
+ border-radius: 0 0 2px;
90
+ pointer-events: none;
91
+ }
92
+ .ant-tooltip-arrow-content::before {
93
+ position: absolute;
94
+ top: -11.3137085px;
95
+ left: -11.3137085px;
96
+ width: 33.9411255px;
97
+ height: 33.9411255px;
98
+ background: var(--antd-arrow-background-color);
99
+ background-repeat: no-repeat;
100
+ background-position: -10px -10px;
101
+ content: '';
102
+ clip-path: inset(33% 33%);
103
+ clip-path: path('M 9.849242404917499 24.091883092036785 A 5 5 0 0 1 13.384776310850237 22.627416997969522 L 20.627416997969522 22.627416997969522 A 2 2 0 0 0 22.627416997969522 20.627416997969522 L 22.627416997969522 13.384776310850237 A 5 5 0 0 1 24.091883092036785 9.849242404917499 L 23.091883092036785 9.849242404917499 L 9.849242404917499 23.091883092036785 Z');
84
104
  }
85
105
  .ant-tooltip-placement-top .ant-tooltip-arrow,
86
106
  .ant-tooltip-placement-topLeft .ant-tooltip-arrow,
87
107
  .ant-tooltip-placement-topRight .ant-tooltip-arrow {
88
- bottom: -5.07106781px;
108
+ bottom: 0;
109
+ -webkit-transform: translateY(100%);
110
+ transform: translateY(100%);
89
111
  }
90
112
  .ant-tooltip-placement-top .ant-tooltip-arrow-content,
91
113
  .ant-tooltip-placement-topLeft .ant-tooltip-arrow-content,
92
114
  .ant-tooltip-placement-topRight .ant-tooltip-arrow-content {
93
115
  -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
94
116
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
95
- -webkit-transform: translateY(-6.53553391px) rotate(45deg);
96
- transform: translateY(-6.53553391px) rotate(45deg);
117
+ -webkit-transform: translateY(-11px) rotate(45deg);
118
+ transform: translateY(-11px) rotate(45deg);
97
119
  }
98
120
  .ant-tooltip-placement-top .ant-tooltip-arrow {
99
121
  left: 50%;
100
- -webkit-transform: translateX(-50%);
101
- transform: translateX(-50%);
122
+ -webkit-transform: translateY(100%) translateX(-50%);
123
+ transform: translateY(100%) translateX(-50%);
102
124
  }
103
125
  .ant-tooltip-placement-topLeft .ant-tooltip-arrow {
104
126
  left: 13px;
@@ -109,20 +131,22 @@
109
131
  .ant-tooltip-placement-right .ant-tooltip-arrow,
110
132
  .ant-tooltip-placement-rightTop .ant-tooltip-arrow,
111
133
  .ant-tooltip-placement-rightBottom .ant-tooltip-arrow {
112
- left: -5.07106781px;
134
+ left: 0;
135
+ -webkit-transform: translateX(-100%);
136
+ transform: translateX(-100%);
113
137
  }
114
138
  .ant-tooltip-placement-right .ant-tooltip-arrow-content,
115
139
  .ant-tooltip-placement-rightTop .ant-tooltip-arrow-content,
116
140
  .ant-tooltip-placement-rightBottom .ant-tooltip-arrow-content {
117
141
  -webkit-box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
118
142
  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
119
- -webkit-transform: translateX(6.53553391px) rotate(45deg);
120
- transform: translateX(6.53553391px) rotate(45deg);
143
+ -webkit-transform: translateX(11px) rotate(135deg);
144
+ transform: translateX(11px) rotate(135deg);
121
145
  }
122
146
  .ant-tooltip-placement-right .ant-tooltip-arrow {
123
147
  top: 50%;
124
- -webkit-transform: translateY(-50%);
125
- transform: translateY(-50%);
148
+ -webkit-transform: translateX(-100%) translateY(-50%);
149
+ transform: translateX(-100%) translateY(-50%);
126
150
  }
127
151
  .ant-tooltip-placement-rightTop .ant-tooltip-arrow {
128
152
  top: 5px;
@@ -133,20 +157,22 @@
133
157
  .ant-tooltip-placement-left .ant-tooltip-arrow,
134
158
  .ant-tooltip-placement-leftTop .ant-tooltip-arrow,
135
159
  .ant-tooltip-placement-leftBottom .ant-tooltip-arrow {
136
- right: -5.07106781px;
160
+ right: 0;
161
+ -webkit-transform: translateX(100%);
162
+ transform: translateX(100%);
137
163
  }
138
164
  .ant-tooltip-placement-left .ant-tooltip-arrow-content,
139
165
  .ant-tooltip-placement-leftTop .ant-tooltip-arrow-content,
140
166
  .ant-tooltip-placement-leftBottom .ant-tooltip-arrow-content {
141
167
  -webkit-box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
142
168
  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
143
- -webkit-transform: translateX(-6.53553391px) rotate(45deg);
144
- transform: translateX(-6.53553391px) rotate(45deg);
169
+ -webkit-transform: translateX(-11px) rotate(315deg);
170
+ transform: translateX(-11px) rotate(315deg);
145
171
  }
146
172
  .ant-tooltip-placement-left .ant-tooltip-arrow {
147
173
  top: 50%;
148
- -webkit-transform: translateY(-50%);
149
- transform: translateY(-50%);
174
+ -webkit-transform: translateX(100%) translateY(-50%);
175
+ transform: translateX(100%) translateY(-50%);
150
176
  }
151
177
  .ant-tooltip-placement-leftTop .ant-tooltip-arrow {
152
178
  top: 5px;
@@ -157,20 +183,22 @@
157
183
  .ant-tooltip-placement-bottom .ant-tooltip-arrow,
158
184
  .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,
159
185
  .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
160
- top: -5.07106781px;
186
+ top: 0;
187
+ -webkit-transform: translateY(-100%);
188
+ transform: translateY(-100%);
161
189
  }
162
190
  .ant-tooltip-placement-bottom .ant-tooltip-arrow-content,
163
191
  .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow-content,
164
192
  .ant-tooltip-placement-bottomRight .ant-tooltip-arrow-content {
165
193
  -webkit-box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
166
194
  box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
167
- -webkit-transform: translateY(6.53553391px) rotate(45deg);
168
- transform: translateY(6.53553391px) rotate(45deg);
195
+ -webkit-transform: translateY(11px) rotate(225deg);
196
+ transform: translateY(11px) rotate(225deg);
169
197
  }
170
198
  .ant-tooltip-placement-bottom .ant-tooltip-arrow {
171
199
  left: 50%;
172
- -webkit-transform: translateX(-50%);
173
- transform: translateX(-50%);
200
+ -webkit-transform: translateY(-100%) translateX(-50%);
201
+ transform: translateY(-100%) translateX(-50%);
174
202
  }
175
203
  .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow {
176
204
  left: 13px;
@@ -181,80 +209,80 @@
181
209
  .ant-tooltip-pink .ant-tooltip-inner {
182
210
  background-color: #eb2f96;
183
211
  }
184
- .ant-tooltip-pink .ant-tooltip-arrow-content {
185
- background-color: #eb2f96;
212
+ .ant-tooltip-pink .ant-tooltip-arrow-content::before {
213
+ background: #eb2f96;
186
214
  }
187
215
  .ant-tooltip-magenta .ant-tooltip-inner {
188
216
  background-color: #eb2f96;
189
217
  }
190
- .ant-tooltip-magenta .ant-tooltip-arrow-content {
191
- background-color: #eb2f96;
218
+ .ant-tooltip-magenta .ant-tooltip-arrow-content::before {
219
+ background: #eb2f96;
192
220
  }
193
221
  .ant-tooltip-red .ant-tooltip-inner {
194
222
  background-color: #f5222d;
195
223
  }
196
- .ant-tooltip-red .ant-tooltip-arrow-content {
197
- background-color: #f5222d;
224
+ .ant-tooltip-red .ant-tooltip-arrow-content::before {
225
+ background: #f5222d;
198
226
  }
199
227
  .ant-tooltip-volcano .ant-tooltip-inner {
200
228
  background-color: #fa541c;
201
229
  }
202
- .ant-tooltip-volcano .ant-tooltip-arrow-content {
203
- background-color: #fa541c;
230
+ .ant-tooltip-volcano .ant-tooltip-arrow-content::before {
231
+ background: #fa541c;
204
232
  }
205
233
  .ant-tooltip-orange .ant-tooltip-inner {
206
234
  background-color: #fa8c16;
207
235
  }
208
- .ant-tooltip-orange .ant-tooltip-arrow-content {
209
- background-color: #fa8c16;
236
+ .ant-tooltip-orange .ant-tooltip-arrow-content::before {
237
+ background: #fa8c16;
210
238
  }
211
239
  .ant-tooltip-yellow .ant-tooltip-inner {
212
240
  background-color: #fadb14;
213
241
  }
214
- .ant-tooltip-yellow .ant-tooltip-arrow-content {
215
- background-color: #fadb14;
242
+ .ant-tooltip-yellow .ant-tooltip-arrow-content::before {
243
+ background: #fadb14;
216
244
  }
217
245
  .ant-tooltip-gold .ant-tooltip-inner {
218
246
  background-color: #faad14;
219
247
  }
220
- .ant-tooltip-gold .ant-tooltip-arrow-content {
221
- background-color: #faad14;
248
+ .ant-tooltip-gold .ant-tooltip-arrow-content::before {
249
+ background: #faad14;
222
250
  }
223
251
  .ant-tooltip-cyan .ant-tooltip-inner {
224
252
  background-color: #13c2c2;
225
253
  }
226
- .ant-tooltip-cyan .ant-tooltip-arrow-content {
227
- background-color: #13c2c2;
254
+ .ant-tooltip-cyan .ant-tooltip-arrow-content::before {
255
+ background: #13c2c2;
228
256
  }
229
257
  .ant-tooltip-lime .ant-tooltip-inner {
230
258
  background-color: #a0d911;
231
259
  }
232
- .ant-tooltip-lime .ant-tooltip-arrow-content {
233
- background-color: #a0d911;
260
+ .ant-tooltip-lime .ant-tooltip-arrow-content::before {
261
+ background: #a0d911;
234
262
  }
235
263
  .ant-tooltip-green .ant-tooltip-inner {
236
264
  background-color: #52c41a;
237
265
  }
238
- .ant-tooltip-green .ant-tooltip-arrow-content {
239
- background-color: #52c41a;
266
+ .ant-tooltip-green .ant-tooltip-arrow-content::before {
267
+ background: #52c41a;
240
268
  }
241
269
  .ant-tooltip-blue .ant-tooltip-inner {
242
270
  background-color: #1890ff;
243
271
  }
244
- .ant-tooltip-blue .ant-tooltip-arrow-content {
245
- background-color: #1890ff;
272
+ .ant-tooltip-blue .ant-tooltip-arrow-content::before {
273
+ background: #1890ff;
246
274
  }
247
275
  .ant-tooltip-geekblue .ant-tooltip-inner {
248
276
  background-color: #2f54eb;
249
277
  }
250
- .ant-tooltip-geekblue .ant-tooltip-arrow-content {
251
- background-color: #2f54eb;
278
+ .ant-tooltip-geekblue .ant-tooltip-arrow-content::before {
279
+ background: #2f54eb;
252
280
  }
253
281
  .ant-tooltip-purple .ant-tooltip-inner {
254
282
  background-color: #722ed1;
255
283
  }
256
- .ant-tooltip-purple .ant-tooltip-arrow-content {
257
- background-color: #722ed1;
284
+ .ant-tooltip-purple .ant-tooltip-arrow-content::before {
285
+ background: #722ed1;
258
286
  }
259
287
  .ant-tooltip-rtl {
260
288
  direction: rtl;
package/es/components/OptionList/PopoverOptionList/index.js CHANGED
@@ -48,5 +48,5 @@ export default function PopoverOptionList(props) {
48
48
  });
49
49
  }, [handleItemAfterClick]);
50
50
  var items = useMemo(function () { return computeItems(options); }, [computeItems, options]);
51
- return (React.createElement(Popover, { placement: placement, getPopupContainer: getPopupContainer, trigger: "click", visible: visible, onVisibleChange: setVisible, content: React.createElement("div", { className: classnames(className, SDK_PREFIX + "-popover-list") }, items) }, children || React.createElement(MoreCircle, null)));
51
+ return (React.createElement(Popover, { placement: placement, getPopupContainer: getPopupContainer, trigger: "click", open: visible, onOpenChange: setVisible, content: React.createElement("div", { className: classnames(className, SDK_PREFIX + "-popover-list") }, items) }, children || React.createElement(MoreCircle, null)));
52
52
  }