@alfalab/core-components-bank-card 5.8.0 → 5.8.1

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 (10) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +15 -13
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +35 -33
  5. package/index.css +35 -33
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +35 -33
  8. package/moderncssm/index.module.css +13 -13
  9. package/package.json +4 -4
  10. package/src/index.module.css +13 -13
package/Component.js CHANGED
@@ -19,7 +19,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
 
22
- var styles = {"component":"bank-card__component_ra9zm","aspectRatioContainer":"bank-card__aspectRatioContainer_ra9zm","content":"bank-card__content_ra9zm","label":"bank-card__label_ra9zm","focused":"bank-card__focused_ra9zm","filled":"bank-card__filled_ra9zm","input":"bank-card__input_ra9zm","bankLogo":"bank-card__bankLogo_ra9zm","brandLogo":"bank-card__brandLogo_ra9zm","usePhoto":"bank-card__usePhoto_ra9zm"};
22
+ var styles = {"component":"bank-card__component_1xy4s","aspectRatioContainer":"bank-card__aspectRatioContainer_1xy4s","content":"bank-card__content_1xy4s","label":"bank-card__label_1xy4s","focused":"bank-card__focused_1xy4s","filled":"bank-card__filled_1xy4s","input":"bank-card__input_1xy4s","bankLogo":"bank-card__bankLogo_1xy4s","brandLogo":"bank-card__brandLogo_1xy4s","usePhoto":"bank-card__usePhoto_1xy4s"};
23
23
  require('./index.css')
24
24
 
25
25
  // prettier-ignore
package/cssm/index.module.css CHANGED
@@ -15,12 +15,14 @@
15
15
  --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
16
 
17
17
  /* новые значения, используйте их */
18
+ --border-radius-12: var(--border-radius-l);
18
19
  } :root { /* deprecated */
19
20
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
20
21
  --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
21
22
  --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
22
23
 
23
24
  /* новые значения, используйте их */
25
+ --gap-0: 0;
24
26
  --gap-4: var(--gap-2xs);
25
27
  --gap-12: var(--gap-s);
26
28
  --gap-20: var(--gap-l);
@@ -52,18 +54,18 @@
52
54
  padding-bottom: 63%;
53
55
  } .content {
54
56
  position: absolute;
55
- top: 0;
56
- right: 0;
57
- bottom: 0;
58
- left: 0;
57
+ top: var(--gap-0);
58
+ right: var(--gap-0);
59
+ bottom: var(--gap-0);
60
+ left: var(--gap-0);
59
61
  display: flex;
60
62
  align-items: center;
61
63
  padding-left: var(--gap-20);
62
64
  padding-right: var(--gap-20);
63
- border-radius: var(--border-radius-l);
65
+ border-radius: var(--border-radius-12);
64
66
  box-sizing: border-box;
65
67
  } .label {
66
- left: 0;
68
+ left: var(--gap-0);
67
69
  transform: translateY(-1px);
68
70
  color: var(--color-light-text-secondary);
69
71
  font-size: 20px;
@@ -92,15 +94,15 @@
92
94
  caret-color: var(--color-light-neutral-translucent-1300);
93
95
 
94
96
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
95
- padding-left: 0 !important;
97
+ padding-left: var(--gap-0) !important;
96
98
  padding-bottom: var(--gap-4) !important
97
99
  } @media (max-width: 360px) { .input {
98
100
  font-size: 16px
99
101
  }
100
102
  } .bankLogo {
101
103
  position: absolute;
102
- top: 20px;
103
- left: 20px
104
+ top: var(--gap-20);
105
+ left: var(--gap-20)
104
106
  } .bankLogo svg {
105
107
  max-height: 32px;
106
108
  width: auto;
@@ -109,15 +111,15 @@
109
111
  fill: var(--color-light-neutral-translucent-1300);
110
112
  } .brandLogo {
111
113
  position: absolute;
112
- bottom: 20px;
113
- right: 20px
114
+ bottom: var(--gap-20);
115
+ right: var(--gap-20)
114
116
  } .brandLogo svg {
115
117
  display: block;
116
118
  fill: var(--color-light-neutral-translucent-1300);
117
119
  } .usePhoto {
118
120
  display: block;
119
- margin: 0;
120
- padding: 0;
121
+ margin: var(--gap-0);
122
+ padding: var(--gap-0);
121
123
  text-decoration: none;
122
124
  background-color: transparent;
123
125
  border: 0;
package/esm/Component.js CHANGED
@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
10
10
  import { MaskTypeEnum } from './enums.js';
11
11
  import { validateCardNumber } from './utils.js';
12
12
 
13
- var styles = {"component":"bank-card__component_ra9zm","aspectRatioContainer":"bank-card__aspectRatioContainer_ra9zm","content":"bank-card__content_ra9zm","label":"bank-card__label_ra9zm","focused":"bank-card__focused_ra9zm","filled":"bank-card__filled_ra9zm","input":"bank-card__input_ra9zm","bankLogo":"bank-card__bankLogo_ra9zm","brandLogo":"bank-card__brandLogo_ra9zm","usePhoto":"bank-card__usePhoto_ra9zm"};
13
+ var styles = {"component":"bank-card__component_1xy4s","aspectRatioContainer":"bank-card__aspectRatioContainer_1xy4s","content":"bank-card__content_1xy4s","label":"bank-card__label_1xy4s","focused":"bank-card__focused_1xy4s","filled":"bank-card__filled_1xy4s","input":"bank-card__input_1xy4s","bankLogo":"bank-card__bankLogo_1xy4s","brandLogo":"bank-card__brandLogo_1xy4s","usePhoto":"bank-card__usePhoto_1xy4s"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1t4vq */
1
+ /* hash: 1uid9 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -16,12 +16,14 @@
16
16
  --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
17
 
18
18
  /* новые значения, используйте их */
19
+ --border-radius-12: var(--border-radius-l);
19
20
  } :root { /* deprecated */
20
21
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
21
22
  --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
22
23
  --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
23
24
 
24
25
  /* новые значения, используйте их */
26
+ --gap-0: 0;
25
27
  --gap-4: var(--gap-2xs);
26
28
  --gap-12: var(--gap-s);
27
29
  --gap-20: var(--gap-l);
@@ -29,7 +31,7 @@
29
31
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
30
32
  'Helvetica Neue', Helvetica, sans-serif;
31
33
  } :root {
32
- } .bank-card__component_ra9zm {
34
+ } .bank-card__component_1xy4s {
33
35
  /* TODO: как это будет собираться и работать в webView */
34
36
  --form-control-border-radius: 0;
35
37
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -48,41 +50,41 @@
48
50
  max-width: 343px;
49
51
 
50
52
  font-family: var(--font-family-styrene);
51
- } .bank-card__aspectRatioContainer_ra9zm {
53
+ } .bank-card__aspectRatioContainer_1xy4s {
52
54
  /* Эталонный размер 343x216 */
53
55
  padding-bottom: 63%;
54
- } .bank-card__content_ra9zm {
56
+ } .bank-card__content_1xy4s {
55
57
  position: absolute;
56
- top: 0;
57
- right: 0;
58
- bottom: 0;
59
- left: 0;
58
+ top: var(--gap-0);
59
+ right: var(--gap-0);
60
+ bottom: var(--gap-0);
61
+ left: var(--gap-0);
60
62
  display: flex;
61
63
  align-items: center;
62
64
  padding-left: var(--gap-20);
63
65
  padding-right: var(--gap-20);
64
- border-radius: var(--border-radius-l);
66
+ border-radius: var(--border-radius-12);
65
67
  box-sizing: border-box;
66
- } .bank-card__label_ra9zm {
67
- left: 0;
68
+ } .bank-card__label_1xy4s {
69
+ left: var(--gap-0);
68
70
  transform: translateY(-1px);
69
71
  color: var(--color-light-text-secondary);
70
72
  font-size: 20px;
71
73
  line-height: 24px
72
- } @media (max-width: 360px) { .bank-card__label_ra9zm {
74
+ } @media (max-width: 360px) { .bank-card__label_1xy4s {
73
75
  font-size: 16px
74
76
  }
75
- } .bank-card__focused_ra9zm .bank-card__label_ra9zm,
76
- .bank-card__filled_ra9zm .bank-card__label_ra9zm {
77
+ } .bank-card__focused_1xy4s .bank-card__label_1xy4s,
78
+ .bank-card__filled_1xy4s .bank-card__label_1xy4s {
77
79
  color: var(--color-light-neutral-translucent-1300);
78
80
  transform: translateY(-19px) scale(0.6)
79
- } @media (max-width: 360px) { .bank-card__focused_ra9zm .bank-card__label_ra9zm,
80
- .bank-card__filled_ra9zm .bank-card__label_ra9zm {
81
+ } @media (max-width: 360px) { .bank-card__focused_1xy4s .bank-card__label_1xy4s,
82
+ .bank-card__filled_1xy4s .bank-card__label_1xy4s {
81
83
  transform: translateY(-22px) scale(0.75)
82
84
  }
83
- } .bank-card__focused_ra9zm:before {
85
+ } .bank-card__focused_1xy4s:before {
84
86
  transform: scale(1) !important;
85
- } .bank-card__input_ra9zm {
87
+ } .bank-card__input_1xy4s {
86
88
  font-size: 20px;
87
89
  line-height: 24px;
88
90
  font-weight: 400;
@@ -93,32 +95,32 @@
93
95
  caret-color: var(--color-light-neutral-translucent-1300);
94
96
 
95
97
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
96
- padding-left: 0 !important;
98
+ padding-left: var(--gap-0) !important;
97
99
  padding-bottom: var(--gap-4) !important
98
- } @media (max-width: 360px) { .bank-card__input_ra9zm {
100
+ } @media (max-width: 360px) { .bank-card__input_1xy4s {
99
101
  font-size: 16px
100
102
  }
101
- } .bank-card__bankLogo_ra9zm {
103
+ } .bank-card__bankLogo_1xy4s {
102
104
  position: absolute;
103
- top: 20px;
104
- left: 20px
105
- } .bank-card__bankLogo_ra9zm svg {
105
+ top: var(--gap-20);
106
+ left: var(--gap-20)
107
+ } .bank-card__bankLogo_1xy4s svg {
106
108
  max-height: 32px;
107
109
  width: auto;
108
110
  display: block
109
- } .bank-card__bankLogo_ra9zm svg g {
111
+ } .bank-card__bankLogo_1xy4s svg g {
110
112
  fill: var(--color-light-neutral-translucent-1300);
111
- } .bank-card__brandLogo_ra9zm {
113
+ } .bank-card__brandLogo_1xy4s {
112
114
  position: absolute;
113
- bottom: 20px;
114
- right: 20px
115
- } .bank-card__brandLogo_ra9zm svg {
115
+ bottom: var(--gap-20);
116
+ right: var(--gap-20)
117
+ } .bank-card__brandLogo_1xy4s svg {
116
118
  display: block;
117
119
  fill: var(--color-light-neutral-translucent-1300);
118
- } .bank-card__usePhoto_ra9zm {
120
+ } .bank-card__usePhoto_1xy4s {
119
121
  display: block;
120
- margin: 0;
121
- padding: 0;
122
+ margin: var(--gap-0);
123
+ padding: var(--gap-0);
122
124
  text-decoration: none;
123
125
  background-color: transparent;
124
126
  border: 0;
@@ -132,7 +134,7 @@
132
134
 
133
135
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
134
136
  margin-right: calc(var(--gap-12) * -1)
135
- } .bank-card__usePhoto_ra9zm svg {
137
+ } .bank-card__usePhoto_1xy4s svg {
136
138
  fill: var(--color-light-neutral-translucent-1300);
137
139
  display: block;
138
140
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1t4vq */
1
+ /* hash: 1uid9 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -16,12 +16,14 @@
16
16
  --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
17
 
18
18
  /* новые значения, используйте их */
19
+ --border-radius-12: var(--border-radius-l);
19
20
  } :root { /* deprecated */
20
21
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
21
22
  --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
22
23
  --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
23
24
 
24
25
  /* новые значения, используйте их */
26
+ --gap-0: 0;
25
27
  --gap-4: var(--gap-2xs);
26
28
  --gap-12: var(--gap-s);
27
29
  --gap-20: var(--gap-l);
@@ -29,7 +31,7 @@
29
31
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
30
32
  'Helvetica Neue', Helvetica, sans-serif;
31
33
  } :root {
32
- } .bank-card__component_ra9zm {
34
+ } .bank-card__component_1xy4s {
33
35
  /* TODO: как это будет собираться и работать в webView */
34
36
  --form-control-border-radius: 0;
35
37
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -48,41 +50,41 @@
48
50
  max-width: 343px;
49
51
 
50
52
  font-family: var(--font-family-styrene);
51
- } .bank-card__aspectRatioContainer_ra9zm {
53
+ } .bank-card__aspectRatioContainer_1xy4s {
52
54
  /* Эталонный размер 343x216 */
53
55
  padding-bottom: 63%;
54
- } .bank-card__content_ra9zm {
56
+ } .bank-card__content_1xy4s {
55
57
  position: absolute;
56
- top: 0;
57
- right: 0;
58
- bottom: 0;
59
- left: 0;
58
+ top: var(--gap-0);
59
+ right: var(--gap-0);
60
+ bottom: var(--gap-0);
61
+ left: var(--gap-0);
60
62
  display: flex;
61
63
  align-items: center;
62
64
  padding-left: var(--gap-20);
63
65
  padding-right: var(--gap-20);
64
- border-radius: var(--border-radius-l);
66
+ border-radius: var(--border-radius-12);
65
67
  box-sizing: border-box;
66
- } .bank-card__label_ra9zm {
67
- left: 0;
68
+ } .bank-card__label_1xy4s {
69
+ left: var(--gap-0);
68
70
  transform: translateY(-1px);
69
71
  color: var(--color-light-text-secondary);
70
72
  font-size: 20px;
71
73
  line-height: 24px
72
- } @media (max-width: 360px) { .bank-card__label_ra9zm {
74
+ } @media (max-width: 360px) { .bank-card__label_1xy4s {
73
75
  font-size: 16px
74
76
  }
75
- } .bank-card__focused_ra9zm .bank-card__label_ra9zm,
76
- .bank-card__filled_ra9zm .bank-card__label_ra9zm {
77
+ } .bank-card__focused_1xy4s .bank-card__label_1xy4s,
78
+ .bank-card__filled_1xy4s .bank-card__label_1xy4s {
77
79
  color: var(--color-light-neutral-translucent-1300);
78
80
  transform: translateY(-19px) scale(0.6)
79
- } @media (max-width: 360px) { .bank-card__focused_ra9zm .bank-card__label_ra9zm,
80
- .bank-card__filled_ra9zm .bank-card__label_ra9zm {
81
+ } @media (max-width: 360px) { .bank-card__focused_1xy4s .bank-card__label_1xy4s,
82
+ .bank-card__filled_1xy4s .bank-card__label_1xy4s {
81
83
  transform: translateY(-22px) scale(0.75)
82
84
  }
83
- } .bank-card__focused_ra9zm:before {
85
+ } .bank-card__focused_1xy4s:before {
84
86
  transform: scale(1) !important;
85
- } .bank-card__input_ra9zm {
87
+ } .bank-card__input_1xy4s {
86
88
  font-size: 20px;
87
89
  line-height: 24px;
88
90
  font-weight: 400;
@@ -93,32 +95,32 @@
93
95
  caret-color: var(--color-light-neutral-translucent-1300);
94
96
 
95
97
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
96
- padding-left: 0 !important;
98
+ padding-left: var(--gap-0) !important;
97
99
  padding-bottom: var(--gap-4) !important
98
- } @media (max-width: 360px) { .bank-card__input_ra9zm {
100
+ } @media (max-width: 360px) { .bank-card__input_1xy4s {
99
101
  font-size: 16px
100
102
  }
101
- } .bank-card__bankLogo_ra9zm {
103
+ } .bank-card__bankLogo_1xy4s {
102
104
  position: absolute;
103
- top: 20px;
104
- left: 20px
105
- } .bank-card__bankLogo_ra9zm svg {
105
+ top: var(--gap-20);
106
+ left: var(--gap-20)
107
+ } .bank-card__bankLogo_1xy4s svg {
106
108
  max-height: 32px;
107
109
  width: auto;
108
110
  display: block
109
- } .bank-card__bankLogo_ra9zm svg g {
111
+ } .bank-card__bankLogo_1xy4s svg g {
110
112
  fill: var(--color-light-neutral-translucent-1300);
111
- } .bank-card__brandLogo_ra9zm {
113
+ } .bank-card__brandLogo_1xy4s {
112
114
  position: absolute;
113
- bottom: 20px;
114
- right: 20px
115
- } .bank-card__brandLogo_ra9zm svg {
115
+ bottom: var(--gap-20);
116
+ right: var(--gap-20)
117
+ } .bank-card__brandLogo_1xy4s svg {
116
118
  display: block;
117
119
  fill: var(--color-light-neutral-translucent-1300);
118
- } .bank-card__usePhoto_ra9zm {
120
+ } .bank-card__usePhoto_1xy4s {
119
121
  display: block;
120
- margin: 0;
121
- padding: 0;
122
+ margin: var(--gap-0);
123
+ padding: var(--gap-0);
122
124
  text-decoration: none;
123
125
  background-color: transparent;
124
126
  border: 0;
@@ -132,7 +134,7 @@
132
134
 
133
135
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
134
136
  margin-right: calc(var(--gap-12) * -1)
135
- } .bank-card__usePhoto_ra9zm svg {
137
+ } .bank-card__usePhoto_1xy4s svg {
136
138
  fill: var(--color-light-neutral-translucent-1300);
137
139
  display: block;
138
140
  }
package/modern/Component.js CHANGED
@@ -10,7 +10,7 @@ import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
10
10
  import { MaskTypeEnum } from './enums.js';
11
11
  import { validateCardNumber } from './utils.js';
12
12
 
13
- const styles = {"component":"bank-card__component_ra9zm","aspectRatioContainer":"bank-card__aspectRatioContainer_ra9zm","content":"bank-card__content_ra9zm","label":"bank-card__label_ra9zm","focused":"bank-card__focused_ra9zm","filled":"bank-card__filled_ra9zm","input":"bank-card__input_ra9zm","bankLogo":"bank-card__bankLogo_ra9zm","brandLogo":"bank-card__brandLogo_ra9zm","usePhoto":"bank-card__usePhoto_ra9zm"};
13
+ const styles = {"component":"bank-card__component_1xy4s","aspectRatioContainer":"bank-card__aspectRatioContainer_1xy4s","content":"bank-card__content_1xy4s","label":"bank-card__label_1xy4s","focused":"bank-card__focused_1xy4s","filled":"bank-card__filled_1xy4s","input":"bank-card__input_1xy4s","bankLogo":"bank-card__bankLogo_1xy4s","brandLogo":"bank-card__brandLogo_1xy4s","usePhoto":"bank-card__usePhoto_1xy4s"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1t4vq */
1
+ /* hash: 1uid9 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -16,12 +16,14 @@
16
16
  --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
17
 
18
18
  /* новые значения, используйте их */
19
+ --border-radius-12: var(--border-radius-l);
19
20
  } :root { /* deprecated */
20
21
  --gap-2xs: 4px; /* deprecated */ /* deprecated */
21
22
  --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
22
23
  --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
23
24
 
24
25
  /* новые значения, используйте их */
26
+ --gap-0: 0;
25
27
  --gap-4: var(--gap-2xs);
26
28
  --gap-12: var(--gap-s);
27
29
  --gap-20: var(--gap-l);
@@ -29,7 +31,7 @@
29
31
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
30
32
  'Helvetica Neue', Helvetica, sans-serif;
31
33
  } :root {
32
- } .bank-card__component_ra9zm {
34
+ } .bank-card__component_1xy4s {
33
35
  /* TODO: как это будет собираться и работать в webView */
34
36
  --form-control-border-radius: 0;
35
37
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -48,41 +50,41 @@
48
50
  max-width: 343px;
49
51
 
50
52
  font-family: var(--font-family-styrene);
51
- } .bank-card__aspectRatioContainer_ra9zm {
53
+ } .bank-card__aspectRatioContainer_1xy4s {
52
54
  /* Эталонный размер 343x216 */
53
55
  padding-bottom: 63%;
54
- } .bank-card__content_ra9zm {
56
+ } .bank-card__content_1xy4s {
55
57
  position: absolute;
56
- top: 0;
57
- right: 0;
58
- bottom: 0;
59
- left: 0;
58
+ top: var(--gap-0);
59
+ right: var(--gap-0);
60
+ bottom: var(--gap-0);
61
+ left: var(--gap-0);
60
62
  display: flex;
61
63
  align-items: center;
62
64
  padding-left: var(--gap-20);
63
65
  padding-right: var(--gap-20);
64
- border-radius: var(--border-radius-l);
66
+ border-radius: var(--border-radius-12);
65
67
  box-sizing: border-box;
66
- } .bank-card__label_ra9zm {
67
- left: 0;
68
+ } .bank-card__label_1xy4s {
69
+ left: var(--gap-0);
68
70
  transform: translateY(-1px);
69
71
  color: var(--color-light-text-secondary);
70
72
  font-size: 20px;
71
73
  line-height: 24px
72
- } @media (max-width: 360px) { .bank-card__label_ra9zm {
74
+ } @media (max-width: 360px) { .bank-card__label_1xy4s {
73
75
  font-size: 16px
74
76
  }
75
- } .bank-card__focused_ra9zm .bank-card__label_ra9zm,
76
- .bank-card__filled_ra9zm .bank-card__label_ra9zm {
77
+ } .bank-card__focused_1xy4s .bank-card__label_1xy4s,
78
+ .bank-card__filled_1xy4s .bank-card__label_1xy4s {
77
79
  color: var(--color-light-neutral-translucent-1300);
78
80
  transform: translateY(-19px) scale(0.6)
79
- } @media (max-width: 360px) { .bank-card__focused_ra9zm .bank-card__label_ra9zm,
80
- .bank-card__filled_ra9zm .bank-card__label_ra9zm {
81
+ } @media (max-width: 360px) { .bank-card__focused_1xy4s .bank-card__label_1xy4s,
82
+ .bank-card__filled_1xy4s .bank-card__label_1xy4s {
81
83
  transform: translateY(-22px) scale(0.75)
82
84
  }
83
- } .bank-card__focused_ra9zm:before {
85
+ } .bank-card__focused_1xy4s:before {
84
86
  transform: scale(1) !important;
85
- } .bank-card__input_ra9zm {
87
+ } .bank-card__input_1xy4s {
86
88
  font-size: 20px;
87
89
  line-height: 24px;
88
90
  font-weight: 400;
@@ -93,32 +95,32 @@
93
95
  caret-color: var(--color-light-neutral-translucent-1300);
94
96
 
95
97
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
96
- padding-left: 0 !important;
98
+ padding-left: var(--gap-0) !important;
97
99
  padding-bottom: var(--gap-4) !important
98
- } @media (max-width: 360px) { .bank-card__input_ra9zm {
100
+ } @media (max-width: 360px) { .bank-card__input_1xy4s {
99
101
  font-size: 16px
100
102
  }
101
- } .bank-card__bankLogo_ra9zm {
103
+ } .bank-card__bankLogo_1xy4s {
102
104
  position: absolute;
103
- top: 20px;
104
- left: 20px
105
- } .bank-card__bankLogo_ra9zm svg {
105
+ top: var(--gap-20);
106
+ left: var(--gap-20)
107
+ } .bank-card__bankLogo_1xy4s svg {
106
108
  max-height: 32px;
107
109
  width: auto;
108
110
  display: block
109
- } .bank-card__bankLogo_ra9zm svg g {
111
+ } .bank-card__bankLogo_1xy4s svg g {
110
112
  fill: var(--color-light-neutral-translucent-1300);
111
- } .bank-card__brandLogo_ra9zm {
113
+ } .bank-card__brandLogo_1xy4s {
112
114
  position: absolute;
113
- bottom: 20px;
114
- right: 20px
115
- } .bank-card__brandLogo_ra9zm svg {
115
+ bottom: var(--gap-20);
116
+ right: var(--gap-20)
117
+ } .bank-card__brandLogo_1xy4s svg {
116
118
  display: block;
117
119
  fill: var(--color-light-neutral-translucent-1300);
118
- } .bank-card__usePhoto_ra9zm {
120
+ } .bank-card__usePhoto_1xy4s {
119
121
  display: block;
120
- margin: 0;
121
- padding: 0;
122
+ margin: var(--gap-0);
123
+ padding: var(--gap-0);
122
124
  text-decoration: none;
123
125
  background-color: transparent;
124
126
  border: 0;
@@ -132,7 +134,7 @@
132
134
 
133
135
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
134
136
  margin-right: calc(var(--gap-12) * -1)
135
- } .bank-card__usePhoto_ra9zm svg {
137
+ } .bank-card__usePhoto_1xy4s svg {
136
138
  fill: var(--color-light-neutral-translucent-1300);
137
139
  display: block;
138
140
  }
package/moderncssm/index.module.css CHANGED
@@ -28,20 +28,20 @@
28
28
 
29
29
  .content {
30
30
  position: absolute;
31
- top: 0;
32
- right: 0;
33
- bottom: 0;
34
- left: 0;
31
+ top: var(--gap-0);
32
+ right: var(--gap-0);
33
+ bottom: var(--gap-0);
34
+ left: var(--gap-0);
35
35
  display: flex;
36
36
  align-items: center;
37
37
  padding-left: var(--gap-20);
38
38
  padding-right: var(--gap-20);
39
- border-radius: var(--border-radius-l);
39
+ border-radius: var(--border-radius-12);
40
40
  box-sizing: border-box;
41
41
  }
42
42
 
43
43
  .label {
44
- left: 0;
44
+ left: var(--gap-0);
45
45
  transform: translateY(-1px);
46
46
  color: var(--color-light-text-secondary);
47
47
  font-size: 20px;
@@ -84,7 +84,7 @@
84
84
  caret-color: var(--color-light-neutral-translucent-1300);
85
85
 
86
86
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
87
- padding-left: 0 !important;
87
+ padding-left: var(--gap-0) !important;
88
88
  padding-bottom: var(--gap-4) !important
89
89
  }
90
90
 
@@ -97,8 +97,8 @@
97
97
 
98
98
  .bankLogo {
99
99
  position: absolute;
100
- top: 20px;
101
- left: 20px
100
+ top: var(--gap-20);
101
+ left: var(--gap-20)
102
102
  }
103
103
 
104
104
  .bankLogo svg {
@@ -113,8 +113,8 @@
113
113
 
114
114
  .brandLogo {
115
115
  position: absolute;
116
- bottom: 20px;
117
- right: 20px
116
+ bottom: var(--gap-20);
117
+ right: var(--gap-20)
118
118
  }
119
119
 
120
120
  .brandLogo svg {
@@ -124,8 +124,8 @@
124
124
 
125
125
  .usePhoto {
126
126
  display: block;
127
- margin: 0;
128
- padding: 0;
127
+ margin: var(--gap-0);
128
+ padding: var(--gap-0);
129
129
  text-decoration: none;
130
130
  background-color: transparent;
131
131
  border: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.8.0",
3
+ "version": "5.8.1",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,12 +15,12 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-masked-input": "^6.3.19",
18
+ "@alfalab/core-components-masked-input": "^6.3.20",
19
19
  "@alfalab/icons-glyph": "^2.139.0",
20
20
  "@alfalab/icons-logotype": "^2.27.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
- "themesVersion": "13.1.0",
25
- "varsVersion": "9.12.0"
24
+ "themesVersion": "13.2.0",
25
+ "varsVersion": "9.13.0"
26
26
  }
package/src/index.module.css CHANGED
@@ -29,20 +29,20 @@
29
29
 
30
30
  .content {
31
31
  position: absolute;
32
- top: 0;
33
- right: 0;
34
- bottom: 0;
35
- left: 0;
32
+ top: var(--gap-0);
33
+ right: var(--gap-0);
34
+ bottom: var(--gap-0);
35
+ left: var(--gap-0);
36
36
  display: flex;
37
37
  align-items: center;
38
38
  padding-left: var(--gap-20);
39
39
  padding-right: var(--gap-20);
40
- border-radius: var(--border-radius-l);
40
+ border-radius: var(--border-radius-12);
41
41
  box-sizing: border-box;
42
42
  }
43
43
 
44
44
  .label {
45
- left: 0;
45
+ left: var(--gap-0);
46
46
  transform: translateY(-1px);
47
47
  color: var(--color-light-text-secondary);
48
48
  font-size: 20px;
@@ -74,7 +74,7 @@
74
74
  caret-color: var(--color-light-neutral-translucent-1300);
75
75
 
76
76
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
77
- padding-left: 0 !important;
77
+ padding-left: var(--gap-0) !important;
78
78
  padding-bottom: var(--gap-4) !important;
79
79
 
80
80
  @media (max-width: 360px) {
@@ -84,8 +84,8 @@
84
84
 
85
85
  .bankLogo {
86
86
  position: absolute;
87
- top: 20px;
88
- left: 20px;
87
+ top: var(--gap-20);
88
+ left: var(--gap-20);
89
89
 
90
90
  & svg {
91
91
  max-height: 32px;
@@ -100,8 +100,8 @@
100
100
 
101
101
  .brandLogo {
102
102
  position: absolute;
103
- bottom: 20px;
104
- right: 20px;
103
+ bottom: var(--gap-20);
104
+ right: var(--gap-20);
105
105
 
106
106
  & svg {
107
107
  display: block;
@@ -111,8 +111,8 @@
111
111
 
112
112
  .usePhoto {
113
113
  display: block;
114
- margin: 0;
115
- padding: 0;
114
+ margin: var(--gap-0);
115
+ padding: var(--gap-0);
116
116
  text-decoration: none;
117
117
  background-color: transparent;
118
118
  border: 0;