@alfalab/core-components-bank-card 5.7.9 → 5.7.11

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 (8) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +10 -6
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +30 -26
  5. package/index.css +30 -26
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +30 -26
  8. package/package.json +5 -3
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_1eypv","aspectRatioContainer":"bank-card__aspectRatioContainer_1eypv","content":"bank-card__content_1eypv","label":"bank-card__label_1eypv","focused":"bank-card__focused_1eypv","filled":"bank-card__filled_1eypv","input":"bank-card__input_1eypv","bankLogo":"bank-card__bankLogo_1eypv","brandLogo":"bank-card__brandLogo_1eypv","usePhoto":"bank-card__usePhoto_1eypv"};
22
+ var styles = {"component":"bank-card__component_1emqp","aspectRatioContainer":"bank-card__aspectRatioContainer_1emqp","content":"bank-card__content_1emqp","label":"bank-card__label_1emqp","focused":"bank-card__focused_1emqp","filled":"bank-card__filled_1emqp","input":"bank-card__input_1emqp","bankLogo":"bank-card__bankLogo_1emqp","brandLogo":"bank-card__brandLogo_1emqp","usePhoto":"bank-card__usePhoto_1emqp"};
23
23
  require('./index.css')
24
24
 
25
25
  // prettier-ignore
package/cssm/index.module.css CHANGED
@@ -11,12 +11,16 @@
11
11
  /* Up */
12
12
 
13
13
  /* Hard up */
14
- } :root {
15
- --border-radius-l: 12px;
16
- } :root {
17
- --gap-2xs: 4px;
18
- --gap-s: 12px;
19
- --gap-l: 20px;
14
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */
15
+ --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
16
+
17
+ /* новые значения, используйте их */
18
+ } :root { /* deprecated */
19
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
20
+ --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
21
+ --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
+ /* новые значения, используйте их */
20
24
  } :root {
21
25
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
22
26
  'Helvetica Neue', Helvetica, sans-serif;
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_1eypv","aspectRatioContainer":"bank-card__aspectRatioContainer_1eypv","content":"bank-card__content_1eypv","label":"bank-card__label_1eypv","focused":"bank-card__focused_1eypv","filled":"bank-card__filled_1eypv","input":"bank-card__input_1eypv","bankLogo":"bank-card__bankLogo_1eypv","brandLogo":"bank-card__brandLogo_1eypv","usePhoto":"bank-card__usePhoto_1eypv"};
13
+ var styles = {"component":"bank-card__component_1emqp","aspectRatioContainer":"bank-card__aspectRatioContainer_1emqp","content":"bank-card__content_1emqp","label":"bank-card__label_1emqp","focused":"bank-card__focused_1emqp","filled":"bank-card__filled_1emqp","input":"bank-card__input_1emqp","bankLogo":"bank-card__bankLogo_1emqp","brandLogo":"bank-card__brandLogo_1emqp","usePhoto":"bank-card__usePhoto_1emqp"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1h5zs */
1
+ /* hash: 1jnjr */
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);
@@ -12,17 +12,21 @@
12
12
  /* Up */
13
13
 
14
14
  /* Hard up */
15
- } :root {
16
- --border-radius-l: 12px;
17
- } :root {
18
- --gap-2xs: 4px;
19
- --gap-s: 12px;
20
- --gap-l: 20px;
15
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */
16
+ --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
19
+ } :root { /* deprecated */
20
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
21
+ --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
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 */
23
+
24
+ /* новые значения, используйте их */
21
25
  } :root {
22
26
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
27
  'Helvetica Neue', Helvetica, sans-serif;
24
28
  } :root {
25
- } .bank-card__component_1eypv {
29
+ } .bank-card__component_1emqp {
26
30
  /* TODO: как это будет собираться и работать в webView */
27
31
  --form-control-border-radius: 0;
28
32
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +45,10 @@
41
45
  max-width: 343px;
42
46
 
43
47
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_1eypv {
48
+ } .bank-card__aspectRatioContainer_1emqp {
45
49
  /* Эталонный размер 343x216 */
46
50
  padding-bottom: 63%;
47
- } .bank-card__content_1eypv {
51
+ } .bank-card__content_1emqp {
48
52
  position: absolute;
49
53
  top: 0;
50
54
  right: 0;
@@ -56,26 +60,26 @@
56
60
  padding-right: var(--gap-l);
57
61
  border-radius: var(--border-radius-l);
58
62
  box-sizing: border-box;
59
- } .bank-card__label_1eypv {
63
+ } .bank-card__label_1emqp {
60
64
  left: 0;
61
65
  transform: translateY(-1px);
62
66
  color: var(--color-light-text-secondary);
63
67
  font-size: 20px;
64
68
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_1eypv {
69
+ } @media (max-width: 360px) { .bank-card__label_1emqp {
66
70
  font-size: 16px
67
71
  }
68
- } .bank-card__focused_1eypv .bank-card__label_1eypv,
69
- .bank-card__filled_1eypv .bank-card__label_1eypv {
72
+ } .bank-card__focused_1emqp .bank-card__label_1emqp,
73
+ .bank-card__filled_1emqp .bank-card__label_1emqp {
70
74
  color: var(--color-light-neutral-translucent-1300);
71
75
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_1eypv .bank-card__label_1eypv,
73
- .bank-card__filled_1eypv .bank-card__label_1eypv {
76
+ } @media (max-width: 360px) { .bank-card__focused_1emqp .bank-card__label_1emqp,
77
+ .bank-card__filled_1emqp .bank-card__label_1emqp {
74
78
  transform: translateY(-22px) scale(0.75)
75
79
  }
76
- } .bank-card__focused_1eypv:before {
80
+ } .bank-card__focused_1emqp:before {
77
81
  transform: scale(1) !important;
78
- } .bank-card__input_1eypv {
82
+ } .bank-card__input_1emqp {
79
83
  font-size: 20px;
80
84
  line-height: 24px;
81
85
  font-weight: 400;
@@ -88,27 +92,27 @@
88
92
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
93
  padding-left: 0 !important;
90
94
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_1eypv {
95
+ } @media (max-width: 360px) { .bank-card__input_1emqp {
92
96
  font-size: 16px
93
97
  }
94
- } .bank-card__bankLogo_1eypv {
98
+ } .bank-card__bankLogo_1emqp {
95
99
  position: absolute;
96
100
  top: 20px;
97
101
  left: 20px
98
- } .bank-card__bankLogo_1eypv svg {
102
+ } .bank-card__bankLogo_1emqp svg {
99
103
  max-height: 32px;
100
104
  width: auto;
101
105
  display: block
102
- } .bank-card__bankLogo_1eypv svg g {
106
+ } .bank-card__bankLogo_1emqp svg g {
103
107
  fill: var(--color-light-neutral-translucent-1300);
104
- } .bank-card__brandLogo_1eypv {
108
+ } .bank-card__brandLogo_1emqp {
105
109
  position: absolute;
106
110
  bottom: 20px;
107
111
  right: 20px
108
- } .bank-card__brandLogo_1eypv svg {
112
+ } .bank-card__brandLogo_1emqp svg {
109
113
  display: block;
110
114
  fill: var(--color-light-neutral-translucent-1300);
111
- } .bank-card__usePhoto_1eypv {
115
+ } .bank-card__usePhoto_1emqp {
112
116
  display: block;
113
117
  margin: 0;
114
118
  padding: 0;
@@ -125,7 +129,7 @@
125
129
 
126
130
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
131
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_1eypv svg {
132
+ } .bank-card__usePhoto_1emqp svg {
129
133
  fill: var(--color-light-neutral-translucent-1300);
130
134
  display: block;
131
135
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1h5zs */
1
+ /* hash: 1jnjr */
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);
@@ -12,17 +12,21 @@
12
12
  /* Up */
13
13
 
14
14
  /* Hard up */
15
- } :root {
16
- --border-radius-l: 12px;
17
- } :root {
18
- --gap-2xs: 4px;
19
- --gap-s: 12px;
20
- --gap-l: 20px;
15
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */
16
+ --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
19
+ } :root { /* deprecated */
20
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
21
+ --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
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 */
23
+
24
+ /* новые значения, используйте их */
21
25
  } :root {
22
26
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
27
  'Helvetica Neue', Helvetica, sans-serif;
24
28
  } :root {
25
- } .bank-card__component_1eypv {
29
+ } .bank-card__component_1emqp {
26
30
  /* TODO: как это будет собираться и работать в webView */
27
31
  --form-control-border-radius: 0;
28
32
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +45,10 @@
41
45
  max-width: 343px;
42
46
 
43
47
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_1eypv {
48
+ } .bank-card__aspectRatioContainer_1emqp {
45
49
  /* Эталонный размер 343x216 */
46
50
  padding-bottom: 63%;
47
- } .bank-card__content_1eypv {
51
+ } .bank-card__content_1emqp {
48
52
  position: absolute;
49
53
  top: 0;
50
54
  right: 0;
@@ -56,26 +60,26 @@
56
60
  padding-right: var(--gap-l);
57
61
  border-radius: var(--border-radius-l);
58
62
  box-sizing: border-box;
59
- } .bank-card__label_1eypv {
63
+ } .bank-card__label_1emqp {
60
64
  left: 0;
61
65
  transform: translateY(-1px);
62
66
  color: var(--color-light-text-secondary);
63
67
  font-size: 20px;
64
68
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_1eypv {
69
+ } @media (max-width: 360px) { .bank-card__label_1emqp {
66
70
  font-size: 16px
67
71
  }
68
- } .bank-card__focused_1eypv .bank-card__label_1eypv,
69
- .bank-card__filled_1eypv .bank-card__label_1eypv {
72
+ } .bank-card__focused_1emqp .bank-card__label_1emqp,
73
+ .bank-card__filled_1emqp .bank-card__label_1emqp {
70
74
  color: var(--color-light-neutral-translucent-1300);
71
75
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_1eypv .bank-card__label_1eypv,
73
- .bank-card__filled_1eypv .bank-card__label_1eypv {
76
+ } @media (max-width: 360px) { .bank-card__focused_1emqp .bank-card__label_1emqp,
77
+ .bank-card__filled_1emqp .bank-card__label_1emqp {
74
78
  transform: translateY(-22px) scale(0.75)
75
79
  }
76
- } .bank-card__focused_1eypv:before {
80
+ } .bank-card__focused_1emqp:before {
77
81
  transform: scale(1) !important;
78
- } .bank-card__input_1eypv {
82
+ } .bank-card__input_1emqp {
79
83
  font-size: 20px;
80
84
  line-height: 24px;
81
85
  font-weight: 400;
@@ -88,27 +92,27 @@
88
92
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
93
  padding-left: 0 !important;
90
94
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_1eypv {
95
+ } @media (max-width: 360px) { .bank-card__input_1emqp {
92
96
  font-size: 16px
93
97
  }
94
- } .bank-card__bankLogo_1eypv {
98
+ } .bank-card__bankLogo_1emqp {
95
99
  position: absolute;
96
100
  top: 20px;
97
101
  left: 20px
98
- } .bank-card__bankLogo_1eypv svg {
102
+ } .bank-card__bankLogo_1emqp svg {
99
103
  max-height: 32px;
100
104
  width: auto;
101
105
  display: block
102
- } .bank-card__bankLogo_1eypv svg g {
106
+ } .bank-card__bankLogo_1emqp svg g {
103
107
  fill: var(--color-light-neutral-translucent-1300);
104
- } .bank-card__brandLogo_1eypv {
108
+ } .bank-card__brandLogo_1emqp {
105
109
  position: absolute;
106
110
  bottom: 20px;
107
111
  right: 20px
108
- } .bank-card__brandLogo_1eypv svg {
112
+ } .bank-card__brandLogo_1emqp svg {
109
113
  display: block;
110
114
  fill: var(--color-light-neutral-translucent-1300);
111
- } .bank-card__usePhoto_1eypv {
115
+ } .bank-card__usePhoto_1emqp {
112
116
  display: block;
113
117
  margin: 0;
114
118
  padding: 0;
@@ -125,7 +129,7 @@
125
129
 
126
130
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
131
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_1eypv svg {
132
+ } .bank-card__usePhoto_1emqp svg {
129
133
  fill: var(--color-light-neutral-translucent-1300);
130
134
  display: block;
131
135
  }
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_1eypv","aspectRatioContainer":"bank-card__aspectRatioContainer_1eypv","content":"bank-card__content_1eypv","label":"bank-card__label_1eypv","focused":"bank-card__focused_1eypv","filled":"bank-card__filled_1eypv","input":"bank-card__input_1eypv","bankLogo":"bank-card__bankLogo_1eypv","brandLogo":"bank-card__brandLogo_1eypv","usePhoto":"bank-card__usePhoto_1eypv"};
13
+ const styles = {"component":"bank-card__component_1emqp","aspectRatioContainer":"bank-card__aspectRatioContainer_1emqp","content":"bank-card__content_1emqp","label":"bank-card__label_1emqp","focused":"bank-card__focused_1emqp","filled":"bank-card__filled_1emqp","input":"bank-card__input_1emqp","bankLogo":"bank-card__bankLogo_1emqp","brandLogo":"bank-card__brandLogo_1emqp","usePhoto":"bank-card__usePhoto_1emqp"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1h5zs */
1
+ /* hash: 1jnjr */
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);
@@ -12,17 +12,21 @@
12
12
  /* Up */
13
13
 
14
14
  /* Hard up */
15
- } :root {
16
- --border-radius-l: 12px;
17
- } :root {
18
- --gap-2xs: 4px;
19
- --gap-s: 12px;
20
- --gap-l: 20px;
15
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */
16
+ --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
17
+
18
+ /* новые значения, используйте их */
19
+ } :root { /* deprecated */
20
+ --gap-2xs: 4px; /* deprecated */ /* deprecated */
21
+ --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */
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 */
23
+
24
+ /* новые значения, используйте их */
21
25
  } :root {
22
26
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
23
27
  'Helvetica Neue', Helvetica, sans-serif;
24
28
  } :root {
25
- } .bank-card__component_1eypv {
29
+ } .bank-card__component_1emqp {
26
30
  /* TODO: как это будет собираться и работать в webView */
27
31
  --form-control-border-radius: 0;
28
32
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +45,10 @@
41
45
  max-width: 343px;
42
46
 
43
47
  font-family: var(--font-family-styrene);
44
- } .bank-card__aspectRatioContainer_1eypv {
48
+ } .bank-card__aspectRatioContainer_1emqp {
45
49
  /* Эталонный размер 343x216 */
46
50
  padding-bottom: 63%;
47
- } .bank-card__content_1eypv {
51
+ } .bank-card__content_1emqp {
48
52
  position: absolute;
49
53
  top: 0;
50
54
  right: 0;
@@ -56,26 +60,26 @@
56
60
  padding-right: var(--gap-l);
57
61
  border-radius: var(--border-radius-l);
58
62
  box-sizing: border-box;
59
- } .bank-card__label_1eypv {
63
+ } .bank-card__label_1emqp {
60
64
  left: 0;
61
65
  transform: translateY(-1px);
62
66
  color: var(--color-light-text-secondary);
63
67
  font-size: 20px;
64
68
  line-height: 24px
65
- } @media (max-width: 360px) { .bank-card__label_1eypv {
69
+ } @media (max-width: 360px) { .bank-card__label_1emqp {
66
70
  font-size: 16px
67
71
  }
68
- } .bank-card__focused_1eypv .bank-card__label_1eypv,
69
- .bank-card__filled_1eypv .bank-card__label_1eypv {
72
+ } .bank-card__focused_1emqp .bank-card__label_1emqp,
73
+ .bank-card__filled_1emqp .bank-card__label_1emqp {
70
74
  color: var(--color-light-neutral-translucent-1300);
71
75
  transform: translateY(-19px) scale(0.6)
72
- } @media (max-width: 360px) { .bank-card__focused_1eypv .bank-card__label_1eypv,
73
- .bank-card__filled_1eypv .bank-card__label_1eypv {
76
+ } @media (max-width: 360px) { .bank-card__focused_1emqp .bank-card__label_1emqp,
77
+ .bank-card__filled_1emqp .bank-card__label_1emqp {
74
78
  transform: translateY(-22px) scale(0.75)
75
79
  }
76
- } .bank-card__focused_1eypv:before {
80
+ } .bank-card__focused_1emqp:before {
77
81
  transform: scale(1) !important;
78
- } .bank-card__input_1eypv {
82
+ } .bank-card__input_1emqp {
79
83
  font-size: 20px;
80
84
  line-height: 24px;
81
85
  font-weight: 400;
@@ -88,27 +92,27 @@
88
92
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
89
93
  padding-left: 0 !important;
90
94
  padding-bottom: var(--gap-2xs) !important
91
- } @media (max-width: 360px) { .bank-card__input_1eypv {
95
+ } @media (max-width: 360px) { .bank-card__input_1emqp {
92
96
  font-size: 16px
93
97
  }
94
- } .bank-card__bankLogo_1eypv {
98
+ } .bank-card__bankLogo_1emqp {
95
99
  position: absolute;
96
100
  top: 20px;
97
101
  left: 20px
98
- } .bank-card__bankLogo_1eypv svg {
102
+ } .bank-card__bankLogo_1emqp svg {
99
103
  max-height: 32px;
100
104
  width: auto;
101
105
  display: block
102
- } .bank-card__bankLogo_1eypv svg g {
106
+ } .bank-card__bankLogo_1emqp svg g {
103
107
  fill: var(--color-light-neutral-translucent-1300);
104
- } .bank-card__brandLogo_1eypv {
108
+ } .bank-card__brandLogo_1emqp {
105
109
  position: absolute;
106
110
  bottom: 20px;
107
111
  right: 20px
108
- } .bank-card__brandLogo_1eypv svg {
112
+ } .bank-card__brandLogo_1emqp svg {
109
113
  display: block;
110
114
  fill: var(--color-light-neutral-translucent-1300);
111
- } .bank-card__usePhoto_1eypv {
115
+ } .bank-card__usePhoto_1emqp {
112
116
  display: block;
113
117
  margin: 0;
114
118
  padding: 0;
@@ -125,7 +129,7 @@
125
129
 
126
130
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
131
  margin-right: calc(var(--gap-s) * -1)
128
- } .bank-card__usePhoto_1eypv svg {
132
+ } .bank-card__usePhoto_1emqp svg {
129
133
  fill: var(--color-light-neutral-translucent-1300);
130
134
  display: block;
131
135
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.7.9",
3
+ "version": "5.7.11",
4
4
  "description": "Bank card component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,10 +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.14",
18
+ "@alfalab/core-components-masked-input": "^6.3.16",
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.0.1",
25
+ "varsVersion": "9.11.1"
24
26
  }