@megafon/ui-core 4.11.1 → 4.11.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.
- package/CHANGELOG.md +12 -0
- package/dist/es/components/Button/Button.css +217 -115
- package/dist/es/components/Button/Button.js +5 -3
- package/dist/es/components/Tooltip/Tooltip.css +13 -28
- package/dist/es/components/Tooltip/Tooltip.js +17 -16
- package/dist/lib/components/Button/Button.css +217 -115
- package/dist/lib/components/Button/Button.js +5 -3
- package/dist/lib/components/Tooltip/Tooltip.css +13 -28
- package/dist/lib/components/Tooltip/Tooltip.js +17 -16
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [4.11.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.11.1...@megafon/ui-core@4.11.2) (2023-01-23)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **button:** fixed styles ([1fc2ad3](https://github.com/MegafonWebLab/megafon-ui/commit/1fc2ad37f0b8b57e992f764802f11316b95539d3))
|
|
12
|
+
* **tooltip:** fix margins ([5572397](https://github.com/MegafonWebLab/megafon-ui/commit/55723976459d58ecf131e9fe5aee570c9871b1d2))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
6
18
|
## [4.11.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.11.0...@megafon/ui-core@4.11.1) (2023-01-17)
|
|
7
19
|
|
|
8
20
|
**Note:** Version bump only for package @megafon/ui-core
|
|
@@ -5,6 +5,9 @@
|
|
|
5
5
|
display: inline-block;
|
|
6
6
|
-webkit-box-sizing: border-box;
|
|
7
7
|
box-sizing: border-box;
|
|
8
|
+
min-width: -webkit-fit-content;
|
|
9
|
+
min-width: -moz-fit-content;
|
|
10
|
+
min-width: fit-content;
|
|
8
11
|
padding: 0 32px;
|
|
9
12
|
border: none;
|
|
10
13
|
border-radius: 30px;
|
|
@@ -30,196 +33,301 @@
|
|
|
30
33
|
transition: fill 0.3s;
|
|
31
34
|
}
|
|
32
35
|
.mfui-button_size-all_extra-small {
|
|
36
|
+
min-width: 24px;
|
|
37
|
+
height: 24px;
|
|
33
38
|
padding: 0 16px;
|
|
34
|
-
}
|
|
35
|
-
.mfui-button_size-all_extra-small .mfui-button__inner {
|
|
36
39
|
font-size: 12px;
|
|
37
|
-
line-height:
|
|
38
|
-
min-width: 26px;
|
|
39
|
-
height: 26px;
|
|
40
|
+
line-height: 14px;
|
|
40
41
|
}
|
|
41
|
-
.mfui-button_size-
|
|
42
|
+
.mfui-button_size-all_extra-small .mfui-button__icon,
|
|
43
|
+
.mfui-button_size-all_extra-small .mfui-button__icon-arrow {
|
|
44
|
+
width: 20px;
|
|
45
|
+
height: 20px;
|
|
46
|
+
}
|
|
47
|
+
.mfui-button_size-all_small {
|
|
42
48
|
min-width: 40px;
|
|
43
49
|
height: 40px;
|
|
50
|
+
padding: 0 24px;
|
|
51
|
+
}
|
|
52
|
+
.mfui-button_size-all_small .mfui-button__icon,
|
|
53
|
+
.mfui-button_size-all_small .mfui-button__icon-arrow {
|
|
54
|
+
width: 20px;
|
|
55
|
+
height: 20px;
|
|
44
56
|
}
|
|
45
|
-
.mfui-button_size-all_medium
|
|
57
|
+
.mfui-button_size-all_medium {
|
|
46
58
|
min-width: 52px;
|
|
47
59
|
height: 52px;
|
|
48
60
|
}
|
|
49
|
-
.mfui-button_size-
|
|
61
|
+
.mfui-button_size-all_medium .mfui-button__icon,
|
|
62
|
+
.mfui-button_size-all_medium .mfui-button__icon-arrow {
|
|
63
|
+
width: 32px;
|
|
64
|
+
height: 32px;
|
|
65
|
+
}
|
|
66
|
+
.mfui-button_size-all_large {
|
|
50
67
|
min-width: 60px;
|
|
51
68
|
height: 60px;
|
|
52
69
|
}
|
|
53
|
-
.mfui-button_size-
|
|
54
|
-
|
|
55
|
-
|
|
70
|
+
.mfui-button_size-all_large .mfui-button__icon,
|
|
71
|
+
.mfui-button_size-all_large .mfui-button__icon-arrow {
|
|
72
|
+
width: 32px;
|
|
73
|
+
height: 32px;
|
|
56
74
|
}
|
|
57
|
-
.mfui-button_size-
|
|
58
|
-
|
|
59
|
-
height: 16px;
|
|
75
|
+
.mfui-button_size-all_extra-small.mfui-buttonhas-arrow {
|
|
76
|
+
padding: 0 8px;
|
|
60
77
|
}
|
|
61
|
-
.mfui-button_size-
|
|
62
|
-
|
|
63
|
-
height: 24px;
|
|
78
|
+
.mfui-button_size-all_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
79
|
+
padding-left: 12px;
|
|
64
80
|
}
|
|
65
|
-
.mfui-button_size-
|
|
66
|
-
|
|
67
|
-
|
|
81
|
+
.mfui-button_size-all_medium.mfui-buttonhas-arrow,
|
|
82
|
+
.mfui-button_size-all_large.mfui-buttonhas-arrow {
|
|
83
|
+
padding: 0 24px;
|
|
84
|
+
}
|
|
85
|
+
.mfui-button_size-all_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
86
|
+
.mfui-button_size-all_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
87
|
+
.mfui-button_size-all_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
88
|
+
padding-left: 16px;
|
|
89
|
+
}
|
|
90
|
+
.mfui-button_type_text {
|
|
91
|
+
padding: 0;
|
|
68
92
|
}
|
|
69
93
|
@media screen and (min-width: 1280px) {
|
|
70
94
|
.mfui-button_size-wide_extra-small {
|
|
95
|
+
min-width: 24px;
|
|
96
|
+
height: 24px;
|
|
71
97
|
padding: 0 16px;
|
|
72
|
-
}
|
|
73
|
-
.mfui-button_size-wide_extra-small .mfui-button__inner {
|
|
74
98
|
font-size: 12px;
|
|
75
|
-
line-height:
|
|
76
|
-
min-width: 26px;
|
|
77
|
-
height: 26px;
|
|
99
|
+
line-height: 14px;
|
|
78
100
|
}
|
|
79
|
-
.mfui-button_size-
|
|
101
|
+
.mfui-button_size-wide_extra-small .mfui-button__icon,
|
|
102
|
+
.mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
|
|
103
|
+
width: 20px;
|
|
104
|
+
height: 20px;
|
|
105
|
+
}
|
|
106
|
+
.mfui-button_size-wide_small {
|
|
80
107
|
min-width: 40px;
|
|
81
108
|
height: 40px;
|
|
109
|
+
padding: 0 24px;
|
|
110
|
+
}
|
|
111
|
+
.mfui-button_size-wide_small .mfui-button__icon,
|
|
112
|
+
.mfui-button_size-wide_small .mfui-button__icon-arrow {
|
|
113
|
+
width: 20px;
|
|
114
|
+
height: 20px;
|
|
82
115
|
}
|
|
83
|
-
.mfui-button_size-wide_medium
|
|
116
|
+
.mfui-button_size-wide_medium {
|
|
84
117
|
min-width: 52px;
|
|
85
118
|
height: 52px;
|
|
86
119
|
}
|
|
87
|
-
.mfui-button_size-
|
|
120
|
+
.mfui-button_size-wide_medium .mfui-button__icon,
|
|
121
|
+
.mfui-button_size-wide_medium .mfui-button__icon-arrow {
|
|
122
|
+
width: 32px;
|
|
123
|
+
height: 32px;
|
|
124
|
+
}
|
|
125
|
+
.mfui-button_size-wide_large {
|
|
88
126
|
min-width: 60px;
|
|
89
127
|
height: 60px;
|
|
90
128
|
}
|
|
91
|
-
.mfui-button_size-
|
|
92
|
-
|
|
93
|
-
|
|
129
|
+
.mfui-button_size-wide_large .mfui-button__icon,
|
|
130
|
+
.mfui-button_size-wide_large .mfui-button__icon-arrow {
|
|
131
|
+
width: 32px;
|
|
132
|
+
height: 32px;
|
|
94
133
|
}
|
|
95
|
-
.mfui-button_size-
|
|
96
|
-
|
|
97
|
-
height: 16px;
|
|
134
|
+
.mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
|
|
135
|
+
padding: 0 8px;
|
|
98
136
|
}
|
|
99
|
-
.mfui-button_size-
|
|
100
|
-
|
|
101
|
-
height: 24px;
|
|
137
|
+
.mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
138
|
+
padding-left: 12px;
|
|
102
139
|
}
|
|
103
|
-
.mfui-button_size-
|
|
104
|
-
|
|
105
|
-
|
|
140
|
+
.mfui-button_size-wide_medium.mfui-buttonhas-arrow,
|
|
141
|
+
.mfui-button_size-wide_large.mfui-buttonhas-arrow {
|
|
142
|
+
padding: 0 24px;
|
|
143
|
+
}
|
|
144
|
+
.mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
145
|
+
.mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
146
|
+
.mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
147
|
+
padding-left: 16px;
|
|
148
|
+
}
|
|
149
|
+
.mfui-button_type_text {
|
|
150
|
+
padding: 0;
|
|
106
151
|
}
|
|
107
152
|
}
|
|
108
153
|
@media screen and (min-width: 1024px) {
|
|
109
154
|
.mfui-button_size-desktop_extra-small {
|
|
155
|
+
min-width: 24px;
|
|
156
|
+
height: 24px;
|
|
110
157
|
padding: 0 16px;
|
|
111
|
-
}
|
|
112
|
-
.mfui-button_size-desktop_extra-small .mfui-button__inner {
|
|
113
158
|
font-size: 12px;
|
|
114
|
-
line-height:
|
|
115
|
-
min-width: 26px;
|
|
116
|
-
height: 26px;
|
|
159
|
+
line-height: 14px;
|
|
117
160
|
}
|
|
118
|
-
.mfui-button_size-
|
|
161
|
+
.mfui-button_size-desktop_extra-small .mfui-button__icon,
|
|
162
|
+
.mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
|
|
163
|
+
width: 20px;
|
|
164
|
+
height: 20px;
|
|
165
|
+
}
|
|
166
|
+
.mfui-button_size-desktop_small {
|
|
119
167
|
min-width: 40px;
|
|
120
168
|
height: 40px;
|
|
169
|
+
padding: 0 24px;
|
|
170
|
+
}
|
|
171
|
+
.mfui-button_size-desktop_small .mfui-button__icon,
|
|
172
|
+
.mfui-button_size-desktop_small .mfui-button__icon-arrow {
|
|
173
|
+
width: 20px;
|
|
174
|
+
height: 20px;
|
|
121
175
|
}
|
|
122
|
-
.mfui-button_size-desktop_medium
|
|
176
|
+
.mfui-button_size-desktop_medium {
|
|
123
177
|
min-width: 52px;
|
|
124
178
|
height: 52px;
|
|
125
179
|
}
|
|
126
|
-
.mfui-button_size-
|
|
180
|
+
.mfui-button_size-desktop_medium .mfui-button__icon,
|
|
181
|
+
.mfui-button_size-desktop_medium .mfui-button__icon-arrow {
|
|
182
|
+
width: 32px;
|
|
183
|
+
height: 32px;
|
|
184
|
+
}
|
|
185
|
+
.mfui-button_size-desktop_large {
|
|
127
186
|
min-width: 60px;
|
|
128
187
|
height: 60px;
|
|
129
188
|
}
|
|
130
|
-
.mfui-button_size-
|
|
131
|
-
|
|
132
|
-
|
|
189
|
+
.mfui-button_size-desktop_large .mfui-button__icon,
|
|
190
|
+
.mfui-button_size-desktop_large .mfui-button__icon-arrow {
|
|
191
|
+
width: 32px;
|
|
192
|
+
height: 32px;
|
|
133
193
|
}
|
|
134
|
-
.mfui-button_size-
|
|
135
|
-
|
|
136
|
-
height: 16px;
|
|
194
|
+
.mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
|
|
195
|
+
padding: 0 8px;
|
|
137
196
|
}
|
|
138
|
-
.mfui-button_size-
|
|
139
|
-
|
|
140
|
-
height: 24px;
|
|
197
|
+
.mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
198
|
+
padding-left: 12px;
|
|
141
199
|
}
|
|
142
|
-
.mfui-button_size-
|
|
143
|
-
|
|
144
|
-
|
|
200
|
+
.mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
|
|
201
|
+
.mfui-button_size-desktop_large.mfui-buttonhas-arrow {
|
|
202
|
+
padding: 0 24px;
|
|
203
|
+
}
|
|
204
|
+
.mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
205
|
+
.mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
206
|
+
.mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
207
|
+
padding-left: 16px;
|
|
208
|
+
}
|
|
209
|
+
.mfui-button_type_text {
|
|
210
|
+
padding: 0;
|
|
145
211
|
}
|
|
146
212
|
}
|
|
147
213
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
|
148
214
|
.mfui-button_size-tablet_extra-small {
|
|
215
|
+
min-width: 24px;
|
|
216
|
+
height: 24px;
|
|
149
217
|
padding: 0 16px;
|
|
150
|
-
}
|
|
151
|
-
.mfui-button_size-tablet_extra-small .mfui-button__inner {
|
|
152
218
|
font-size: 12px;
|
|
153
|
-
line-height:
|
|
154
|
-
|
|
155
|
-
|
|
219
|
+
line-height: 14px;
|
|
220
|
+
}
|
|
221
|
+
.mfui-button_size-tablet_extra-small .mfui-button__icon,
|
|
222
|
+
.mfui-button_size-tablet_extra-small .mfui-button__icon-arrow {
|
|
223
|
+
width: 20px;
|
|
224
|
+
height: 20px;
|
|
156
225
|
}
|
|
157
|
-
.mfui-button_size-tablet_small
|
|
226
|
+
.mfui-button_size-tablet_small {
|
|
158
227
|
min-width: 40px;
|
|
159
228
|
height: 40px;
|
|
229
|
+
padding: 0 24px;
|
|
160
230
|
}
|
|
161
|
-
.mfui-button_size-
|
|
231
|
+
.mfui-button_size-tablet_small .mfui-button__icon,
|
|
232
|
+
.mfui-button_size-tablet_small .mfui-button__icon-arrow {
|
|
233
|
+
width: 20px;
|
|
234
|
+
height: 20px;
|
|
235
|
+
}
|
|
236
|
+
.mfui-button_size-tablet_medium {
|
|
162
237
|
min-width: 52px;
|
|
163
238
|
height: 52px;
|
|
164
239
|
}
|
|
165
|
-
.mfui-button_size-
|
|
240
|
+
.mfui-button_size-tablet_medium .mfui-button__icon,
|
|
241
|
+
.mfui-button_size-tablet_medium .mfui-button__icon-arrow {
|
|
242
|
+
width: 32px;
|
|
243
|
+
height: 32px;
|
|
244
|
+
}
|
|
245
|
+
.mfui-button_size-tablet_large {
|
|
166
246
|
min-width: 60px;
|
|
167
247
|
height: 60px;
|
|
168
248
|
}
|
|
169
|
-
.mfui-button_size-
|
|
170
|
-
|
|
171
|
-
|
|
249
|
+
.mfui-button_size-tablet_large .mfui-button__icon,
|
|
250
|
+
.mfui-button_size-tablet_large .mfui-button__icon-arrow {
|
|
251
|
+
width: 32px;
|
|
252
|
+
height: 32px;
|
|
172
253
|
}
|
|
173
|
-
.mfui-button_size-
|
|
174
|
-
|
|
175
|
-
height: 16px;
|
|
254
|
+
.mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow {
|
|
255
|
+
padding: 0 8px;
|
|
176
256
|
}
|
|
177
|
-
.mfui-button_size-
|
|
178
|
-
|
|
179
|
-
height: 24px;
|
|
257
|
+
.mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
258
|
+
padding-left: 12px;
|
|
180
259
|
}
|
|
181
|
-
.mfui-button_size-
|
|
182
|
-
|
|
183
|
-
|
|
260
|
+
.mfui-button_size-tablet_medium.mfui-buttonhas-arrow,
|
|
261
|
+
.mfui-button_size-tablet_large.mfui-buttonhas-arrow {
|
|
262
|
+
padding: 0 24px;
|
|
263
|
+
}
|
|
264
|
+
.mfui-button_size-tablet_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
265
|
+
.mfui-button_size-tablet_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
266
|
+
.mfui-button_size-tablet_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
267
|
+
padding-left: 16px;
|
|
268
|
+
}
|
|
269
|
+
.mfui-button_type_text {
|
|
270
|
+
padding: 0;
|
|
184
271
|
}
|
|
185
272
|
}
|
|
186
273
|
@media screen and (max-width: 767px) {
|
|
187
274
|
.mfui-button_size-mobile_extra-small {
|
|
275
|
+
min-width: 24px;
|
|
276
|
+
height: 24px;
|
|
188
277
|
padding: 0 16px;
|
|
189
|
-
}
|
|
190
|
-
.mfui-button_size-mobile_extra-small .mfui-button__inner {
|
|
191
278
|
font-size: 12px;
|
|
192
|
-
line-height:
|
|
193
|
-
|
|
194
|
-
|
|
279
|
+
line-height: 14px;
|
|
280
|
+
}
|
|
281
|
+
.mfui-button_size-mobile_extra-small .mfui-button__icon,
|
|
282
|
+
.mfui-button_size-mobile_extra-small .mfui-button__icon-arrow {
|
|
283
|
+
width: 20px;
|
|
284
|
+
height: 20px;
|
|
195
285
|
}
|
|
196
|
-
.mfui-button_size-mobile_small
|
|
286
|
+
.mfui-button_size-mobile_small {
|
|
197
287
|
min-width: 40px;
|
|
198
288
|
height: 40px;
|
|
289
|
+
padding: 0 24px;
|
|
199
290
|
}
|
|
200
|
-
.mfui-button_size-
|
|
291
|
+
.mfui-button_size-mobile_small .mfui-button__icon,
|
|
292
|
+
.mfui-button_size-mobile_small .mfui-button__icon-arrow {
|
|
293
|
+
width: 20px;
|
|
294
|
+
height: 20px;
|
|
295
|
+
}
|
|
296
|
+
.mfui-button_size-mobile_medium {
|
|
201
297
|
min-width: 52px;
|
|
202
298
|
height: 52px;
|
|
203
299
|
}
|
|
204
|
-
.mfui-button_size-
|
|
300
|
+
.mfui-button_size-mobile_medium .mfui-button__icon,
|
|
301
|
+
.mfui-button_size-mobile_medium .mfui-button__icon-arrow {
|
|
302
|
+
width: 32px;
|
|
303
|
+
height: 32px;
|
|
304
|
+
}
|
|
305
|
+
.mfui-button_size-mobile_large {
|
|
205
306
|
min-width: 60px;
|
|
206
307
|
height: 60px;
|
|
207
308
|
}
|
|
208
|
-
.mfui-button_size-
|
|
209
|
-
|
|
210
|
-
|
|
309
|
+
.mfui-button_size-mobile_large .mfui-button__icon,
|
|
310
|
+
.mfui-button_size-mobile_large .mfui-button__icon-arrow {
|
|
311
|
+
width: 32px;
|
|
312
|
+
height: 32px;
|
|
211
313
|
}
|
|
212
|
-
.mfui-button_size-
|
|
213
|
-
|
|
214
|
-
height: 16px;
|
|
314
|
+
.mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow {
|
|
315
|
+
padding: 0 8px;
|
|
215
316
|
}
|
|
216
|
-
.mfui-button_size-
|
|
217
|
-
|
|
218
|
-
height: 24px;
|
|
317
|
+
.mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
318
|
+
padding-left: 12px;
|
|
219
319
|
}
|
|
220
|
-
.mfui-button_size-
|
|
221
|
-
|
|
222
|
-
|
|
320
|
+
.mfui-button_size-mobile_medium.mfui-buttonhas-arrow,
|
|
321
|
+
.mfui-button_size-mobile_large.mfui-buttonhas-arrow {
|
|
322
|
+
padding: 0 24px;
|
|
323
|
+
}
|
|
324
|
+
.mfui-button_size-mobile_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
325
|
+
.mfui-button_size-mobile_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
326
|
+
.mfui-button_size-mobile_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
327
|
+
padding-left: 16px;
|
|
328
|
+
}
|
|
329
|
+
.mfui-button_type_text {
|
|
330
|
+
padding: 0;
|
|
223
331
|
}
|
|
224
332
|
}
|
|
225
333
|
.mfui-button:hover {
|
|
@@ -247,6 +355,7 @@
|
|
|
247
355
|
-webkit-box-sizing: border-box;
|
|
248
356
|
box-sizing: border-box;
|
|
249
357
|
width: 100%;
|
|
358
|
+
height: inherit;
|
|
250
359
|
vertical-align: top;
|
|
251
360
|
}
|
|
252
361
|
.mfui-button__text {
|
|
@@ -280,19 +389,18 @@
|
|
|
280
389
|
.mfui-button__icon-arrow {
|
|
281
390
|
width: 32px;
|
|
282
391
|
height: 32px;
|
|
283
|
-
margin-right: -8px;
|
|
284
392
|
margin-left: 4px;
|
|
285
393
|
}
|
|
286
394
|
.mfui-button_content-type_icon {
|
|
287
395
|
padding: 0;
|
|
288
396
|
}
|
|
289
397
|
.mfui-button_content-type_icon-text .mfui-button__icon {
|
|
290
|
-
width:
|
|
291
|
-
height:
|
|
292
|
-
margin-right:
|
|
293
|
-
margin-left: -8px;
|
|
398
|
+
width: 32px;
|
|
399
|
+
height: 32px;
|
|
400
|
+
margin-right: 4px;
|
|
294
401
|
}
|
|
295
|
-
.mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon
|
|
402
|
+
.mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon,
|
|
403
|
+
.mfui-button_content-type_icon-text.mfui-button_size-all_extra-small .mfui-button__icon {
|
|
296
404
|
display: none;
|
|
297
405
|
}
|
|
298
406
|
.mfui-button_type_text.mfui-button_theme_green {
|
|
@@ -301,9 +409,6 @@
|
|
|
301
409
|
width: fit-content;
|
|
302
410
|
color: var(--brandGreen);
|
|
303
411
|
background-color: transparent;
|
|
304
|
-
block-size: -webkit-fit-content;
|
|
305
|
-
block-size: -moz-fit-content;
|
|
306
|
-
block-size: fit-content;
|
|
307
412
|
}
|
|
308
413
|
.mfui-button_type_text.mfui-button_theme_green svg {
|
|
309
414
|
fill: var(--brandGreen);
|
|
@@ -326,9 +431,6 @@
|
|
|
326
431
|
width: fit-content;
|
|
327
432
|
color: var(--brandPurple);
|
|
328
433
|
background-color: transparent;
|
|
329
|
-
block-size: -webkit-fit-content;
|
|
330
|
-
block-size: -moz-fit-content;
|
|
331
|
-
block-size: fit-content;
|
|
332
434
|
}
|
|
333
435
|
.mfui-button_type_text.mfui-button_theme_purple svg {
|
|
334
436
|
fill: var(--brandPurple);
|
|
@@ -351,9 +453,6 @@
|
|
|
351
453
|
width: fit-content;
|
|
352
454
|
color: var(--stcWhite);
|
|
353
455
|
background-color: transparent;
|
|
354
|
-
block-size: -webkit-fit-content;
|
|
355
|
-
block-size: -moz-fit-content;
|
|
356
|
-
block-size: fit-content;
|
|
357
456
|
}
|
|
358
457
|
.mfui-button_type_text.mfui-button_theme_white svg {
|
|
359
458
|
fill: var(--stcWhite);
|
|
@@ -371,6 +470,9 @@
|
|
|
371
470
|
fill: var(--buttonDown);
|
|
372
471
|
}
|
|
373
472
|
.mfui-button_type_text.mfui-button_theme_black {
|
|
473
|
+
width: -webkit-fit-content;
|
|
474
|
+
width: -moz-fit-content;
|
|
475
|
+
width: fit-content;
|
|
374
476
|
color: var(--stcBlack);
|
|
375
477
|
background-color: transparent;
|
|
376
478
|
}
|
|
@@ -96,6 +96,7 @@ var Button = function Button(_ref) {
|
|
|
96
96
|
setTouch = _React$useState2[1];
|
|
97
97
|
|
|
98
98
|
var ElementType = href ? 'a' : 'button';
|
|
99
|
+
var displayArrow = showArrow && !icon;
|
|
99
100
|
var handleClick = React.useCallback(function (e) {
|
|
100
101
|
if (disabled) {
|
|
101
102
|
e.preventDefault();
|
|
@@ -138,10 +139,10 @@ var Button = function Button(_ref) {
|
|
|
138
139
|
className: cn('text', {
|
|
139
140
|
ellipsis: ellipsis
|
|
140
141
|
})
|
|
141
|
-
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children),
|
|
142
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), displayArrow && /*#__PURE__*/React.createElement(Arrow, _extends({
|
|
142
143
|
className: cn('icon-arrow')
|
|
143
144
|
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
|
|
144
|
-
}, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName,
|
|
145
|
+
}, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, displayArrow]);
|
|
145
146
|
var contentType = React.useMemo(function () {
|
|
146
147
|
switch (true) {
|
|
147
148
|
case icon && !children:
|
|
@@ -202,7 +203,8 @@ var Button = function Button(_ref) {
|
|
|
202
203
|
'full-width': fullWidth,
|
|
203
204
|
loading: showLoader,
|
|
204
205
|
'no-touch': !isTouch,
|
|
205
|
-
'content-type': contentType
|
|
206
|
+
'content-type': contentType,
|
|
207
|
+
'has-arrow': displayArrow
|
|
206
208
|
}, classNameValue),
|
|
207
209
|
href: href,
|
|
208
210
|
download: !!href && download,
|
|
@@ -32,25 +32,6 @@
|
|
|
32
32
|
left: 0;
|
|
33
33
|
z-index: -1;
|
|
34
34
|
}
|
|
35
|
-
.mfui-tooltip__top,
|
|
36
|
-
.mfui-tooltip__main-content {
|
|
37
|
-
display: -webkit-box;
|
|
38
|
-
display: -ms-flexbox;
|
|
39
|
-
display: flex;
|
|
40
|
-
-webkit-box-orient: vertical;
|
|
41
|
-
-webkit-box-direction: normal;
|
|
42
|
-
-ms-flex-direction: column;
|
|
43
|
-
flex-direction: column;
|
|
44
|
-
gap: 8px;
|
|
45
|
-
}
|
|
46
|
-
@media screen and (min-width: 768px) {
|
|
47
|
-
.mfui-tooltip__top {
|
|
48
|
-
gap: 12px;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
.mfui-tooltip__top_margin {
|
|
52
|
-
margin-bottom: 16px;
|
|
53
|
-
}
|
|
54
35
|
.mfui-tooltip__arrow-container {
|
|
55
36
|
position: absolute;
|
|
56
37
|
}
|
|
@@ -87,15 +68,8 @@
|
|
|
87
68
|
line-height: 18px;
|
|
88
69
|
}
|
|
89
70
|
}
|
|
90
|
-
.mfui-
|
|
91
|
-
|
|
92
|
-
display: -ms-flexbox;
|
|
93
|
-
display: flex;
|
|
94
|
-
-webkit-box-orient: vertical;
|
|
95
|
-
-webkit-box-direction: normal;
|
|
96
|
-
-ms-flex-direction: column;
|
|
97
|
-
flex-direction: column;
|
|
98
|
-
gap: 16px;
|
|
71
|
+
.mfui-tooltip__text_margin {
|
|
72
|
+
margin-top: 8px;
|
|
99
73
|
}
|
|
100
74
|
.mfui-tooltip__button,
|
|
101
75
|
.mfui-tooltip__close-button {
|
|
@@ -127,6 +101,9 @@
|
|
|
127
101
|
line-height: 14px;
|
|
128
102
|
}
|
|
129
103
|
}
|
|
104
|
+
.mfui-tooltip__button_margin {
|
|
105
|
+
margin-top: 8px;
|
|
106
|
+
}
|
|
130
107
|
.mfui-tooltip__button:hover {
|
|
131
108
|
color: var(--buttonHoverGreen);
|
|
132
109
|
}
|
|
@@ -176,6 +153,14 @@
|
|
|
176
153
|
transition: 300ms;
|
|
177
154
|
fill: var(--brandGreen);
|
|
178
155
|
}
|
|
156
|
+
.mfui-tooltip__addititonal-content_margin {
|
|
157
|
+
margin-top: 16px;
|
|
158
|
+
}
|
|
159
|
+
@media screen and (max-width: 767px) {
|
|
160
|
+
.mfui-tooltip__addititonal-content_margin {
|
|
161
|
+
margin-top: 12px;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
179
164
|
.mfui-tooltip_small .mfui-tooltip__content {
|
|
180
165
|
display: -webkit-box;
|
|
181
166
|
display: -ms-flexbox;
|
|
@@ -142,8 +142,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
142
142
|
var currentBoundary = boundaryElement === null || boundaryElement === void 0 ? void 0 : boundaryElement.current;
|
|
143
143
|
var portalElem = React.useRef(null);
|
|
144
144
|
var isBigSize = size === Size.BIG;
|
|
145
|
-
var
|
|
146
|
-
var hasTopContent = hasMainContent || !!buttonText;
|
|
145
|
+
var hasTextMargin = !!title && isBigSize;
|
|
147
146
|
var clickEvent = useMemo(function () {
|
|
148
147
|
return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
|
|
149
148
|
}, [isTouchDevice]);
|
|
@@ -302,31 +301,33 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
302
301
|
[]);
|
|
303
302
|
var renderedText = useMemo(function () {
|
|
304
303
|
return /*#__PURE__*/React.createElement("div", {
|
|
305
|
-
className: cn('text'
|
|
304
|
+
className: cn('text', {
|
|
305
|
+
margin: hasTextMargin
|
|
306
|
+
})
|
|
306
307
|
}, text);
|
|
307
|
-
}, [text]);
|
|
308
|
+
}, [text, hasTextMargin]);
|
|
308
309
|
var renderedFullContent = useMemo(function () {
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
})
|
|
313
|
-
}, hasMainContent && /*#__PURE__*/React.createElement("div", {
|
|
314
|
-
className: cn('main-content')
|
|
315
|
-
}, !!title && /*#__PURE__*/React.createElement(Header, {
|
|
310
|
+
var hasButtonMargin = !!title || !!text;
|
|
311
|
+
var hasChildrenMargin = hasButtonMargin || !!buttonText;
|
|
312
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(Header, {
|
|
316
313
|
className: cn('title'),
|
|
317
314
|
as: "h5",
|
|
318
315
|
space: "tight"
|
|
319
|
-
}, title), !!text && renderedText
|
|
316
|
+
}, title), !!text && renderedText, !!buttonText && /*#__PURE__*/React.createElement("button", _extends({
|
|
320
317
|
type: "button",
|
|
321
|
-
className: cn('button'
|
|
318
|
+
className: cn('button', {
|
|
319
|
+
margin: hasButtonMargin
|
|
320
|
+
})
|
|
322
321
|
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
|
|
323
322
|
onClick: onClick
|
|
324
323
|
}), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
|
|
325
324
|
className: cn('button-arrow')
|
|
326
|
-
}))
|
|
327
|
-
className: cn('addititonal-content'
|
|
325
|
+
})), !!children && /*#__PURE__*/React.createElement("div", {
|
|
326
|
+
className: cn('addititonal-content', {
|
|
327
|
+
margin: hasChildrenMargin
|
|
328
|
+
})
|
|
328
329
|
}, children));
|
|
329
|
-
}, [title, text, buttonText, children, dataAttrs,
|
|
330
|
+
}, [title, text, buttonText, children, dataAttrs, renderedText, onClick]);
|
|
330
331
|
var template = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
331
332
|
className: cn({
|
|
332
333
|
theme: theme,
|
|
@@ -5,6 +5,9 @@
|
|
|
5
5
|
display: inline-block;
|
|
6
6
|
-webkit-box-sizing: border-box;
|
|
7
7
|
box-sizing: border-box;
|
|
8
|
+
min-width: -webkit-fit-content;
|
|
9
|
+
min-width: -moz-fit-content;
|
|
10
|
+
min-width: fit-content;
|
|
8
11
|
padding: 0 32px;
|
|
9
12
|
border: none;
|
|
10
13
|
border-radius: 30px;
|
|
@@ -30,196 +33,301 @@
|
|
|
30
33
|
transition: fill 0.3s;
|
|
31
34
|
}
|
|
32
35
|
.mfui-button_size-all_extra-small {
|
|
36
|
+
min-width: 24px;
|
|
37
|
+
height: 24px;
|
|
33
38
|
padding: 0 16px;
|
|
34
|
-
}
|
|
35
|
-
.mfui-button_size-all_extra-small .mfui-button__inner {
|
|
36
39
|
font-size: 12px;
|
|
37
|
-
line-height:
|
|
38
|
-
min-width: 26px;
|
|
39
|
-
height: 26px;
|
|
40
|
+
line-height: 14px;
|
|
40
41
|
}
|
|
41
|
-
.mfui-button_size-
|
|
42
|
+
.mfui-button_size-all_extra-small .mfui-button__icon,
|
|
43
|
+
.mfui-button_size-all_extra-small .mfui-button__icon-arrow {
|
|
44
|
+
width: 20px;
|
|
45
|
+
height: 20px;
|
|
46
|
+
}
|
|
47
|
+
.mfui-button_size-all_small {
|
|
42
48
|
min-width: 40px;
|
|
43
49
|
height: 40px;
|
|
50
|
+
padding: 0 24px;
|
|
51
|
+
}
|
|
52
|
+
.mfui-button_size-all_small .mfui-button__icon,
|
|
53
|
+
.mfui-button_size-all_small .mfui-button__icon-arrow {
|
|
54
|
+
width: 20px;
|
|
55
|
+
height: 20px;
|
|
44
56
|
}
|
|
45
|
-
.mfui-button_size-all_medium
|
|
57
|
+
.mfui-button_size-all_medium {
|
|
46
58
|
min-width: 52px;
|
|
47
59
|
height: 52px;
|
|
48
60
|
}
|
|
49
|
-
.mfui-button_size-
|
|
61
|
+
.mfui-button_size-all_medium .mfui-button__icon,
|
|
62
|
+
.mfui-button_size-all_medium .mfui-button__icon-arrow {
|
|
63
|
+
width: 32px;
|
|
64
|
+
height: 32px;
|
|
65
|
+
}
|
|
66
|
+
.mfui-button_size-all_large {
|
|
50
67
|
min-width: 60px;
|
|
51
68
|
height: 60px;
|
|
52
69
|
}
|
|
53
|
-
.mfui-button_size-
|
|
54
|
-
|
|
55
|
-
|
|
70
|
+
.mfui-button_size-all_large .mfui-button__icon,
|
|
71
|
+
.mfui-button_size-all_large .mfui-button__icon-arrow {
|
|
72
|
+
width: 32px;
|
|
73
|
+
height: 32px;
|
|
56
74
|
}
|
|
57
|
-
.mfui-button_size-
|
|
58
|
-
|
|
59
|
-
height: 16px;
|
|
75
|
+
.mfui-button_size-all_extra-small.mfui-buttonhas-arrow {
|
|
76
|
+
padding: 0 8px;
|
|
60
77
|
}
|
|
61
|
-
.mfui-button_size-
|
|
62
|
-
|
|
63
|
-
height: 24px;
|
|
78
|
+
.mfui-button_size-all_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
79
|
+
padding-left: 12px;
|
|
64
80
|
}
|
|
65
|
-
.mfui-button_size-
|
|
66
|
-
|
|
67
|
-
|
|
81
|
+
.mfui-button_size-all_medium.mfui-buttonhas-arrow,
|
|
82
|
+
.mfui-button_size-all_large.mfui-buttonhas-arrow {
|
|
83
|
+
padding: 0 24px;
|
|
84
|
+
}
|
|
85
|
+
.mfui-button_size-all_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
86
|
+
.mfui-button_size-all_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
87
|
+
.mfui-button_size-all_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
88
|
+
padding-left: 16px;
|
|
89
|
+
}
|
|
90
|
+
.mfui-button_type_text {
|
|
91
|
+
padding: 0;
|
|
68
92
|
}
|
|
69
93
|
@media screen and (min-width: 1280px) {
|
|
70
94
|
.mfui-button_size-wide_extra-small {
|
|
95
|
+
min-width: 24px;
|
|
96
|
+
height: 24px;
|
|
71
97
|
padding: 0 16px;
|
|
72
|
-
}
|
|
73
|
-
.mfui-button_size-wide_extra-small .mfui-button__inner {
|
|
74
98
|
font-size: 12px;
|
|
75
|
-
line-height:
|
|
76
|
-
min-width: 26px;
|
|
77
|
-
height: 26px;
|
|
99
|
+
line-height: 14px;
|
|
78
100
|
}
|
|
79
|
-
.mfui-button_size-
|
|
101
|
+
.mfui-button_size-wide_extra-small .mfui-button__icon,
|
|
102
|
+
.mfui-button_size-wide_extra-small .mfui-button__icon-arrow {
|
|
103
|
+
width: 20px;
|
|
104
|
+
height: 20px;
|
|
105
|
+
}
|
|
106
|
+
.mfui-button_size-wide_small {
|
|
80
107
|
min-width: 40px;
|
|
81
108
|
height: 40px;
|
|
109
|
+
padding: 0 24px;
|
|
110
|
+
}
|
|
111
|
+
.mfui-button_size-wide_small .mfui-button__icon,
|
|
112
|
+
.mfui-button_size-wide_small .mfui-button__icon-arrow {
|
|
113
|
+
width: 20px;
|
|
114
|
+
height: 20px;
|
|
82
115
|
}
|
|
83
|
-
.mfui-button_size-wide_medium
|
|
116
|
+
.mfui-button_size-wide_medium {
|
|
84
117
|
min-width: 52px;
|
|
85
118
|
height: 52px;
|
|
86
119
|
}
|
|
87
|
-
.mfui-button_size-
|
|
120
|
+
.mfui-button_size-wide_medium .mfui-button__icon,
|
|
121
|
+
.mfui-button_size-wide_medium .mfui-button__icon-arrow {
|
|
122
|
+
width: 32px;
|
|
123
|
+
height: 32px;
|
|
124
|
+
}
|
|
125
|
+
.mfui-button_size-wide_large {
|
|
88
126
|
min-width: 60px;
|
|
89
127
|
height: 60px;
|
|
90
128
|
}
|
|
91
|
-
.mfui-button_size-
|
|
92
|
-
|
|
93
|
-
|
|
129
|
+
.mfui-button_size-wide_large .mfui-button__icon,
|
|
130
|
+
.mfui-button_size-wide_large .mfui-button__icon-arrow {
|
|
131
|
+
width: 32px;
|
|
132
|
+
height: 32px;
|
|
94
133
|
}
|
|
95
|
-
.mfui-button_size-
|
|
96
|
-
|
|
97
|
-
height: 16px;
|
|
134
|
+
.mfui-button_size-wide_extra-small.mfui-buttonhas-arrow {
|
|
135
|
+
padding: 0 8px;
|
|
98
136
|
}
|
|
99
|
-
.mfui-button_size-
|
|
100
|
-
|
|
101
|
-
height: 24px;
|
|
137
|
+
.mfui-button_size-wide_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
138
|
+
padding-left: 12px;
|
|
102
139
|
}
|
|
103
|
-
.mfui-button_size-
|
|
104
|
-
|
|
105
|
-
|
|
140
|
+
.mfui-button_size-wide_medium.mfui-buttonhas-arrow,
|
|
141
|
+
.mfui-button_size-wide_large.mfui-buttonhas-arrow {
|
|
142
|
+
padding: 0 24px;
|
|
143
|
+
}
|
|
144
|
+
.mfui-button_size-wide_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
145
|
+
.mfui-button_size-wide_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
146
|
+
.mfui-button_size-wide_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
147
|
+
padding-left: 16px;
|
|
148
|
+
}
|
|
149
|
+
.mfui-button_type_text {
|
|
150
|
+
padding: 0;
|
|
106
151
|
}
|
|
107
152
|
}
|
|
108
153
|
@media screen and (min-width: 1024px) {
|
|
109
154
|
.mfui-button_size-desktop_extra-small {
|
|
155
|
+
min-width: 24px;
|
|
156
|
+
height: 24px;
|
|
110
157
|
padding: 0 16px;
|
|
111
|
-
}
|
|
112
|
-
.mfui-button_size-desktop_extra-small .mfui-button__inner {
|
|
113
158
|
font-size: 12px;
|
|
114
|
-
line-height:
|
|
115
|
-
min-width: 26px;
|
|
116
|
-
height: 26px;
|
|
159
|
+
line-height: 14px;
|
|
117
160
|
}
|
|
118
|
-
.mfui-button_size-
|
|
161
|
+
.mfui-button_size-desktop_extra-small .mfui-button__icon,
|
|
162
|
+
.mfui-button_size-desktop_extra-small .mfui-button__icon-arrow {
|
|
163
|
+
width: 20px;
|
|
164
|
+
height: 20px;
|
|
165
|
+
}
|
|
166
|
+
.mfui-button_size-desktop_small {
|
|
119
167
|
min-width: 40px;
|
|
120
168
|
height: 40px;
|
|
169
|
+
padding: 0 24px;
|
|
170
|
+
}
|
|
171
|
+
.mfui-button_size-desktop_small .mfui-button__icon,
|
|
172
|
+
.mfui-button_size-desktop_small .mfui-button__icon-arrow {
|
|
173
|
+
width: 20px;
|
|
174
|
+
height: 20px;
|
|
121
175
|
}
|
|
122
|
-
.mfui-button_size-desktop_medium
|
|
176
|
+
.mfui-button_size-desktop_medium {
|
|
123
177
|
min-width: 52px;
|
|
124
178
|
height: 52px;
|
|
125
179
|
}
|
|
126
|
-
.mfui-button_size-
|
|
180
|
+
.mfui-button_size-desktop_medium .mfui-button__icon,
|
|
181
|
+
.mfui-button_size-desktop_medium .mfui-button__icon-arrow {
|
|
182
|
+
width: 32px;
|
|
183
|
+
height: 32px;
|
|
184
|
+
}
|
|
185
|
+
.mfui-button_size-desktop_large {
|
|
127
186
|
min-width: 60px;
|
|
128
187
|
height: 60px;
|
|
129
188
|
}
|
|
130
|
-
.mfui-button_size-
|
|
131
|
-
|
|
132
|
-
|
|
189
|
+
.mfui-button_size-desktop_large .mfui-button__icon,
|
|
190
|
+
.mfui-button_size-desktop_large .mfui-button__icon-arrow {
|
|
191
|
+
width: 32px;
|
|
192
|
+
height: 32px;
|
|
133
193
|
}
|
|
134
|
-
.mfui-button_size-
|
|
135
|
-
|
|
136
|
-
height: 16px;
|
|
194
|
+
.mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow {
|
|
195
|
+
padding: 0 8px;
|
|
137
196
|
}
|
|
138
|
-
.mfui-button_size-
|
|
139
|
-
|
|
140
|
-
height: 24px;
|
|
197
|
+
.mfui-button_size-desktop_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
198
|
+
padding-left: 12px;
|
|
141
199
|
}
|
|
142
|
-
.mfui-button_size-
|
|
143
|
-
|
|
144
|
-
|
|
200
|
+
.mfui-button_size-desktop_medium.mfui-buttonhas-arrow,
|
|
201
|
+
.mfui-button_size-desktop_large.mfui-buttonhas-arrow {
|
|
202
|
+
padding: 0 24px;
|
|
203
|
+
}
|
|
204
|
+
.mfui-button_size-desktop_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
205
|
+
.mfui-button_size-desktop_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
206
|
+
.mfui-button_size-desktop_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
207
|
+
padding-left: 16px;
|
|
208
|
+
}
|
|
209
|
+
.mfui-button_type_text {
|
|
210
|
+
padding: 0;
|
|
145
211
|
}
|
|
146
212
|
}
|
|
147
213
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
|
148
214
|
.mfui-button_size-tablet_extra-small {
|
|
215
|
+
min-width: 24px;
|
|
216
|
+
height: 24px;
|
|
149
217
|
padding: 0 16px;
|
|
150
|
-
}
|
|
151
|
-
.mfui-button_size-tablet_extra-small .mfui-button__inner {
|
|
152
218
|
font-size: 12px;
|
|
153
|
-
line-height:
|
|
154
|
-
|
|
155
|
-
|
|
219
|
+
line-height: 14px;
|
|
220
|
+
}
|
|
221
|
+
.mfui-button_size-tablet_extra-small .mfui-button__icon,
|
|
222
|
+
.mfui-button_size-tablet_extra-small .mfui-button__icon-arrow {
|
|
223
|
+
width: 20px;
|
|
224
|
+
height: 20px;
|
|
156
225
|
}
|
|
157
|
-
.mfui-button_size-tablet_small
|
|
226
|
+
.mfui-button_size-tablet_small {
|
|
158
227
|
min-width: 40px;
|
|
159
228
|
height: 40px;
|
|
229
|
+
padding: 0 24px;
|
|
160
230
|
}
|
|
161
|
-
.mfui-button_size-
|
|
231
|
+
.mfui-button_size-tablet_small .mfui-button__icon,
|
|
232
|
+
.mfui-button_size-tablet_small .mfui-button__icon-arrow {
|
|
233
|
+
width: 20px;
|
|
234
|
+
height: 20px;
|
|
235
|
+
}
|
|
236
|
+
.mfui-button_size-tablet_medium {
|
|
162
237
|
min-width: 52px;
|
|
163
238
|
height: 52px;
|
|
164
239
|
}
|
|
165
|
-
.mfui-button_size-
|
|
240
|
+
.mfui-button_size-tablet_medium .mfui-button__icon,
|
|
241
|
+
.mfui-button_size-tablet_medium .mfui-button__icon-arrow {
|
|
242
|
+
width: 32px;
|
|
243
|
+
height: 32px;
|
|
244
|
+
}
|
|
245
|
+
.mfui-button_size-tablet_large {
|
|
166
246
|
min-width: 60px;
|
|
167
247
|
height: 60px;
|
|
168
248
|
}
|
|
169
|
-
.mfui-button_size-
|
|
170
|
-
|
|
171
|
-
|
|
249
|
+
.mfui-button_size-tablet_large .mfui-button__icon,
|
|
250
|
+
.mfui-button_size-tablet_large .mfui-button__icon-arrow {
|
|
251
|
+
width: 32px;
|
|
252
|
+
height: 32px;
|
|
172
253
|
}
|
|
173
|
-
.mfui-button_size-
|
|
174
|
-
|
|
175
|
-
height: 16px;
|
|
254
|
+
.mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow {
|
|
255
|
+
padding: 0 8px;
|
|
176
256
|
}
|
|
177
|
-
.mfui-button_size-
|
|
178
|
-
|
|
179
|
-
height: 24px;
|
|
257
|
+
.mfui-button_size-tablet_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
258
|
+
padding-left: 12px;
|
|
180
259
|
}
|
|
181
|
-
.mfui-button_size-
|
|
182
|
-
|
|
183
|
-
|
|
260
|
+
.mfui-button_size-tablet_medium.mfui-buttonhas-arrow,
|
|
261
|
+
.mfui-button_size-tablet_large.mfui-buttonhas-arrow {
|
|
262
|
+
padding: 0 24px;
|
|
263
|
+
}
|
|
264
|
+
.mfui-button_size-tablet_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
265
|
+
.mfui-button_size-tablet_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
266
|
+
.mfui-button_size-tablet_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
267
|
+
padding-left: 16px;
|
|
268
|
+
}
|
|
269
|
+
.mfui-button_type_text {
|
|
270
|
+
padding: 0;
|
|
184
271
|
}
|
|
185
272
|
}
|
|
186
273
|
@media screen and (max-width: 767px) {
|
|
187
274
|
.mfui-button_size-mobile_extra-small {
|
|
275
|
+
min-width: 24px;
|
|
276
|
+
height: 24px;
|
|
188
277
|
padding: 0 16px;
|
|
189
|
-
}
|
|
190
|
-
.mfui-button_size-mobile_extra-small .mfui-button__inner {
|
|
191
278
|
font-size: 12px;
|
|
192
|
-
line-height:
|
|
193
|
-
|
|
194
|
-
|
|
279
|
+
line-height: 14px;
|
|
280
|
+
}
|
|
281
|
+
.mfui-button_size-mobile_extra-small .mfui-button__icon,
|
|
282
|
+
.mfui-button_size-mobile_extra-small .mfui-button__icon-arrow {
|
|
283
|
+
width: 20px;
|
|
284
|
+
height: 20px;
|
|
195
285
|
}
|
|
196
|
-
.mfui-button_size-mobile_small
|
|
286
|
+
.mfui-button_size-mobile_small {
|
|
197
287
|
min-width: 40px;
|
|
198
288
|
height: 40px;
|
|
289
|
+
padding: 0 24px;
|
|
199
290
|
}
|
|
200
|
-
.mfui-button_size-
|
|
291
|
+
.mfui-button_size-mobile_small .mfui-button__icon,
|
|
292
|
+
.mfui-button_size-mobile_small .mfui-button__icon-arrow {
|
|
293
|
+
width: 20px;
|
|
294
|
+
height: 20px;
|
|
295
|
+
}
|
|
296
|
+
.mfui-button_size-mobile_medium {
|
|
201
297
|
min-width: 52px;
|
|
202
298
|
height: 52px;
|
|
203
299
|
}
|
|
204
|
-
.mfui-button_size-
|
|
300
|
+
.mfui-button_size-mobile_medium .mfui-button__icon,
|
|
301
|
+
.mfui-button_size-mobile_medium .mfui-button__icon-arrow {
|
|
302
|
+
width: 32px;
|
|
303
|
+
height: 32px;
|
|
304
|
+
}
|
|
305
|
+
.mfui-button_size-mobile_large {
|
|
205
306
|
min-width: 60px;
|
|
206
307
|
height: 60px;
|
|
207
308
|
}
|
|
208
|
-
.mfui-button_size-
|
|
209
|
-
|
|
210
|
-
|
|
309
|
+
.mfui-button_size-mobile_large .mfui-button__icon,
|
|
310
|
+
.mfui-button_size-mobile_large .mfui-button__icon-arrow {
|
|
311
|
+
width: 32px;
|
|
312
|
+
height: 32px;
|
|
211
313
|
}
|
|
212
|
-
.mfui-button_size-
|
|
213
|
-
|
|
214
|
-
height: 16px;
|
|
314
|
+
.mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow {
|
|
315
|
+
padding: 0 8px;
|
|
215
316
|
}
|
|
216
|
-
.mfui-button_size-
|
|
217
|
-
|
|
218
|
-
height: 24px;
|
|
317
|
+
.mfui-button_size-mobile_extra-small.mfui-buttonhas-arrow .mfui-button__content {
|
|
318
|
+
padding-left: 12px;
|
|
219
319
|
}
|
|
220
|
-
.mfui-button_size-
|
|
221
|
-
|
|
222
|
-
|
|
320
|
+
.mfui-button_size-mobile_medium.mfui-buttonhas-arrow,
|
|
321
|
+
.mfui-button_size-mobile_large.mfui-buttonhas-arrow {
|
|
322
|
+
padding: 0 24px;
|
|
323
|
+
}
|
|
324
|
+
.mfui-button_size-mobile_small.mfui-buttonhas-arrow .mfui-button__content,
|
|
325
|
+
.mfui-button_size-mobile_medium.mfui-buttonhas-arrow .mfui-button__content,
|
|
326
|
+
.mfui-button_size-mobile_large.mfui-buttonhas-arrow .mfui-button__content {
|
|
327
|
+
padding-left: 16px;
|
|
328
|
+
}
|
|
329
|
+
.mfui-button_type_text {
|
|
330
|
+
padding: 0;
|
|
223
331
|
}
|
|
224
332
|
}
|
|
225
333
|
.mfui-button:hover {
|
|
@@ -247,6 +355,7 @@
|
|
|
247
355
|
-webkit-box-sizing: border-box;
|
|
248
356
|
box-sizing: border-box;
|
|
249
357
|
width: 100%;
|
|
358
|
+
height: inherit;
|
|
250
359
|
vertical-align: top;
|
|
251
360
|
}
|
|
252
361
|
.mfui-button__text {
|
|
@@ -280,19 +389,18 @@
|
|
|
280
389
|
.mfui-button__icon-arrow {
|
|
281
390
|
width: 32px;
|
|
282
391
|
height: 32px;
|
|
283
|
-
margin-right: -8px;
|
|
284
392
|
margin-left: 4px;
|
|
285
393
|
}
|
|
286
394
|
.mfui-button_content-type_icon {
|
|
287
395
|
padding: 0;
|
|
288
396
|
}
|
|
289
397
|
.mfui-button_content-type_icon-text .mfui-button__icon {
|
|
290
|
-
width:
|
|
291
|
-
height:
|
|
292
|
-
margin-right:
|
|
293
|
-
margin-left: -8px;
|
|
398
|
+
width: 32px;
|
|
399
|
+
height: 32px;
|
|
400
|
+
margin-right: 4px;
|
|
294
401
|
}
|
|
295
|
-
.mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon
|
|
402
|
+
.mfui-button_content-type_icon-text.mfui-button_size-all_small .mfui-button__icon,
|
|
403
|
+
.mfui-button_content-type_icon-text.mfui-button_size-all_extra-small .mfui-button__icon {
|
|
296
404
|
display: none;
|
|
297
405
|
}
|
|
298
406
|
.mfui-button_type_text.mfui-button_theme_green {
|
|
@@ -301,9 +409,6 @@
|
|
|
301
409
|
width: fit-content;
|
|
302
410
|
color: var(--brandGreen);
|
|
303
411
|
background-color: transparent;
|
|
304
|
-
block-size: -webkit-fit-content;
|
|
305
|
-
block-size: -moz-fit-content;
|
|
306
|
-
block-size: fit-content;
|
|
307
412
|
}
|
|
308
413
|
.mfui-button_type_text.mfui-button_theme_green svg {
|
|
309
414
|
fill: var(--brandGreen);
|
|
@@ -326,9 +431,6 @@
|
|
|
326
431
|
width: fit-content;
|
|
327
432
|
color: var(--brandPurple);
|
|
328
433
|
background-color: transparent;
|
|
329
|
-
block-size: -webkit-fit-content;
|
|
330
|
-
block-size: -moz-fit-content;
|
|
331
|
-
block-size: fit-content;
|
|
332
434
|
}
|
|
333
435
|
.mfui-button_type_text.mfui-button_theme_purple svg {
|
|
334
436
|
fill: var(--brandPurple);
|
|
@@ -351,9 +453,6 @@
|
|
|
351
453
|
width: fit-content;
|
|
352
454
|
color: var(--stcWhite);
|
|
353
455
|
background-color: transparent;
|
|
354
|
-
block-size: -webkit-fit-content;
|
|
355
|
-
block-size: -moz-fit-content;
|
|
356
|
-
block-size: fit-content;
|
|
357
456
|
}
|
|
358
457
|
.mfui-button_type_text.mfui-button_theme_white svg {
|
|
359
458
|
fill: var(--stcWhite);
|
|
@@ -371,6 +470,9 @@
|
|
|
371
470
|
fill: var(--buttonDown);
|
|
372
471
|
}
|
|
373
472
|
.mfui-button_type_text.mfui-button_theme_black {
|
|
473
|
+
width: -webkit-fit-content;
|
|
474
|
+
width: -moz-fit-content;
|
|
475
|
+
width: fit-content;
|
|
374
476
|
color: var(--stcBlack);
|
|
375
477
|
background-color: transparent;
|
|
376
478
|
}
|
|
@@ -122,6 +122,7 @@ var Button = function Button(_ref) {
|
|
|
122
122
|
setTouch = _React$useState2[1];
|
|
123
123
|
|
|
124
124
|
var ElementType = href ? 'a' : 'button';
|
|
125
|
+
var displayArrow = showArrow && !icon;
|
|
125
126
|
|
|
126
127
|
var handleClick = _react["default"].useCallback(function (e) {
|
|
127
128
|
if (disabled) {
|
|
@@ -169,10 +170,10 @@ var Button = function Button(_ref) {
|
|
|
169
170
|
className: cn('text', {
|
|
170
171
|
ellipsis: ellipsis
|
|
171
172
|
})
|
|
172
|
-
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children),
|
|
173
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), displayArrow && /*#__PURE__*/_react["default"].createElement(Arrow, (0, _extends2["default"])({
|
|
173
174
|
className: cn('icon-arrow')
|
|
174
175
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
|
|
175
|
-
}, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName,
|
|
176
|
+
}, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, displayArrow]);
|
|
176
177
|
|
|
177
178
|
var contentType = _react["default"].useMemo(function () {
|
|
178
179
|
switch (true) {
|
|
@@ -237,7 +238,8 @@ var Button = function Button(_ref) {
|
|
|
237
238
|
'full-width': fullWidth,
|
|
238
239
|
loading: showLoader,
|
|
239
240
|
'no-touch': !isTouch,
|
|
240
|
-
'content-type': contentType
|
|
241
|
+
'content-type': contentType,
|
|
242
|
+
'has-arrow': displayArrow
|
|
241
243
|
}, classNameValue),
|
|
242
244
|
href: href,
|
|
243
245
|
download: !!href && download,
|
|
@@ -32,25 +32,6 @@
|
|
|
32
32
|
left: 0;
|
|
33
33
|
z-index: -1;
|
|
34
34
|
}
|
|
35
|
-
.mfui-tooltip__top,
|
|
36
|
-
.mfui-tooltip__main-content {
|
|
37
|
-
display: -webkit-box;
|
|
38
|
-
display: -ms-flexbox;
|
|
39
|
-
display: flex;
|
|
40
|
-
-webkit-box-orient: vertical;
|
|
41
|
-
-webkit-box-direction: normal;
|
|
42
|
-
-ms-flex-direction: column;
|
|
43
|
-
flex-direction: column;
|
|
44
|
-
gap: 8px;
|
|
45
|
-
}
|
|
46
|
-
@media screen and (min-width: 768px) {
|
|
47
|
-
.mfui-tooltip__top {
|
|
48
|
-
gap: 12px;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
.mfui-tooltip__top_margin {
|
|
52
|
-
margin-bottom: 16px;
|
|
53
|
-
}
|
|
54
35
|
.mfui-tooltip__arrow-container {
|
|
55
36
|
position: absolute;
|
|
56
37
|
}
|
|
@@ -87,15 +68,8 @@
|
|
|
87
68
|
line-height: 18px;
|
|
88
69
|
}
|
|
89
70
|
}
|
|
90
|
-
.mfui-
|
|
91
|
-
|
|
92
|
-
display: -ms-flexbox;
|
|
93
|
-
display: flex;
|
|
94
|
-
-webkit-box-orient: vertical;
|
|
95
|
-
-webkit-box-direction: normal;
|
|
96
|
-
-ms-flex-direction: column;
|
|
97
|
-
flex-direction: column;
|
|
98
|
-
gap: 16px;
|
|
71
|
+
.mfui-tooltip__text_margin {
|
|
72
|
+
margin-top: 8px;
|
|
99
73
|
}
|
|
100
74
|
.mfui-tooltip__button,
|
|
101
75
|
.mfui-tooltip__close-button {
|
|
@@ -127,6 +101,9 @@
|
|
|
127
101
|
line-height: 14px;
|
|
128
102
|
}
|
|
129
103
|
}
|
|
104
|
+
.mfui-tooltip__button_margin {
|
|
105
|
+
margin-top: 8px;
|
|
106
|
+
}
|
|
130
107
|
.mfui-tooltip__button:hover {
|
|
131
108
|
color: var(--buttonHoverGreen);
|
|
132
109
|
}
|
|
@@ -176,6 +153,14 @@
|
|
|
176
153
|
transition: 300ms;
|
|
177
154
|
fill: var(--brandGreen);
|
|
178
155
|
}
|
|
156
|
+
.mfui-tooltip__addititonal-content_margin {
|
|
157
|
+
margin-top: 16px;
|
|
158
|
+
}
|
|
159
|
+
@media screen and (max-width: 767px) {
|
|
160
|
+
.mfui-tooltip__addititonal-content_margin {
|
|
161
|
+
margin-top: 12px;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
179
164
|
.mfui-tooltip_small .mfui-tooltip__content {
|
|
180
165
|
display: -webkit-box;
|
|
181
166
|
display: -ms-flexbox;
|
|
@@ -174,8 +174,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
174
174
|
var portalElem = _react["default"].useRef(null);
|
|
175
175
|
|
|
176
176
|
var isBigSize = size === Size.BIG;
|
|
177
|
-
var
|
|
178
|
-
var hasTopContent = hasMainContent || !!buttonText;
|
|
177
|
+
var hasTextMargin = !!title && isBigSize;
|
|
179
178
|
var clickEvent = (0, _react.useMemo)(function () {
|
|
180
179
|
return isTouchDevice ? TOUCH_KEY : MOUSE_KEY;
|
|
181
180
|
}, [isTouchDevice]);
|
|
@@ -334,31 +333,33 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
334
333
|
[]);
|
|
335
334
|
var renderedText = (0, _react.useMemo)(function () {
|
|
336
335
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
337
|
-
className: cn('text'
|
|
336
|
+
className: cn('text', {
|
|
337
|
+
margin: hasTextMargin
|
|
338
|
+
})
|
|
338
339
|
}, text);
|
|
339
|
-
}, [text]);
|
|
340
|
+
}, [text, hasTextMargin]);
|
|
340
341
|
var renderedFullContent = (0, _react.useMemo)(function () {
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
})
|
|
345
|
-
}, hasMainContent && /*#__PURE__*/_react["default"].createElement("div", {
|
|
346
|
-
className: cn('main-content')
|
|
347
|
-
}, !!title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
|
|
342
|
+
var hasButtonMargin = !!title || !!text;
|
|
343
|
+
var hasChildrenMargin = hasButtonMargin || !!buttonText;
|
|
344
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !!title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
|
|
348
345
|
className: cn('title'),
|
|
349
346
|
as: "h5",
|
|
350
347
|
space: "tight"
|
|
351
|
-
}, title), !!text && renderedText
|
|
348
|
+
}, title), !!text && renderedText, !!buttonText && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({
|
|
352
349
|
type: "button",
|
|
353
|
-
className: cn('button'
|
|
350
|
+
className: cn('button', {
|
|
351
|
+
margin: hasButtonMargin
|
|
352
|
+
})
|
|
354
353
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
|
|
355
354
|
onClick: onClick
|
|
356
355
|
}), buttonText, /*#__PURE__*/_react["default"].createElement(RightArrow, {
|
|
357
356
|
className: cn('button-arrow')
|
|
358
|
-
}))
|
|
359
|
-
className: cn('addititonal-content'
|
|
357
|
+
})), !!children && /*#__PURE__*/_react["default"].createElement("div", {
|
|
358
|
+
className: cn('addititonal-content', {
|
|
359
|
+
margin: hasChildrenMargin
|
|
360
|
+
})
|
|
360
361
|
}, children));
|
|
361
|
-
}, [title, text, buttonText, children, dataAttrs,
|
|
362
|
+
}, [title, text, buttonText, children, dataAttrs, renderedText, onClick]);
|
|
362
363
|
|
|
363
364
|
var template = /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
364
365
|
className: cn({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "4.11.
|
|
3
|
+
"version": "4.11.2",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
"react-popper": "^2.2.3",
|
|
101
101
|
"swiper": "^6.5.6"
|
|
102
102
|
},
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "aae2e0e7bf9776c1fa4f7083c668074a40923639"
|
|
104
104
|
}
|