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