@nutui/nutui-react-taro 3.0.10 → 3.0.11-patch.0

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 (75) hide show
  1. package/CHANGELOG.md +18 -13
  2. package/dist/cjs/locales/base.d.ts +2 -0
  3. package/dist/cjs/locales/en-US.js +3 -1
  4. package/dist/cjs/locales/id-ID.js +3 -1
  5. package/dist/cjs/locales/tr-TR.js +3 -1
  6. package/dist/cjs/locales/zh-CN.js +3 -1
  7. package/dist/cjs/locales/zh-TW.js +3 -1
  8. package/dist/cjs/locales/zh-UG.js +3 -1
  9. package/dist/cjs/packages/address/address.js +76 -48
  10. package/dist/cjs/packages/address/{customRender.d.ts → cascaderRender.d.ts} +1 -1
  11. package/dist/cjs/packages/address/{customRender.js → cascaderRender.js} +5 -5
  12. package/dist/cjs/packages/address/elevatorRender.d.ts +14 -0
  13. package/dist/cjs/packages/address/elevatorRender.js +264 -0
  14. package/dist/cjs/packages/address/existRender.js +2 -2
  15. package/dist/cjs/packages/address/style/address.scss +114 -5
  16. package/dist/cjs/packages/address/style/style.css +103 -4
  17. package/dist/cjs/packages/address/style/style.harmony.css +103 -4
  18. package/dist/cjs/packages/address/style-jmapp/address.scss +114 -5
  19. package/dist/cjs/packages/address/style-jmapp/style.css +103 -4
  20. package/dist/cjs/packages/address/style-jrkf/address.scss +114 -5
  21. package/dist/cjs/packages/address/style-jrkf/style.css +103 -4
  22. package/dist/cjs/packages/address/utils.d.ts +5 -0
  23. package/dist/cjs/packages/address/utils.js +93 -0
  24. package/dist/cjs/packages/animatingnumbers/style/style.harmony.css +42 -1
  25. package/dist/cjs/packages/cascader/cascader.js +2 -2
  26. package/dist/cjs/packages/picker/style/picker.scss +0 -1
  27. package/dist/cjs/packages/picker/style/style.css +0 -1
  28. package/dist/cjs/packages/picker/style/style.harmony.css +0 -1
  29. package/dist/cjs/packages/picker/style-jmapp/picker.scss +0 -1
  30. package/dist/cjs/packages/picker/style-jmapp/style.css +0 -1
  31. package/dist/cjs/packages/picker/style-jrkf/picker.scss +0 -1
  32. package/dist/cjs/packages/picker/style-jrkf/style.css +0 -1
  33. package/dist/cjs/types/spec/address/base.d.ts +3 -12
  34. package/dist/cjs/types/spec/cascader/base.d.ts +1 -0
  35. package/dist/es/locales/base.d.ts +2 -0
  36. package/dist/es/locales/en-US.js +3 -1
  37. package/dist/es/locales/id-ID.js +3 -1
  38. package/dist/es/locales/tr-TR.js +3 -1
  39. package/dist/es/locales/zh-CN.js +3 -1
  40. package/dist/es/locales/zh-TW.js +3 -1
  41. package/dist/es/locales/zh-UG.js +3 -1
  42. package/dist/es/packages/address/address.js +77 -49
  43. package/dist/es/packages/address/{customRender.d.ts → cascaderRender.d.ts} +1 -1
  44. package/dist/es/packages/address/{customRender.js → cascaderRender.js} +3 -3
  45. package/dist/es/packages/address/elevatorRender.d.ts +14 -0
  46. package/dist/es/packages/address/elevatorRender.js +252 -0
  47. package/dist/es/packages/address/existRender.js +2 -2
  48. package/dist/es/packages/address/style/address.scss +114 -5
  49. package/dist/es/packages/address/style/style.css +103 -4
  50. package/dist/es/packages/address/style/style.harmony.css +103 -4
  51. package/dist/es/packages/address/style-jmapp/address.scss +114 -5
  52. package/dist/es/packages/address/style-jmapp/style.css +103 -4
  53. package/dist/es/packages/address/style-jrkf/address.scss +114 -5
  54. package/dist/es/packages/address/style-jrkf/style.css +103 -4
  55. package/dist/es/packages/address/utils.d.ts +5 -0
  56. package/dist/es/packages/address/utils.js +75 -0
  57. package/dist/es/packages/animatingnumbers/style/style.harmony.css +42 -1
  58. package/dist/es/packages/cascader/cascader.js +1 -1
  59. package/dist/es/packages/picker/style/picker.scss +0 -1
  60. package/dist/es/packages/picker/style/style.css +0 -1
  61. package/dist/es/packages/picker/style/style.harmony.css +0 -1
  62. package/dist/es/packages/picker/style-jmapp/picker.scss +0 -1
  63. package/dist/es/packages/picker/style-jmapp/style.css +0 -1
  64. package/dist/es/packages/picker/style-jrkf/picker.scss +0 -1
  65. package/dist/es/packages/picker/style-jrkf/style.css +0 -1
  66. package/dist/es/types/spec/address/base.d.ts +7 -13
  67. package/dist/es/types/spec/cascader/base.d.ts +1 -0
  68. package/dist/nutui.react.umd.js +458 -119
  69. package/dist/style-jmapp.css +1 -1
  70. package/dist/style-jmapp.scss +42 -42
  71. package/dist/style-jrkf.css +1 -1
  72. package/dist/style-jrkf.scss +40 -40
  73. package/dist/style.css +1 -1
  74. package/dist/style.scss +31 -31
  75. package/package.json +1 -1
package/dist/es/packages/address/style/style.css CHANGED
@@ -2,10 +2,6 @@
2
2
  /* #endif */
3
3
  /* #ifndef harmony */
4
4
  /* #endif */
5
- .nut-address-elevator {
6
- display: flex;
7
- margin-top: 20px;
8
- }
9
5
  .nut-address-exist {
10
6
  display: block;
11
7
  padding: 15px 20px 0;
@@ -45,6 +41,109 @@
45
41
  color: #ffffff;
46
42
  }
47
43
 
44
+ .nut-address-title {
45
+ font-size: 14px;
46
+ font-weight: 500;
47
+ padding: 16px 16px 12px 16px;
48
+ }
49
+ .nut-address-hotlist {
50
+ padding: 0 16px;
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ align-items: flex-start;
54
+ }
55
+ .nut-address-hotlist-item {
56
+ display: flex;
57
+ justify-content: center;
58
+ align-items: center;
59
+ width: 63px;
60
+ height: 28px;
61
+ font-size: 12px;
62
+ border-radius: 4px;
63
+ margin-bottom: 7px;
64
+ /* #ifdef harmony*/
65
+ margin-right: 6px;
66
+ /* #endif */
67
+ /* #ifndef harmony*/
68
+ margin-right: 7px;
69
+ /* #endif */
70
+ background-color: var(--nutui-color-background-sunken, #f7f8fc);
71
+ color: var(--nutui-color-title, #1a1a1a);
72
+ }
73
+ .nut-address-hotlist-item:nth-child(5n) {
74
+ margin-right: 0;
75
+ }
76
+ .nut-address-hotlist.hotlist-more .nut-address-hotlist-item {
77
+ width: auto;
78
+ padding: 0 16px;
79
+ margin-right: 7px;
80
+ }
81
+ .nut-address-selected {
82
+ width: 100%;
83
+ height: 60px;
84
+ padding: 0 16px;
85
+ display: flex;
86
+ align-items: center;
87
+ border-bottom: 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06));
88
+ }
89
+ .nut-address-selected-item {
90
+ font-size: 12px;
91
+ display: inline-block;
92
+ height: 28px;
93
+ line-height: 28px;
94
+ padding: 0 12px;
95
+ border-radius: 4px;
96
+ background-color: var(--nutui-color-background-sunken, #f7f8fc);
97
+ }
98
+ .nut-address-selected-item.active {
99
+ border: 1px solid var(--nutui-color-primary, #ff0f23);
100
+ background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
101
+ color: var(--nutui-color-primary, #ff0f23);
102
+ }
103
+ .nut-address-selected-border {
104
+ margin: 0 2px;
105
+ color: var(--nutui-color-text-disabled, #c2c4cc);
106
+ }
107
+ .nut-address-elevator {
108
+ margin-top: 0;
109
+ }
110
+ .nut-address-elevator .nut-elevator-list-item {
111
+ position: relative;
112
+ padding-left: 20px;
113
+ }
114
+ .nut-address-elevator .nut-elevator-list-item-code {
115
+ display: inline;
116
+ position: absolute;
117
+ left: 0;
118
+ top: 0;
119
+ height: 30px;
120
+ line-height: 30px;
121
+ border-bottom: 0;
122
+ color: var(--nutui-color-text-help, #888b94);
123
+ font-weight: 500;
124
+ }
125
+ .nut-address-elevator .nut-elevator-bars {
126
+ top: 40%;
127
+ padding: 0;
128
+ background: none;
129
+ }
130
+ .nut-address-elevator .nut-elevator-bars-inner-item {
131
+ display: flex;
132
+ justify-content: center;
133
+ align-items: center;
134
+ width: 16px;
135
+ height: 16px;
136
+ font-size: 10px;
137
+ border-radius: 16px;
138
+ margin-bottom: 2px;
139
+ color: var(--nutui-color-text-help, #888b94);
140
+ }
141
+ .nut-address-elevator .nut-elevator-bars-inner-item-active {
142
+ background-color: var(--nutui-color-primary, #ff0f23);
143
+ color: var(--nutui-color-background-overlay, #ffffff);
144
+ font-weight: 400;
145
+ }
146
+
48
147
  [dir=rtl] .nut-address-exist-item-info,
49
148
  .nut-rtl .nut-address-exist-item-info {
50
149
  margin-left: 0;
package/dist/es/packages/address/style/style.harmony.css CHANGED
@@ -2,10 +2,6 @@
2
2
  /* #endif */
3
3
  /* #ifndef harmony */
4
4
  /* #endif */
5
- .nut-address-elevator {
6
- display: flex;
7
- margin-top: 20px;
8
- }
9
5
  .nut-address-exist {
10
6
  display: block;
11
7
  padding: 15px 20px 0;
@@ -45,6 +41,109 @@
45
41
  color: #ffffff;
46
42
  }
47
43
 
44
+ .nut-address-title {
45
+ font-size: 14px;
46
+ font-weight: 500;
47
+ padding: 16px 16px 12px 16px;
48
+ }
49
+ .nut-address-hotlist {
50
+ padding: 0 16px;
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ align-items: flex-start;
54
+ }
55
+ .nut-address-hotlist-item {
56
+ display: flex;
57
+ justify-content: center;
58
+ align-items: center;
59
+ width: 63px;
60
+ height: 28px;
61
+ font-size: 12px;
62
+ border-radius: 4px;
63
+ margin-bottom: 7px;
64
+ /* #ifdef harmony*/
65
+ margin-right: 6px;
66
+ /* #endif */
67
+ /* #ifndef harmony*/
68
+ margin-right: 7px;
69
+ /* #endif */
70
+ background-color: #f7f8fc;
71
+ color: #1a1a1a;
72
+ }
73
+ .nut-address-hotlist-item:nth-child(5n) {
74
+ margin-right: 0;
75
+ }
76
+ .nut-address-hotlist.hotlist-more .nut-address-hotlist-item {
77
+ width: auto;
78
+ padding: 0 16px;
79
+ margin-right: 7px;
80
+ }
81
+ .nut-address-selected {
82
+ width: 100%;
83
+ height: 60px;
84
+ padding: 0 16px;
85
+ display: flex;
86
+ align-items: center;
87
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
88
+ }
89
+ .nut-address-selected-item {
90
+ font-size: 12px;
91
+ display: inline-block;
92
+ height: 28px;
93
+ line-height: 28px;
94
+ padding: 0 12px;
95
+ border-radius: 4px;
96
+ background-color: #f7f8fc;
97
+ }
98
+ .nut-address-selected-item.active {
99
+ border: 1px solid #ff0f23;
100
+ background-color: #ffebf1;
101
+ color: #ff0f23;
102
+ }
103
+ .nut-address-selected-border {
104
+ margin: 0 2px;
105
+ color: #c2c4cc;
106
+ }
107
+ .nut-address-elevator {
108
+ margin-top: 0;
109
+ }
110
+ .nut-address-elevator .nut-elevator-list-item {
111
+ position: relative;
112
+ padding-left: 20px;
113
+ }
114
+ .nut-address-elevator .nut-elevator-list-item-code {
115
+ display: inline;
116
+ position: absolute;
117
+ left: 0;
118
+ top: 0;
119
+ height: 30px;
120
+ line-height: 30px;
121
+ border-bottom: 0;
122
+ color: #888b94;
123
+ font-weight: 500;
124
+ }
125
+ .nut-address-elevator .nut-elevator-bars {
126
+ top: 40%;
127
+ padding: 0;
128
+ background: none;
129
+ }
130
+ .nut-address-elevator .nut-elevator-bars-inner-item {
131
+ display: flex;
132
+ justify-content: center;
133
+ align-items: center;
134
+ width: 16px;
135
+ height: 16px;
136
+ font-size: 10px;
137
+ border-radius: 16px;
138
+ margin-bottom: 2px;
139
+ color: #888b94;
140
+ }
141
+ .nut-address-elevator .nut-elevator-bars-inner-item-active {
142
+ background-color: #ff0f23;
143
+ color: #ffffff;
144
+ font-weight: 400;
145
+ }
146
+
48
147
  [dir=rtl] .nut-address-exist-item-info,
49
148
  .nut-rtl .nut-address-exist-item-info {
50
149
  margin-left: 0;
package/dist/es/packages/address/style-jmapp/address.scss CHANGED
@@ -1,9 +1,4 @@
1
1
  .nut-address {
2
- &-elevator {
3
- display: flex;
4
- margin-top: 20px;
5
- }
6
-
7
2
  &-exist {
8
3
  display: block;
9
4
  padding: 15px 20px 0;
@@ -49,6 +44,120 @@
49
44
  }
50
45
  }
51
46
 
47
+ .nut-address {
48
+ &-title {
49
+ font-size: 14px;
50
+ font-weight: 500;
51
+ padding: 16px 16px 12px 16px;
52
+ }
53
+ &-hotlist {
54
+ padding: 0 16px;
55
+ display: flex;
56
+ flex-wrap: wrap;
57
+ align-items: flex-start;
58
+ &-item {
59
+ display: flex;
60
+ justify-content: center;
61
+ align-items: center;
62
+ width: 63px;
63
+ height: 28px;
64
+ font-size: 12px;
65
+ border-radius: 4px;
66
+ margin-bottom: 7px;
67
+ /* #ifdef harmony*/
68
+ margin-right: 6px;
69
+ /* #endif */
70
+ /* #ifndef harmony*/
71
+ margin-right: 7px;
72
+ /* #endif */
73
+ background-color: $color-background-sunken;
74
+ color: $color-title;
75
+ &:nth-child(5n) {
76
+ margin-right: 0;
77
+ }
78
+ }
79
+
80
+ &.hotlist-more {
81
+ .nut-address-hotlist-item {
82
+ width: auto;
83
+ padding: 0 16px;
84
+ margin-right: 7px;
85
+ }
86
+ }
87
+ }
88
+
89
+ &-selected {
90
+ width: 100%;
91
+ height: 60px;
92
+ padding: 0 16px;
93
+ display: flex;
94
+ align-items: center;
95
+ border-bottom: 1px solid $color-border;
96
+ &-item {
97
+ font-size: 12px;
98
+ display: inline-block;
99
+ height: 28px;
100
+ line-height: 28px;
101
+ padding: 0 12px;
102
+ border-radius: 4px;
103
+ background-color: $color-background-sunken;
104
+
105
+ &.active {
106
+ border: 1px solid $color-primary;
107
+ background-color: $color-primary-light-pressed;
108
+ color: $color-primary;
109
+ }
110
+ }
111
+ &-border {
112
+ margin: 0 2px;
113
+ color: $color-text-disabled;
114
+ }
115
+ }
116
+
117
+ &-elevator {
118
+ margin-top: 0;
119
+ .nut-elevator-list {
120
+ &-item {
121
+ position: relative;
122
+ padding-left: 20px;
123
+ }
124
+ &-item-code {
125
+ display: inline;
126
+ position: absolute;
127
+ left: 0;
128
+ top: 0;
129
+ height: 30px;
130
+ line-height: 30px;
131
+ border-bottom: 0;
132
+ color: $color-text-help;
133
+ font-weight: 500;
134
+ }
135
+ }
136
+ .nut-elevator-bars {
137
+ top: 40%;
138
+ padding: 0;
139
+ background: none;
140
+
141
+ &-inner-item {
142
+ display: flex;
143
+ justify-content: center;
144
+ align-items: center;
145
+ width: 16px;
146
+ height: 16px;
147
+ font-size: 10px;
148
+ border-radius: 16px;
149
+ margin-bottom: 2px;
150
+ color: $color-text-help;
151
+ &-active {
152
+ background-color: $color-primary;
153
+ color: $color-background-overlay;
154
+ font-weight: 400;
155
+ }
156
+ }
157
+ }
158
+ }
159
+ }
160
+
52
161
  [dir='rtl'] .nut-address,
53
162
  .nut-rtl .nut-address {
54
163
  &-exist {
package/dist/es/packages/address/style-jmapp/style.css CHANGED
@@ -2,10 +2,6 @@
2
2
  /* #endif */
3
3
  /* #ifndef harmony */
4
4
  /* #endif */
5
- .nut-address-elevator {
6
- display: flex;
7
- margin-top: 20px;
8
- }
9
5
  .nut-address-exist {
10
6
  display: block;
11
7
  padding: 15px 20px 0;
@@ -45,6 +41,109 @@
45
41
  color: var(--nutui-color-text-dark);
46
42
  }
47
43
 
44
+ .nut-address-title {
45
+ font-size: 14px;
46
+ font-weight: 500;
47
+ padding: 16px 16px 12px 16px;
48
+ }
49
+ .nut-address-hotlist {
50
+ padding: 0 16px;
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ align-items: flex-start;
54
+ }
55
+ .nut-address-hotlist-item {
56
+ display: flex;
57
+ justify-content: center;
58
+ align-items: center;
59
+ width: 63px;
60
+ height: 28px;
61
+ font-size: 12px;
62
+ border-radius: 4px;
63
+ margin-bottom: 7px;
64
+ /* #ifdef harmony*/
65
+ margin-right: 6px;
66
+ /* #endif */
67
+ /* #ifndef harmony*/
68
+ margin-right: 7px;
69
+ /* #endif */
70
+ background-color: var(--nutui-gray-2, #f8f8f8);
71
+ color: var(--nutui-color-title);
72
+ }
73
+ .nut-address-hotlist-item:nth-child(5n) {
74
+ margin-right: 0;
75
+ }
76
+ .nut-address-hotlist.hotlist-more .nut-address-hotlist-item {
77
+ width: auto;
78
+ padding: 0 16px;
79
+ margin-right: 7px;
80
+ }
81
+ .nut-address-selected {
82
+ width: 100%;
83
+ height: 60px;
84
+ padding: 0 16px;
85
+ display: flex;
86
+ align-items: center;
87
+ border-bottom: 1px solid var(--nutui-color-border);
88
+ }
89
+ .nut-address-selected-item {
90
+ font-size: 12px;
91
+ display: inline-block;
92
+ height: 28px;
93
+ line-height: 28px;
94
+ padding: 0 12px;
95
+ border-radius: 4px;
96
+ background-color: var(--nutui-gray-2, #f8f8f8);
97
+ }
98
+ .nut-address-selected-item.active {
99
+ border: 1px solid var(--nutui-color-primary);
100
+ background-color: var(--nutui-color-primary-light-pressed);
101
+ color: var(--nutui-color-primary);
102
+ }
103
+ .nut-address-selected-border {
104
+ margin: 0 2px;
105
+ color: var(--nutui-color-text-disabled);
106
+ }
107
+ .nut-address-elevator {
108
+ margin-top: 0;
109
+ }
110
+ .nut-address-elevator .nut-elevator-list-item {
111
+ position: relative;
112
+ padding-left: 20px;
113
+ }
114
+ .nut-address-elevator .nut-elevator-list-item-code {
115
+ display: inline;
116
+ position: absolute;
117
+ left: 0;
118
+ top: 0;
119
+ height: 30px;
120
+ line-height: 30px;
121
+ border-bottom: 0;
122
+ color: var(--nutui-color-text-help);
123
+ font-weight: 500;
124
+ }
125
+ .nut-address-elevator .nut-elevator-bars {
126
+ top: 40%;
127
+ padding: 0;
128
+ background: none;
129
+ }
130
+ .nut-address-elevator .nut-elevator-bars-inner-item {
131
+ display: flex;
132
+ justify-content: center;
133
+ align-items: center;
134
+ width: 16px;
135
+ height: 16px;
136
+ font-size: 10px;
137
+ border-radius: 16px;
138
+ margin-bottom: 2px;
139
+ color: var(--nutui-color-text-help);
140
+ }
141
+ .nut-address-elevator .nut-elevator-bars-inner-item-active {
142
+ background-color: var(--nutui-color-primary);
143
+ color: var(--nutui-color-surface-2);
144
+ font-weight: 400;
145
+ }
146
+
48
147
  [dir=rtl] .nut-address-exist-item-info,
49
148
  .nut-rtl .nut-address-exist-item-info {
50
149
  margin-left: 0;
package/dist/es/packages/address/style-jrkf/address.scss CHANGED
@@ -1,9 +1,4 @@
1
1
  .nut-address {
2
- &-elevator {
3
- display: flex;
4
- margin-top: 20px;
5
- }
6
-
7
2
  &-exist {
8
3
  display: block;
9
4
  padding: 15px 20px 0;
@@ -49,6 +44,120 @@
49
44
  }
50
45
  }
51
46
 
47
+ .nut-address {
48
+ &-title {
49
+ font-size: 14px;
50
+ font-weight: 500;
51
+ padding: 16px 16px 12px 16px;
52
+ }
53
+ &-hotlist {
54
+ padding: 0 16px;
55
+ display: flex;
56
+ flex-wrap: wrap;
57
+ align-items: flex-start;
58
+ &-item {
59
+ display: flex;
60
+ justify-content: center;
61
+ align-items: center;
62
+ width: 63px;
63
+ height: 28px;
64
+ font-size: 12px;
65
+ border-radius: 4px;
66
+ margin-bottom: 7px;
67
+ /* #ifdef harmony*/
68
+ margin-right: 6px;
69
+ /* #endif */
70
+ /* #ifndef harmony*/
71
+ margin-right: 7px;
72
+ /* #endif */
73
+ background-color: $color-background-sunken;
74
+ color: $color-title;
75
+ &:nth-child(5n) {
76
+ margin-right: 0;
77
+ }
78
+ }
79
+
80
+ &.hotlist-more {
81
+ .nut-address-hotlist-item {
82
+ width: auto;
83
+ padding: 0 16px;
84
+ margin-right: 7px;
85
+ }
86
+ }
87
+ }
88
+
89
+ &-selected {
90
+ width: 100%;
91
+ height: 60px;
92
+ padding: 0 16px;
93
+ display: flex;
94
+ align-items: center;
95
+ border-bottom: 1px solid $color-border;
96
+ &-item {
97
+ font-size: 12px;
98
+ display: inline-block;
99
+ height: 28px;
100
+ line-height: 28px;
101
+ padding: 0 12px;
102
+ border-radius: 4px;
103
+ background-color: $color-background-sunken;
104
+
105
+ &.active {
106
+ border: 1px solid $color-primary;
107
+ background-color: $color-primary-light-pressed;
108
+ color: $color-primary;
109
+ }
110
+ }
111
+ &-border {
112
+ margin: 0 2px;
113
+ color: $color-text-disabled;
114
+ }
115
+ }
116
+
117
+ &-elevator {
118
+ margin-top: 0;
119
+ .nut-elevator-list {
120
+ &-item {
121
+ position: relative;
122
+ padding-left: 20px;
123
+ }
124
+ &-item-code {
125
+ display: inline;
126
+ position: absolute;
127
+ left: 0;
128
+ top: 0;
129
+ height: 30px;
130
+ line-height: 30px;
131
+ border-bottom: 0;
132
+ color: $color-text-help;
133
+ font-weight: 500;
134
+ }
135
+ }
136
+ .nut-elevator-bars {
137
+ top: 40%;
138
+ padding: 0;
139
+ background: none;
140
+
141
+ &-inner-item {
142
+ display: flex;
143
+ justify-content: center;
144
+ align-items: center;
145
+ width: 16px;
146
+ height: 16px;
147
+ font-size: 10px;
148
+ border-radius: 16px;
149
+ margin-bottom: 2px;
150
+ color: $color-text-help;
151
+ &-active {
152
+ background-color: $color-primary;
153
+ color: $color-background-overlay;
154
+ font-weight: 400;
155
+ }
156
+ }
157
+ }
158
+ }
159
+ }
160
+
52
161
  [dir='rtl'] .nut-address,
53
162
  .nut-rtl .nut-address {
54
163
  &-exist {