@alfalab/core-components-bank-card 5.7.12 → 5.7.13

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 (9) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +8 -5
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +28 -25
  5. package/index.css +28 -25
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +28 -25
  8. package/package.json +3 -3
  9. package/src/index.module.css +5 -5
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_1nnz2","aspectRatioContainer":"bank-card__aspectRatioContainer_1nnz2","content":"bank-card__content_1nnz2","label":"bank-card__label_1nnz2","focused":"bank-card__focused_1nnz2","filled":"bank-card__filled_1nnz2","input":"bank-card__input_1nnz2","bankLogo":"bank-card__bankLogo_1nnz2","brandLogo":"bank-card__brandLogo_1nnz2","usePhoto":"bank-card__usePhoto_1nnz2"};
22
+ var styles = {"component":"bank-card__component_vapsn","aspectRatioContainer":"bank-card__aspectRatioContainer_vapsn","content":"bank-card__content_vapsn","label":"bank-card__label_vapsn","focused":"bank-card__focused_vapsn","filled":"bank-card__filled_vapsn","input":"bank-card__input_vapsn","bankLogo":"bank-card__bankLogo_vapsn","brandLogo":"bank-card__brandLogo_vapsn","usePhoto":"bank-card__usePhoto_vapsn"};
23
23
  require('./index.css')
24
24
 
25
25
  // prettier-ignore
package/cssm/index.module.css CHANGED
@@ -21,6 +21,9 @@
21
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
22
 
23
23
  /* новые значения, используйте их */
24
+ --gap-4: var(--gap-2xs);
25
+ --gap-12: var(--gap-s);
26
+ --gap-20: var(--gap-l);
24
27
  } :root {
25
28
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
26
29
  'Helvetica Neue', Helvetica, sans-serif;
@@ -55,8 +58,8 @@
55
58
  left: 0;
56
59
  display: flex;
57
60
  align-items: center;
58
- padding-left: var(--gap-l);
59
- padding-right: var(--gap-l);
61
+ padding-left: var(--gap-20);
62
+ padding-right: var(--gap-20);
60
63
  border-radius: var(--border-radius-l);
61
64
  box-sizing: border-box;
62
65
  } .label {
@@ -90,7 +93,7 @@
90
93
 
91
94
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
92
95
  padding-left: 0 !important;
93
- padding-bottom: var(--gap-2xs) !important
96
+ padding-bottom: var(--gap-4) !important
94
97
  } @media (max-width: 360px) { .input {
95
98
  font-size: 16px
96
99
  }
@@ -123,11 +126,11 @@
123
126
  user-select: none;
124
127
  cursor: pointer;
125
128
  outline: none;
126
- margin-bottom: var(--gap-2xs);
129
+ margin-bottom: var(--gap-4);
127
130
  align-self: flex-end;
128
131
 
129
132
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
130
- margin-right: calc(var(--gap-s) * -1)
133
+ margin-right: calc(var(--gap-12) * -1)
131
134
  } .usePhoto svg {
132
135
  fill: var(--color-light-neutral-translucent-1300);
133
136
  display: block;
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_1nnz2","aspectRatioContainer":"bank-card__aspectRatioContainer_1nnz2","content":"bank-card__content_1nnz2","label":"bank-card__label_1nnz2","focused":"bank-card__focused_1nnz2","filled":"bank-card__filled_1nnz2","input":"bank-card__input_1nnz2","bankLogo":"bank-card__bankLogo_1nnz2","brandLogo":"bank-card__brandLogo_1nnz2","usePhoto":"bank-card__usePhoto_1nnz2"};
13
+ var styles = {"component":"bank-card__component_vapsn","aspectRatioContainer":"bank-card__aspectRatioContainer_vapsn","content":"bank-card__content_vapsn","label":"bank-card__label_vapsn","focused":"bank-card__focused_vapsn","filled":"bank-card__filled_vapsn","input":"bank-card__input_vapsn","bankLogo":"bank-card__bankLogo_vapsn","brandLogo":"bank-card__brandLogo_vapsn","usePhoto":"bank-card__usePhoto_vapsn"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: mna6l */
1
+ /* hash: 1b272 */
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);
@@ -22,11 +22,14 @@
22
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
23
 
24
24
  /* новые значения, используйте их */
25
+ --gap-4: var(--gap-2xs);
26
+ --gap-12: var(--gap-s);
27
+ --gap-20: var(--gap-l);
25
28
  } :root {
26
29
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
27
30
  'Helvetica Neue', Helvetica, sans-serif;
28
31
  } :root {
29
- } .bank-card__component_1nnz2 {
32
+ } .bank-card__component_vapsn {
30
33
  /* TODO: как это будет собираться и работать в webView */
31
34
  --form-control-border-radius: 0;
32
35
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +48,10 @@
45
48
  max-width: 343px;
46
49
 
47
50
  font-family: var(--font-family-styrene);
48
- } .bank-card__aspectRatioContainer_1nnz2 {
51
+ } .bank-card__aspectRatioContainer_vapsn {
49
52
  /* Эталонный размер 343x216 */
50
53
  padding-bottom: 63%;
51
- } .bank-card__content_1nnz2 {
54
+ } .bank-card__content_vapsn {
52
55
  position: absolute;
53
56
  top: 0;
54
57
  right: 0;
@@ -56,30 +59,30 @@
56
59
  left: 0;
57
60
  display: flex;
58
61
  align-items: center;
59
- padding-left: var(--gap-l);
60
- padding-right: var(--gap-l);
62
+ padding-left: var(--gap-20);
63
+ padding-right: var(--gap-20);
61
64
  border-radius: var(--border-radius-l);
62
65
  box-sizing: border-box;
63
- } .bank-card__label_1nnz2 {
66
+ } .bank-card__label_vapsn {
64
67
  left: 0;
65
68
  transform: translateY(-1px);
66
69
  color: var(--color-light-text-secondary);
67
70
  font-size: 20px;
68
71
  line-height: 24px
69
- } @media (max-width: 360px) { .bank-card__label_1nnz2 {
72
+ } @media (max-width: 360px) { .bank-card__label_vapsn {
70
73
  font-size: 16px
71
74
  }
72
- } .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
73
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
75
+ } .bank-card__focused_vapsn .bank-card__label_vapsn,
76
+ .bank-card__filled_vapsn .bank-card__label_vapsn {
74
77
  color: var(--color-light-neutral-translucent-1300);
75
78
  transform: translateY(-19px) scale(0.6)
76
- } @media (max-width: 360px) { .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
77
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
79
+ } @media (max-width: 360px) { .bank-card__focused_vapsn .bank-card__label_vapsn,
80
+ .bank-card__filled_vapsn .bank-card__label_vapsn {
78
81
  transform: translateY(-22px) scale(0.75)
79
82
  }
80
- } .bank-card__focused_1nnz2:before {
83
+ } .bank-card__focused_vapsn:before {
81
84
  transform: scale(1) !important;
82
- } .bank-card__input_1nnz2 {
85
+ } .bank-card__input_vapsn {
83
86
  font-size: 20px;
84
87
  line-height: 24px;
85
88
  font-weight: 400;
@@ -91,28 +94,28 @@
91
94
 
92
95
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
93
96
  padding-left: 0 !important;
94
- padding-bottom: var(--gap-2xs) !important
95
- } @media (max-width: 360px) { .bank-card__input_1nnz2 {
97
+ padding-bottom: var(--gap-4) !important
98
+ } @media (max-width: 360px) { .bank-card__input_vapsn {
96
99
  font-size: 16px
97
100
  }
98
- } .bank-card__bankLogo_1nnz2 {
101
+ } .bank-card__bankLogo_vapsn {
99
102
  position: absolute;
100
103
  top: 20px;
101
104
  left: 20px
102
- } .bank-card__bankLogo_1nnz2 svg {
105
+ } .bank-card__bankLogo_vapsn svg {
103
106
  max-height: 32px;
104
107
  width: auto;
105
108
  display: block
106
- } .bank-card__bankLogo_1nnz2 svg g {
109
+ } .bank-card__bankLogo_vapsn svg g {
107
110
  fill: var(--color-light-neutral-translucent-1300);
108
- } .bank-card__brandLogo_1nnz2 {
111
+ } .bank-card__brandLogo_vapsn {
109
112
  position: absolute;
110
113
  bottom: 20px;
111
114
  right: 20px
112
- } .bank-card__brandLogo_1nnz2 svg {
115
+ } .bank-card__brandLogo_vapsn svg {
113
116
  display: block;
114
117
  fill: var(--color-light-neutral-translucent-1300);
115
- } .bank-card__usePhoto_1nnz2 {
118
+ } .bank-card__usePhoto_vapsn {
116
119
  display: block;
117
120
  margin: 0;
118
121
  padding: 0;
@@ -124,12 +127,12 @@
124
127
  user-select: none;
125
128
  cursor: pointer;
126
129
  outline: none;
127
- margin-bottom: var(--gap-2xs);
130
+ margin-bottom: var(--gap-4);
128
131
  align-self: flex-end;
129
132
 
130
133
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
131
- margin-right: calc(var(--gap-s) * -1)
132
- } .bank-card__usePhoto_1nnz2 svg {
134
+ margin-right: calc(var(--gap-12) * -1)
135
+ } .bank-card__usePhoto_vapsn svg {
133
136
  fill: var(--color-light-neutral-translucent-1300);
134
137
  display: block;
135
138
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: mna6l */
1
+ /* hash: 1b272 */
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);
@@ -22,11 +22,14 @@
22
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
23
 
24
24
  /* новые значения, используйте их */
25
+ --gap-4: var(--gap-2xs);
26
+ --gap-12: var(--gap-s);
27
+ --gap-20: var(--gap-l);
25
28
  } :root {
26
29
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
27
30
  'Helvetica Neue', Helvetica, sans-serif;
28
31
  } :root {
29
- } .bank-card__component_1nnz2 {
32
+ } .bank-card__component_vapsn {
30
33
  /* TODO: как это будет собираться и работать в webView */
31
34
  --form-control-border-radius: 0;
32
35
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +48,10 @@
45
48
  max-width: 343px;
46
49
 
47
50
  font-family: var(--font-family-styrene);
48
- } .bank-card__aspectRatioContainer_1nnz2 {
51
+ } .bank-card__aspectRatioContainer_vapsn {
49
52
  /* Эталонный размер 343x216 */
50
53
  padding-bottom: 63%;
51
- } .bank-card__content_1nnz2 {
54
+ } .bank-card__content_vapsn {
52
55
  position: absolute;
53
56
  top: 0;
54
57
  right: 0;
@@ -56,30 +59,30 @@
56
59
  left: 0;
57
60
  display: flex;
58
61
  align-items: center;
59
- padding-left: var(--gap-l);
60
- padding-right: var(--gap-l);
62
+ padding-left: var(--gap-20);
63
+ padding-right: var(--gap-20);
61
64
  border-radius: var(--border-radius-l);
62
65
  box-sizing: border-box;
63
- } .bank-card__label_1nnz2 {
66
+ } .bank-card__label_vapsn {
64
67
  left: 0;
65
68
  transform: translateY(-1px);
66
69
  color: var(--color-light-text-secondary);
67
70
  font-size: 20px;
68
71
  line-height: 24px
69
- } @media (max-width: 360px) { .bank-card__label_1nnz2 {
72
+ } @media (max-width: 360px) { .bank-card__label_vapsn {
70
73
  font-size: 16px
71
74
  }
72
- } .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
73
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
75
+ } .bank-card__focused_vapsn .bank-card__label_vapsn,
76
+ .bank-card__filled_vapsn .bank-card__label_vapsn {
74
77
  color: var(--color-light-neutral-translucent-1300);
75
78
  transform: translateY(-19px) scale(0.6)
76
- } @media (max-width: 360px) { .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
77
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
79
+ } @media (max-width: 360px) { .bank-card__focused_vapsn .bank-card__label_vapsn,
80
+ .bank-card__filled_vapsn .bank-card__label_vapsn {
78
81
  transform: translateY(-22px) scale(0.75)
79
82
  }
80
- } .bank-card__focused_1nnz2:before {
83
+ } .bank-card__focused_vapsn:before {
81
84
  transform: scale(1) !important;
82
- } .bank-card__input_1nnz2 {
85
+ } .bank-card__input_vapsn {
83
86
  font-size: 20px;
84
87
  line-height: 24px;
85
88
  font-weight: 400;
@@ -91,28 +94,28 @@
91
94
 
92
95
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
93
96
  padding-left: 0 !important;
94
- padding-bottom: var(--gap-2xs) !important
95
- } @media (max-width: 360px) { .bank-card__input_1nnz2 {
97
+ padding-bottom: var(--gap-4) !important
98
+ } @media (max-width: 360px) { .bank-card__input_vapsn {
96
99
  font-size: 16px
97
100
  }
98
- } .bank-card__bankLogo_1nnz2 {
101
+ } .bank-card__bankLogo_vapsn {
99
102
  position: absolute;
100
103
  top: 20px;
101
104
  left: 20px
102
- } .bank-card__bankLogo_1nnz2 svg {
105
+ } .bank-card__bankLogo_vapsn svg {
103
106
  max-height: 32px;
104
107
  width: auto;
105
108
  display: block
106
- } .bank-card__bankLogo_1nnz2 svg g {
109
+ } .bank-card__bankLogo_vapsn svg g {
107
110
  fill: var(--color-light-neutral-translucent-1300);
108
- } .bank-card__brandLogo_1nnz2 {
111
+ } .bank-card__brandLogo_vapsn {
109
112
  position: absolute;
110
113
  bottom: 20px;
111
114
  right: 20px
112
- } .bank-card__brandLogo_1nnz2 svg {
115
+ } .bank-card__brandLogo_vapsn svg {
113
116
  display: block;
114
117
  fill: var(--color-light-neutral-translucent-1300);
115
- } .bank-card__usePhoto_1nnz2 {
118
+ } .bank-card__usePhoto_vapsn {
116
119
  display: block;
117
120
  margin: 0;
118
121
  padding: 0;
@@ -124,12 +127,12 @@
124
127
  user-select: none;
125
128
  cursor: pointer;
126
129
  outline: none;
127
- margin-bottom: var(--gap-2xs);
130
+ margin-bottom: var(--gap-4);
128
131
  align-self: flex-end;
129
132
 
130
133
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
131
- margin-right: calc(var(--gap-s) * -1)
132
- } .bank-card__usePhoto_1nnz2 svg {
134
+ margin-right: calc(var(--gap-12) * -1)
135
+ } .bank-card__usePhoto_vapsn svg {
133
136
  fill: var(--color-light-neutral-translucent-1300);
134
137
  display: block;
135
138
  }
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_1nnz2","aspectRatioContainer":"bank-card__aspectRatioContainer_1nnz2","content":"bank-card__content_1nnz2","label":"bank-card__label_1nnz2","focused":"bank-card__focused_1nnz2","filled":"bank-card__filled_1nnz2","input":"bank-card__input_1nnz2","bankLogo":"bank-card__bankLogo_1nnz2","brandLogo":"bank-card__brandLogo_1nnz2","usePhoto":"bank-card__usePhoto_1nnz2"};
13
+ const styles = {"component":"bank-card__component_vapsn","aspectRatioContainer":"bank-card__aspectRatioContainer_vapsn","content":"bank-card__content_vapsn","label":"bank-card__label_vapsn","focused":"bank-card__focused_vapsn","filled":"bank-card__filled_vapsn","input":"bank-card__input_vapsn","bankLogo":"bank-card__bankLogo_vapsn","brandLogo":"bank-card__brandLogo_vapsn","usePhoto":"bank-card__usePhoto_vapsn"};
14
14
  require('./index.css')
15
15
 
16
16
  // prettier-ignore
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: mna6l */
1
+ /* hash: 1b272 */
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);
@@ -22,11 +22,14 @@
22
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
23
 
24
24
  /* новые значения, используйте их */
25
+ --gap-4: var(--gap-2xs);
26
+ --gap-12: var(--gap-s);
27
+ --gap-20: var(--gap-l);
25
28
  } :root {
26
29
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
27
30
  'Helvetica Neue', Helvetica, sans-serif;
28
31
  } :root {
29
- } .bank-card__component_1nnz2 {
32
+ } .bank-card__component_vapsn {
30
33
  /* TODO: как это будет собираться и работать в webView */
31
34
  --form-control-border-radius: 0;
32
35
  --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +48,10 @@
45
48
  max-width: 343px;
46
49
 
47
50
  font-family: var(--font-family-styrene);
48
- } .bank-card__aspectRatioContainer_1nnz2 {
51
+ } .bank-card__aspectRatioContainer_vapsn {
49
52
  /* Эталонный размер 343x216 */
50
53
  padding-bottom: 63%;
51
- } .bank-card__content_1nnz2 {
54
+ } .bank-card__content_vapsn {
52
55
  position: absolute;
53
56
  top: 0;
54
57
  right: 0;
@@ -56,30 +59,30 @@
56
59
  left: 0;
57
60
  display: flex;
58
61
  align-items: center;
59
- padding-left: var(--gap-l);
60
- padding-right: var(--gap-l);
62
+ padding-left: var(--gap-20);
63
+ padding-right: var(--gap-20);
61
64
  border-radius: var(--border-radius-l);
62
65
  box-sizing: border-box;
63
- } .bank-card__label_1nnz2 {
66
+ } .bank-card__label_vapsn {
64
67
  left: 0;
65
68
  transform: translateY(-1px);
66
69
  color: var(--color-light-text-secondary);
67
70
  font-size: 20px;
68
71
  line-height: 24px
69
- } @media (max-width: 360px) { .bank-card__label_1nnz2 {
72
+ } @media (max-width: 360px) { .bank-card__label_vapsn {
70
73
  font-size: 16px
71
74
  }
72
- } .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
73
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
75
+ } .bank-card__focused_vapsn .bank-card__label_vapsn,
76
+ .bank-card__filled_vapsn .bank-card__label_vapsn {
74
77
  color: var(--color-light-neutral-translucent-1300);
75
78
  transform: translateY(-19px) scale(0.6)
76
- } @media (max-width: 360px) { .bank-card__focused_1nnz2 .bank-card__label_1nnz2,
77
- .bank-card__filled_1nnz2 .bank-card__label_1nnz2 {
79
+ } @media (max-width: 360px) { .bank-card__focused_vapsn .bank-card__label_vapsn,
80
+ .bank-card__filled_vapsn .bank-card__label_vapsn {
78
81
  transform: translateY(-22px) scale(0.75)
79
82
  }
80
- } .bank-card__focused_1nnz2:before {
83
+ } .bank-card__focused_vapsn:before {
81
84
  transform: scale(1) !important;
82
- } .bank-card__input_1nnz2 {
85
+ } .bank-card__input_vapsn {
83
86
  font-size: 20px;
84
87
  line-height: 24px;
85
88
  font-weight: 400;
@@ -91,28 +94,28 @@
91
94
 
92
95
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
93
96
  padding-left: 0 !important;
94
- padding-bottom: var(--gap-2xs) !important
95
- } @media (max-width: 360px) { .bank-card__input_1nnz2 {
97
+ padding-bottom: var(--gap-4) !important
98
+ } @media (max-width: 360px) { .bank-card__input_vapsn {
96
99
  font-size: 16px
97
100
  }
98
- } .bank-card__bankLogo_1nnz2 {
101
+ } .bank-card__bankLogo_vapsn {
99
102
  position: absolute;
100
103
  top: 20px;
101
104
  left: 20px
102
- } .bank-card__bankLogo_1nnz2 svg {
105
+ } .bank-card__bankLogo_vapsn svg {
103
106
  max-height: 32px;
104
107
  width: auto;
105
108
  display: block
106
- } .bank-card__bankLogo_1nnz2 svg g {
109
+ } .bank-card__bankLogo_vapsn svg g {
107
110
  fill: var(--color-light-neutral-translucent-1300);
108
- } .bank-card__brandLogo_1nnz2 {
111
+ } .bank-card__brandLogo_vapsn {
109
112
  position: absolute;
110
113
  bottom: 20px;
111
114
  right: 20px
112
- } .bank-card__brandLogo_1nnz2 svg {
115
+ } .bank-card__brandLogo_vapsn svg {
113
116
  display: block;
114
117
  fill: var(--color-light-neutral-translucent-1300);
115
- } .bank-card__usePhoto_1nnz2 {
118
+ } .bank-card__usePhoto_vapsn {
116
119
  display: block;
117
120
  margin: 0;
118
121
  padding: 0;
@@ -124,12 +127,12 @@
124
127
  user-select: none;
125
128
  cursor: pointer;
126
129
  outline: none;
127
- margin-bottom: var(--gap-2xs);
130
+ margin-bottom: var(--gap-4);
128
131
  align-self: flex-end;
129
132
 
130
133
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
131
- margin-right: calc(var(--gap-s) * -1)
132
- } .bank-card__usePhoto_1nnz2 svg {
134
+ margin-right: calc(var(--gap-12) * -1)
135
+ } .bank-card__usePhoto_vapsn svg {
133
136
  fill: var(--color-light-neutral-translucent-1300);
134
137
  display: block;
135
138
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-bank-card",
3
- "version": "5.7.12",
3
+ "version": "5.7.13",
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.17",
18
+ "@alfalab/core-components-masked-input": "^6.3.18",
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",
24
+ "themesVersion": "13.0.2",
25
25
  "varsVersion": "9.11.1"
26
26
  }
package/src/index.module.css CHANGED
@@ -35,8 +35,8 @@
35
35
  left: 0;
36
36
  display: flex;
37
37
  align-items: center;
38
- padding-left: var(--gap-l);
39
- padding-right: var(--gap-l);
38
+ padding-left: var(--gap-20);
39
+ padding-right: var(--gap-20);
40
40
  border-radius: var(--border-radius-l);
41
41
  box-sizing: border-box;
42
42
  }
@@ -75,7 +75,7 @@
75
75
 
76
76
  /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
77
77
  padding-left: 0 !important;
78
- padding-bottom: var(--gap-2xs) !important;
78
+ padding-bottom: var(--gap-4) !important;
79
79
 
80
80
  @media (max-width: 360px) {
81
81
  font-size: 16px;
@@ -120,11 +120,11 @@
120
120
  user-select: none;
121
121
  cursor: pointer;
122
122
  outline: none;
123
- margin-bottom: var(--gap-2xs);
123
+ margin-bottom: var(--gap-4);
124
124
  align-self: flex-end;
125
125
 
126
126
  /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
127
- margin-right: calc(var(--gap-s) * -1);
127
+ margin-right: calc(var(--gap-12) * -1);
128
128
 
129
129
  & svg {
130
130
  fill: var(--color-light-neutral-translucent-1300);