@nutui/nutui-react-taro 3.0.4 → 3.0.6

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 (140) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/dist/cjs/packages/badge/badge.js +4 -3
  3. package/dist/cjs/packages/badge/style/badge.scss +7 -8
  4. package/dist/cjs/packages/badge/style/style.css +13 -15
  5. package/dist/cjs/packages/badge/style/style.harmony.css +7 -9
  6. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  7. package/dist/cjs/packages/datepicker/style/style.css +3 -1
  8. package/dist/cjs/packages/datepickerview/style/style.css +3 -1
  9. package/dist/cjs/packages/empty/style/index.js +1 -0
  10. package/dist/cjs/packages/empty/style/style.css +389 -0
  11. package/dist/cjs/packages/fixednav/fixednav.js +3 -3
  12. package/dist/cjs/packages/fixednav/style/fixednav.scss +43 -39
  13. package/dist/cjs/packages/fixednav/style/style.css +56 -51
  14. package/dist/cjs/packages/fixednav/style/style.harmony.css +43 -36
  15. package/dist/cjs/packages/imagepreview/imagepreview.js +58 -91
  16. package/dist/cjs/packages/imagepreview/style/imagepreview.scss +2 -1
  17. package/dist/cjs/packages/imagepreview/style/style.css +2 -1
  18. package/dist/cjs/packages/imagepreview/style/style.harmony.css +2 -1
  19. package/dist/cjs/packages/indicator/indicator.js +1 -1
  20. package/dist/cjs/packages/inputnumber/inputnumber.js +2 -2
  21. package/dist/cjs/packages/lottie/index.js +5 -5
  22. package/dist/cjs/packages/lottie/{mp.js → lottiemp.js} +1 -1
  23. package/dist/cjs/packages/notify/notify.js +44 -13
  24. package/dist/cjs/packages/notify/style/notify.scss +39 -36
  25. package/dist/cjs/packages/notify/style/style.css +36 -31
  26. package/dist/cjs/packages/notify/style/style.harmony.css +36 -31
  27. package/dist/cjs/packages/nutui.react.d.ts +1 -0
  28. package/dist/cjs/packages/nutui.react.js +1 -0
  29. package/dist/cjs/packages/picker/style/style.css +3 -1
  30. package/dist/cjs/packages/pickerview/pickerroller.js +81 -11
  31. package/dist/cjs/packages/pickerview/style/pickerview.scss +3 -1
  32. package/dist/cjs/packages/pickerview/style/style.css +3 -1
  33. package/dist/cjs/packages/pickerview/style/style.harmony.css +3 -0
  34. package/dist/cjs/packages/resultpage/style/index.js +1 -0
  35. package/dist/cjs/packages/resultpage/style/style.css +389 -0
  36. package/dist/cjs/packages/searchbar/searchbar.js +8 -2
  37. package/dist/cjs/packages/skeleton/skeleton.js +63 -52
  38. package/dist/cjs/packages/skeleton/style/index.js +0 -1
  39. package/dist/cjs/packages/skeleton/style/skeleton.scss +40 -46
  40. package/dist/cjs/packages/skeleton/style/style.css +32 -175
  41. package/dist/cjs/packages/skeleton/style/style.harmony.css +32 -42
  42. package/dist/cjs/packages/switch/style/style.css +5 -0
  43. package/dist/cjs/packages/switch/style/style.harmony.css +5 -0
  44. package/dist/cjs/packages/switch/style/switch.scss +5 -0
  45. package/dist/cjs/packages/switch/switch.js +22 -11
  46. package/dist/cjs/packages/tabbar/style/style.css +58 -54
  47. package/dist/cjs/packages/tabbar/style/style.harmony.css +24 -18
  48. package/dist/cjs/packages/tabbar/style/tabbar.scss +28 -19
  49. package/dist/cjs/packages/tabbar/tabbar.js +28 -10
  50. package/dist/cjs/packages/tabbaritem/style/style.css +34 -36
  51. package/dist/cjs/packages/tabbaritem/style/style.harmony.css +21 -21
  52. package/dist/cjs/packages/tabbaritem/style/tabbaritem.scss +32 -29
  53. package/dist/cjs/packages/tabbaritem/tabbaritem.js +38 -14
  54. package/dist/cjs/types/spec/badge/base.d.ts +1 -0
  55. package/dist/cjs/types/spec/indicator/base.d.ts +1 -1
  56. package/dist/cjs/types/spec/notify/base.d.ts +7 -2
  57. package/dist/cjs/types/spec/searchbar/taro.d.ts +10 -7
  58. package/dist/cjs/types/spec/skeleton/base.d.ts +7 -5
  59. package/dist/cjs/types/spec/switch/base.d.ts +3 -2
  60. package/dist/cjs/types/spec/switch/h5.d.ts +1 -1
  61. package/dist/cjs/types/spec/switch/taro.d.ts +1 -4
  62. package/dist/cjs/types/spec/tabbar/base.d.ts +7 -4
  63. package/dist/es/packages/badge/badge.js +4 -3
  64. package/dist/es/packages/badge/style/badge.scss +7 -8
  65. package/dist/es/packages/badge/style/style.css +13 -15
  66. package/dist/es/packages/badge/style/style.harmony.css +7 -9
  67. package/dist/es/packages/configprovider/types.d.ts +1 -1
  68. package/dist/es/packages/datepicker/style/style.css +3 -1
  69. package/dist/es/packages/datepickerview/style/style.css +3 -1
  70. package/dist/es/packages/empty/style/index.js +1 -0
  71. package/dist/es/packages/empty/style/style.css +389 -0
  72. package/dist/es/packages/fixednav/fixednav.js +4 -4
  73. package/dist/es/packages/fixednav/style/fixednav.scss +43 -39
  74. package/dist/es/packages/fixednav/style/style.css +56 -51
  75. package/dist/es/packages/fixednav/style/style.harmony.css +43 -36
  76. package/dist/es/packages/imagepreview/imagepreview.js +58 -91
  77. package/dist/es/packages/imagepreview/style/imagepreview.scss +2 -1
  78. package/dist/es/packages/imagepreview/style/style.css +2 -1
  79. package/dist/es/packages/imagepreview/style/style.harmony.css +2 -1
  80. package/dist/es/packages/indicator/indicator.js +1 -1
  81. package/dist/es/packages/inputnumber/inputnumber.js +2 -2
  82. package/dist/es/packages/lottie/index.js +3 -3
  83. package/dist/es/packages/lottie/{mp.js → lottiemp.js} +1 -1
  84. package/dist/es/packages/notify/notify.js +45 -14
  85. package/dist/es/packages/notify/style/notify.scss +39 -36
  86. package/dist/es/packages/notify/style/style.css +36 -31
  87. package/dist/es/packages/notify/style/style.harmony.css +36 -31
  88. package/dist/es/packages/picker/style/style.css +3 -1
  89. package/dist/es/packages/pickerview/pickerroller.js +80 -11
  90. package/dist/es/packages/pickerview/style/pickerview.scss +3 -1
  91. package/dist/es/packages/pickerview/style/style.css +3 -1
  92. package/dist/es/packages/pickerview/style/style.harmony.css +3 -0
  93. package/dist/es/packages/resultpage/style/index.js +1 -0
  94. package/dist/es/packages/resultpage/style/style.css +389 -0
  95. package/dist/es/packages/searchbar/searchbar.js +7 -2
  96. package/dist/es/packages/skeleton/skeleton.js +62 -52
  97. package/dist/es/packages/skeleton/style/index.js +0 -1
  98. package/dist/es/packages/skeleton/style/skeleton.scss +40 -46
  99. package/dist/es/packages/skeleton/style/style.css +32 -175
  100. package/dist/es/packages/skeleton/style/style.harmony.css +32 -42
  101. package/dist/es/packages/switch/style/style.css +5 -0
  102. package/dist/es/packages/switch/style/style.harmony.css +5 -0
  103. package/dist/es/packages/switch/style/switch.scss +5 -0
  104. package/dist/es/packages/switch/switch.js +21 -11
  105. package/dist/es/packages/tabbar/style/style.css +58 -54
  106. package/dist/es/packages/tabbar/style/style.harmony.css +24 -18
  107. package/dist/es/packages/tabbar/style/tabbar.scss +28 -19
  108. package/dist/es/packages/tabbar/tabbar.js +27 -10
  109. package/dist/es/packages/tabbaritem/style/style.css +34 -36
  110. package/dist/es/packages/tabbaritem/style/style.harmony.css +21 -21
  111. package/dist/es/packages/tabbaritem/style/tabbaritem.scss +32 -29
  112. package/dist/es/packages/tabbaritem/tabbaritem.js +38 -14
  113. package/dist/es/types/spec/badge/base.d.ts +4 -0
  114. package/dist/es/types/spec/indicator/base.d.ts +1 -1
  115. package/dist/es/types/spec/notify/base.d.ts +22 -5
  116. package/dist/es/types/spec/searchbar/taro.d.ts +10 -7
  117. package/dist/es/types/spec/skeleton/base.d.ts +19 -14
  118. package/dist/es/types/spec/switch/base.d.ts +6 -2
  119. package/dist/es/types/spec/switch/h5.d.ts +1 -1
  120. package/dist/es/types/spec/switch/taro.d.ts +1 -4
  121. package/dist/es/types/spec/tabbar/base.d.ts +7 -4
  122. package/dist/nutui.react.umd.js +549 -395
  123. package/dist/style.css +1 -1
  124. package/dist/style.scss +51 -51
  125. package/dist/styles/theme-dark.scss +2 -0
  126. package/dist/styles/theme-default.scss +2 -0
  127. package/dist/styles/themes/dark.css +1 -1
  128. package/dist/styles/themes/default.css +1 -1
  129. package/dist/styles/themes/jmapp.css +1 -1
  130. package/dist/styles/themes/jrkf.css +1 -1
  131. package/dist/styles/variables-jmapp.scss +24 -1
  132. package/dist/styles/variables-jrkf.scss +24 -1
  133. package/dist/styles/variables.scss +37 -38
  134. package/package.json +1 -1
  135. /package/dist/cjs/packages/lottie/{mp.d.ts → lottiemp.d.ts} +0 -0
  136. /package/dist/cjs/packages/lottie/{web.d.ts → lottieweb.d.ts} +0 -0
  137. /package/dist/cjs/packages/lottie/{web.js → lottieweb.js} +0 -0
  138. /package/dist/es/packages/lottie/{mp.d.ts → lottiemp.d.ts} +0 -0
  139. /package/dist/es/packages/lottie/{web.d.ts → lottieweb.d.ts} +0 -0
  140. /package/dist/es/packages/lottie/{web.js → lottieweb.js} +0 -0
package/dist/es/packages/fixednav/style/fixednav.scss CHANGED
@@ -3,7 +3,6 @@
3
3
  z-index: $fixednav-index;
4
4
  display: inline-block;
5
5
  height: 50px;
6
- right: 0;
7
6
 
8
7
  &.active {
9
8
  .nut-fixednav-btn {
@@ -16,9 +15,9 @@
16
15
  transform: translateX(0%) !important;
17
16
  }
18
17
 
19
- &.left {
18
+ &.nut-fixednav-left {
20
19
  .nut-icon {
21
- transform: rotate(0deg) !important;
20
+ transform: rotate(0deg);
22
21
  }
23
22
  }
24
23
  }
@@ -26,13 +25,10 @@
26
25
  &-btn {
27
26
  box-sizing: border-box;
28
27
  position: absolute;
29
- right: 0;
30
-
31
28
  z-index: $fixednav-index;
32
29
  width: 70px;
33
30
  height: 100%;
34
31
  background: $fixednav-button-background;
35
- border-radius: 45px 0px 0px 45px;
36
32
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
37
33
  display: flex;
38
34
  align-items: center;
@@ -47,33 +43,21 @@
47
43
  }
48
44
 
49
45
  .nut-icon {
50
- margin-right: 5px;
51
- transition: all 0.3s;
52
- transform: rotate(0deg);
53
46
  transition: all 0.3s;
54
47
  }
55
48
  }
56
49
 
57
50
  &-list {
58
51
  position: absolute;
59
- right: 0;
60
- transform: translateX(100%);
61
52
  transition: all 0.5s;
62
-
63
53
  z-index: $fixednav-index;
64
54
  flex-shrink: 0;
65
55
  height: 100%;
66
56
  background: $fixednav-background-color;
67
57
  display: flex;
68
58
  justify-content: space-between;
69
- border-radius: 25px 0px 0px 25px;
70
59
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
71
60
 
72
- padding: {
73
- left: 20px;
74
- right: 80px;
75
- }
76
-
77
61
  &-item {
78
62
  position: relative;
79
63
  flex: 1;
@@ -86,57 +70,77 @@
86
70
  flex-shrink: 0;
87
71
  color: $fixednav-color;
88
72
 
89
- img {
90
- width: 20px;
91
- height: 20px;
92
- margin-bottom: 2px;
93
- }
94
-
95
73
  .nut-fixednav-list-text {
96
74
  font-size: 10px;
97
75
  }
98
76
  }
77
+
78
+ &-image {
79
+ width: 20px;
80
+ height: 20px;
81
+ margin-bottom: 2px;
82
+ }
99
83
  }
100
84
 
101
- &.left {
102
- right: auto;
103
- left: 0;
85
+ &-right {
86
+ right: 0;
87
+ .nut-fixednav-btn {
88
+ right: 0;
89
+ border-radius: 45px 0px 0px 45px;
90
+ .nut-icon {
91
+ margin-right: 5px;
92
+ transform: rotate(0deg);
93
+ }
94
+ }
95
+ .nut-fixednav-list {
96
+ right: 0;
97
+ transform: translateX(100%);
98
+ border-radius: 25px 0px 0px 25px;
99
+ padding: {
100
+ left: 20px;
101
+ right: 80px;
102
+ }
103
+ }
104
+ }
104
105
 
106
+ &-left {
107
+ left: 0;
105
108
  .nut-fixednav-btn {
106
109
  flex-direction: row-reverse;
107
- right: auto;
108
110
  left: 0;
109
111
  border-radius: 0 45px 45px 0;
110
-
111
112
  .nut-icon {
112
- transform: rotate(180deg);
113
- margin-right: 0px;
114
113
  margin-left: 5px;
114
+ transform: rotate(180deg);
115
115
  }
116
116
  }
117
117
 
118
118
  .nut-fixednav-list {
119
119
  transform: translateX(-100%);
120
- right: auto;
120
+ left: 0;
121
121
  border-radius: 0px 25px 25px 0px;
122
-
123
122
  padding: {
124
123
  left: 80px;
125
124
  right: 20px;
126
125
  }
127
-
128
- margin: 0;
129
126
  }
130
127
  }
131
128
  }
132
129
 
133
130
  [dir='rtl'] .nut-fixednav,
134
131
  .nut-rtl .nut-fixednav {
135
- right: auto;
136
- left: 0;
132
+ &-right {
133
+ right: auto;
134
+ left: 0;
135
+ }
137
136
  &.active {
138
137
  .nut-icon {
139
- transform: rotate(-180deg);
138
+ transform: rotate(0deg);
139
+ }
140
+ &.nut-fixednav-left {
141
+ .nut-icon {
142
+ transform: rotate(-180deg);
143
+ }
140
144
  }
141
145
  }
142
146
 
@@ -171,7 +175,7 @@
171
175
  }
172
176
  }
173
177
 
174
- &.left {
178
+ &-left {
175
179
  left: auto;
176
180
  right: 0;
177
181
 
package/dist/es/packages/fixednav/style/style.css CHANGED
@@ -60,6 +60,8 @@
60
60
  .nut-badge {
61
61
  position: relative;
62
62
  display: inline-flex;
63
+ vertical-align: middle;
64
+ box-sizing: content-box;
63
65
  width: auto;
64
66
  }
65
67
  .nut-badge-icon {
@@ -92,13 +94,12 @@
92
94
  }
93
95
  .nut-badge-sup {
94
96
  display: inline-flex;
95
- justify-content: center;
96
- height: var(--nutui-badge-height, 14px);
97
+ text-align: center;
97
98
  min-width: var(--nutui-badge-min-width, 6px);
98
99
  padding: var(--nutui-badge-padding, 1px 4px);
99
100
  box-sizing: border-box;
100
101
  color: var(--nutui-badge-color, #ffffff);
101
- font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
102
+ font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
102
103
  line-height: 12px;
103
104
  white-space: nowrap;
104
105
  font-weight: normal;
@@ -106,14 +107,11 @@
106
107
  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
107
108
  z-index: 1;
108
109
  }
110
+ .nut-badge-disabled {
111
+ background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
112
+ }
109
113
  .nut-badge-number {
110
114
  font-family: "JD";
111
- /* #ifdef harmony */
112
- line-height: 12px;
113
- /* #endif */
114
- /* #ifndef harmony */
115
- line-height: 13px;
116
- /* #endif */
117
115
  }
118
116
  .nut-badge-one {
119
117
  height: var(--nutui-badge-height, 14px);
@@ -137,14 +135,14 @@
137
135
  height: var(--nutui-badge-dot-width, 6px);
138
136
  }
139
137
  .nut-badge-dot-small {
140
- min-width: var(--nutui-badge-dot-width, 4px);
141
- width: var(--nutui-badge-dot-width, 4px);
142
- height: var(--nutui-badge-dot-width, 4px);
138
+ min-width: var(--nutui-badge-dot-small-width, 4px);
139
+ width: var(--nutui-badge-dot-small-width, 4px);
140
+ height: var(--nutui-badge-dot-small-width, 4px);
143
141
  }
144
142
  .nut-badge-dot-large {
145
- min-width: var(--nutui-badge-dot-width, 8px);
146
- width: var(--nutui-badge-dot-width, 8px);
147
- height: var(--nutui-badge-dot-width, 8px);
143
+ min-width: var(--nutui-badge-dot-large-width, 8px);
144
+ width: var(--nutui-badge-dot-large-width, 8px);
145
+ height: var(--nutui-badge-dot-large-width, 8px);
148
146
  }
149
147
  .nut-badge-outline {
150
148
  background: #ffffff;
@@ -159,7 +157,6 @@
159
157
  z-index: var(--nutui-fixednav-index, 900);
160
158
  display: inline-block;
161
159
  height: 50px;
162
- right: 0;
163
160
  }
164
161
  .nut-fixednav.active .nut-fixednav-btn .nut-icon {
165
162
  transform: rotate(180deg);
@@ -167,18 +164,16 @@
167
164
  .nut-fixednav.active .nut-fixednav-list {
168
165
  transform: translateX(0%) !important;
169
166
  }
170
- .nut-fixednav.active.left .nut-icon {
171
- transform: rotate(0deg) !important;
167
+ .nut-fixednav.active.nut-fixednav-left .nut-icon {
168
+ transform: rotate(0deg);
172
169
  }
173
170
  .nut-fixednav-btn {
174
171
  box-sizing: border-box;
175
172
  position: absolute;
176
- right: 0;
177
173
  z-index: var(--nutui-fixednav-index, 900);
178
174
  width: 70px;
179
175
  height: 100%;
180
176
  background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23));
181
- border-radius: 45px 0px 0px 45px;
182
177
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
183
178
  display: flex;
184
179
  align-items: center;
@@ -192,15 +187,10 @@
192
187
  flex-shrink: 0;
193
188
  }
194
189
  .nut-fixednav-btn .nut-icon {
195
- margin-right: 5px;
196
- transition: all 0.3s;
197
- transform: rotate(0deg);
198
190
  transition: all 0.3s;
199
191
  }
200
192
  .nut-fixednav-list {
201
193
  position: absolute;
202
- right: 0;
203
- transform: translateX(100%);
204
194
  transition: all 0.5s;
205
195
  z-index: var(--nutui-fixednav-index, 900);
206
196
  flex-shrink: 0;
@@ -208,10 +198,7 @@
208
198
  background: var(--nutui-fixednav-background-color, #ffffff);
209
199
  display: flex;
210
200
  justify-content: space-between;
211
- border-radius: 25px 0px 0px 25px;
212
201
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
213
- padding-left: 20px;
214
- padding-right: 80px;
215
202
  }
216
203
  .nut-fixednav-list-item {
217
204
  position: relative;
@@ -225,45 +212,63 @@
225
212
  flex-shrink: 0;
226
213
  color: var(--nutui-fixednav-color, #1a1a1a);
227
214
  }
228
- .nut-fixednav-list-item img {
215
+ .nut-fixednav-list-item .nut-fixednav-list-text {
216
+ font-size: 10px;
217
+ }
218
+ .nut-fixednav-list-image {
229
219
  width: 20px;
230
220
  height: 20px;
231
221
  margin-bottom: 2px;
232
222
  }
233
- .nut-fixednav-list-item .nut-fixednav-list-text {
234
- font-size: 10px;
223
+ .nut-fixednav-right {
224
+ right: 0;
235
225
  }
236
- .nut-fixednav.left {
237
- right: auto;
226
+ .nut-fixednav-right .nut-fixednav-btn {
227
+ right: 0;
228
+ border-radius: 45px 0px 0px 45px;
229
+ }
230
+ .nut-fixednav-right .nut-fixednav-btn .nut-icon {
231
+ margin-right: 5px;
232
+ transform: rotate(0deg);
233
+ }
234
+ .nut-fixednav-right .nut-fixednav-list {
235
+ right: 0;
236
+ transform: translateX(100%);
237
+ border-radius: 25px 0px 0px 25px;
238
+ padding-left: 20px;
239
+ padding-right: 80px;
240
+ }
241
+ .nut-fixednav-left {
238
242
  left: 0;
239
243
  }
240
- .nut-fixednav.left .nut-fixednav-btn {
244
+ .nut-fixednav-left .nut-fixednav-btn {
241
245
  flex-direction: row-reverse;
242
- right: auto;
243
246
  left: 0;
244
247
  border-radius: 0 45px 45px 0;
245
248
  }
246
- .nut-fixednav.left .nut-fixednav-btn .nut-icon {
247
- transform: rotate(180deg);
248
- margin-right: 0px;
249
+ .nut-fixednav-left .nut-fixednav-btn .nut-icon {
249
250
  margin-left: 5px;
251
+ transform: rotate(180deg);
250
252
  }
251
- .nut-fixednav.left .nut-fixednav-list {
253
+ .nut-fixednav-left .nut-fixednav-list {
252
254
  transform: translateX(-100%);
253
- right: auto;
255
+ left: 0;
254
256
  border-radius: 0px 25px 25px 0px;
255
257
  padding-left: 80px;
256
258
  padding-right: 20px;
257
- margin: 0;
258
259
  }
259
260
 
260
- [dir=rtl] .nut-fixednav,
261
- .nut-rtl .nut-fixednav {
261
+ [dir=rtl] .nut-fixednav-right,
262
+ .nut-rtl .nut-fixednav-right {
262
263
  right: auto;
263
264
  left: 0;
264
265
  }
265
266
  [dir=rtl] .nut-fixednav.active .nut-icon,
266
267
  .nut-rtl .nut-fixednav.active .nut-icon {
268
+ transform: rotate(0deg);
269
+ }
270
+ [dir=rtl] .nut-fixednav.active.nut-fixednav-left .nut-icon,
271
+ .nut-rtl .nut-fixednav.active.nut-fixednav-left .nut-icon {
267
272
  transform: rotate(-180deg);
268
273
  }
269
274
  [dir=rtl] .nut-fixednav-btn,
@@ -293,25 +298,25 @@
293
298
  right: auto;
294
299
  left: 0;
295
300
  }
296
- [dir=rtl] .nut-fixednav.left,
297
- .nut-rtl .nut-fixednav.left {
301
+ [dir=rtl] .nut-fixednav-left,
302
+ .nut-rtl .nut-fixednav-left {
298
303
  left: auto;
299
304
  right: 0;
300
305
  }
301
- [dir=rtl] .nut-fixednav.left .nut-fixednav-btn,
302
- .nut-rtl .nut-fixednav.left .nut-fixednav-btn {
306
+ [dir=rtl] .nut-fixednav-left .nut-fixednav-btn,
307
+ .nut-rtl .nut-fixednav-left .nut-fixednav-btn {
303
308
  left: auto;
304
309
  right: 0;
305
310
  border-radius: 45px 0 0 45px;
306
311
  }
307
- [dir=rtl] .nut-fixednav.left .nut-fixednav-btn .nut-icon,
308
- .nut-rtl .nut-fixednav.left .nut-fixednav-btn .nut-icon {
312
+ [dir=rtl] .nut-fixednav-left .nut-fixednav-btn .nut-icon,
313
+ .nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon {
309
314
  transform: rotate(0deg);
310
315
  margin-right: 5px;
311
316
  margin-left: 0px;
312
317
  }
313
- [dir=rtl] .nut-fixednav.left .nut-fixednav-list,
314
- .nut-rtl .nut-fixednav.left .nut-fixednav-list {
318
+ [dir=rtl] .nut-fixednav-left .nut-fixednav-list,
319
+ .nut-rtl .nut-fixednav-left .nut-fixednav-list {
315
320
  transform: translateX(100%);
316
321
  right: auto;
317
322
  left: auto;
package/dist/es/packages/fixednav/style/style.harmony.css CHANGED
@@ -7,7 +7,6 @@
7
7
  z-index: 900;
8
8
  display: inline-block;
9
9
  height: 50px;
10
- right: 0;
11
10
  }
12
11
  .nut-fixednav.active .nut-fixednav-btn .nut-icon {
13
12
  transform: rotate(180deg);
@@ -15,18 +14,16 @@
15
14
  .nut-fixednav.active .nut-fixednav-list {
16
15
  transform: translateX(0%) !important;
17
16
  }
18
- .nut-fixednav.active.left .nut-icon {
19
- transform: rotate(0deg) !important;
17
+ .nut-fixednav.active.nut-fixednav-left .nut-icon {
18
+ transform: rotate(0deg);
20
19
  }
21
20
  .nut-fixednav-btn {
22
21
  box-sizing: border-box;
23
22
  position: absolute;
24
- right: 0;
25
23
  z-index: 900;
26
24
  width: 70px;
27
25
  height: 100%;
28
26
  background: #ff0f23;
29
- border-radius: 45px 0px 0px 45px;
30
27
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
31
28
  display: flex;
32
29
  align-items: center;
@@ -40,15 +37,10 @@
40
37
  flex-shrink: 0;
41
38
  }
42
39
  .nut-fixednav-btn .nut-icon {
43
- margin-right: 5px;
44
- transition: all 0.3s;
45
- transform: rotate(0deg);
46
40
  transition: all 0.3s;
47
41
  }
48
42
  .nut-fixednav-list {
49
43
  position: absolute;
50
- right: 0;
51
- transform: translateX(100%);
52
44
  transition: all 0.5s;
53
45
  z-index: 900;
54
46
  flex-shrink: 0;
@@ -56,10 +48,7 @@
56
48
  background: #ffffff;
57
49
  display: flex;
58
50
  justify-content: space-between;
59
- border-radius: 25px 0px 0px 25px;
60
51
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
61
- padding-left: 20px;
62
- padding-right: 80px;
63
52
  }
64
53
  .nut-fixednav-list-item {
65
54
  position: relative;
@@ -73,45 +62,63 @@
73
62
  flex-shrink: 0;
74
63
  color: #1a1a1a;
75
64
  }
76
- .nut-fixednav-list-item img {
65
+ .nut-fixednav-list-item .nut-fixednav-list-text {
66
+ font-size: 10px;
67
+ }
68
+ .nut-fixednav-list-image {
77
69
  width: 20px;
78
70
  height: 20px;
79
71
  margin-bottom: 2px;
80
72
  }
81
- .nut-fixednav-list-item .nut-fixednav-list-text {
82
- font-size: 10px;
73
+ .nut-fixednav-right {
74
+ right: 0;
83
75
  }
84
- .nut-fixednav.left {
85
- right: auto;
76
+ .nut-fixednav-right .nut-fixednav-btn {
77
+ right: 0;
78
+ border-radius: 45px 0px 0px 45px;
79
+ }
80
+ .nut-fixednav-right .nut-fixednav-btn .nut-icon {
81
+ margin-right: 5px;
82
+ transform: rotate(0deg);
83
+ }
84
+ .nut-fixednav-right .nut-fixednav-list {
85
+ right: 0;
86
+ transform: translateX(100%);
87
+ border-radius: 25px 0px 0px 25px;
88
+ padding-left: 20px;
89
+ padding-right: 80px;
90
+ }
91
+ .nut-fixednav-left {
86
92
  left: 0;
87
93
  }
88
- .nut-fixednav.left .nut-fixednav-btn {
94
+ .nut-fixednav-left .nut-fixednav-btn {
89
95
  flex-direction: row-reverse;
90
- right: auto;
91
96
  left: 0;
92
97
  border-radius: 0 45px 45px 0;
93
98
  }
94
- .nut-fixednav.left .nut-fixednav-btn .nut-icon {
95
- transform: rotate(180deg);
96
- margin-right: 0px;
99
+ .nut-fixednav-left .nut-fixednav-btn .nut-icon {
97
100
  margin-left: 5px;
101
+ transform: rotate(180deg);
98
102
  }
99
- .nut-fixednav.left .nut-fixednav-list {
103
+ .nut-fixednav-left .nut-fixednav-list {
100
104
  transform: translateX(-100%);
101
- right: auto;
105
+ left: 0;
102
106
  border-radius: 0px 25px 25px 0px;
103
107
  padding-left: 80px;
104
108
  padding-right: 20px;
105
- margin: 0;
106
109
  }
107
110
 
108
- [dir=rtl] .nut-fixednav,
109
- .nut-rtl .nut-fixednav {
111
+ [dir=rtl] .nut-fixednav-right,
112
+ .nut-rtl .nut-fixednav-right {
110
113
  right: auto;
111
114
  left: 0;
112
115
  }
113
116
  [dir=rtl] .nut-fixednav.active .nut-icon,
114
117
  .nut-rtl .nut-fixednav.active .nut-icon {
118
+ transform: rotate(0deg);
119
+ }
120
+ [dir=rtl] .nut-fixednav.active.nut-fixednav-left .nut-icon,
121
+ .nut-rtl .nut-fixednav.active.nut-fixednav-left .nut-icon {
115
122
  transform: rotate(-180deg);
116
123
  }
117
124
  [dir=rtl] .nut-fixednav-btn,
@@ -141,25 +148,25 @@
141
148
  right: auto;
142
149
  left: 0;
143
150
  }
144
- [dir=rtl] .nut-fixednav.left,
145
- .nut-rtl .nut-fixednav.left {
151
+ [dir=rtl] .nut-fixednav-left,
152
+ .nut-rtl .nut-fixednav-left {
146
153
  left: auto;
147
154
  right: 0;
148
155
  }
149
- [dir=rtl] .nut-fixednav.left .nut-fixednav-btn,
150
- .nut-rtl .nut-fixednav.left .nut-fixednav-btn {
156
+ [dir=rtl] .nut-fixednav-left .nut-fixednav-btn,
157
+ .nut-rtl .nut-fixednav-left .nut-fixednav-btn {
151
158
  left: auto;
152
159
  right: 0;
153
160
  border-radius: 45px 0 0 45px;
154
161
  }
155
- [dir=rtl] .nut-fixednav.left .nut-fixednav-btn .nut-icon,
156
- .nut-rtl .nut-fixednav.left .nut-fixednav-btn .nut-icon {
162
+ [dir=rtl] .nut-fixednav-left .nut-fixednav-btn .nut-icon,
163
+ .nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon {
157
164
  transform: rotate(0deg);
158
165
  margin-right: 5px;
159
166
  margin-left: 0px;
160
167
  }
161
- [dir=rtl] .nut-fixednav.left .nut-fixednav-list,
162
- .nut-rtl .nut-fixednav.left .nut-fixednav-list {
168
+ [dir=rtl] .nut-fixednav-left .nut-fixednav-list,
169
+ .nut-rtl .nut-fixednav-left .nut-fixednav-list {
163
170
  transform: translateX(100%);
164
171
  right: auto;
165
172
  left: auto;