@megafon/ui-shared 5.15.0 → 5.17.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.
- package/CHANGELOG.md +40 -0
- package/dist/es/components/Card/Card.css +54 -8
- package/dist/es/components/Card/Card.d.ts +7 -3
- package/dist/es/components/Card/Card.js +27 -6
- package/dist/es/components/Card/types.d.ts +6 -0
- package/dist/es/components/Container/Container.css +237 -93
- package/dist/es/components/Container/Container.js +3 -1
- package/dist/es/components/ImageBanner/ImageBanner.css +29 -16
- package/dist/es/components/ImageBanner/ImageBanner.d.ts +4 -9
- package/dist/es/components/ImageBanner/ImageBanner.js +11 -22
- package/dist/es/components/TextWithIcon/TextWithIconItem.css +8 -10
- package/dist/es/helpers/getColumnConfig.d.ts +1 -1
- package/dist/lib/components/Card/Card.css +54 -8
- package/dist/lib/components/Card/Card.d.ts +7 -3
- package/dist/lib/components/Card/Card.js +27 -6
- package/dist/lib/components/Card/types.d.ts +6 -0
- package/dist/lib/components/Container/Container.css +237 -93
- package/dist/lib/components/Container/Container.js +3 -1
- package/dist/lib/components/ImageBanner/ImageBanner.css +29 -16
- package/dist/lib/components/ImageBanner/ImageBanner.d.ts +4 -9
- package/dist/lib/components/ImageBanner/ImageBanner.js +10 -22
- package/dist/lib/components/TextWithIcon/TextWithIconItem.css +8 -10
- package/dist/lib/helpers/getColumnConfig.d.ts +1 -1
- package/package.json +4 -4
@@ -7,299 +7,462 @@ h5 {
|
|
7
7
|
}
|
8
8
|
.mfui-container {
|
9
9
|
position: relative;
|
10
|
+
background-color: var(--background);
|
11
|
+
}
|
12
|
+
.mfui-container .mfui-container__inner {
|
10
13
|
padding-bottom: 96px;
|
14
|
+
border-radius: 24px;
|
15
|
+
}
|
16
|
+
@media screen and (max-width: 767px) {
|
17
|
+
.mfui-container .mfui-container__inner {
|
18
|
+
padding-bottom: 48px;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
22
|
+
.mfui-container .mfui-container__inner {
|
23
|
+
padding-bottom: 72px;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
.mfui-container:first-child .mfui-container__inner {
|
27
|
+
border-top-left-radius: 0;
|
28
|
+
border-top-right-radius: 0;
|
11
29
|
}
|
12
|
-
.mfui-
|
13
|
-
|
30
|
+
.mfui-container:last-child .mfui-container__inner {
|
31
|
+
border-bottom-right-radius: 0;
|
32
|
+
border-bottom-left-radius: 0;
|
14
33
|
}
|
15
|
-
.mfui-container_bg-
|
34
|
+
.mfui-container_bg-color_default .mfui-container__inner {
|
35
|
+
background-color: var(--background);
|
36
|
+
}
|
37
|
+
.mfui-container_bg-color_light-gray .mfui-container__inner {
|
16
38
|
background-color: var(--spbSky0);
|
17
39
|
}
|
18
|
-
.mfui-container_bg-color_gray {
|
40
|
+
.mfui-container_bg-color_gray .mfui-container__inner {
|
19
41
|
background-color: var(--spbSky1);
|
20
42
|
}
|
21
|
-
.mfui-container_bg-color_green {
|
43
|
+
.mfui-container_bg-color_green .mfui-container__inner {
|
22
44
|
background-color: var(--brandGreen);
|
23
45
|
}
|
24
|
-
.mfui-container_bg-color_purple {
|
46
|
+
.mfui-container_bg-color_purple .mfui-container__inner {
|
25
47
|
background-color: var(--brandPurple);
|
26
48
|
}
|
49
|
+
.mfui-container .mfui-container_bottom-shadow:after {
|
50
|
+
content: '';
|
51
|
+
position: absolute;
|
52
|
+
right: 0;
|
53
|
+
bottom: 96px;
|
54
|
+
width: 100%;
|
55
|
+
height: 100%;
|
56
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
|
57
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 100%);
|
58
|
+
}
|
27
59
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
28
|
-
.mfui-container {
|
29
|
-
padding-bottom: 72px;
|
30
|
-
}
|
31
|
-
.mfui-container_bottom-shadow:after {
|
60
|
+
.mfui-container .mfui-container_bottom-shadow:after {
|
32
61
|
bottom: 72px !important;
|
33
62
|
}
|
34
63
|
}
|
35
64
|
@media screen and (max-width: 767px) {
|
36
|
-
.mfui-container {
|
37
|
-
padding-bottom: 48px;
|
38
|
-
}
|
39
|
-
.mfui-container_bottom-shadow:after {
|
65
|
+
.mfui-container .mfui-container_bottom-shadow:after {
|
40
66
|
bottom: 48px !important;
|
41
67
|
}
|
42
68
|
}
|
43
|
-
.mfui-
|
69
|
+
.mfui-container_disable-padding-top .mfui-container__inner {
|
70
|
+
padding-top: 0 !important;
|
71
|
+
}
|
72
|
+
.mfui-container_disable-padding-bottom .mfui-container__inner {
|
73
|
+
padding-bottom: 0 !important;
|
74
|
+
}
|
75
|
+
.mfui-container_disable-padding-bottom.mfui-container_bottom-shadow:after {
|
76
|
+
bottom: 0 !important;
|
77
|
+
}
|
78
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
44
79
|
padding-top: 96px;
|
45
80
|
}
|
46
81
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
47
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_light-gray {
|
82
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
48
83
|
padding-top: 72px;
|
49
84
|
}
|
50
85
|
}
|
51
86
|
@media screen and (max-width: 767px) {
|
52
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_light-gray {
|
87
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
53
88
|
padding-top: 48px;
|
54
89
|
}
|
55
90
|
}
|
56
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_gray {
|
91
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_gray .mfui-container__inner {
|
57
92
|
padding-top: 96px;
|
58
93
|
}
|
59
94
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
60
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_gray {
|
95
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_gray .mfui-container__inner {
|
61
96
|
padding-top: 72px;
|
62
97
|
}
|
63
98
|
}
|
64
99
|
@media screen and (max-width: 767px) {
|
65
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_gray {
|
100
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_gray .mfui-container__inner {
|
66
101
|
padding-top: 48px;
|
67
102
|
}
|
68
103
|
}
|
69
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_green {
|
104
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_green .mfui-container__inner {
|
70
105
|
padding-top: 96px;
|
71
106
|
}
|
72
107
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
73
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_green {
|
108
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_green .mfui-container__inner {
|
74
109
|
padding-top: 72px;
|
75
110
|
}
|
76
111
|
}
|
77
112
|
@media screen and (max-width: 767px) {
|
78
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_green {
|
113
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_green .mfui-container__inner {
|
79
114
|
padding-top: 48px;
|
80
115
|
}
|
81
116
|
}
|
82
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_purple {
|
117
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_purple .mfui-container__inner {
|
83
118
|
padding-top: 96px;
|
84
119
|
}
|
85
120
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
86
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_purple {
|
121
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_purple .mfui-container__inner {
|
87
122
|
padding-top: 72px;
|
88
123
|
}
|
89
124
|
}
|
90
125
|
@media screen and (max-width: 767px) {
|
91
|
-
.mfui-container_bg-color_default + .mfui-container_bg-color_purple {
|
126
|
+
.mfui-container_bg-color_default + .mfui-container_bg-color_purple .mfui-container__inner {
|
92
127
|
padding-top: 48px;
|
93
128
|
}
|
94
129
|
}
|
95
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_default {
|
130
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_default .mfui-container__inner {
|
96
131
|
padding-top: 96px;
|
97
132
|
}
|
98
133
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
99
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_default {
|
134
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_default .mfui-container__inner {
|
100
135
|
padding-top: 72px;
|
101
136
|
}
|
102
137
|
}
|
103
138
|
@media screen and (max-width: 767px) {
|
104
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_default {
|
139
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_default .mfui-container__inner {
|
105
140
|
padding-top: 48px;
|
106
141
|
}
|
107
142
|
}
|
108
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-
|
143
|
+
.mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_light-gray) .mfui-container__inner {
|
144
|
+
border-bottom-right-radius: 0;
|
145
|
+
border-bottom-left-radius: 0;
|
146
|
+
}
|
147
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
148
|
+
border-top-left-radius: 0;
|
149
|
+
border-top-right-radius: 0;
|
150
|
+
}
|
151
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray .mfui-container__inner {
|
109
152
|
padding-top: 96px;
|
110
153
|
}
|
111
154
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
112
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray {
|
155
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray .mfui-container__inner {
|
113
156
|
padding-top: 72px;
|
114
157
|
}
|
115
158
|
}
|
116
159
|
@media screen and (max-width: 767px) {
|
117
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray {
|
160
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray .mfui-container__inner {
|
118
161
|
padding-top: 48px;
|
119
162
|
}
|
120
163
|
}
|
121
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-
|
164
|
+
.mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_gray) .mfui-container__inner {
|
165
|
+
border-bottom-right-radius: 0;
|
166
|
+
border-bottom-left-radius: 0;
|
167
|
+
}
|
168
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray .mfui-container__inner {
|
169
|
+
border-top-left-radius: 0;
|
170
|
+
border-top-right-radius: 0;
|
171
|
+
}
|
172
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_green .mfui-container__inner {
|
122
173
|
padding-top: 96px;
|
123
174
|
}
|
124
175
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
125
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_green {
|
176
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_green .mfui-container__inner {
|
126
177
|
padding-top: 72px;
|
127
178
|
}
|
128
179
|
}
|
129
180
|
@media screen and (max-width: 767px) {
|
130
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_green {
|
181
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_green .mfui-container__inner {
|
131
182
|
padding-top: 48px;
|
132
183
|
}
|
133
184
|
}
|
134
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-
|
185
|
+
.mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_green) .mfui-container__inner {
|
186
|
+
border-bottom-right-radius: 0;
|
187
|
+
border-bottom-left-radius: 0;
|
188
|
+
}
|
189
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_green .mfui-container__inner {
|
190
|
+
border-top-left-radius: 0;
|
191
|
+
border-top-right-radius: 0;
|
192
|
+
}
|
193
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple .mfui-container__inner {
|
135
194
|
padding-top: 96px;
|
136
195
|
}
|
137
196
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
138
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple {
|
197
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple .mfui-container__inner {
|
139
198
|
padding-top: 72px;
|
140
199
|
}
|
141
200
|
}
|
142
201
|
@media screen and (max-width: 767px) {
|
143
|
-
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple {
|
202
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple .mfui-container__inner {
|
144
203
|
padding-top: 48px;
|
145
204
|
}
|
146
205
|
}
|
147
|
-
.mfui-container_bg-
|
206
|
+
.mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_purple) .mfui-container__inner {
|
207
|
+
border-bottom-right-radius: 0;
|
208
|
+
border-bottom-left-radius: 0;
|
209
|
+
}
|
210
|
+
.mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple .mfui-container__inner {
|
211
|
+
border-top-left-radius: 0;
|
212
|
+
border-top-right-radius: 0;
|
213
|
+
}
|
214
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_default .mfui-container__inner {
|
148
215
|
padding-top: 96px;
|
149
216
|
}
|
150
217
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
151
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-color_default {
|
218
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_default .mfui-container__inner {
|
152
219
|
padding-top: 72px;
|
153
220
|
}
|
154
221
|
}
|
155
222
|
@media screen and (max-width: 767px) {
|
156
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-color_default {
|
223
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_default .mfui-container__inner {
|
157
224
|
padding-top: 48px;
|
158
225
|
}
|
159
226
|
}
|
160
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray {
|
227
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
161
228
|
padding-top: 96px;
|
162
229
|
}
|
163
230
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
164
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray {
|
231
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
165
232
|
padding-top: 72px;
|
166
233
|
}
|
167
234
|
}
|
168
235
|
@media screen and (max-width: 767px) {
|
169
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray {
|
236
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
170
237
|
padding-top: 48px;
|
171
238
|
}
|
172
239
|
}
|
173
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-
|
240
|
+
.mfui-container_bg-color_gray:has( + .mfui-container_bg-color_light-gray) .mfui-container__inner {
|
241
|
+
border-bottom-right-radius: 0;
|
242
|
+
border-bottom-left-radius: 0;
|
243
|
+
}
|
244
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
245
|
+
border-top-left-radius: 0;
|
246
|
+
border-top-right-radius: 0;
|
247
|
+
}
|
248
|
+
.mfui-container_bg-color_gray:has( + .mfui-container_bg-color_gray) .mfui-container__inner {
|
249
|
+
border-bottom-right-radius: 0;
|
250
|
+
border-bottom-left-radius: 0;
|
251
|
+
}
|
252
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_gray .mfui-container__inner {
|
253
|
+
border-top-left-radius: 0;
|
254
|
+
border-top-right-radius: 0;
|
255
|
+
}
|
256
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_green .mfui-container__inner {
|
174
257
|
padding-top: 96px;
|
175
258
|
}
|
176
259
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
177
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-color_green {
|
260
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_green .mfui-container__inner {
|
178
261
|
padding-top: 72px;
|
179
262
|
}
|
180
263
|
}
|
181
264
|
@media screen and (max-width: 767px) {
|
182
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-color_green {
|
265
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_green .mfui-container__inner {
|
183
266
|
padding-top: 48px;
|
184
267
|
}
|
185
268
|
}
|
186
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-
|
269
|
+
.mfui-container_bg-color_gray:has( + .mfui-container_bg-color_green) .mfui-container__inner {
|
270
|
+
border-bottom-right-radius: 0;
|
271
|
+
border-bottom-left-radius: 0;
|
272
|
+
}
|
273
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_green .mfui-container__inner {
|
274
|
+
border-top-left-radius: 0;
|
275
|
+
border-top-right-radius: 0;
|
276
|
+
}
|
277
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_purple .mfui-container__inner {
|
187
278
|
padding-top: 96px;
|
188
279
|
}
|
189
280
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
190
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-color_purple {
|
281
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_purple .mfui-container__inner {
|
191
282
|
padding-top: 72px;
|
192
283
|
}
|
193
284
|
}
|
194
285
|
@media screen and (max-width: 767px) {
|
195
|
-
.mfui-container_bg-color_gray + .mfui-container_bg-color_purple {
|
286
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_purple .mfui-container__inner {
|
196
287
|
padding-top: 48px;
|
197
288
|
}
|
198
289
|
}
|
199
|
-
.mfui-container_bg-
|
290
|
+
.mfui-container_bg-color_gray:has( + .mfui-container_bg-color_purple) .mfui-container__inner {
|
291
|
+
border-bottom-right-radius: 0;
|
292
|
+
border-bottom-left-radius: 0;
|
293
|
+
}
|
294
|
+
.mfui-container_bg-color_gray + .mfui-container_bg-color_purple .mfui-container__inner {
|
295
|
+
border-top-left-radius: 0;
|
296
|
+
border-top-right-radius: 0;
|
297
|
+
}
|
298
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_default .mfui-container__inner {
|
200
299
|
padding-top: 96px;
|
201
300
|
}
|
202
301
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
203
|
-
.mfui-container_bg-color_green + .mfui-container_bg-color_default {
|
302
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_default .mfui-container__inner {
|
204
303
|
padding-top: 72px;
|
205
304
|
}
|
206
305
|
}
|
207
306
|
@media screen and (max-width: 767px) {
|
208
|
-
.mfui-container_bg-color_green + .mfui-container_bg-color_default {
|
307
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_default .mfui-container__inner {
|
209
308
|
padding-top: 48px;
|
210
309
|
}
|
211
310
|
}
|
212
|
-
.mfui-container_bg-color_green + .mfui-container_bg-color_light-gray {
|
311
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
213
312
|
padding-top: 96px;
|
214
313
|
}
|
215
314
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
216
|
-
.mfui-container_bg-color_green + .mfui-container_bg-color_light-gray {
|
315
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
217
316
|
padding-top: 72px;
|
218
317
|
}
|
219
318
|
}
|
220
319
|
@media screen and (max-width: 767px) {
|
221
|
-
.mfui-container_bg-color_green + .mfui-container_bg-color_light-gray {
|
320
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
222
321
|
padding-top: 48px;
|
223
322
|
}
|
224
323
|
}
|
225
|
-
.mfui-container_bg-color_green + .mfui-container_bg-
|
324
|
+
.mfui-container_bg-color_green:has( + .mfui-container_bg-color_light-gray) .mfui-container__inner {
|
325
|
+
border-bottom-right-radius: 0;
|
326
|
+
border-bottom-left-radius: 0;
|
327
|
+
}
|
328
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
329
|
+
border-top-left-radius: 0;
|
330
|
+
border-top-right-radius: 0;
|
331
|
+
}
|
332
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_gray .mfui-container__inner {
|
226
333
|
padding-top: 96px;
|
227
334
|
}
|
228
335
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
229
|
-
.mfui-container_bg-color_green + .mfui-container_bg-color_gray {
|
336
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_gray .mfui-container__inner {
|
230
337
|
padding-top: 72px;
|
231
338
|
}
|
232
339
|
}
|
233
340
|
@media screen and (max-width: 767px) {
|
234
|
-
.mfui-container_bg-color_green + .mfui-container_bg-color_gray {
|
341
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_gray .mfui-container__inner {
|
235
342
|
padding-top: 48px;
|
236
343
|
}
|
237
344
|
}
|
238
|
-
.mfui-container_bg-color_green + .mfui-container_bg-
|
345
|
+
.mfui-container_bg-color_green:has( + .mfui-container_bg-color_gray) .mfui-container__inner {
|
346
|
+
border-bottom-right-radius: 0;
|
347
|
+
border-bottom-left-radius: 0;
|
348
|
+
}
|
349
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_gray .mfui-container__inner {
|
350
|
+
border-top-left-radius: 0;
|
351
|
+
border-top-right-radius: 0;
|
352
|
+
}
|
353
|
+
.mfui-container_bg-color_green:has( + .mfui-container_bg-color_green) .mfui-container__inner {
|
354
|
+
border-bottom-right-radius: 0;
|
355
|
+
border-bottom-left-radius: 0;
|
356
|
+
}
|
357
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_green .mfui-container__inner {
|
358
|
+
border-top-left-radius: 0;
|
359
|
+
border-top-right-radius: 0;
|
360
|
+
}
|
361
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_purple .mfui-container__inner {
|
239
362
|
padding-top: 96px;
|
240
363
|
}
|
241
364
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
242
|
-
.mfui-container_bg-color_green + .mfui-container_bg-color_purple {
|
365
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_purple .mfui-container__inner {
|
243
366
|
padding-top: 72px;
|
244
367
|
}
|
245
368
|
}
|
246
369
|
@media screen and (max-width: 767px) {
|
247
|
-
.mfui-container_bg-color_green + .mfui-container_bg-color_purple {
|
370
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_purple .mfui-container__inner {
|
248
371
|
padding-top: 48px;
|
249
372
|
}
|
250
373
|
}
|
251
|
-
.mfui-container_bg-
|
374
|
+
.mfui-container_bg-color_green:has( + .mfui-container_bg-color_purple) .mfui-container__inner {
|
375
|
+
border-bottom-right-radius: 0;
|
376
|
+
border-bottom-left-radius: 0;
|
377
|
+
}
|
378
|
+
.mfui-container_bg-color_green + .mfui-container_bg-color_purple .mfui-container__inner {
|
379
|
+
border-top-left-radius: 0;
|
380
|
+
border-top-right-radius: 0;
|
381
|
+
}
|
382
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_default .mfui-container__inner {
|
252
383
|
padding-top: 96px;
|
253
384
|
}
|
254
385
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
255
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-color_default {
|
386
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_default .mfui-container__inner {
|
256
387
|
padding-top: 72px;
|
257
388
|
}
|
258
389
|
}
|
259
390
|
@media screen and (max-width: 767px) {
|
260
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-color_default {
|
391
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_default .mfui-container__inner {
|
261
392
|
padding-top: 48px;
|
262
393
|
}
|
263
394
|
}
|
264
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray {
|
395
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
265
396
|
padding-top: 96px;
|
266
397
|
}
|
267
398
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
268
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray {
|
399
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
269
400
|
padding-top: 72px;
|
270
401
|
}
|
271
402
|
}
|
272
403
|
@media screen and (max-width: 767px) {
|
273
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray {
|
404
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
274
405
|
padding-top: 48px;
|
275
406
|
}
|
276
407
|
}
|
277
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-
|
408
|
+
.mfui-container_bg-color_purple:has( + .mfui-container_bg-color_light-gray) .mfui-container__inner {
|
409
|
+
border-bottom-right-radius: 0;
|
410
|
+
border-bottom-left-radius: 0;
|
411
|
+
}
|
412
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray .mfui-container__inner {
|
413
|
+
border-top-left-radius: 0;
|
414
|
+
border-top-right-radius: 0;
|
415
|
+
}
|
416
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_gray .mfui-container__inner {
|
278
417
|
padding-top: 96px;
|
279
418
|
}
|
280
419
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
281
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-color_gray {
|
420
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_gray .mfui-container__inner {
|
282
421
|
padding-top: 72px;
|
283
422
|
}
|
284
423
|
}
|
285
424
|
@media screen and (max-width: 767px) {
|
286
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-color_gray {
|
425
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_gray .mfui-container__inner {
|
287
426
|
padding-top: 48px;
|
288
427
|
}
|
289
428
|
}
|
290
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-
|
429
|
+
.mfui-container_bg-color_purple:has( + .mfui-container_bg-color_gray) .mfui-container__inner {
|
430
|
+
border-bottom-right-radius: 0;
|
431
|
+
border-bottom-left-radius: 0;
|
432
|
+
}
|
433
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_gray .mfui-container__inner {
|
434
|
+
border-top-left-radius: 0;
|
435
|
+
border-top-right-radius: 0;
|
436
|
+
}
|
437
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_green .mfui-container__inner {
|
291
438
|
padding-top: 96px;
|
292
439
|
}
|
293
440
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
294
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-color_green {
|
441
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_green .mfui-container__inner {
|
295
442
|
padding-top: 72px;
|
296
443
|
}
|
297
444
|
}
|
298
445
|
@media screen and (max-width: 767px) {
|
299
|
-
.mfui-container_bg-color_purple + .mfui-container_bg-color_green {
|
446
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_green .mfui-container__inner {
|
300
447
|
padding-top: 48px;
|
301
448
|
}
|
302
449
|
}
|
450
|
+
.mfui-container_bg-color_purple:has( + .mfui-container_bg-color_green) .mfui-container__inner {
|
451
|
+
border-bottom-right-radius: 0;
|
452
|
+
border-bottom-left-radius: 0;
|
453
|
+
}
|
454
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_green .mfui-container__inner {
|
455
|
+
border-top-left-radius: 0;
|
456
|
+
border-top-right-radius: 0;
|
457
|
+
}
|
458
|
+
.mfui-container_bg-color_purple:has( + .mfui-container_bg-color_purple) .mfui-container__inner {
|
459
|
+
border-bottom-right-radius: 0;
|
460
|
+
border-bottom-left-radius: 0;
|
461
|
+
}
|
462
|
+
.mfui-container_bg-color_purple + .mfui-container_bg-color_purple .mfui-container__inner {
|
463
|
+
border-top-left-radius: 0;
|
464
|
+
border-top-right-radius: 0;
|
465
|
+
}
|
303
466
|
.mfui-container .mfui-title-description-box + .mfui-benefits-icons {
|
304
467
|
margin-top: 56px;
|
305
468
|
}
|
@@ -3080,22 +3243,3 @@ h5 {
|
|
3080
3243
|
margin-top: 24px;
|
3081
3244
|
}
|
3082
3245
|
}
|
3083
|
-
.mfui-container_bottom-shadow:after {
|
3084
|
-
content: '';
|
3085
|
-
position: absolute;
|
3086
|
-
right: 0;
|
3087
|
-
bottom: 96px;
|
3088
|
-
width: 100%;
|
3089
|
-
height: 100%;
|
3090
|
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
|
3091
|
-
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 100%);
|
3092
|
-
}
|
3093
|
-
.mfui-container_disable-padding-top {
|
3094
|
-
padding-top: 0 !important;
|
3095
|
-
}
|
3096
|
-
.mfui-container_disable-padding-bottom {
|
3097
|
-
padding-bottom: 0 !important;
|
3098
|
-
}
|
3099
|
-
.mfui-container_disable-padding-bottom.mfui-container_bottom-shadow:after {
|
3100
|
-
bottom: 0 !important;
|
3101
|
-
}
|
@@ -33,7 +33,9 @@ var Container = function Container(_ref) {
|
|
33
33
|
}, [className]),
|
34
34
|
ref: rootRef,
|
35
35
|
id: id
|
36
|
-
}, /*#__PURE__*/React.createElement(
|
36
|
+
}, /*#__PURE__*/React.createElement("div", {
|
37
|
+
className: cn('inner')
|
38
|
+
}, /*#__PURE__*/React.createElement(ContentArea, null, children)));
|
37
39
|
};
|
38
40
|
|
39
41
|
Container.propTypes = {
|
@@ -29,7 +29,6 @@ h5 {
|
|
29
29
|
-ms-flex-align: center;
|
30
30
|
align-items: center;
|
31
31
|
height: 420px;
|
32
|
-
padding: 0 80px;
|
33
32
|
}
|
34
33
|
}
|
35
34
|
.mfui-image-banner__picture {
|
@@ -44,15 +43,11 @@ h5 {
|
|
44
43
|
}
|
45
44
|
@media screen and (min-width: 1024px) {
|
46
45
|
.mfui-image-banner__picture {
|
47
|
-
width:
|
46
|
+
width: 50%;
|
47
|
+
max-width: 672px;
|
48
48
|
height: 100%;
|
49
49
|
}
|
50
50
|
}
|
51
|
-
@media screen and (min-width: 1280px) {
|
52
|
-
.mfui-image-banner__picture {
|
53
|
-
width: 408px;
|
54
|
-
}
|
55
|
-
}
|
56
51
|
.mfui-image-banner__picture_v-align_top {
|
57
52
|
-webkit-box-align: start;
|
58
53
|
-ms-flex-align: start;
|
@@ -68,18 +63,18 @@ h5 {
|
|
68
63
|
-ms-flex-align: end;
|
69
64
|
align-items: flex-end;
|
70
65
|
}
|
71
|
-
.mfui-image-
|
66
|
+
.mfui-image-banner__image {
|
72
67
|
display: block;
|
73
68
|
max-width: 100%;
|
74
69
|
max-height: 150px;
|
75
70
|
}
|
76
71
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
77
|
-
.mfui-image-
|
72
|
+
.mfui-image-banner__image {
|
78
73
|
max-height: 230px;
|
79
74
|
}
|
80
75
|
}
|
81
76
|
@media screen and (min-width: 1024px) {
|
82
|
-
.mfui-image-
|
77
|
+
.mfui-image-banner__image {
|
83
78
|
max-height: 100%;
|
84
79
|
-o-object-fit: contain;
|
85
80
|
object-fit: contain;
|
@@ -87,6 +82,9 @@ h5 {
|
|
87
82
|
}
|
88
83
|
.mfui-image-banner__content {
|
89
84
|
z-index: 1;
|
85
|
+
-webkit-box-flex: 1;
|
86
|
+
-ms-flex-positive: 1;
|
87
|
+
flex-grow: 1;
|
90
88
|
}
|
91
89
|
@media screen and (max-width: 1023px) {
|
92
90
|
.mfui-image-banner__content {
|
@@ -98,6 +96,12 @@ h5 {
|
|
98
96
|
text-align: center;
|
99
97
|
}
|
100
98
|
}
|
99
|
+
@media screen and (min-width: 1024px) {
|
100
|
+
.mfui-image-banner__content {
|
101
|
+
width: 50%;
|
102
|
+
padding: 0 80px;
|
103
|
+
}
|
104
|
+
}
|
101
105
|
.mfui-image-banner__description {
|
102
106
|
margin-top: 16px;
|
103
107
|
white-space: pre-wrap;
|
@@ -132,14 +136,18 @@ h5 {
|
|
132
136
|
-ms-flex-wrap: wrap;
|
133
137
|
flex-wrap: wrap;
|
134
138
|
gap: 16px;
|
135
|
-
-webkit-box-align: center;
|
136
|
-
-ms-flex-align: center;
|
137
|
-
align-items: center;
|
138
139
|
-webkit-box-pack: center;
|
139
140
|
-ms-flex-pack: center;
|
140
141
|
justify-content: center;
|
141
142
|
margin-top: 32px;
|
142
143
|
}
|
144
|
+
@media screen and (max-width: 767px) {
|
145
|
+
.mfui-image-banner__children {
|
146
|
+
-webkit-box-align: center;
|
147
|
+
-ms-flex-align: center;
|
148
|
+
align-items: center;
|
149
|
+
}
|
150
|
+
}
|
143
151
|
@media screen and (min-width: 768px) {
|
144
152
|
.mfui-image-banner__children {
|
145
153
|
-webkit-box-orient: horizontal;
|
@@ -190,7 +198,7 @@ h5 {
|
|
190
198
|
}
|
191
199
|
@media screen and (min-width: 1024px) {
|
192
200
|
.mfui-image-banner_auto-height .mfui-image-banner__content {
|
193
|
-
padding: 48px
|
201
|
+
padding: 48px 80px;
|
194
202
|
}
|
195
203
|
}
|
196
204
|
@media screen and (min-width: 1024px) {
|
@@ -199,7 +207,12 @@ h5 {
|
|
199
207
|
}
|
200
208
|
}
|
201
209
|
@media screen and (min-width: 1024px) {
|
202
|
-
.mfui-image-
|
210
|
+
.mfui-image-banner_has-image .mfui-image-banner__content {
|
211
|
+
padding-right: 0;
|
212
|
+
}
|
213
|
+
}
|
214
|
+
@media screen and (min-width: 1024px) {
|
215
|
+
.mfui-image-banner_full-width .mfui-image-banner__image {
|
203
216
|
position: absolute;
|
204
217
|
right: 0;
|
205
218
|
bottom: 0;
|
@@ -208,7 +221,7 @@ h5 {
|
|
208
221
|
}
|
209
222
|
}
|
210
223
|
@media screen and (min-width: 1024px) {
|
211
|
-
.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-
|
224
|
+
.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image {
|
212
225
|
width: 100%;
|
213
226
|
height: 100%;
|
214
227
|
-o-object-fit: cover;
|