@nutui/nutui-react-taro 1.4.13 → 1.4.14

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.
@@ -88,45 +88,45 @@
88
88
  align-items: center;
89
89
  justify-content: space-between;
90
90
  padding: $picker-bar-button-padding;
91
+ }
91
92
 
92
- .nut-picker__cancel-btn {
93
- color: $picker-cancel-color;
94
- font-size: $picker-bar-cancel-font-size;
95
- }
93
+ .nut-picker__cancel-btn {
94
+ color: $picker-cancel-color;
95
+ font-size: $picker-bar-cancel-font-size;
96
+ }
96
97
 
97
- .nut-picker__confirm-btn {
98
- color: $picker-ok-color;
99
- font-size: $picker-bar-ok-font-size;
100
- }
98
+ .nut-picker__confirm-btn {
99
+ color: $picker-ok-color;
100
+ font-size: $picker-bar-ok-font-size;
101
+ }
101
102
 
102
- .nut-picker__title {
103
- flex: 1;
104
- overflow: hidden;
105
- text-overflow: ellipsis;
106
- white-space: nowrap;
107
- text-align: center;
108
- color: $picker-bar-title-color;
109
- font-size: $picker-bar-title-font-size;
110
- font-weight: $picker-bar-title-font-weight;
111
- }
103
+ .nut-picker__title {
104
+ flex: 1;
105
+ overflow: hidden;
106
+ text-overflow: ellipsis;
107
+ white-space: nowrap;
108
+ text-align: center;
109
+ color: $picker-bar-title-color;
110
+ font-size: $picker-bar-title-font-size;
111
+ font-weight: $picker-bar-title-font-weight;
112
112
  }
113
113
 
114
114
  .nut-picker__panel {
115
115
  display: flex;
116
116
  position: relative;
117
+ }
117
118
 
118
- .nut-picker-indicator {
119
- position: absolute;
120
- top: 108px;
121
- height: $picker-item-height;
122
- width: 100%;
123
- border: $picker-item-active-line-border;
124
- border-left: 0;
125
- border-right: 0;
126
- color: $picker-item-text-color;
127
- font-size: $picker-item-text-font-size;
128
- z-index: 3;
129
- }
119
+ .nut-picker-indicator {
120
+ position: absolute;
121
+ top: 108px;
122
+ height: $picker-item-height;
123
+ width: 100%;
124
+ border: $picker-item-active-line-border;
125
+ border-left: 0;
126
+ border-right: 0;
127
+ color: $picker-item-text-color;
128
+ font-size: $picker-item-text-font-size;
129
+ z-index: 3;
130
130
  }
131
131
 
132
132
  .nut-picker-list {
@@ -135,83 +135,89 @@
135
135
  height: $picker-list-height;
136
136
  overflow: hidden;
137
137
  text-align: center;
138
+ }
138
139
 
139
- .nut-picker-list-panel {
140
- transform-style: preserve-3d;
141
- }
140
+ .nut-picker-list-panel {
141
+ transform-style: preserve-3d;
142
+ }
142
143
 
143
- .nut-picker-mask {
144
- position: absolute;
145
- top: 0;
146
- left: 0;
147
- right: 0;
148
- bottom: 0;
149
- background-image: $picker-mask-bg-img;
150
- background-position: top, bottom;
151
- background-size: 100% 108px;
152
- background-repeat: no-repeat;
153
- z-index: 3;
154
- }
144
+ .nut-picker-mask {
145
+ position: absolute;
146
+ top: 0;
147
+ left: 0;
148
+ right: 0;
149
+ bottom: 0;
150
+ background-image: $picker-mask-bg-img;
151
+ background-position: top, bottom;
152
+ background-size: 100% 108px;
153
+ background-repeat: no-repeat;
154
+ z-index: 3;
155
+ }
155
156
 
156
- .nut-picker-content,
157
- .nut-picker-roller {
158
- position: absolute;
159
- top: 108px;
160
- width: 100%;
161
- height: $picker-item-height;
162
- }
157
+ .picker-view-panel {
158
+ height: $picker-list-height;
159
+ flex-grow: 1;
160
+ }
163
161
 
164
- .nut-picker-content {
165
- background: #fff;
166
- z-index: 2;
167
- overflow: hidden;
168
- }
162
+ .nut-picker-content,
163
+ .nut-picker-roller {
164
+ position: absolute;
165
+ top: 108px;
166
+ width: 100%;
167
+ height: $picker-item-height;
168
+ }
169
169
 
170
- .nut-picker-item,
171
- .nut-picker-roller-item {
172
- white-space: nowrap;
173
- overflow: hidden;
174
- text-overflow: ellipsis;
175
- height: $picker-item-height;
176
- line-height: $picker-item-height;
177
- color: $picker-item-text-color;
178
- font-size: $picker-item-text-font-size;
179
- text-align: center;
180
- }
170
+ .nut-picker-content {
171
+ background: #fff;
172
+ z-index: 2;
173
+ overflow: hidden;
174
+ }
181
175
 
182
- .nut-picker-item {
183
- font-size: 16px;
184
- background: #fff;
185
- }
176
+ .nut-picker-item,
177
+ .nut-picker-roller-item {
178
+ white-space: nowrap;
179
+ overflow: hidden;
180
+ text-overflow: ellipsis;
181
+ height: $picker-item-height;
182
+ line-height: $picker-item-height;
183
+ color: $picker-item-text-color;
184
+ font-size: $picker-item-text-font-size;
185
+ text-align: center;
186
+ }
186
187
 
187
- .nut-picker-roller {
188
- z-index: 1;
189
- transform-style: preserve-3d;
188
+ .nut-picker-item {
189
+ font-size: 16px;
190
+ background: #fff;
191
+ }
190
192
 
191
- .nut-picker-roller-item {
192
- backface-visibility: hidden;
193
- -moz-backface-visibility: hidden;
194
- -webkit-backface-visibility: hidden;
195
- position: absolute;
196
- top: 0;
197
- width: 100%;
198
- color: $gray1;
199
- }
193
+ .nut-picker-roller {
194
+ z-index: 1;
195
+ transform-style: preserve-3d;
196
+ }
200
197
 
201
- .nut-picker-roller-item-title {
202
- display: block;
203
- width: 100%;
204
- height: 36px;
205
- line-height: 36px;
206
- color: $gray1;
207
- font-size: $picker-bar-title-font-size;
208
- }
198
+ .nut-picker-roller-item {
199
+ backface-visibility: hidden;
200
+ -moz-backface-visibility: hidden;
201
+ -webkit-backface-visibility: hidden;
202
+ position: absolute;
203
+ top: 0;
204
+ width: 100%;
205
+ color: $gray1;
206
+ }
209
207
 
210
- .nut-picker-roller-item-hidden {
211
- visibility: hidden;
212
- opacity: 0;
213
- }
214
- }
208
+ .nut-picker-roller-item-title {
209
+ display: block;
210
+ width: 100%;
211
+ height: 36px;
212
+ line-height: 36px;
213
+ text-align: center;
214
+ color: $gray1;
215
+ font-size: $picker-bar-title-font-size;
216
+ }
217
+
218
+ .nut-picker-roller-item-hidden {
219
+ visibility: hidden;
220
+ opacity: 0;
215
221
  }
216
222
 
217
223
  .nut-picker-placeholder {
@@ -0,0 +1,65 @@
1
+ .nut-swiper {
2
+ width: 100%;
3
+ height: 100%;
4
+ overflow: hidden;
5
+ }
6
+
7
+ .nut-swiper__container {
8
+ width: 100%;
9
+ height: 100%;
10
+ overflow: visible;
11
+ }
12
+
13
+ .nut-swiper__track {
14
+ width: 100%;
15
+ height: 100%;
16
+ position: relative;
17
+ display: flex;
18
+ }
19
+
20
+ .nut-swiper__track > div {
21
+ flex-shrink: 0;
22
+ width: 100%;
23
+ height: 100%;
24
+ }
25
+
26
+ .nut-swiper__track-vertical {
27
+ flex-direction: column;
28
+ }
29
+
30
+ .nut-swiper__pagination {
31
+ display: flex;
32
+ position: absolute;
33
+ left: 50%;
34
+ bottom: $swiper-pagination-bottom;
35
+ transform: translateX(-50%);
36
+ i {
37
+ width: $swiper-pagination-item-width;
38
+ height: $swiper-pagination-item-height;
39
+ margin-right: $swiper-pagination-item-margin-right;
40
+ border-radius: $swiper-pagination-item-border-radius;
41
+ &:last-child {
42
+ margin-right: 0;
43
+ }
44
+ }
45
+ }
46
+
47
+ .nut-swiper__pagination-vertical {
48
+ top: 50%;
49
+ left: 12px;
50
+ bottom: auto;
51
+ flex-direction: column;
52
+ -webkit-box-orient: vertical;
53
+ -webkit-box-direction: normal;
54
+ transform: translateY(-50%);
55
+ i {
56
+ margin-bottom: 5px;
57
+ width: 6px;
58
+ height: 6px;
59
+ border-radius: 50%;
60
+ &.active {
61
+ height: 18px;
62
+ border-radius: 5px;
63
+ }
64
+ }
65
+ }