@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
@@ -0,0 +1,99 @@
1
+ /* #ifdef harmony */
2
+ /* #endif */
3
+ /* #ifndef harmony */
4
+ /* #endif */
5
+ .nut-quickenter {
6
+ width: 100%;
7
+ max-height: var(--nutui-quickenter-max-height, 256px);
8
+ background: var(--nutui-quickenter-bg-color, #f5f5f5);
9
+ border-radius: 0 0 12px 12px;
10
+ overflow: hidden;
11
+ box-sizing: border-box;
12
+ display: flex;
13
+ flex-direction: column;
14
+ }
15
+ .nut-quickenter-control {
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: space-between;
19
+ padding: 30px 16px 0;
20
+ box-sizing: border-box;
21
+ }
22
+ .nut-quickenter-title {
23
+ flex: 1;
24
+ overflow: hidden;
25
+ text-overflow: ellipsis;
26
+ white-space: nowrap;
27
+ text-align: left;
28
+ color: var(--nutui-quickenter-title-color, var(--nutui-color-title, #1a1a1a));
29
+ font-size: var(--nutui-quickenter-title-font-size, var(--nutui-font-size-base, 14px));
30
+ }
31
+ .nut-quickenter-close-btn {
32
+ color: var(--nutui-quickenter-close-icon-color, #808080);
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ }
37
+ .nut-quickenter-close-btn svg,
38
+ .nut-quickenter-close-btn .nut-icon {
39
+ width: var(--nutui-quickenter-close-icon-size, 12px);
40
+ height: var(--nutui-quickenter-close-icon-size, 12px);
41
+ }
42
+ .nut-quickenter-content {
43
+ flex: 1;
44
+ padding: 10px 28px;
45
+ overflow-y: hidden;
46
+ box-sizing: border-box;
47
+ }
48
+ .nut-quickenter-content-scrollable {
49
+ overflow-y: auto;
50
+ -webkit-overflow-scrolling: touch;
51
+ }
52
+ .nut-quickenter-list {
53
+ display: flex;
54
+ flex-wrap: wrap;
55
+ align-items: flex-start;
56
+ width: 100%;
57
+ }
58
+ .nut-quickenter-item {
59
+ display: flex;
60
+ flex-direction: column;
61
+ align-items: center;
62
+ justify-content: flex-start;
63
+ width: 56px;
64
+ padding: 0 0 12px 0;
65
+ box-sizing: border-box;
66
+ cursor: pointer;
67
+ margin-right: calc((100% - 224px) / 3);
68
+ }
69
+ .nut-quickenter-item:nth-child(4n) {
70
+ margin-right: 0;
71
+ }
72
+ .nut-quickenter-item-icon {
73
+ width: 56px;
74
+ height: 56px;
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ border-radius: 50%;
79
+ background: var(--nutui-quickenter-item-icon-bg-color, #ffffff);
80
+ color: var(--nutui-quickenter-item-icon-color, var(--nutui-color-title, #1a1a1a));
81
+ margin-bottom: 8px;
82
+ flex-shrink: 0;
83
+ }
84
+ .nut-quickenter-item-icon svg,
85
+ .nut-quickenter-item-icon .nut-icon {
86
+ width: 22px;
87
+ height: 22px;
88
+ }
89
+ .nut-quickenter-item-title {
90
+ font-size: var(--nutui-quickenter-item-title-font-size, var(--nutui-font-size-s, 12px));
91
+ color: var(--nutui-quickenter-item-title-color, var(--nutui-color-title, #1a1a1a));
92
+ text-align: center;
93
+ line-height: 1.4;
94
+ white-space: normal;
95
+ word-wrap: break-word;
96
+ width: 72px;
97
+ margin-left: -8px;
98
+ margin-right: -8px;
99
+ }
@@ -0,0 +1,500 @@
1
+ @charset "UTF-8";
2
+ /* #ifdef harmony */
3
+ /* #endif */
4
+ /* #ifndef harmony */
5
+ /* #endif */
6
+ .nut-overlay {
7
+ position: fixed;
8
+ top: 0;
9
+ left: 0;
10
+ bottom: 0;
11
+ right: 0;
12
+ width: 100%;
13
+ height: 100%;
14
+ background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
15
+ }
16
+
17
+ .nut-overflow-hidden {
18
+ overflow: hidden !important;
19
+ }
20
+
21
+ @keyframes nut-fade-in {
22
+ 0% {
23
+ opacity: 0;
24
+ }
25
+ 1% {
26
+ opacity: 0;
27
+ }
28
+ 100% {
29
+ opacity: 1;
30
+ }
31
+ }
32
+ @keyframes nut-fade-out {
33
+ 0% {
34
+ opacity: 1;
35
+ }
36
+ 1% {
37
+ opacity: 1;
38
+ }
39
+ 100% {
40
+ opacity: 0;
41
+ }
42
+ }
43
+ .nut-overlay-slide-enter-active, .nut-overlay-slide-appear-active {
44
+ animation-fill-mode: both;
45
+ animation-name: nut-fade-in;
46
+ animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
47
+ }
48
+ .nut-overlay-slide-exit-active {
49
+ animation-fill-mode: both;
50
+ animation-name: nut-fade-out;
51
+ animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
52
+ }
53
+
54
+ [dir=rtl] .nut-overlay,
55
+ .nut-rtl .nut-overlay {
56
+ left: auto;
57
+ right: 0;
58
+ }
59
+
60
+ .nut-popup {
61
+ position: fixed;
62
+ min-height: 26%;
63
+ max-height: 100%;
64
+ background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
65
+ -webkit-overflow-scrolling: touch;
66
+ font-size: var(--nutui-font-size-base, 14px);
67
+ }
68
+ .nut-popup-title {
69
+ display: flex;
70
+ flex-direction: row;
71
+ align-items: center;
72
+ justify-content: center;
73
+ border-bottom: var(--nutui-popup-title-border-bottom, 0);
74
+ padding: var(--nutui-popup-title-padding, 11px);
75
+ position: relative;
76
+ }
77
+ .nut-popup-title-wrapper {
78
+ display: flex;
79
+ flex-direction: column;
80
+ justify-content: center;
81
+ align-items: center;
82
+ }
83
+ .nut-popup-title-title {
84
+ color: var(--nutui-color-title, #1a1a1a);
85
+ font-weight: var(--nutui-font-weight-bold, 600);
86
+ font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
87
+ }
88
+ .nut-popup-title-description {
89
+ color: var(--nutui-color-text, #505259);
90
+ font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
91
+ font-weight: var(--nutui-font-weight, 400);
92
+ }
93
+ .nut-popup-title-description-gap {
94
+ margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8px));
95
+ }
96
+ .nut-popup-title-left {
97
+ position: absolute;
98
+ top: var(--nutui-popup-title-padding, 11px);
99
+ left: var(--nutui-popup-title-padding, 11px);
100
+ }
101
+ .nut-popup-title-right {
102
+ position: absolute;
103
+ top: var(--nutui-popup-title-padding, 11px);
104
+ right: var(--nutui-popup-title-padding, 11px);
105
+ z-index: 1;
106
+ width: var(--nutui-popup-icon-size, 20px);
107
+ height: var(--nutui-popup-icon-size, 20px);
108
+ color: var(--nutui-color-title, #1a1a1a);
109
+ cursor: pointer;
110
+ }
111
+ .nut-popup-title-right:active {
112
+ opacity: 0.7;
113
+ }
114
+ .nut-popup-title-right-top-left {
115
+ top: var(--nutui-popup-title-padding, 11px);
116
+ left: var(--nutui-popup-title-padding, 11px);
117
+ }
118
+ .nut-popup-title-right-bottom-left {
119
+ bottom: var(--nutui-popup-title-padding, 11px);
120
+ left: var(--nutui-popup-title-padding, 11px);
121
+ }
122
+ .nut-popup-title-right-bottom-right {
123
+ right: var(--nutui-popup-title-padding, 11px);
124
+ bottom: var(--nutui-popup-title-padding, 11px);
125
+ }
126
+ .nut-popup-center {
127
+ top: 50%;
128
+ left: 50%;
129
+ right: auto;
130
+ bottom: auto;
131
+ min-height: 10%;
132
+ max-width: 295px;
133
+ transform: translate(-50%, -50%);
134
+ }
135
+ .nut-popup-center.nut-popup-round {
136
+ border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
137
+ }
138
+ .nut-popup-bottom {
139
+ bottom: 0;
140
+ left: 0;
141
+ right: auto;
142
+ top: auto;
143
+ width: 100%;
144
+ }
145
+ .nut-popup-bottom.nut-popup-round {
146
+ border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0;
147
+ }
148
+ .nut-popup-bottom-top {
149
+ position: absolute;
150
+ }
151
+ .nut-popup-right {
152
+ top: 0;
153
+ right: 0;
154
+ left: auto;
155
+ bottom: auto;
156
+ width: 100px;
157
+ height: 100%;
158
+ }
159
+ .nut-popup-right.nut-popup-round {
160
+ border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
161
+ }
162
+ .nut-popup-left {
163
+ top: 0;
164
+ left: 0;
165
+ right: auto;
166
+ bottom: auto;
167
+ width: 100px;
168
+ height: 100%;
169
+ }
170
+ .nut-popup-left.nut-popup-round {
171
+ border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) 0;
172
+ }
173
+ .nut-popup-top {
174
+ top: 0;
175
+ left: 0;
176
+ right: auto;
177
+ bottom: auto;
178
+ width: 100%;
179
+ }
180
+ .nut-popup-top.nut-popup-round {
181
+ border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12px));
182
+ }
183
+ .nut-popup-slide {
184
+ /* 从顶部滑出 */
185
+ /* 从右侧滑出 */
186
+ /* 从底部滑出 */
187
+ /* 从左侧滑出 */
188
+ }
189
+ @keyframes popup-scale-fade-in {
190
+ from {
191
+ opacity: 0;
192
+ transform: scale(0.8);
193
+ }
194
+ to {
195
+ opacity: 1;
196
+ transform: scale(1);
197
+ }
198
+ }
199
+ @keyframes popup-scale-fade-out {
200
+ from {
201
+ opacity: 1;
202
+ transform: scale(1);
203
+ }
204
+ to {
205
+ opacity: 0;
206
+ transform: scale(0.8);
207
+ }
208
+ }
209
+ .nut-popup-slide-none-enter-active {
210
+ animation-fill-mode: both;
211
+ animation-name: popup-scale-fade-in;
212
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
213
+ }
214
+ .nut-popup-slide-none-exit-active {
215
+ animation-fill-mode: both;
216
+ animation-name: popup-scale-fade-out;
217
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
218
+ }
219
+ @keyframes popup-fade-in {
220
+ from {
221
+ opacity: 0;
222
+ }
223
+ to {
224
+ opacity: 1;
225
+ }
226
+ }
227
+ @keyframes popup-fade-out {
228
+ from {
229
+ opacity: 1;
230
+ }
231
+ to {
232
+ opacity: 0;
233
+ }
234
+ }
235
+ .nut-popup-slide-center-enter-active {
236
+ animation-fill-mode: both;
237
+ animation-name: popup-fade-in;
238
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
239
+ }
240
+ .nut-popup-slide-center-exit-active {
241
+ animation-fill-mode: both;
242
+ animation-name: popup-fade-out;
243
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
244
+ }
245
+ @keyframes popup-slide-top-enter {
246
+ from {
247
+ transform: translate3d(0, -100%, 0);
248
+ }
249
+ to {
250
+ transform: translate3d(0, 0%, 0);
251
+ }
252
+ }
253
+ @keyframes popup-slide-top-exit {
254
+ from {
255
+ transform: translate3d(0, 0%, 0);
256
+ }
257
+ to {
258
+ transform: translate3d(0, -100%, 0);
259
+ }
260
+ }
261
+ .nut-popup-slide-top-enter-active, .nut-popup-slide-top-appear-active {
262
+ transform: translate3d(0, 0%, 0);
263
+ animation-fill-mode: both;
264
+ animation-name: popup-slide-top-enter;
265
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
266
+ }
267
+ .nut-popup-slide-top-exit-active {
268
+ animation-fill-mode: both;
269
+ animation-name: popup-slide-top-exit;
270
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
271
+ }
272
+ @keyframes popup-slide-right-enter {
273
+ from {
274
+ transform: translate3d(100%, 0, 0);
275
+ }
276
+ to {
277
+ transform: translate3d(0%, 0, 0);
278
+ }
279
+ }
280
+ @keyframes popup-slide-right-exit {
281
+ from {
282
+ transform: translate3d(0%, 0, 0);
283
+ }
284
+ to {
285
+ transform: translate3d(100%, 0, 0);
286
+ }
287
+ }
288
+ .nut-popup-slide-right-enter-active, .nut-popup-slide-right-appear-active {
289
+ transform: translate3d(0, 0, 0);
290
+ animation-fill-mode: both;
291
+ animation-name: popup-slide-right-enter;
292
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
293
+ }
294
+ .nut-popup-slide-right-exit-active {
295
+ animation-fill-mode: both;
296
+ animation-name: popup-slide-right-exit;
297
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
298
+ }
299
+ @keyframes popup-slide-bottom-enter {
300
+ from {
301
+ transform: translate3d(0, 100%, 0);
302
+ }
303
+ to {
304
+ transform: translate3d(0, 0%, 0);
305
+ }
306
+ }
307
+ @keyframes popup-slide-bottom-exit {
308
+ from {
309
+ transform: translate3d(0, 0%, 0);
310
+ }
311
+ to {
312
+ transform: translate3d(0, 100%, 0);
313
+ }
314
+ }
315
+ .nut-popup-slide-bottom-enter-active, .nut-popup-slide-bottom-appear-active {
316
+ transform: translate3d(0, 0, 0);
317
+ animation-fill-mode: both;
318
+ animation-name: popup-slide-bottom-enter;
319
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
320
+ }
321
+ .nut-popup-slide-bottom-exit-active {
322
+ animation-fill-mode: both;
323
+ animation-name: popup-slide-bottom-exit;
324
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
325
+ }
326
+ @keyframes popup-slide-left-enter {
327
+ from {
328
+ transform: translate3d(-100%, 0, 0);
329
+ }
330
+ to {
331
+ transform: translate3d(0%, 0, 0);
332
+ }
333
+ }
334
+ @keyframes popup-slide-left-exit {
335
+ from {
336
+ transform: translate3d(0%, 0, 0);
337
+ }
338
+ to {
339
+ transform: translate3d(-100%, 0, 0);
340
+ }
341
+ }
342
+ .nut-popup-slide-left-enter-active, .nut-popup-slide-left-appear-active {
343
+ transform: translate3d(0, 0, 0);
344
+ animation-fill-mode: both;
345
+ animation-name: popup-slide-left-enter;
346
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
347
+ }
348
+ .nut-popup-slide-left-exit-active {
349
+ animation-fill-mode: both;
350
+ animation-name: popup-slide-left-exit;
351
+ animation-duration: var(--nutui-popup-animation-duration, 0.3s);
352
+ }
353
+ .nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
354
+ display: none;
355
+ }
356
+ .nut-popup .nut-overflow-hidden {
357
+ overflow: hidden;
358
+ }
359
+
360
+ [dir=rtl] .nut-popup-title-left,
361
+ .nut-rtl .nut-popup-title-left {
362
+ left: auto;
363
+ right: var(--nutui-popup-title-padding, 11px);
364
+ }
365
+ [dir=rtl] .nut-popup-title-right,
366
+ .nut-rtl .nut-popup-title-right {
367
+ right: auto;
368
+ left: var(--nutui-popup-title-padding, 11px);
369
+ }
370
+ [dir=rtl] .nut-popup-title-right-top-left,
371
+ .nut-rtl .nut-popup-title-right-top-left {
372
+ left: auto;
373
+ right: var(--nutui-popup-title-padding, 11px);
374
+ }
375
+ [dir=rtl] .nut-popup-title-right-bottom-left,
376
+ .nut-rtl .nut-popup-title-right-bottom-left {
377
+ left: auto;
378
+ right: var(--nutui-popup-title-padding, 11px);
379
+ }
380
+ [dir=rtl] .nut-popup-title-right-bottom-right,
381
+ .nut-rtl .nut-popup-title-right-bottom-right {
382
+ right: auto;
383
+ left: var(--nutui-popup-title-padding, 11px);
384
+ }
385
+ [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
386
+ .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
387
+ transform: rotate(180deg);
388
+ }
389
+ [dir=rtl] .nut-popup-center,
390
+ .nut-rtl .nut-popup-center {
391
+ left: auto;
392
+ right: 50%;
393
+ transform: translate(50%, -50%);
394
+ }
395
+ [dir=rtl] .nut-popup-bottom,
396
+ .nut-rtl .nut-popup-bottom {
397
+ left: auto;
398
+ right: 0;
399
+ }
400
+ [dir=rtl] .nut-popup-top,
401
+ .nut-rtl .nut-popup-top {
402
+ left: auto;
403
+ right: 0;
404
+ }
405
+
406
+ .nut-quickenter {
407
+ width: 100%;
408
+ max-height: var(--nutui-quickenter-max-height, 256px);
409
+ background: var(--nutui-quickenter-bg-color, #f5f5f5);
410
+ border-radius: 0 0 12px 12px;
411
+ overflow: hidden;
412
+ box-sizing: border-box;
413
+ display: flex;
414
+ flex-direction: column;
415
+ }
416
+ .nut-quickenter-control {
417
+ display: flex;
418
+ align-items: center;
419
+ justify-content: space-between;
420
+ padding: 30px 16px 0;
421
+ box-sizing: border-box;
422
+ }
423
+ .nut-quickenter-title {
424
+ flex: 1;
425
+ overflow: hidden;
426
+ text-overflow: ellipsis;
427
+ white-space: nowrap;
428
+ text-align: left;
429
+ color: var(--nutui-quickenter-title-color, var(--nutui-color-title, #1a1a1a));
430
+ font-size: var(--nutui-quickenter-title-font-size, var(--nutui-font-size-base, 14px));
431
+ }
432
+ .nut-quickenter-close-btn {
433
+ color: var(--nutui-quickenter-close-icon-color, #808080);
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: center;
437
+ }
438
+ .nut-quickenter-close-btn svg,
439
+ .nut-quickenter-close-btn .nut-icon {
440
+ width: var(--nutui-quickenter-close-icon-size, 12px);
441
+ height: var(--nutui-quickenter-close-icon-size, 12px);
442
+ }
443
+ .nut-quickenter-content {
444
+ flex: 1;
445
+ padding: 10px 28px;
446
+ overflow-y: hidden;
447
+ box-sizing: border-box;
448
+ }
449
+ .nut-quickenter-content-scrollable {
450
+ overflow-y: auto;
451
+ -webkit-overflow-scrolling: touch;
452
+ }
453
+ .nut-quickenter-list {
454
+ display: flex;
455
+ flex-wrap: wrap;
456
+ align-items: flex-start;
457
+ width: 100%;
458
+ }
459
+ .nut-quickenter-item {
460
+ display: flex;
461
+ flex-direction: column;
462
+ align-items: center;
463
+ justify-content: flex-start;
464
+ width: 56px;
465
+ padding: 0 0 12px 0;
466
+ box-sizing: border-box;
467
+ cursor: pointer;
468
+ margin-right: calc((100% - 224px) / 3);
469
+ }
470
+ .nut-quickenter-item:nth-child(4n) {
471
+ margin-right: 0;
472
+ }
473
+ .nut-quickenter-item-icon {
474
+ width: 56px;
475
+ height: 56px;
476
+ display: flex;
477
+ align-items: center;
478
+ justify-content: center;
479
+ border-radius: 50%;
480
+ background: var(--nutui-quickenter-item-icon-bg-color, #ffffff);
481
+ color: var(--nutui-quickenter-item-icon-color, var(--nutui-color-title, #1a1a1a));
482
+ margin-bottom: 8px;
483
+ flex-shrink: 0;
484
+ }
485
+ .nut-quickenter-item-icon svg,
486
+ .nut-quickenter-item-icon .nut-icon {
487
+ width: 22px;
488
+ height: 22px;
489
+ }
490
+ .nut-quickenter-item-title {
491
+ font-size: var(--nutui-quickenter-item-title-font-size, var(--nutui-font-size-s, 12px));
492
+ color: var(--nutui-quickenter-item-title-color, var(--nutui-color-title, #1a1a1a));
493
+ text-align: center;
494
+ line-height: 1.4;
495
+ white-space: normal;
496
+ word-wrap: break-word;
497
+ width: 72px;
498
+ margin-left: -8px;
499
+ margin-right: -8px;
500
+ }
@@ -0,0 +1,2 @@
1
+ import '../../popup/style-jmapp/css';
2
+ import './style.css';
@@ -0,0 +1,2 @@
1
+ import '../../popup/style-jmapp';
2
+ import './quickenter.scss';
@@ -0,0 +1,110 @@
1
+ .nut-quickenter {
2
+ width: 100%;
3
+ max-height: $quickenter-max-height; // Limit height for scrolling
4
+ background: $quickenter-bg-color;
5
+ border-radius: 0 0 12px 12px;
6
+ overflow: hidden;
7
+ box-sizing: border-box;
8
+ display: flex;
9
+ flex-direction: column;
10
+
11
+ &-control {
12
+ display: flex;
13
+ align-items: center;
14
+ justify-content: space-between;
15
+ padding: 30px 16px 0;
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ &-title {
20
+ flex: 1;
21
+ overflow: hidden;
22
+ text-overflow: ellipsis;
23
+ white-space: nowrap;
24
+ text-align: left;
25
+ color: $quickenter-title-color;
26
+ font-size: $quickenter-title-font-size;
27
+ }
28
+
29
+ &-close-btn {
30
+ color: $quickenter-close-icon-color;
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+
35
+ svg,
36
+ .nut-icon {
37
+ width: $quickenter-close-icon-size;
38
+ height: $quickenter-close-icon-size;
39
+ }
40
+ }
41
+
42
+ &-content {
43
+ flex: 1;
44
+ padding: 10px 28px;
45
+ overflow-y: hidden; // Default: no scrolling
46
+ box-sizing: border-box;
47
+
48
+ &-scrollable {
49
+ overflow-y: auto; // Only scroll when > 8 items
50
+ -webkit-overflow-scrolling: touch;
51
+ }
52
+ }
53
+
54
+ &-list {
55
+ display: flex;
56
+ flex-wrap: wrap;
57
+ align-items: flex-start;
58
+ width: 100%;
59
+ }
60
+
61
+ &-item {
62
+ display: flex;
63
+ flex-direction: column;
64
+ align-items: center;
65
+ justify-content: flex-start;
66
+ width: 56px;
67
+ padding: 0 0 12px 0; // Reduced from 16px to ensure 2 rows fit in 256px
68
+ box-sizing: border-box;
69
+ cursor: pointer;
70
+
71
+ // Calculate gap for 4 items per row: (100% - 4 * 56px) / 3
72
+ margin-right: calc((100% - 224px) / 3);
73
+
74
+ &:nth-child(4n) {
75
+ margin-right: 0;
76
+ }
77
+
78
+ &-icon {
79
+ width: 56px;
80
+ height: 56px;
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ border-radius: 50%;
85
+ background: $quickenter-item-icon-bg-color;
86
+ color: $quickenter-item-icon-color;
87
+ margin-bottom: 8px;
88
+ flex-shrink: 0;
89
+
90
+ svg,
91
+ .nut-icon {
92
+ width: 22px;
93
+ height: 22px;
94
+ }
95
+ }
96
+
97
+ &-title {
98
+ font-size: $quickenter-item-title-font-size;
99
+ color: $quickenter-item-title-color;
100
+ text-align: center;
101
+ line-height: 1.4;
102
+ // Allow multi-line if text is long, preventing truncation
103
+ white-space: normal;
104
+ word-wrap: break-word;
105
+ width: 72px; // Allow text to be slightly wider than icon
106
+ margin-left: -8px; // Center 72px title over 56px icon
107
+ margin-right: -8px;
108
+ }
109
+ }
110
+ }