@nutui/nutui-react 2.0.0-alpha.7 → 2.0.0-alpha.8
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.
- package/CHANGELOG.md +6 -0
- package/dist/esm/Audio.js +7 -3
- package/dist/esm/Cascader.js +20 -12
- package/dist/esm/Range/style/index.js +1 -1
- package/dist/esm/Range.js +119 -174
- package/dist/esm/tabs2.js +19 -8
- package/dist/locales/base.js +1 -1
- package/dist/locales/en-US.js +1 -1
- package/dist/locales/id-ID.js +1 -1
- package/dist/locales/zh-CN.js +1 -1
- package/dist/locales/zh-TW.js +1 -1
- package/dist/locales/zh-UG.js +1 -1
- package/dist/nutui.react.mjs +553 -609
- package/dist/nutui.react.umd.js +553 -609
- package/dist/packages/range/range.scss +24 -49
- package/dist/style.css +1 -1
- package/dist/style.mjs +1 -1
- package/dist/styles/variables-jmapp.scss +11 -17
- package/dist/styles/variables.scss +11 -14
- package/dist/types/index.d.ts +20 -26
- package/package.json +1 -1
|
@@ -1,34 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
.nut-theme-dark {
|
|
3
|
-
.nut-range-container {
|
|
4
|
-
background: $dark5;
|
|
5
|
-
.min,
|
|
6
|
-
.max {
|
|
7
|
-
color: $dark1;
|
|
8
|
-
}
|
|
9
|
-
.nut-range {
|
|
10
|
-
&-mark-text {
|
|
11
|
-
color: $dark2;
|
|
12
|
-
}
|
|
13
|
-
&-button {
|
|
14
|
-
.number {
|
|
15
|
-
color: $dark1;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
1
|
.nut-range-container {
|
|
23
2
|
display: flex;
|
|
24
3
|
position: relative;
|
|
25
4
|
width: 100%;
|
|
26
|
-
height:
|
|
5
|
+
height: $range-height;
|
|
27
6
|
align-items: center;
|
|
28
7
|
.min,
|
|
29
8
|
.max {
|
|
30
9
|
font-size: $font-size-1;
|
|
31
|
-
color: $range-
|
|
10
|
+
color: $range-font-color;
|
|
32
11
|
user-select: none;
|
|
33
12
|
}
|
|
34
13
|
&-vertical {
|
|
@@ -36,7 +15,7 @@
|
|
|
36
15
|
flex-direction: column;
|
|
37
16
|
padding: 0px 15px;
|
|
38
17
|
.nut-range {
|
|
39
|
-
width:
|
|
18
|
+
width: $range-height;
|
|
40
19
|
height: 100%;
|
|
41
20
|
&-button {
|
|
42
21
|
&-wrapper,
|
|
@@ -60,7 +39,7 @@
|
|
|
60
39
|
transform: translate3d(100%, 0, 0);
|
|
61
40
|
}
|
|
62
41
|
&-vertical {
|
|
63
|
-
margin:
|
|
42
|
+
margin: $range-margin 0px;
|
|
64
43
|
}
|
|
65
44
|
&-mark {
|
|
66
45
|
position: absolute;
|
|
@@ -84,11 +63,6 @@
|
|
|
84
63
|
word-break: keep-all;
|
|
85
64
|
user-select: none;
|
|
86
65
|
transform: translateY(-50%);
|
|
87
|
-
&-active {
|
|
88
|
-
.nut-range-tick {
|
|
89
|
-
background: $range-bar-bg-color;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
66
|
}
|
|
93
67
|
&-tick {
|
|
94
68
|
position: absolute;
|
|
@@ -98,7 +72,11 @@
|
|
|
98
72
|
height: 11px;
|
|
99
73
|
margin-left: -0px;
|
|
100
74
|
border-radius: 50%;
|
|
101
|
-
background
|
|
75
|
+
background: $range-inactive-color;
|
|
76
|
+
|
|
77
|
+
&.active {
|
|
78
|
+
background: $range-active-color;
|
|
79
|
+
}
|
|
102
80
|
}
|
|
103
81
|
}
|
|
104
82
|
}
|
|
@@ -107,8 +85,9 @@
|
|
|
107
85
|
display: block;
|
|
108
86
|
position: relative;
|
|
109
87
|
width: 100%;
|
|
110
|
-
height:
|
|
111
|
-
|
|
88
|
+
height: $range-height;
|
|
89
|
+
margin: 0 $range-margin;
|
|
90
|
+
background-color: $range-inactive-color;
|
|
112
91
|
border-radius: 2px;
|
|
113
92
|
cursor: pointer;
|
|
114
93
|
&::before {
|
|
@@ -125,19 +104,19 @@
|
|
|
125
104
|
position: relative;
|
|
126
105
|
width: 100%;
|
|
127
106
|
height: 100%;
|
|
128
|
-
background: $range-
|
|
107
|
+
background: $range-active-color;
|
|
129
108
|
border-radius: inherit;
|
|
130
109
|
transition: all 0.2s;
|
|
131
110
|
}
|
|
132
111
|
|
|
133
112
|
&-button {
|
|
134
113
|
display: block;
|
|
135
|
-
width: $range-
|
|
136
|
-
height: $range-
|
|
137
|
-
background
|
|
114
|
+
width: $range-button-width;
|
|
115
|
+
height: $range-button-height;
|
|
116
|
+
background: $range-button-background;
|
|
138
117
|
border-radius: 50%;
|
|
139
118
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
|
|
140
|
-
border: $range-
|
|
119
|
+
border: $range-button-border;
|
|
141
120
|
outline: none;
|
|
142
121
|
|
|
143
122
|
&-wrapper,
|
|
@@ -169,7 +148,7 @@
|
|
|
169
148
|
justify-content: center;
|
|
170
149
|
user-select: none;
|
|
171
150
|
font-size: $font-size-1;
|
|
172
|
-
color: $range-
|
|
151
|
+
color: $range-font-color;
|
|
173
152
|
transform: translate3d(0, -100%, 0);
|
|
174
153
|
}
|
|
175
154
|
}
|
|
@@ -183,9 +162,6 @@
|
|
|
183
162
|
cursor: not-allowed;
|
|
184
163
|
}
|
|
185
164
|
}
|
|
186
|
-
&-show-number {
|
|
187
|
-
margin: 0 15px;
|
|
188
|
-
}
|
|
189
165
|
|
|
190
166
|
&-mark {
|
|
191
167
|
position: absolute;
|
|
@@ -205,20 +181,19 @@
|
|
|
205
181
|
word-break: keep-all;
|
|
206
182
|
user-select: none;
|
|
207
183
|
transform: translateX(-50%);
|
|
208
|
-
&-active {
|
|
209
|
-
.nut-range-tick {
|
|
210
|
-
background: $range-bar-bg-color;
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
184
|
}
|
|
185
|
+
|
|
214
186
|
&-tick {
|
|
215
187
|
position: absolute;
|
|
216
188
|
top: -20px;
|
|
217
189
|
width: 11px;
|
|
218
190
|
height: 11px;
|
|
219
|
-
// margin-left: -11px;
|
|
220
191
|
left: 0px;
|
|
221
192
|
border-radius: 50%;
|
|
222
|
-
background
|
|
193
|
+
background: $range-inactive-color;
|
|
194
|
+
|
|
195
|
+
&.active {
|
|
196
|
+
background: $range-active-color;
|
|
197
|
+
}
|
|
223
198
|
}
|
|
224
199
|
}
|