@meduza/ui-kit-2 0.2.3 → 0.2.4
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/dist/ui-kit-2.cjs.development.js +6 -11
- package/dist/ui-kit-2.cjs.development.js.map +1 -1
- package/dist/ui-kit-2.cjs.production.min.js +1 -1
- package/dist/ui-kit-2.cjs.production.min.js.map +1 -1
- package/dist/ui-kit-2.esm.js +6 -11
- package/dist/ui-kit-2.esm.js.map +1 -1
- package/dist/ui-kit.css +2827 -2788
- package/package.json +1 -1
- package/src/DonatesTeaser/DonatesTeaser.module.css +46 -8
- package/src/DonatesTeaser/index.tsx +9 -8
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
display: block;
|
|
8
8
|
|
|
9
9
|
margin: calc(15rem / 16) -20px;
|
|
10
|
-
padding:
|
|
10
|
+
padding: 67px 20px 70px;
|
|
11
11
|
overflow: hidden;
|
|
12
12
|
|
|
13
13
|
font-family: $secondaryFont;
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
@media $mobile {
|
|
22
22
|
margin: 25px 0 20px;
|
|
23
|
-
padding:
|
|
23
|
+
padding: 59px 30px 73px;
|
|
24
24
|
|
|
25
25
|
border-radius: 8px;
|
|
26
26
|
}
|
|
@@ -47,6 +47,27 @@
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
.title::after {
|
|
51
|
+
display: inline-block;
|
|
52
|
+
|
|
53
|
+
width: 21px;
|
|
54
|
+
height: 21px;
|
|
55
|
+
|
|
56
|
+
vertical-align: text-top;
|
|
57
|
+
|
|
58
|
+
background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12.735c1.089 3.09 5.133 9.759 7.467 10.247C12.397 23.593 21.133 8.832 23 2' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
59
|
+
background-size: 21px;
|
|
60
|
+
|
|
61
|
+
content: '';
|
|
62
|
+
|
|
63
|
+
@media $mobile {
|
|
64
|
+
width: 25px;
|
|
65
|
+
height: 25px;
|
|
66
|
+
|
|
67
|
+
background-size: 25px;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
50
71
|
.text {
|
|
51
72
|
display: block;
|
|
52
73
|
|
|
@@ -70,13 +91,19 @@
|
|
|
70
91
|
align-items: center;
|
|
71
92
|
justify-content: center;
|
|
72
93
|
|
|
73
|
-
margin-top:
|
|
94
|
+
margin-top: 35px;
|
|
95
|
+
|
|
96
|
+
transition: opacity 350ms ease;
|
|
74
97
|
|
|
75
98
|
@media $mobile {
|
|
76
|
-
margin-top:
|
|
99
|
+
margin-top: 33px;
|
|
77
100
|
}
|
|
78
101
|
}
|
|
79
102
|
|
|
103
|
+
.cta:hover {
|
|
104
|
+
opacity: 0.75;
|
|
105
|
+
}
|
|
106
|
+
|
|
80
107
|
.cta a {
|
|
81
108
|
display: block;
|
|
82
109
|
|
|
@@ -91,8 +118,11 @@
|
|
|
91
118
|
text-transform: uppercase;
|
|
92
119
|
text-decoration: none;
|
|
93
120
|
|
|
94
|
-
background-color: #000;
|
|
95
121
|
border-radius: 30px;
|
|
122
|
+
|
|
123
|
+
@media $mobile {
|
|
124
|
+
font-size: 14px;
|
|
125
|
+
}
|
|
96
126
|
}
|
|
97
127
|
|
|
98
128
|
.cta a::after {
|
|
@@ -121,12 +151,20 @@
|
|
|
121
151
|
left: 50%;
|
|
122
152
|
z-index: -1;
|
|
123
153
|
|
|
124
|
-
width:
|
|
125
|
-
height:
|
|
126
|
-
|
|
154
|
+
width: 602px;
|
|
155
|
+
height: 81px;
|
|
156
|
+
|
|
157
|
+
background-image: url("data:image/svg+xml,%3Csvg width='602' height='81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='M182.424 30h237.153c12.262 1.63 12.262 19.37 0 21H182.424c-12.262-1.63-12.262-19.37 0-21Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg opacity='.2' filter='url(%23c)'%3E%3Cpath d='M456.062 53H145.938c-12.648-1.286-12.648-19.714 0-21h310.124c12.648 1.286 12.648 19.714 0 21Z' fill='url(%23d)'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath d='M176.905 36h248.19L568 41.5 425.095 47h-248.19L34 41.5 176.905 36Z' fill='url(%23f)'/%3E%3C/g%3E%3Cg filter='url(%23g)'%3E%3Crect x='214.245' y='23' width='173.508' height='35' rx='17.5' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='134.578' y1='40.956' x2='475.16' y2='40.67' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='518.63' y1='42.044' x2='73.253' y2='42.534' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='73.191' y1='41.5' x2='536.402' y2='41.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239F39E4'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='226.979' y1='40.5' x2='377.486' y2='40.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='150.228' y='7' width='301.546' height='67' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='c' x='113.452' y='9' width='375.096' height='67' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='e' x='0' y='2' width='602' height='79' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3Cfilter id='g' x='191.245' y='0' width='219.508' height='81' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_0_3'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
|
|
127
158
|
transform: translate(-50%, -50%);
|
|
128
159
|
|
|
129
160
|
content: '';
|
|
161
|
+
|
|
162
|
+
@media $mobile {
|
|
163
|
+
width: 650px;
|
|
164
|
+
height: 83px;
|
|
165
|
+
|
|
166
|
+
background-image: url("data:image/svg+xml,%3Csvg width='650' height='83' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath d='M174.448 30h301.105c13.675 1.569 13.675 21.431 0 23H174.448c-13.675-1.569-13.675-21.431 0-23Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg opacity='.2' filter='url(%23c)'%3E%3Cpath d='M521.876 53H128.124c-14.047-1.232-14.047-21.768 0-23h393.752c14.047 1.232 14.047 21.768 0 23Z' fill='url(%23d)'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath d='M167.441 36h315.118L664 42.5 482.559 49H167.441L-14 42.5 167.441 36Z' fill='url(%23f)'/%3E%3C/g%3E%3Cg filter='url(%23g)'%3E%3Crect x='215.675' y='23' width='218.65' height='37' rx='18.5' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='113.699' y1='42' x2='546.124' y2='41.578' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='601.316' y1='41' x2='35.839' y2='41.722' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.247' stop-color='%238372FF' stop-opacity='.01'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='.747' stop-color='%2339C0B5' stop-opacity='.19'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='35.76' y1='42.5' x2='623.881' y2='42.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239F39E4'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='231.722' y1='41.5' x2='421.387' y2='41.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B851FF'/%3E%3Cstop offset='.501' stop-color='%234C94FF'/%3E%3Cstop offset='1' stop-color='%2326EA6D'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='141.192' y='7' width='367.617' height='69' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='c' x='94.588' y='7' width='460.823' height='69' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='e' x='-48' y='2' width='746' height='81' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3Cfilter id='g' x='192.675' y='0' width='264.65' height='83' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='11.5' result='effect1_foregroundBlur_695_864'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
|
|
167
|
+
}
|
|
130
168
|
}
|
|
131
169
|
|
|
132
170
|
.center {
|
|
@@ -17,15 +17,16 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
|
|
|
17
17
|
|
|
18
18
|
const data = {
|
|
19
19
|
ru: {
|
|
20
|
-
title: '
|
|
21
|
-
subtitle: 'Нам нужна ваша поддержка',
|
|
22
|
-
button: '
|
|
20
|
+
title: 'Успеть сделать важное дело:<br/>Поддержать «Медузу» — ',
|
|
21
|
+
// subtitle: 'Нам нужна ваша поддержка',
|
|
22
|
+
button: 'Бегу!',
|
|
23
23
|
href: 'https://support.meduza.io'
|
|
24
24
|
},
|
|
25
25
|
en: {
|
|
26
|
-
title:
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
title:
|
|
27
|
+
'There’s still time for a good deed in 2021!<br/>Support Meduza — ',
|
|
28
|
+
// subtitle: 'And we need your support',
|
|
29
|
+
button: 'Donate',
|
|
29
30
|
href: 'https://support.meduza.io/en'
|
|
30
31
|
}
|
|
31
32
|
}
|
|
@@ -35,11 +36,11 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
|
|
|
35
36
|
<div className={styles.main}>
|
|
36
37
|
<h3 className={styles.title}>
|
|
37
38
|
<span dangerouslySetInnerHTML={{ __html: data[lang].title }} />
|
|
38
|
-
{` `}
|
|
39
|
+
{/* {` `}
|
|
39
40
|
<span
|
|
40
41
|
className={styles.text}
|
|
41
42
|
dangerouslySetInnerHTML={{ __html: data[lang].subtitle }}
|
|
42
|
-
/>
|
|
43
|
+
/> */}
|
|
43
44
|
</h3>
|
|
44
45
|
</div>
|
|
45
46
|
|