@alfalab/core-components-bank-card 5.2.10 → 5.2.12
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/Component.js +1 -1
- package/cssm/index.module.css +26 -46
- package/esm/Component.js +1 -1
- package/esm/index.css +29 -49
- package/index.css +29 -49
- package/modern/Component.js +1 -1
- package/modern/index.css +29 -49
- package/package.json +2 -2
package/Component.js
CHANGED
|
@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
16
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
17
17
|
|
|
18
|
-
var styles = {"component":"bank-
|
|
18
|
+
var styles = {"component":"bank-card__component_ah70w","aspectRatioContainer":"bank-card__aspectRatioContainer_ah70w","content":"bank-card__content_ah70w","label":"bank-card__label_ah70w","focused":"bank-card__focused_ah70w","filled":"bank-card__filled_ah70w","input":"bank-card__input_ah70w","bankLogo":"bank-card__bankLogo_ah70w","brandLogo":"bank-card__brandLogo_ah70w","usePhoto":"bank-card__usePhoto_ah70w"};
|
|
19
19
|
require('./index.css')
|
|
20
20
|
|
|
21
21
|
// prettier-ignore
|
package/cssm/index.module.css
CHANGED
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--color-black: #000;
|
|
3
3
|
--color-black-60: rgba(0, 0, 0, 0.6);
|
|
4
|
-
}
|
|
5
|
-
:root {
|
|
4
|
+
} /* deprecated */ :root {
|
|
5
|
+
} :root {
|
|
6
|
+
} :root {
|
|
7
|
+
} :root {
|
|
6
8
|
|
|
7
9
|
/* Hard */
|
|
8
10
|
|
|
9
11
|
/* Up */
|
|
10
12
|
|
|
11
13
|
/* Hard up */
|
|
12
|
-
}
|
|
13
|
-
:
|
|
14
|
+
} :root {
|
|
15
|
+
--border-radius-l: 12px;
|
|
16
|
+
} :root {
|
|
14
17
|
--gap-2xs: 4px;
|
|
15
18
|
--gap-s: 12px;
|
|
16
19
|
--gap-l: 20px;
|
|
17
|
-
}
|
|
18
|
-
:root {
|
|
20
|
+
} :root {
|
|
19
21
|
--font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
|
|
20
22
|
'Helvetica Neue', Helvetica, sans-serif;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
--border-radius-l: 12px;
|
|
24
|
-
}
|
|
25
|
-
.component {
|
|
23
|
+
} :root {
|
|
24
|
+
} .component {
|
|
26
25
|
/* TODO: как это будет собираться и работать в webView */
|
|
27
26
|
--form-control-border-radius: 0;
|
|
28
27
|
--form-control-border-bottom: 1px solid var(--color-black-60);
|
|
@@ -41,12 +40,10 @@
|
|
|
41
40
|
max-width: 343px;
|
|
42
41
|
|
|
43
42
|
font-family: var(--font-family-styrene);
|
|
44
|
-
}
|
|
45
|
-
.aspectRatioContainer {
|
|
43
|
+
} .aspectRatioContainer {
|
|
46
44
|
/* Эталонный размер 343x216 */
|
|
47
45
|
padding-bottom: 63%;
|
|
48
|
-
}
|
|
49
|
-
.content {
|
|
46
|
+
} .content {
|
|
50
47
|
position: absolute;
|
|
51
48
|
top: 0;
|
|
52
49
|
right: 0;
|
|
@@ -58,34 +55,26 @@
|
|
|
58
55
|
padding-right: var(--gap-l);
|
|
59
56
|
border-radius: var(--border-radius-l);
|
|
60
57
|
box-sizing: border-box;
|
|
61
|
-
}
|
|
62
|
-
.label {
|
|
58
|
+
} .label {
|
|
63
59
|
left: 0;
|
|
64
60
|
transform: translateY(-1px);
|
|
65
61
|
color: var(--color-black-60);
|
|
66
62
|
font-size: 20px;
|
|
67
63
|
line-height: 24px
|
|
68
|
-
}
|
|
69
|
-
@media (max-width: 360px) {
|
|
70
|
-
.label {
|
|
64
|
+
} @media (max-width: 360px) { .label {
|
|
71
65
|
font-size: 16px
|
|
72
66
|
}
|
|
73
|
-
}
|
|
74
|
-
.focused .label,
|
|
67
|
+
} .focused .label,
|
|
75
68
|
.filled .label {
|
|
76
69
|
color: var(--color-black);
|
|
77
70
|
transform: translateY(-19px) scale(0.6)
|
|
78
|
-
}
|
|
79
|
-
@media (max-width: 360px) {
|
|
80
|
-
.focused .label,
|
|
71
|
+
} @media (max-width: 360px) { .focused .label,
|
|
81
72
|
.filled .label {
|
|
82
73
|
transform: translateY(-22px) scale(0.75)
|
|
83
74
|
}
|
|
84
|
-
}
|
|
85
|
-
.focused:before {
|
|
75
|
+
} .focused:before {
|
|
86
76
|
transform: scale(1) !important;
|
|
87
|
-
}
|
|
88
|
-
.input {
|
|
77
|
+
} .input {
|
|
89
78
|
font-size: 20px;
|
|
90
79
|
line-height: 24px;
|
|
91
80
|
font-weight: 400;
|
|
@@ -98,35 +87,27 @@
|
|
|
98
87
|
/* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
|
|
99
88
|
padding-left: 0 !important;
|
|
100
89
|
padding-bottom: var(--gap-2xs) !important
|
|
101
|
-
}
|
|
102
|
-
@media (max-width: 360px) {
|
|
103
|
-
.input {
|
|
90
|
+
} @media (max-width: 360px) { .input {
|
|
104
91
|
font-size: 16px
|
|
105
92
|
}
|
|
106
|
-
}
|
|
107
|
-
.bankLogo {
|
|
93
|
+
} .bankLogo {
|
|
108
94
|
position: absolute;
|
|
109
95
|
top: 20px;
|
|
110
96
|
left: 20px
|
|
111
|
-
}
|
|
112
|
-
.bankLogo svg {
|
|
97
|
+
} .bankLogo svg {
|
|
113
98
|
max-height: 32px;
|
|
114
99
|
width: auto;
|
|
115
100
|
display: block
|
|
116
|
-
}
|
|
117
|
-
.bankLogo svg g {
|
|
101
|
+
} .bankLogo svg g {
|
|
118
102
|
fill: var(--color-black);
|
|
119
|
-
}
|
|
120
|
-
.brandLogo {
|
|
103
|
+
} .brandLogo {
|
|
121
104
|
position: absolute;
|
|
122
105
|
bottom: 20px;
|
|
123
106
|
right: 20px
|
|
124
|
-
}
|
|
125
|
-
.brandLogo svg {
|
|
107
|
+
} .brandLogo svg {
|
|
126
108
|
display: block;
|
|
127
109
|
fill: var(--color-black);
|
|
128
|
-
}
|
|
129
|
-
.usePhoto {
|
|
110
|
+
} .usePhoto {
|
|
130
111
|
display: block;
|
|
131
112
|
margin: 0;
|
|
132
113
|
padding: 0;
|
|
@@ -143,8 +124,7 @@
|
|
|
143
124
|
|
|
144
125
|
/* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
|
|
145
126
|
margin-right: calc(var(--gap-s) * -1)
|
|
146
|
-
}
|
|
147
|
-
.usePhoto svg {
|
|
127
|
+
} .usePhoto svg {
|
|
148
128
|
fill: var(--color-black);
|
|
149
129
|
display: block;
|
|
150
130
|
}
|
package/esm/Component.js
CHANGED
|
@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
|
|
|
8
8
|
import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
|
|
9
9
|
import { validateCardNumber } from './utils.js';
|
|
10
10
|
|
|
11
|
-
var styles = {"component":"bank-
|
|
11
|
+
var styles = {"component":"bank-card__component_ah70w","aspectRatioContainer":"bank-card__aspectRatioContainer_ah70w","content":"bank-card__content_ah70w","label":"bank-card__label_ah70w","focused":"bank-card__focused_ah70w","filled":"bank-card__filled_ah70w","input":"bank-card__input_ah70w","bankLogo":"bank-card__bankLogo_ah70w","brandLogo":"bank-card__brandLogo_ah70w","usePhoto":"bank-card__usePhoto_ah70w"};
|
|
12
12
|
require('./index.css')
|
|
13
13
|
|
|
14
14
|
// prettier-ignore
|
package/esm/index.css
CHANGED
|
@@ -1,29 +1,28 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1ibih */
|
|
2
2
|
:root {
|
|
3
3
|
--color-black: #000;
|
|
4
4
|
--color-black-60: rgba(0, 0, 0, 0.6);
|
|
5
|
-
}
|
|
6
|
-
:root {
|
|
5
|
+
} /* deprecated */ :root {
|
|
6
|
+
} :root {
|
|
7
|
+
} :root {
|
|
8
|
+
} :root {
|
|
7
9
|
|
|
8
10
|
/* Hard */
|
|
9
11
|
|
|
10
12
|
/* Up */
|
|
11
13
|
|
|
12
14
|
/* Hard up */
|
|
13
|
-
}
|
|
14
|
-
:
|
|
15
|
+
} :root {
|
|
16
|
+
--border-radius-l: 12px;
|
|
17
|
+
} :root {
|
|
15
18
|
--gap-2xs: 4px;
|
|
16
19
|
--gap-s: 12px;
|
|
17
20
|
--gap-l: 20px;
|
|
18
|
-
}
|
|
19
|
-
:root {
|
|
21
|
+
} :root {
|
|
20
22
|
--font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
|
|
21
23
|
'Helvetica Neue', Helvetica, sans-serif;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
--border-radius-l: 12px;
|
|
25
|
-
}
|
|
26
|
-
.bank-card__component_1adyd {
|
|
24
|
+
} :root {
|
|
25
|
+
} .bank-card__component_ah70w {
|
|
27
26
|
/* TODO: как это будет собираться и работать в webView */
|
|
28
27
|
--form-control-border-radius: 0;
|
|
29
28
|
--form-control-border-bottom: 1px solid var(--color-black-60);
|
|
@@ -42,12 +41,10 @@
|
|
|
42
41
|
max-width: 343px;
|
|
43
42
|
|
|
44
43
|
font-family: var(--font-family-styrene);
|
|
45
|
-
}
|
|
46
|
-
.bank-card__aspectRatioContainer_1adyd {
|
|
44
|
+
} .bank-card__aspectRatioContainer_ah70w {
|
|
47
45
|
/* Эталонный размер 343x216 */
|
|
48
46
|
padding-bottom: 63%;
|
|
49
|
-
}
|
|
50
|
-
.bank-card__content_1adyd {
|
|
47
|
+
} .bank-card__content_ah70w {
|
|
51
48
|
position: absolute;
|
|
52
49
|
top: 0;
|
|
53
50
|
right: 0;
|
|
@@ -59,34 +56,26 @@
|
|
|
59
56
|
padding-right: var(--gap-l);
|
|
60
57
|
border-radius: var(--border-radius-l);
|
|
61
58
|
box-sizing: border-box;
|
|
62
|
-
}
|
|
63
|
-
.bank-card__label_1adyd {
|
|
59
|
+
} .bank-card__label_ah70w {
|
|
64
60
|
left: 0;
|
|
65
61
|
transform: translateY(-1px);
|
|
66
62
|
color: var(--color-black-60);
|
|
67
63
|
font-size: 20px;
|
|
68
64
|
line-height: 24px
|
|
69
|
-
}
|
|
70
|
-
@media (max-width: 360px) {
|
|
71
|
-
.bank-card__label_1adyd {
|
|
65
|
+
} @media (max-width: 360px) { .bank-card__label_ah70w {
|
|
72
66
|
font-size: 16px
|
|
73
67
|
}
|
|
74
|
-
}
|
|
75
|
-
.bank-
|
|
76
|
-
.bank-card__filled_1adyd .bank-card__label_1adyd {
|
|
68
|
+
} .bank-card__focused_ah70w .bank-card__label_ah70w,
|
|
69
|
+
.bank-card__filled_ah70w .bank-card__label_ah70w {
|
|
77
70
|
color: var(--color-black);
|
|
78
71
|
transform: translateY(-19px) scale(0.6)
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.bank-card__focused_1adyd .bank-card__label_1adyd,
|
|
82
|
-
.bank-card__filled_1adyd .bank-card__label_1adyd {
|
|
72
|
+
} @media (max-width: 360px) { .bank-card__focused_ah70w .bank-card__label_ah70w,
|
|
73
|
+
.bank-card__filled_ah70w .bank-card__label_ah70w {
|
|
83
74
|
transform: translateY(-22px) scale(0.75)
|
|
84
75
|
}
|
|
85
|
-
}
|
|
86
|
-
.bank-card__focused_1adyd:before {
|
|
76
|
+
} .bank-card__focused_ah70w:before {
|
|
87
77
|
transform: scale(1) !important;
|
|
88
|
-
}
|
|
89
|
-
.bank-card__input_1adyd {
|
|
78
|
+
} .bank-card__input_ah70w {
|
|
90
79
|
font-size: 20px;
|
|
91
80
|
line-height: 24px;
|
|
92
81
|
font-weight: 400;
|
|
@@ -99,35 +88,27 @@
|
|
|
99
88
|
/* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
|
|
100
89
|
padding-left: 0 !important;
|
|
101
90
|
padding-bottom: var(--gap-2xs) !important
|
|
102
|
-
}
|
|
103
|
-
@media (max-width: 360px) {
|
|
104
|
-
.bank-card__input_1adyd {
|
|
91
|
+
} @media (max-width: 360px) { .bank-card__input_ah70w {
|
|
105
92
|
font-size: 16px
|
|
106
93
|
}
|
|
107
|
-
}
|
|
108
|
-
.bank-card__bankLogo_1adyd {
|
|
94
|
+
} .bank-card__bankLogo_ah70w {
|
|
109
95
|
position: absolute;
|
|
110
96
|
top: 20px;
|
|
111
97
|
left: 20px
|
|
112
|
-
}
|
|
113
|
-
.bank-card__bankLogo_1adyd svg {
|
|
98
|
+
} .bank-card__bankLogo_ah70w svg {
|
|
114
99
|
max-height: 32px;
|
|
115
100
|
width: auto;
|
|
116
101
|
display: block
|
|
117
|
-
}
|
|
118
|
-
.bank-card__bankLogo_1adyd svg g {
|
|
102
|
+
} .bank-card__bankLogo_ah70w svg g {
|
|
119
103
|
fill: var(--color-black);
|
|
120
|
-
}
|
|
121
|
-
.bank-card__brandLogo_1adyd {
|
|
104
|
+
} .bank-card__brandLogo_ah70w {
|
|
122
105
|
position: absolute;
|
|
123
106
|
bottom: 20px;
|
|
124
107
|
right: 20px
|
|
125
|
-
}
|
|
126
|
-
.bank-card__brandLogo_1adyd svg {
|
|
108
|
+
} .bank-card__brandLogo_ah70w svg {
|
|
127
109
|
display: block;
|
|
128
110
|
fill: var(--color-black);
|
|
129
|
-
}
|
|
130
|
-
.bank-card__usePhoto_1adyd {
|
|
111
|
+
} .bank-card__usePhoto_ah70w {
|
|
131
112
|
display: block;
|
|
132
113
|
margin: 0;
|
|
133
114
|
padding: 0;
|
|
@@ -144,8 +125,7 @@
|
|
|
144
125
|
|
|
145
126
|
/* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
|
|
146
127
|
margin-right: calc(var(--gap-s) * -1)
|
|
147
|
-
}
|
|
148
|
-
.bank-card__usePhoto_1adyd svg {
|
|
128
|
+
} .bank-card__usePhoto_ah70w svg {
|
|
149
129
|
fill: var(--color-black);
|
|
150
130
|
display: block;
|
|
151
131
|
}
|
package/index.css
CHANGED
|
@@ -1,29 +1,28 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1ibih */
|
|
2
2
|
:root {
|
|
3
3
|
--color-black: #000;
|
|
4
4
|
--color-black-60: rgba(0, 0, 0, 0.6);
|
|
5
|
-
}
|
|
6
|
-
:root {
|
|
5
|
+
} /* deprecated */ :root {
|
|
6
|
+
} :root {
|
|
7
|
+
} :root {
|
|
8
|
+
} :root {
|
|
7
9
|
|
|
8
10
|
/* Hard */
|
|
9
11
|
|
|
10
12
|
/* Up */
|
|
11
13
|
|
|
12
14
|
/* Hard up */
|
|
13
|
-
}
|
|
14
|
-
:
|
|
15
|
+
} :root {
|
|
16
|
+
--border-radius-l: 12px;
|
|
17
|
+
} :root {
|
|
15
18
|
--gap-2xs: 4px;
|
|
16
19
|
--gap-s: 12px;
|
|
17
20
|
--gap-l: 20px;
|
|
18
|
-
}
|
|
19
|
-
:root {
|
|
21
|
+
} :root {
|
|
20
22
|
--font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
|
|
21
23
|
'Helvetica Neue', Helvetica, sans-serif;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
--border-radius-l: 12px;
|
|
25
|
-
}
|
|
26
|
-
.bank-card__component_1adyd {
|
|
24
|
+
} :root {
|
|
25
|
+
} .bank-card__component_ah70w {
|
|
27
26
|
/* TODO: как это будет собираться и работать в webView */
|
|
28
27
|
--form-control-border-radius: 0;
|
|
29
28
|
--form-control-border-bottom: 1px solid var(--color-black-60);
|
|
@@ -42,12 +41,10 @@
|
|
|
42
41
|
max-width: 343px;
|
|
43
42
|
|
|
44
43
|
font-family: var(--font-family-styrene);
|
|
45
|
-
}
|
|
46
|
-
.bank-card__aspectRatioContainer_1adyd {
|
|
44
|
+
} .bank-card__aspectRatioContainer_ah70w {
|
|
47
45
|
/* Эталонный размер 343x216 */
|
|
48
46
|
padding-bottom: 63%;
|
|
49
|
-
}
|
|
50
|
-
.bank-card__content_1adyd {
|
|
47
|
+
} .bank-card__content_ah70w {
|
|
51
48
|
position: absolute;
|
|
52
49
|
top: 0;
|
|
53
50
|
right: 0;
|
|
@@ -59,34 +56,26 @@
|
|
|
59
56
|
padding-right: var(--gap-l);
|
|
60
57
|
border-radius: var(--border-radius-l);
|
|
61
58
|
box-sizing: border-box;
|
|
62
|
-
}
|
|
63
|
-
.bank-card__label_1adyd {
|
|
59
|
+
} .bank-card__label_ah70w {
|
|
64
60
|
left: 0;
|
|
65
61
|
transform: translateY(-1px);
|
|
66
62
|
color: var(--color-black-60);
|
|
67
63
|
font-size: 20px;
|
|
68
64
|
line-height: 24px
|
|
69
|
-
}
|
|
70
|
-
@media (max-width: 360px) {
|
|
71
|
-
.bank-card__label_1adyd {
|
|
65
|
+
} @media (max-width: 360px) { .bank-card__label_ah70w {
|
|
72
66
|
font-size: 16px
|
|
73
67
|
}
|
|
74
|
-
}
|
|
75
|
-
.bank-
|
|
76
|
-
.bank-card__filled_1adyd .bank-card__label_1adyd {
|
|
68
|
+
} .bank-card__focused_ah70w .bank-card__label_ah70w,
|
|
69
|
+
.bank-card__filled_ah70w .bank-card__label_ah70w {
|
|
77
70
|
color: var(--color-black);
|
|
78
71
|
transform: translateY(-19px) scale(0.6)
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.bank-card__focused_1adyd .bank-card__label_1adyd,
|
|
82
|
-
.bank-card__filled_1adyd .bank-card__label_1adyd {
|
|
72
|
+
} @media (max-width: 360px) { .bank-card__focused_ah70w .bank-card__label_ah70w,
|
|
73
|
+
.bank-card__filled_ah70w .bank-card__label_ah70w {
|
|
83
74
|
transform: translateY(-22px) scale(0.75)
|
|
84
75
|
}
|
|
85
|
-
}
|
|
86
|
-
.bank-card__focused_1adyd:before {
|
|
76
|
+
} .bank-card__focused_ah70w:before {
|
|
87
77
|
transform: scale(1) !important;
|
|
88
|
-
}
|
|
89
|
-
.bank-card__input_1adyd {
|
|
78
|
+
} .bank-card__input_ah70w {
|
|
90
79
|
font-size: 20px;
|
|
91
80
|
line-height: 24px;
|
|
92
81
|
font-weight: 400;
|
|
@@ -99,35 +88,27 @@
|
|
|
99
88
|
/* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
|
|
100
89
|
padding-left: 0 !important;
|
|
101
90
|
padding-bottom: var(--gap-2xs) !important
|
|
102
|
-
}
|
|
103
|
-
@media (max-width: 360px) {
|
|
104
|
-
.bank-card__input_1adyd {
|
|
91
|
+
} @media (max-width: 360px) { .bank-card__input_ah70w {
|
|
105
92
|
font-size: 16px
|
|
106
93
|
}
|
|
107
|
-
}
|
|
108
|
-
.bank-card__bankLogo_1adyd {
|
|
94
|
+
} .bank-card__bankLogo_ah70w {
|
|
109
95
|
position: absolute;
|
|
110
96
|
top: 20px;
|
|
111
97
|
left: 20px
|
|
112
|
-
}
|
|
113
|
-
.bank-card__bankLogo_1adyd svg {
|
|
98
|
+
} .bank-card__bankLogo_ah70w svg {
|
|
114
99
|
max-height: 32px;
|
|
115
100
|
width: auto;
|
|
116
101
|
display: block
|
|
117
|
-
}
|
|
118
|
-
.bank-card__bankLogo_1adyd svg g {
|
|
102
|
+
} .bank-card__bankLogo_ah70w svg g {
|
|
119
103
|
fill: var(--color-black);
|
|
120
|
-
}
|
|
121
|
-
.bank-card__brandLogo_1adyd {
|
|
104
|
+
} .bank-card__brandLogo_ah70w {
|
|
122
105
|
position: absolute;
|
|
123
106
|
bottom: 20px;
|
|
124
107
|
right: 20px
|
|
125
|
-
}
|
|
126
|
-
.bank-card__brandLogo_1adyd svg {
|
|
108
|
+
} .bank-card__brandLogo_ah70w svg {
|
|
127
109
|
display: block;
|
|
128
110
|
fill: var(--color-black);
|
|
129
|
-
}
|
|
130
|
-
.bank-card__usePhoto_1adyd {
|
|
111
|
+
} .bank-card__usePhoto_ah70w {
|
|
131
112
|
display: block;
|
|
132
113
|
margin: 0;
|
|
133
114
|
padding: 0;
|
|
@@ -144,8 +125,7 @@
|
|
|
144
125
|
|
|
145
126
|
/* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
|
|
146
127
|
margin-right: calc(var(--gap-s) * -1)
|
|
147
|
-
}
|
|
148
|
-
.bank-card__usePhoto_1adyd svg {
|
|
128
|
+
} .bank-card__usePhoto_ah70w svg {
|
|
149
129
|
fill: var(--color-black);
|
|
150
130
|
display: block;
|
|
151
131
|
}
|
package/modern/Component.js
CHANGED
|
@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
|
|
|
8
8
|
import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
|
|
9
9
|
import { validateCardNumber } from './utils.js';
|
|
10
10
|
|
|
11
|
-
const styles = {"component":"bank-
|
|
11
|
+
const styles = {"component":"bank-card__component_ah70w","aspectRatioContainer":"bank-card__aspectRatioContainer_ah70w","content":"bank-card__content_ah70w","label":"bank-card__label_ah70w","focused":"bank-card__focused_ah70w","filled":"bank-card__filled_ah70w","input":"bank-card__input_ah70w","bankLogo":"bank-card__bankLogo_ah70w","brandLogo":"bank-card__brandLogo_ah70w","usePhoto":"bank-card__usePhoto_ah70w"};
|
|
12
12
|
require('./index.css')
|
|
13
13
|
|
|
14
14
|
// prettier-ignore
|
package/modern/index.css
CHANGED
|
@@ -1,29 +1,28 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1ibih */
|
|
2
2
|
:root {
|
|
3
3
|
--color-black: #000;
|
|
4
4
|
--color-black-60: rgba(0, 0, 0, 0.6);
|
|
5
|
-
}
|
|
6
|
-
:root {
|
|
5
|
+
} /* deprecated */ :root {
|
|
6
|
+
} :root {
|
|
7
|
+
} :root {
|
|
8
|
+
} :root {
|
|
7
9
|
|
|
8
10
|
/* Hard */
|
|
9
11
|
|
|
10
12
|
/* Up */
|
|
11
13
|
|
|
12
14
|
/* Hard up */
|
|
13
|
-
}
|
|
14
|
-
:
|
|
15
|
+
} :root {
|
|
16
|
+
--border-radius-l: 12px;
|
|
17
|
+
} :root {
|
|
15
18
|
--gap-2xs: 4px;
|
|
16
19
|
--gap-s: 12px;
|
|
17
20
|
--gap-l: 20px;
|
|
18
|
-
}
|
|
19
|
-
:root {
|
|
21
|
+
} :root {
|
|
20
22
|
--font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
|
|
21
23
|
'Helvetica Neue', Helvetica, sans-serif;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
--border-radius-l: 12px;
|
|
25
|
-
}
|
|
26
|
-
.bank-card__component_1adyd {
|
|
24
|
+
} :root {
|
|
25
|
+
} .bank-card__component_ah70w {
|
|
27
26
|
/* TODO: как это будет собираться и работать в webView */
|
|
28
27
|
--form-control-border-radius: 0;
|
|
29
28
|
--form-control-border-bottom: 1px solid var(--color-black-60);
|
|
@@ -42,12 +41,10 @@
|
|
|
42
41
|
max-width: 343px;
|
|
43
42
|
|
|
44
43
|
font-family: var(--font-family-styrene);
|
|
45
|
-
}
|
|
46
|
-
.bank-card__aspectRatioContainer_1adyd {
|
|
44
|
+
} .bank-card__aspectRatioContainer_ah70w {
|
|
47
45
|
/* Эталонный размер 343x216 */
|
|
48
46
|
padding-bottom: 63%;
|
|
49
|
-
}
|
|
50
|
-
.bank-card__content_1adyd {
|
|
47
|
+
} .bank-card__content_ah70w {
|
|
51
48
|
position: absolute;
|
|
52
49
|
top: 0;
|
|
53
50
|
right: 0;
|
|
@@ -59,34 +56,26 @@
|
|
|
59
56
|
padding-right: var(--gap-l);
|
|
60
57
|
border-radius: var(--border-radius-l);
|
|
61
58
|
box-sizing: border-box;
|
|
62
|
-
}
|
|
63
|
-
.bank-card__label_1adyd {
|
|
59
|
+
} .bank-card__label_ah70w {
|
|
64
60
|
left: 0;
|
|
65
61
|
transform: translateY(-1px);
|
|
66
62
|
color: var(--color-black-60);
|
|
67
63
|
font-size: 20px;
|
|
68
64
|
line-height: 24px
|
|
69
|
-
}
|
|
70
|
-
@media (max-width: 360px) {
|
|
71
|
-
.bank-card__label_1adyd {
|
|
65
|
+
} @media (max-width: 360px) { .bank-card__label_ah70w {
|
|
72
66
|
font-size: 16px
|
|
73
67
|
}
|
|
74
|
-
}
|
|
75
|
-
.bank-
|
|
76
|
-
.bank-card__filled_1adyd .bank-card__label_1adyd {
|
|
68
|
+
} .bank-card__focused_ah70w .bank-card__label_ah70w,
|
|
69
|
+
.bank-card__filled_ah70w .bank-card__label_ah70w {
|
|
77
70
|
color: var(--color-black);
|
|
78
71
|
transform: translateY(-19px) scale(0.6)
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.bank-card__focused_1adyd .bank-card__label_1adyd,
|
|
82
|
-
.bank-card__filled_1adyd .bank-card__label_1adyd {
|
|
72
|
+
} @media (max-width: 360px) { .bank-card__focused_ah70w .bank-card__label_ah70w,
|
|
73
|
+
.bank-card__filled_ah70w .bank-card__label_ah70w {
|
|
83
74
|
transform: translateY(-22px) scale(0.75)
|
|
84
75
|
}
|
|
85
|
-
}
|
|
86
|
-
.bank-card__focused_1adyd:before {
|
|
76
|
+
} .bank-card__focused_ah70w:before {
|
|
87
77
|
transform: scale(1) !important;
|
|
88
|
-
}
|
|
89
|
-
.bank-card__input_1adyd {
|
|
78
|
+
} .bank-card__input_ah70w {
|
|
90
79
|
font-size: 20px;
|
|
91
80
|
line-height: 24px;
|
|
92
81
|
font-weight: 400;
|
|
@@ -99,35 +88,27 @@
|
|
|
99
88
|
/* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
|
|
100
89
|
padding-left: 0 !important;
|
|
101
90
|
padding-bottom: var(--gap-2xs) !important
|
|
102
|
-
}
|
|
103
|
-
@media (max-width: 360px) {
|
|
104
|
-
.bank-card__input_1adyd {
|
|
91
|
+
} @media (max-width: 360px) { .bank-card__input_ah70w {
|
|
105
92
|
font-size: 16px
|
|
106
93
|
}
|
|
107
|
-
}
|
|
108
|
-
.bank-card__bankLogo_1adyd {
|
|
94
|
+
} .bank-card__bankLogo_ah70w {
|
|
109
95
|
position: absolute;
|
|
110
96
|
top: 20px;
|
|
111
97
|
left: 20px
|
|
112
|
-
}
|
|
113
|
-
.bank-card__bankLogo_1adyd svg {
|
|
98
|
+
} .bank-card__bankLogo_ah70w svg {
|
|
114
99
|
max-height: 32px;
|
|
115
100
|
width: auto;
|
|
116
101
|
display: block
|
|
117
|
-
}
|
|
118
|
-
.bank-card__bankLogo_1adyd svg g {
|
|
102
|
+
} .bank-card__bankLogo_ah70w svg g {
|
|
119
103
|
fill: var(--color-black);
|
|
120
|
-
}
|
|
121
|
-
.bank-card__brandLogo_1adyd {
|
|
104
|
+
} .bank-card__brandLogo_ah70w {
|
|
122
105
|
position: absolute;
|
|
123
106
|
bottom: 20px;
|
|
124
107
|
right: 20px
|
|
125
|
-
}
|
|
126
|
-
.bank-card__brandLogo_1adyd svg {
|
|
108
|
+
} .bank-card__brandLogo_ah70w svg {
|
|
127
109
|
display: block;
|
|
128
110
|
fill: var(--color-black);
|
|
129
|
-
}
|
|
130
|
-
.bank-card__usePhoto_1adyd {
|
|
111
|
+
} .bank-card__usePhoto_ah70w {
|
|
131
112
|
display: block;
|
|
132
113
|
margin: 0;
|
|
133
114
|
padding: 0;
|
|
@@ -144,8 +125,7 @@
|
|
|
144
125
|
|
|
145
126
|
/* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
|
|
146
127
|
margin-right: calc(var(--gap-s) * -1)
|
|
147
|
-
}
|
|
148
|
-
.bank-card__usePhoto_1adyd svg {
|
|
128
|
+
} .bank-card__usePhoto_ah70w svg {
|
|
149
129
|
fill: var(--color-black);
|
|
150
130
|
display: block;
|
|
151
131
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-bank-card",
|
|
3
|
-
"version": "5.2.
|
|
3
|
+
"version": "5.2.12",
|
|
4
4
|
"description": "Bank card component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@alfalab/core-components-masked-input": "^6.1.
|
|
21
|
+
"@alfalab/core-components-masked-input": "^6.1.5",
|
|
22
22
|
"@alfalab/icons-glyph": "^2.89.0",
|
|
23
23
|
"@alfalab/icons-logotype": "^2.19.0",
|
|
24
24
|
"classnames": "^2.3.1"
|