@alfalab/core-components-bank-card 5.2.11 → 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.
Files changed (8) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +26 -46
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +29 -49
  5. package/index.css +29 -49
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +29 -49
  8. 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-card__component_1mu0y","aspectRatioContainer":"bank-card__aspectRatioContainer_1mu0y","content":"bank-card__content_1mu0y","label":"bank-card__label_1mu0y","focused":"bank-card__focused_1mu0y","filled":"bank-card__filled_1mu0y","input":"bank-card__input_1mu0y","bankLogo":"bank-card__bankLogo_1mu0y","brandLogo":"bank-card__brandLogo_1mu0y","usePhoto":"bank-card__usePhoto_1mu0y"};
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
- :root {
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
- :root {
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-card__component_1mu0y","aspectRatioContainer":"bank-card__aspectRatioContainer_1mu0y","content":"bank-card__content_1mu0y","label":"bank-card__label_1mu0y","focused":"bank-card__focused_1mu0y","filled":"bank-card__filled_1mu0y","input":"bank-card__input_1mu0y","bankLogo":"bank-card__bankLogo_1mu0y","brandLogo":"bank-card__brandLogo_1mu0y","usePhoto":"bank-card__usePhoto_1mu0y"};
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: erka9 */
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
- :root {
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
- :root {
24
- --border-radius-l: 12px;
25
- }
26
- .bank-card__component_1mu0y {
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_1mu0y {
44
+ } .bank-card__aspectRatioContainer_ah70w {
47
45
  /* Эталонный размер 343x216 */
48
46
  padding-bottom: 63%;
49
- }
50
- .bank-card__content_1mu0y {
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_1mu0y {
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_1mu0y {
65
+ } @media (max-width: 360px) { .bank-card__label_ah70w {
72
66
  font-size: 16px
73
67
  }
74
- }
75
- .bank-card__focused_1mu0y .bank-card__label_1mu0y,
76
- .bank-card__filled_1mu0y .bank-card__label_1mu0y {
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
- @media (max-width: 360px) {
81
- .bank-card__focused_1mu0y .bank-card__label_1mu0y,
82
- .bank-card__filled_1mu0y .bank-card__label_1mu0y {
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_1mu0y:before {
76
+ } .bank-card__focused_ah70w:before {
87
77
  transform: scale(1) !important;
88
- }
89
- .bank-card__input_1mu0y {
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_1mu0y {
91
+ } @media (max-width: 360px) { .bank-card__input_ah70w {
105
92
  font-size: 16px
106
93
  }
107
- }
108
- .bank-card__bankLogo_1mu0y {
94
+ } .bank-card__bankLogo_ah70w {
109
95
  position: absolute;
110
96
  top: 20px;
111
97
  left: 20px
112
- }
113
- .bank-card__bankLogo_1mu0y 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_1mu0y svg g {
102
+ } .bank-card__bankLogo_ah70w svg g {
119
103
  fill: var(--color-black);
120
- }
121
- .bank-card__brandLogo_1mu0y {
104
+ } .bank-card__brandLogo_ah70w {
122
105
  position: absolute;
123
106
  bottom: 20px;
124
107
  right: 20px
125
- }
126
- .bank-card__brandLogo_1mu0y svg {
108
+ } .bank-card__brandLogo_ah70w svg {
127
109
  display: block;
128
110
  fill: var(--color-black);
129
- }
130
- .bank-card__usePhoto_1mu0y {
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_1mu0y 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: erka9 */
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
- :root {
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
- :root {
24
- --border-radius-l: 12px;
25
- }
26
- .bank-card__component_1mu0y {
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_1mu0y {
44
+ } .bank-card__aspectRatioContainer_ah70w {
47
45
  /* Эталонный размер 343x216 */
48
46
  padding-bottom: 63%;
49
- }
50
- .bank-card__content_1mu0y {
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_1mu0y {
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_1mu0y {
65
+ } @media (max-width: 360px) { .bank-card__label_ah70w {
72
66
  font-size: 16px
73
67
  }
74
- }
75
- .bank-card__focused_1mu0y .bank-card__label_1mu0y,
76
- .bank-card__filled_1mu0y .bank-card__label_1mu0y {
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
- @media (max-width: 360px) {
81
- .bank-card__focused_1mu0y .bank-card__label_1mu0y,
82
- .bank-card__filled_1mu0y .bank-card__label_1mu0y {
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_1mu0y:before {
76
+ } .bank-card__focused_ah70w:before {
87
77
  transform: scale(1) !important;
88
- }
89
- .bank-card__input_1mu0y {
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_1mu0y {
91
+ } @media (max-width: 360px) { .bank-card__input_ah70w {
105
92
  font-size: 16px
106
93
  }
107
- }
108
- .bank-card__bankLogo_1mu0y {
94
+ } .bank-card__bankLogo_ah70w {
109
95
  position: absolute;
110
96
  top: 20px;
111
97
  left: 20px
112
- }
113
- .bank-card__bankLogo_1mu0y 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_1mu0y svg g {
102
+ } .bank-card__bankLogo_ah70w svg g {
119
103
  fill: var(--color-black);
120
- }
121
- .bank-card__brandLogo_1mu0y {
104
+ } .bank-card__brandLogo_ah70w {
122
105
  position: absolute;
123
106
  bottom: 20px;
124
107
  right: 20px
125
- }
126
- .bank-card__brandLogo_1mu0y svg {
108
+ } .bank-card__brandLogo_ah70w svg {
127
109
  display: block;
128
110
  fill: var(--color-black);
129
- }
130
- .bank-card__usePhoto_1mu0y {
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_1mu0y 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-card__component_1mu0y","aspectRatioContainer":"bank-card__aspectRatioContainer_1mu0y","content":"bank-card__content_1mu0y","label":"bank-card__label_1mu0y","focused":"bank-card__focused_1mu0y","filled":"bank-card__filled_1mu0y","input":"bank-card__input_1mu0y","bankLogo":"bank-card__bankLogo_1mu0y","brandLogo":"bank-card__brandLogo_1mu0y","usePhoto":"bank-card__usePhoto_1mu0y"};
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: erka9 */
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
- :root {
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
- :root {
24
- --border-radius-l: 12px;
25
- }
26
- .bank-card__component_1mu0y {
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_1mu0y {
44
+ } .bank-card__aspectRatioContainer_ah70w {
47
45
  /* Эталонный размер 343x216 */
48
46
  padding-bottom: 63%;
49
- }
50
- .bank-card__content_1mu0y {
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_1mu0y {
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_1mu0y {
65
+ } @media (max-width: 360px) { .bank-card__label_ah70w {
72
66
  font-size: 16px
73
67
  }
74
- }
75
- .bank-card__focused_1mu0y .bank-card__label_1mu0y,
76
- .bank-card__filled_1mu0y .bank-card__label_1mu0y {
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
- @media (max-width: 360px) {
81
- .bank-card__focused_1mu0y .bank-card__label_1mu0y,
82
- .bank-card__filled_1mu0y .bank-card__label_1mu0y {
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_1mu0y:before {
76
+ } .bank-card__focused_ah70w:before {
87
77
  transform: scale(1) !important;
88
- }
89
- .bank-card__input_1mu0y {
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_1mu0y {
91
+ } @media (max-width: 360px) { .bank-card__input_ah70w {
105
92
  font-size: 16px
106
93
  }
107
- }
108
- .bank-card__bankLogo_1mu0y {
94
+ } .bank-card__bankLogo_ah70w {
109
95
  position: absolute;
110
96
  top: 20px;
111
97
  left: 20px
112
- }
113
- .bank-card__bankLogo_1mu0y 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_1mu0y svg g {
102
+ } .bank-card__bankLogo_ah70w svg g {
119
103
  fill: var(--color-black);
120
- }
121
- .bank-card__brandLogo_1mu0y {
104
+ } .bank-card__brandLogo_ah70w {
122
105
  position: absolute;
123
106
  bottom: 20px;
124
107
  right: 20px
125
- }
126
- .bank-card__brandLogo_1mu0y svg {
108
+ } .bank-card__brandLogo_ah70w svg {
127
109
  display: block;
128
110
  fill: var(--color-black);
129
- }
130
- .bank-card__usePhoto_1mu0y {
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_1mu0y 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.11",
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.4",
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"