@nutui/nutui-react-taro 3.0.19-cpp.25 → 3.0.19-cpp.26-beta.2

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 (138) hide show
  1. package/dist/cjs/locales/base.d.ts +3 -0
  2. package/dist/cjs/locales/en-US.js +4 -1
  3. package/dist/cjs/locales/id-ID.js +4 -1
  4. package/dist/cjs/locales/ja-JP.js +4 -1
  5. package/dist/cjs/locales/tr-TR.js +4 -1
  6. package/dist/cjs/locales/zh-CN.js +4 -1
  7. package/dist/cjs/locales/zh-TW.js +4 -1
  8. package/dist/cjs/locales/zh-UG.js +4 -1
  9. package/dist/cjs/packages/actionsheet/style/style.harmony.css +45 -24
  10. package/dist/cjs/packages/address/style/style.harmony.css +45 -24
  11. package/dist/cjs/packages/calendar/style/style.harmony.css +45 -24
  12. package/dist/cjs/packages/cascader/style/style.harmony.css +45 -24
  13. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  14. package/dist/cjs/packages/datepicker/style/style.harmony.css +46 -25
  15. package/dist/cjs/packages/imagepreview/style/style.harmony.css +45 -24
  16. package/dist/cjs/packages/numberkeyboard/style/style.css +1 -1
  17. package/dist/cjs/packages/numberkeyboard/style/style.harmony.css +46 -25
  18. package/dist/cjs/packages/nutui.react.build.d.ts +3 -1
  19. package/dist/cjs/packages/nutui.react.build.js +18 -14
  20. package/dist/cjs/packages/nutui.react.d.ts +4 -1
  21. package/dist/cjs/packages/nutui.react.js +19 -14
  22. package/dist/cjs/packages/nutui.react.scss.d.ts +1 -0
  23. package/dist/cjs/packages/nutui.react.scss.js +1 -0
  24. package/dist/cjs/packages/overlay/overlay.js +11 -17
  25. package/dist/cjs/packages/picker/style/style.css +1 -1
  26. package/dist/cjs/packages/picker/style/style.harmony.css +46 -25
  27. package/dist/cjs/packages/popover/style/style.harmony.css +45 -24
  28. package/dist/cjs/packages/popup/popup.js +171 -99
  29. package/dist/cjs/packages/popup/style/popup.scss +29 -9
  30. package/dist/cjs/packages/popup/style/style.css +45 -24
  31. package/dist/cjs/packages/popup/style/style.harmony.css +45 -24
  32. package/dist/cjs/packages/popup/style-jmapp/popup.scss +29 -9
  33. package/dist/cjs/packages/popup/style-jmapp/style.css +29 -8
  34. package/dist/cjs/packages/popup/style-jrkf/popup.scss +29 -9
  35. package/dist/cjs/packages/popup/style-jrkf/style.css +29 -8
  36. package/dist/cjs/packages/quickenter/index.d.ts +3 -0
  37. package/dist/cjs/packages/quickenter/index.js +13 -0
  38. package/dist/cjs/packages/quickenter/quickenter.d.ts +4 -0
  39. package/dist/cjs/packages/quickenter/quickenter.js +147 -0
  40. package/dist/cjs/packages/quickenter/style/css.js +2 -0
  41. package/dist/cjs/packages/quickenter/style/index.js +2 -0
  42. package/dist/cjs/packages/quickenter/style/quickenter.scss +110 -0
  43. package/dist/cjs/packages/quickenter/style/style.css +99 -0
  44. package/dist/cjs/packages/quickenter/style/style.harmony.css +500 -0
  45. package/dist/cjs/packages/quickenter/style-jmapp/css.js +2 -0
  46. package/dist/cjs/packages/quickenter/style-jmapp/index.js +2 -0
  47. package/dist/cjs/packages/quickenter/style-jmapp/quickenter.scss +110 -0
  48. package/dist/cjs/packages/quickenter/style-jmapp/style.css +99 -0
  49. package/dist/cjs/packages/quickenter/style-jrkf/css.js +2 -0
  50. package/dist/cjs/packages/quickenter/style-jrkf/index.js +2 -0
  51. package/dist/cjs/packages/quickenter/style-jrkf/quickenter.scss +110 -0
  52. package/dist/cjs/packages/quickenter/style-jrkf/style.css +99 -0
  53. package/dist/cjs/packages/shortpassword/style/style.harmony.css +45 -24
  54. package/dist/cjs/packages/timeselect/style/style.harmony.css +45 -24
  55. package/dist/cjs/packages/tour/style/style.harmony.css +45 -24
  56. package/dist/cjs/types/index.d.ts +3 -0
  57. package/dist/cjs/types/index.js +3 -0
  58. package/dist/cjs/types/spec/quickenter/base.d.ts +26 -0
  59. package/dist/cjs/types/spec/quickenter/base.js +4 -0
  60. package/dist/cjs/types/spec/quickenter/h5.d.ts +5 -0
  61. package/dist/cjs/types/spec/quickenter/h5.js +4 -0
  62. package/dist/cjs/types/spec/quickenter/taro.d.ts +5 -0
  63. package/dist/cjs/types/spec/quickenter/taro.js +4 -0
  64. package/dist/cjs/utils/taro/ConfigurableCSSTransition.d.ts +15 -0
  65. package/dist/cjs/utils/taro/ConfigurableCSSTransition.js +90 -0
  66. package/dist/es/locales/base.d.ts +3 -0
  67. package/dist/es/locales/en-US.js +4 -1
  68. package/dist/es/locales/id-ID.js +4 -1
  69. package/dist/es/locales/ja-JP.js +4 -1
  70. package/dist/es/locales/tr-TR.js +4 -1
  71. package/dist/es/locales/zh-CN.js +4 -1
  72. package/dist/es/locales/zh-TW.js +4 -1
  73. package/dist/es/locales/zh-UG.js +4 -1
  74. package/dist/es/packages/actionsheet/style/style.harmony.css +45 -24
  75. package/dist/es/packages/address/style/style.harmony.css +45 -24
  76. package/dist/es/packages/calendar/style/style.harmony.css +45 -24
  77. package/dist/es/packages/cascader/style/style.harmony.css +45 -24
  78. package/dist/es/packages/configprovider/types.d.ts +1 -1
  79. package/dist/es/packages/datepicker/style/style.harmony.css +46 -25
  80. package/dist/es/packages/imagepreview/style/style.harmony.css +45 -24
  81. package/dist/es/packages/numberkeyboard/style/style.css +1 -1
  82. package/dist/es/packages/numberkeyboard/style/style.harmony.css +46 -25
  83. package/dist/es/packages/nutui.react.build.d.ts +3 -1
  84. package/dist/es/packages/nutui.react.build.js +3 -1
  85. package/dist/es/packages/overlay/overlay.js +11 -17
  86. package/dist/es/packages/picker/style/style.css +1 -1
  87. package/dist/es/packages/picker/style/style.harmony.css +46 -25
  88. package/dist/es/packages/popover/style/style.harmony.css +45 -24
  89. package/dist/es/packages/popup/popup.js +172 -101
  90. package/dist/es/packages/popup/style/popup.scss +29 -9
  91. package/dist/es/packages/popup/style/style.css +45 -24
  92. package/dist/es/packages/popup/style/style.harmony.css +45 -24
  93. package/dist/es/packages/popup/style-jmapp/popup.scss +29 -9
  94. package/dist/es/packages/popup/style-jmapp/style.css +29 -8
  95. package/dist/es/packages/popup/style-jrkf/popup.scss +29 -9
  96. package/dist/es/packages/popup/style-jrkf/style.css +29 -8
  97. package/dist/es/packages/quickenter/index.d.ts +3 -0
  98. package/dist/es/packages/quickenter/index.js +2 -0
  99. package/dist/es/packages/quickenter/quickenter.d.ts +4 -0
  100. package/dist/es/packages/quickenter/quickenter.js +135 -0
  101. package/dist/es/packages/quickenter/style/css.js +2 -0
  102. package/dist/es/packages/quickenter/style/index.js +2 -0
  103. package/dist/es/packages/quickenter/style/quickenter.scss +110 -0
  104. package/dist/es/packages/quickenter/style/style.css +99 -0
  105. package/dist/es/packages/quickenter/style/style.harmony.css +500 -0
  106. package/dist/es/packages/quickenter/style-jmapp/css.js +2 -0
  107. package/dist/es/packages/quickenter/style-jmapp/index.js +2 -0
  108. package/dist/es/packages/quickenter/style-jmapp/quickenter.scss +110 -0
  109. package/dist/es/packages/quickenter/style-jmapp/style.css +99 -0
  110. package/dist/es/packages/quickenter/style-jrkf/css.js +2 -0
  111. package/dist/es/packages/quickenter/style-jrkf/index.js +2 -0
  112. package/dist/es/packages/quickenter/style-jrkf/quickenter.scss +110 -0
  113. package/dist/es/packages/quickenter/style-jrkf/style.css +99 -0
  114. package/dist/es/packages/shortpassword/style/style.harmony.css +45 -24
  115. package/dist/es/packages/timeselect/style/style.harmony.css +45 -24
  116. package/dist/es/packages/tour/style/style.harmony.css +45 -24
  117. package/dist/es/types/index.d.ts +3 -0
  118. package/dist/es/types/index.js +3 -0
  119. package/dist/es/types/spec/quickenter/base.d.ts +44 -0
  120. package/dist/es/types/spec/quickenter/base.js +1 -0
  121. package/dist/es/types/spec/quickenter/h5.d.ts +5 -0
  122. package/dist/es/types/spec/quickenter/h5.js +1 -0
  123. package/dist/es/types/spec/quickenter/taro.d.ts +5 -0
  124. package/dist/es/types/spec/quickenter/taro.js +1 -0
  125. package/dist/es/utils/taro/ConfigurableCSSTransition.d.ts +15 -0
  126. package/dist/es/utils/taro/ConfigurableCSSTransition.js +79 -0
  127. package/dist/nutui.react.umd.js +631 -332
  128. package/dist/style-jmapp.css +1 -1
  129. package/dist/style-jmapp.scss +35 -34
  130. package/dist/style-jrkf.css +1 -1
  131. package/dist/style-jrkf.scss +34 -33
  132. package/dist/style.css +1 -1
  133. package/dist/style.scss +35 -34
  134. package/dist/styles/variables-daojia.scss +36 -0
  135. package/dist/styles/variables-jmapp.scss +36 -0
  136. package/dist/styles/variables-jrkf.scss +36 -0
  137. package/dist/styles/variables.scss +37 -1
  138. package/package.json +1 -1
package/dist/cjs/packages/popup/style/popup.scss CHANGED
@@ -26,7 +26,6 @@
26
26
  color: $color-title;
27
27
  font-weight: $font-weight-bold;
28
28
  font-size: $popup-title-font-size;
29
- line-height: $popup-title-font-size;
30
29
  }
31
30
 
32
31
  &-description {
@@ -79,6 +78,8 @@
79
78
  &-center {
80
79
  top: 50%;
81
80
  left: 50%;
81
+ right: auto;
82
+ bottom: auto;
82
83
  min-height: 10%;
83
84
  max-width: 295px;
84
85
  transform: translate(-50%, -50%);
@@ -91,6 +92,8 @@
91
92
  &-bottom {
92
93
  bottom: 0;
93
94
  left: 0;
95
+ right: auto;
96
+ top: auto;
94
97
  width: 100%;
95
98
 
96
99
  &.nut-popup-round {
@@ -105,6 +108,8 @@
105
108
  &-right {
106
109
  top: 0;
107
110
  right: 0;
111
+ left: auto;
112
+ bottom: auto;
108
113
  width: 100px;
109
114
  height: 100%;
110
115
 
@@ -116,6 +121,8 @@
116
121
  &-left {
117
122
  top: 0;
118
123
  left: 0;
124
+ right: auto;
125
+ bottom: auto;
119
126
  width: 100px;
120
127
  height: 100%;
121
128
 
@@ -127,6 +134,8 @@
127
134
  &-top {
128
135
  top: 0;
129
136
  left: 0;
137
+ right: auto;
138
+ bottom: auto;
130
139
  width: 100%;
131
140
 
132
141
  &.nut-popup-round {
@@ -210,6 +219,9 @@
210
219
  }
211
220
 
212
221
  @keyframes popup-slide-top-exit {
222
+ from {
223
+ transform: translate3d(0, 0%, 0);
224
+ }
213
225
  to {
214
226
  transform: translate3d(0, -100%, 0);
215
227
  }
@@ -240,6 +252,9 @@
240
252
  }
241
253
 
242
254
  @keyframes popup-slide-right-exit {
255
+ from {
256
+ transform: translate3d(0%, 0, 0);
257
+ }
243
258
  to {
244
259
  transform: translate3d(100%, 0, 0);
245
260
  }
@@ -253,7 +268,7 @@
253
268
  animation-duration: $popup-animation-duration;
254
269
  }
255
270
 
256
- &-right-exit {
271
+ &-right-exit-active {
257
272
  animation-fill-mode: both;
258
273
  animation-name: popup-slide-right-exit;
259
274
  animation-duration: $popup-animation-duration;
@@ -269,7 +284,10 @@
269
284
  }
270
285
  }
271
286
 
272
- @keyframes slide-bottom-exit {
287
+ @keyframes popup-slide-bottom-exit {
288
+ from {
289
+ transform: translate3d(0, 0%, 0);
290
+ }
273
291
  to {
274
292
  transform: translate3d(0, 100%, 0);
275
293
  }
@@ -277,15 +295,15 @@
277
295
 
278
296
  &-bottom-enter-active,
279
297
  &-bottom-appear-active {
280
- transform: translate(0, 0);
298
+ transform: translate3d(0, 0, 0);
281
299
  animation-fill-mode: both;
282
300
  animation-name: popup-slide-bottom-enter;
283
301
  animation-duration: $popup-animation-duration;
284
302
  }
285
303
 
286
- &-bottom-exit {
304
+ &-bottom-exit-active {
287
305
  animation-fill-mode: both;
288
- animation-name: slide-bottom-exit;
306
+ animation-name: popup-slide-bottom-exit;
289
307
  animation-duration: $popup-animation-duration;
290
308
  }
291
309
 
@@ -300,6 +318,9 @@
300
318
  }
301
319
 
302
320
  @keyframes popup-slide-left-exit {
321
+ from {
322
+ transform: translate3d(0%, 0, 0);
323
+ }
303
324
  to {
304
325
  transform: translate3d(-100%, 0, 0);
305
326
  }
@@ -307,14 +328,13 @@
307
328
 
308
329
  &-left-enter-active,
309
330
  &-left-appear-active {
310
- transform: translate(0, 0);
331
+ transform: translate3d(0, 0, 0);
311
332
  animation-fill-mode: both;
312
333
  animation-name: popup-slide-left-enter;
313
334
  animation-duration: $popup-animation-duration;
314
335
  }
315
336
 
316
- &-left-exit-active,
317
- &-left-exit-done {
337
+ &-left-exit-active {
318
338
  animation-fill-mode: both;
319
339
  animation-name: popup-slide-left-exit;
320
340
  animation-duration: $popup-animation-duration;
package/dist/cjs/packages/popup/style/style.css CHANGED
@@ -17,7 +17,7 @@
17
17
  align-items: center;
18
18
  justify-content: center;
19
19
  border-bottom: var(--nutui-popup-title-border-bottom, 0);
20
- padding: var(--nutui-popup-title-padding, 16px);
20
+ padding: var(--nutui-popup-title-padding, 11px);
21
21
  position: relative;
22
22
  }
23
23
  .nut-popup-title-wrapper {
@@ -30,7 +30,6 @@
30
30
  color: var(--nutui-color-title, #1a1a1a);
31
31
  font-weight: var(--nutui-font-weight-bold, 600);
32
32
  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
33
- line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
34
33
  }
35
34
  .nut-popup-title-description {
36
35
  color: var(--nutui-color-text, #505259);
@@ -42,13 +41,13 @@
42
41
  }
43
42
  .nut-popup-title-left {
44
43
  position: absolute;
45
- top: var(--nutui-popup-title-padding, 16px);
46
- left: var(--nutui-popup-title-padding, 16px);
44
+ top: var(--nutui-popup-title-padding, 11px);
45
+ left: var(--nutui-popup-title-padding, 11px);
47
46
  }
48
47
  .nut-popup-title-right {
49
48
  position: absolute;
50
- top: var(--nutui-popup-title-padding, 16px);
51
- right: var(--nutui-popup-title-padding, 16px);
49
+ top: var(--nutui-popup-title-padding, 11px);
50
+ right: var(--nutui-popup-title-padding, 11px);
52
51
  z-index: 1;
53
52
  width: var(--nutui-popup-icon-size, 20px);
54
53
  height: var(--nutui-popup-icon-size, 20px);
@@ -59,20 +58,22 @@
59
58
  opacity: 0.7;
60
59
  }
61
60
  .nut-popup-title-right-top-left {
62
- top: var(--nutui-popup-title-padding, 16px);
63
- left: var(--nutui-popup-title-padding, 16px);
61
+ top: var(--nutui-popup-title-padding, 11px);
62
+ left: var(--nutui-popup-title-padding, 11px);
64
63
  }
65
64
  .nut-popup-title-right-bottom-left {
66
- bottom: var(--nutui-popup-title-padding, 16px);
67
- left: var(--nutui-popup-title-padding, 16px);
65
+ bottom: var(--nutui-popup-title-padding, 11px);
66
+ left: var(--nutui-popup-title-padding, 11px);
68
67
  }
69
68
  .nut-popup-title-right-bottom-right {
70
- right: var(--nutui-popup-title-padding, 16px);
71
- bottom: var(--nutui-popup-title-padding, 16px);
69
+ right: var(--nutui-popup-title-padding, 11px);
70
+ bottom: var(--nutui-popup-title-padding, 11px);
72
71
  }
73
72
  .nut-popup-center {
74
73
  top: 50%;
75
74
  left: 50%;
75
+ right: auto;
76
+ bottom: auto;
76
77
  min-height: 10%;
77
78
  max-width: 295px;
78
79
  transform: translate(-50%, -50%);
@@ -83,6 +84,8 @@
83
84
  .nut-popup-bottom {
84
85
  bottom: 0;
85
86
  left: 0;
87
+ right: auto;
88
+ top: auto;
86
89
  width: 100%;
87
90
  }
88
91
  .nut-popup-bottom.nut-popup-round {
@@ -94,6 +97,8 @@
94
97
  .nut-popup-right {
95
98
  top: 0;
96
99
  right: 0;
100
+ left: auto;
101
+ bottom: auto;
97
102
  width: 100px;
98
103
  height: 100%;
99
104
  }
@@ -103,6 +108,8 @@
103
108
  .nut-popup-left {
104
109
  top: 0;
105
110
  left: 0;
111
+ right: auto;
112
+ bottom: auto;
106
113
  width: 100px;
107
114
  height: 100%;
108
115
  }
@@ -112,6 +119,8 @@
112
119
  .nut-popup-top {
113
120
  top: 0;
114
121
  left: 0;
122
+ right: auto;
123
+ bottom: auto;
115
124
  width: 100%;
116
125
  }
117
126
  .nut-popup-top.nut-popup-round {
@@ -188,6 +197,9 @@
188
197
  }
189
198
  }
190
199
  @keyframes popup-slide-top-exit {
200
+ from {
201
+ transform: translate3d(0, 0%, 0);
202
+ }
191
203
  to {
192
204
  transform: translate3d(0, -100%, 0);
193
205
  }
@@ -212,6 +224,9 @@
212
224
  }
213
225
  }
214
226
  @keyframes popup-slide-right-exit {
227
+ from {
228
+ transform: translate3d(0%, 0, 0);
229
+ }
215
230
  to {
216
231
  transform: translate3d(100%, 0, 0);
217
232
  }
@@ -222,7 +237,7 @@
222
237
  animation-name: popup-slide-right-enter;
223
238
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
224
239
  }
225
- .nut-popup-slide-right-exit {
240
+ .nut-popup-slide-right-exit-active {
226
241
  animation-fill-mode: both;
227
242
  animation-name: popup-slide-right-exit;
228
243
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -235,20 +250,23 @@
235
250
  transform: translate3d(0, 0%, 0);
236
251
  }
237
252
  }
238
- @keyframes slide-bottom-exit {
253
+ @keyframes popup-slide-bottom-exit {
254
+ from {
255
+ transform: translate3d(0, 0%, 0);
256
+ }
239
257
  to {
240
258
  transform: translate3d(0, 100%, 0);
241
259
  }
242
260
  }
243
261
  .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
244
- transform: translate(0, 0);
262
+ transform: translate3d(0, 0, 0);
245
263
  animation-fill-mode: both;
246
264
  animation-name: popup-slide-bottom-enter;
247
265
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
248
266
  }
249
- .nut-popup-slide-bottom-exit {
267
+ .nut-popup-slide-bottom-exit-active {
250
268
  animation-fill-mode: both;
251
- animation-name: slide-bottom-exit;
269
+ animation-name: popup-slide-bottom-exit;
252
270
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
253
271
  }
254
272
  @keyframes popup-slide-left-enter {
@@ -260,17 +278,20 @@
260
278
  }
261
279
  }
262
280
  @keyframes popup-slide-left-exit {
281
+ from {
282
+ transform: translate3d(0%, 0, 0);
283
+ }
263
284
  to {
264
285
  transform: translate3d(-100%, 0, 0);
265
286
  }
266
287
  }
267
288
  .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
268
- transform: translate(0, 0);
289
+ transform: translate3d(0, 0, 0);
269
290
  animation-fill-mode: both;
270
291
  animation-name: popup-slide-left-enter;
271
292
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
272
293
  }
273
- .nut-popup-slide-left-exit-active, .nut-popup-slide-left-exit-done {
294
+ .nut-popup-slide-left-exit-active {
274
295
  animation-fill-mode: both;
275
296
  animation-name: popup-slide-left-exit;
276
297
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -285,27 +306,27 @@
285
306
  [dir=rtl] .nut-popup-title-left,
286
307
  .nut-rtl .nut-popup-title-left {
287
308
  left: auto;
288
- right: var(--nutui-popup-title-padding, 16px);
309
+ right: var(--nutui-popup-title-padding, 11px);
289
310
  }
290
311
  [dir=rtl] .nut-popup-title-right,
291
312
  .nut-rtl .nut-popup-title-right {
292
313
  right: auto;
293
- left: var(--nutui-popup-title-padding, 16px);
314
+ left: var(--nutui-popup-title-padding, 11px);
294
315
  }
295
316
  [dir=rtl] .nut-popup-title-right-top-left,
296
317
  .nut-rtl .nut-popup-title-right-top-left {
297
318
  left: auto;
298
- right: var(--nutui-popup-title-padding, 16px);
319
+ right: var(--nutui-popup-title-padding, 11px);
299
320
  }
300
321
  [dir=rtl] .nut-popup-title-right-bottom-left,
301
322
  .nut-rtl .nut-popup-title-right-bottom-left {
302
323
  left: auto;
303
- right: var(--nutui-popup-title-padding, 16px);
324
+ right: var(--nutui-popup-title-padding, 11px);
304
325
  }
305
326
  [dir=rtl] .nut-popup-title-right-bottom-right,
306
327
  .nut-rtl .nut-popup-title-right-bottom-right {
307
328
  right: auto;
308
- left: var(--nutui-popup-title-padding, 16px);
329
+ left: var(--nutui-popup-title-padding, 11px);
309
330
  }
310
331
  [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
311
332
  .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
package/dist/cjs/packages/popup/style/style.harmony.css CHANGED
@@ -71,7 +71,7 @@
71
71
  align-items: center;
72
72
  justify-content: center;
73
73
  border-bottom: var(--nutui-popup-title-border-bottom, 0);
74
- padding: var(--nutui-popup-title-padding, 16px);
74
+ padding: var(--nutui-popup-title-padding, 11px);
75
75
  position: relative;
76
76
  }
77
77
  .nut-popup-title-wrapper {
@@ -84,7 +84,6 @@
84
84
  color: var(--nutui-color-title, #1a1a1a);
85
85
  font-weight: var(--nutui-font-weight-bold, 600);
86
86
  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
87
- line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
88
87
  }
89
88
  .nut-popup-title-description {
90
89
  color: var(--nutui-color-text, #505259);
@@ -96,13 +95,13 @@
96
95
  }
97
96
  .nut-popup-title-left {
98
97
  position: absolute;
99
- top: var(--nutui-popup-title-padding, 16px);
100
- left: var(--nutui-popup-title-padding, 16px);
98
+ top: var(--nutui-popup-title-padding, 11px);
99
+ left: var(--nutui-popup-title-padding, 11px);
101
100
  }
102
101
  .nut-popup-title-right {
103
102
  position: absolute;
104
- top: var(--nutui-popup-title-padding, 16px);
105
- right: var(--nutui-popup-title-padding, 16px);
103
+ top: var(--nutui-popup-title-padding, 11px);
104
+ right: var(--nutui-popup-title-padding, 11px);
106
105
  z-index: 1;
107
106
  width: var(--nutui-popup-icon-size, 20px);
108
107
  height: var(--nutui-popup-icon-size, 20px);
@@ -113,20 +112,22 @@
113
112
  opacity: 0.7;
114
113
  }
115
114
  .nut-popup-title-right-top-left {
116
- top: var(--nutui-popup-title-padding, 16px);
117
- left: var(--nutui-popup-title-padding, 16px);
115
+ top: var(--nutui-popup-title-padding, 11px);
116
+ left: var(--nutui-popup-title-padding, 11px);
118
117
  }
119
118
  .nut-popup-title-right-bottom-left {
120
- bottom: var(--nutui-popup-title-padding, 16px);
121
- left: var(--nutui-popup-title-padding, 16px);
119
+ bottom: var(--nutui-popup-title-padding, 11px);
120
+ left: var(--nutui-popup-title-padding, 11px);
122
121
  }
123
122
  .nut-popup-title-right-bottom-right {
124
- right: var(--nutui-popup-title-padding, 16px);
125
- bottom: var(--nutui-popup-title-padding, 16px);
123
+ right: var(--nutui-popup-title-padding, 11px);
124
+ bottom: var(--nutui-popup-title-padding, 11px);
126
125
  }
127
126
  .nut-popup-center {
128
127
  top: 50%;
129
128
  left: 50%;
129
+ right: auto;
130
+ bottom: auto;
130
131
  min-height: 10%;
131
132
  max-width: 295px;
132
133
  transform: translate(-50%, -50%);
@@ -137,6 +138,8 @@
137
138
  .nut-popup-bottom {
138
139
  bottom: 0;
139
140
  left: 0;
141
+ right: auto;
142
+ top: auto;
140
143
  width: 100%;
141
144
  }
142
145
  .nut-popup-bottom.nut-popup-round {
@@ -148,6 +151,8 @@
148
151
  .nut-popup-right {
149
152
  top: 0;
150
153
  right: 0;
154
+ left: auto;
155
+ bottom: auto;
151
156
  width: 100px;
152
157
  height: 100%;
153
158
  }
@@ -157,6 +162,8 @@
157
162
  .nut-popup-left {
158
163
  top: 0;
159
164
  left: 0;
165
+ right: auto;
166
+ bottom: auto;
160
167
  width: 100px;
161
168
  height: 100%;
162
169
  }
@@ -166,6 +173,8 @@
166
173
  .nut-popup-top {
167
174
  top: 0;
168
175
  left: 0;
176
+ right: auto;
177
+ bottom: auto;
169
178
  width: 100%;
170
179
  }
171
180
  .nut-popup-top.nut-popup-round {
@@ -242,6 +251,9 @@
242
251
  }
243
252
  }
244
253
  @keyframes popup-slide-top-exit {
254
+ from {
255
+ transform: translate3d(0, 0%, 0);
256
+ }
245
257
  to {
246
258
  transform: translate3d(0, -100%, 0);
247
259
  }
@@ -266,6 +278,9 @@
266
278
  }
267
279
  }
268
280
  @keyframes popup-slide-right-exit {
281
+ from {
282
+ transform: translate3d(0%, 0, 0);
283
+ }
269
284
  to {
270
285
  transform: translate3d(100%, 0, 0);
271
286
  }
@@ -276,7 +291,7 @@
276
291
  animation-name: popup-slide-right-enter;
277
292
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
278
293
  }
279
- .nut-popup-slide-right-exit {
294
+ .nut-popup-slide-right-exit-active {
280
295
  animation-fill-mode: both;
281
296
  animation-name: popup-slide-right-exit;
282
297
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -289,20 +304,23 @@
289
304
  transform: translate3d(0, 0%, 0);
290
305
  }
291
306
  }
292
- @keyframes slide-bottom-exit {
307
+ @keyframes popup-slide-bottom-exit {
308
+ from {
309
+ transform: translate3d(0, 0%, 0);
310
+ }
293
311
  to {
294
312
  transform: translate3d(0, 100%, 0);
295
313
  }
296
314
  }
297
315
  .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
298
- transform: translate(0, 0);
316
+ transform: translate3d(0, 0, 0);
299
317
  animation-fill-mode: both;
300
318
  animation-name: popup-slide-bottom-enter;
301
319
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
302
320
  }
303
- .nut-popup-slide-bottom-exit {
321
+ .nut-popup-slide-bottom-exit-active {
304
322
  animation-fill-mode: both;
305
- animation-name: slide-bottom-exit;
323
+ animation-name: popup-slide-bottom-exit;
306
324
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
307
325
  }
308
326
  @keyframes popup-slide-left-enter {
@@ -314,17 +332,20 @@
314
332
  }
315
333
  }
316
334
  @keyframes popup-slide-left-exit {
335
+ from {
336
+ transform: translate3d(0%, 0, 0);
337
+ }
317
338
  to {
318
339
  transform: translate3d(-100%, 0, 0);
319
340
  }
320
341
  }
321
342
  .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
322
- transform: translate(0, 0);
343
+ transform: translate3d(0, 0, 0);
323
344
  animation-fill-mode: both;
324
345
  animation-name: popup-slide-left-enter;
325
346
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
326
347
  }
327
- .nut-popup-slide-left-exit-active, .nut-popup-slide-left-exit-done {
348
+ .nut-popup-slide-left-exit-active {
328
349
  animation-fill-mode: both;
329
350
  animation-name: popup-slide-left-exit;
330
351
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -339,27 +360,27 @@
339
360
  [dir=rtl] .nut-popup-title-left,
340
361
  .nut-rtl .nut-popup-title-left {
341
362
  left: auto;
342
- right: var(--nutui-popup-title-padding, 16px);
363
+ right: var(--nutui-popup-title-padding, 11px);
343
364
  }
344
365
  [dir=rtl] .nut-popup-title-right,
345
366
  .nut-rtl .nut-popup-title-right {
346
367
  right: auto;
347
- left: var(--nutui-popup-title-padding, 16px);
368
+ left: var(--nutui-popup-title-padding, 11px);
348
369
  }
349
370
  [dir=rtl] .nut-popup-title-right-top-left,
350
371
  .nut-rtl .nut-popup-title-right-top-left {
351
372
  left: auto;
352
- right: var(--nutui-popup-title-padding, 16px);
373
+ right: var(--nutui-popup-title-padding, 11px);
353
374
  }
354
375
  [dir=rtl] .nut-popup-title-right-bottom-left,
355
376
  .nut-rtl .nut-popup-title-right-bottom-left {
356
377
  left: auto;
357
- right: var(--nutui-popup-title-padding, 16px);
378
+ right: var(--nutui-popup-title-padding, 11px);
358
379
  }
359
380
  [dir=rtl] .nut-popup-title-right-bottom-right,
360
381
  .nut-rtl .nut-popup-title-right-bottom-right {
361
382
  right: auto;
362
- left: var(--nutui-popup-title-padding, 16px);
383
+ left: var(--nutui-popup-title-padding, 11px);
363
384
  }
364
385
  [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
365
386
  .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
package/dist/cjs/packages/popup/style-jmapp/popup.scss CHANGED
@@ -26,7 +26,6 @@
26
26
  color: $color-title;
27
27
  font-weight: $font-weight-bold;
28
28
  font-size: $popup-title-font-size;
29
- line-height: $popup-title-font-size;
30
29
  }
31
30
 
32
31
  &-description {
@@ -79,6 +78,8 @@
79
78
  &-center {
80
79
  top: 50%;
81
80
  left: 50%;
81
+ right: auto;
82
+ bottom: auto;
82
83
  min-height: 10%;
83
84
  max-width: 295px;
84
85
  transform: translate(-50%, -50%);
@@ -91,6 +92,8 @@
91
92
  &-bottom {
92
93
  bottom: 0;
93
94
  left: 0;
95
+ right: auto;
96
+ top: auto;
94
97
  width: 100%;
95
98
 
96
99
  &.nut-popup-round {
@@ -105,6 +108,8 @@
105
108
  &-right {
106
109
  top: 0;
107
110
  right: 0;
111
+ left: auto;
112
+ bottom: auto;
108
113
  width: 100px;
109
114
  height: 100%;
110
115
 
@@ -116,6 +121,8 @@
116
121
  &-left {
117
122
  top: 0;
118
123
  left: 0;
124
+ right: auto;
125
+ bottom: auto;
119
126
  width: 100px;
120
127
  height: 100%;
121
128
 
@@ -127,6 +134,8 @@
127
134
  &-top {
128
135
  top: 0;
129
136
  left: 0;
137
+ right: auto;
138
+ bottom: auto;
130
139
  width: 100%;
131
140
 
132
141
  &.nut-popup-round {
@@ -210,6 +219,9 @@
210
219
  }
211
220
 
212
221
  @keyframes popup-slide-top-exit {
222
+ from {
223
+ transform: translate3d(0, 0%, 0);
224
+ }
213
225
  to {
214
226
  transform: translate3d(0, -100%, 0);
215
227
  }
@@ -240,6 +252,9 @@
240
252
  }
241
253
 
242
254
  @keyframes popup-slide-right-exit {
255
+ from {
256
+ transform: translate3d(0%, 0, 0);
257
+ }
243
258
  to {
244
259
  transform: translate3d(100%, 0, 0);
245
260
  }
@@ -253,7 +268,7 @@
253
268
  animation-duration: $popup-animation-duration;
254
269
  }
255
270
 
256
- &-right-exit {
271
+ &-right-exit-active {
257
272
  animation-fill-mode: both;
258
273
  animation-name: popup-slide-right-exit;
259
274
  animation-duration: $popup-animation-duration;
@@ -269,7 +284,10 @@
269
284
  }
270
285
  }
271
286
 
272
- @keyframes slide-bottom-exit {
287
+ @keyframes popup-slide-bottom-exit {
288
+ from {
289
+ transform: translate3d(0, 0%, 0);
290
+ }
273
291
  to {
274
292
  transform: translate3d(0, 100%, 0);
275
293
  }
@@ -277,15 +295,15 @@
277
295
 
278
296
  &-bottom-enter-active,
279
297
  &-bottom-appear-active {
280
- transform: translate(0, 0);
298
+ transform: translate3d(0, 0, 0);
281
299
  animation-fill-mode: both;
282
300
  animation-name: popup-slide-bottom-enter;
283
301
  animation-duration: $popup-animation-duration;
284
302
  }
285
303
 
286
- &-bottom-exit {
304
+ &-bottom-exit-active {
287
305
  animation-fill-mode: both;
288
- animation-name: slide-bottom-exit;
306
+ animation-name: popup-slide-bottom-exit;
289
307
  animation-duration: $popup-animation-duration;
290
308
  }
291
309
 
@@ -300,6 +318,9 @@
300
318
  }
301
319
 
302
320
  @keyframes popup-slide-left-exit {
321
+ from {
322
+ transform: translate3d(0%, 0, 0);
323
+ }
303
324
  to {
304
325
  transform: translate3d(-100%, 0, 0);
305
326
  }
@@ -307,14 +328,13 @@
307
328
 
308
329
  &-left-enter-active,
309
330
  &-left-appear-active {
310
- transform: translate(0, 0);
331
+ transform: translate3d(0, 0, 0);
311
332
  animation-fill-mode: both;
312
333
  animation-name: popup-slide-left-enter;
313
334
  animation-duration: $popup-animation-duration;
314
335
  }
315
336
 
316
- &-left-exit-active,
317
- &-left-exit-done {
337
+ &-left-exit-active {
318
338
  animation-fill-mode: both;
319
339
  animation-name: popup-slide-left-exit;
320
340
  animation-duration: $popup-animation-duration;