@alfalab/core-components-tab-bar 2.1.0 → 2.1.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.
package/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"tab-bar__component_1vfmj","modal-bg-primary":"tab-bar__modal-bg-primary_1vfmj","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1vfmj","border":"tab-bar__border_1vfmj"};
16
+ var styles = {"component":"tab-bar__component_9k0ye","modal-bg-primary":"tab-bar__modal-bg-primary_9k0ye","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_9k0ye","border":"tab-bar__border_9k0ye"};
17
17
  require('./index.css')
18
18
 
19
19
  var TabBarComponent = React.forwardRef(function (_a, ref) {
@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
14
14
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
16
 
17
- var styles = {"component":"tab-bar__component_q3xl2","primary":"tab-bar__primary_q3xl2","secondary":"tab-bar__secondary_q3xl2","icon":"tab-bar__icon_q3xl2","label":"tab-bar__label_q3xl2","labelSelected":"tab-bar__labelSelected_q3xl2","indicator":"tab-bar__indicator_q3xl2"};
17
+ var styles = {"component":"tab-bar__component_1bx2r","primary":"tab-bar__primary_1bx2r","secondary":"tab-bar__secondary_1bx2r","icon":"tab-bar__icon_1bx2r","label":"tab-bar__label_1bx2r","labelSelected":"tab-bar__labelSelected_1bx2r","indicator":"tab-bar__indicator_1bx2r"};
18
18
  require('./index.css')
19
19
 
20
20
  var TabComponent = React.forwardRef(function (_a, ref) {
@@ -1,4 +1,4 @@
1
- /* hash: 1gdpb */
1
+ /* hash: 1ahji */
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-accent-primary: #ef3124;
@@ -22,17 +22,18 @@
22
22
  --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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-0: 0;
25
26
  --gap-4: var(--gap-2xs);
26
27
  --gap-8: var(--gap-xs);
27
28
  } :root {
28
29
  } :root {
29
- } .tab-bar__component_q3xl2 {
30
+ } .tab-bar__component_1bx2r {
30
31
  box-sizing: border-box;
31
32
  background-color: transparent;
32
33
  -webkit-tap-highlight-color: transparent;
33
34
  outline: none;
34
35
  border: 0;
35
- margin: 0;
36
+ margin: var(--gap-0);
36
37
  box-shadow: none;
37
38
  border-radius: 0;
38
39
  -webkit-user-select: none;
@@ -48,19 +49,19 @@
48
49
  flex-direction: column;
49
50
  flex: 1 0 0;
50
51
  align-items: center;
51
- padding: var(--gap-8) 0;
52
+ padding: var(--gap-8) var(--gap-0);
52
53
  color: var(--color-light-neutral-translucent-700);
53
- } .tab-bar__primary_q3xl2 {
54
+ } .tab-bar__primary_1bx2r {
54
55
  color: var(--color-light-accent-primary);
55
- } .tab-bar__secondary_q3xl2 {
56
+ } .tab-bar__secondary_1bx2r {
56
57
  color: var(--color-light-accent-secondary);
57
- } .tab-bar__icon_q3xl2 {
58
+ } .tab-bar__icon_1bx2r {
58
59
  display: flex;
59
60
  align-items: center;
60
61
  justify-content: center;
61
62
  flex-grow: 1;
62
63
  width: 100%;
63
- } .tab-bar__label_q3xl2 {
64
+ } .tab-bar__label_1bx2r {
64
65
  -webkit-line-clamp: 1;
65
66
  display: -webkit-box;
66
67
  -webkit-box-orient: vertical;
@@ -69,9 +70,9 @@
69
70
  flex-shrink: 0;
70
71
 
71
72
  color: var(--color-light-text-secondary);
72
- } .tab-bar__labelSelected_q3xl2 {
73
+ } .tab-bar__labelSelected_1bx2r {
73
74
  color: inherit;
74
- } .tab-bar__indicator_q3xl2 {
75
+ } .tab-bar__indicator_1bx2r {
75
76
  position: absolute;
76
77
  top: 3px;
77
78
  left: calc(50% + var(--gap-4));
@@ -21,6 +21,7 @@
21
21
  --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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-0: 0;
24
25
  --gap-4: var(--gap-2xs);
25
26
  --gap-8: var(--gap-xs);
26
27
  } :root {
@@ -31,7 +32,7 @@
31
32
  -webkit-tap-highlight-color: transparent;
32
33
  outline: none;
33
34
  border: 0;
34
- margin: 0;
35
+ margin: var(--gap-0);
35
36
  box-shadow: none;
36
37
  border-radius: 0;
37
38
  -webkit-user-select: none;
@@ -47,7 +48,7 @@
47
48
  flex-direction: column;
48
49
  flex: 1 0 0;
49
50
  align-items: center;
50
- padding: var(--gap-8) 0;
51
+ padding: var(--gap-8) var(--gap-0);
51
52
  color: var(--color-light-neutral-translucent-700);
52
53
  } .primary {
53
54
  color: var(--color-light-accent-primary);
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { getDataTestId } from '@alfalab/core-components-shared/esm';
5
5
  import { Tab } from './components/tab/Component.js';
6
6
 
7
- var styles = {"component":"tab-bar__component_1vfmj","modal-bg-primary":"tab-bar__modal-bg-primary_1vfmj","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1vfmj","border":"tab-bar__border_1vfmj"};
7
+ var styles = {"component":"tab-bar__component_9k0ye","modal-bg-primary":"tab-bar__modal-bg-primary_9k0ye","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_9k0ye","border":"tab-bar__border_9k0ye"};
8
8
  require('./index.css')
9
9
 
10
10
  var TabBarComponent = forwardRef(function (_a, ref) {
@@ -5,7 +5,7 @@ import { Indicator } from '@alfalab/core-components-indicator/esm';
5
5
  import { Typography } from '@alfalab/core-components-typography/esm';
6
6
  import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
7
7
 
8
- var styles = {"component":"tab-bar__component_q3xl2","primary":"tab-bar__primary_q3xl2","secondary":"tab-bar__secondary_q3xl2","icon":"tab-bar__icon_q3xl2","label":"tab-bar__label_q3xl2","labelSelected":"tab-bar__labelSelected_q3xl2","indicator":"tab-bar__indicator_q3xl2"};
8
+ var styles = {"component":"tab-bar__component_1bx2r","primary":"tab-bar__primary_1bx2r","secondary":"tab-bar__secondary_1bx2r","icon":"tab-bar__icon_1bx2r","label":"tab-bar__label_1bx2r","labelSelected":"tab-bar__labelSelected_1bx2r","indicator":"tab-bar__indicator_1bx2r"};
9
9
  require('./index.css')
10
10
 
11
11
  var TabComponent = forwardRef(function (_a, ref) {
@@ -1,4 +1,4 @@
1
- /* hash: 1gdpb */
1
+ /* hash: 1ahji */
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-accent-primary: #ef3124;
@@ -22,17 +22,18 @@
22
22
  --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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-0: 0;
25
26
  --gap-4: var(--gap-2xs);
26
27
  --gap-8: var(--gap-xs);
27
28
  } :root {
28
29
  } :root {
29
- } .tab-bar__component_q3xl2 {
30
+ } .tab-bar__component_1bx2r {
30
31
  box-sizing: border-box;
31
32
  background-color: transparent;
32
33
  -webkit-tap-highlight-color: transparent;
33
34
  outline: none;
34
35
  border: 0;
35
- margin: 0;
36
+ margin: var(--gap-0);
36
37
  box-shadow: none;
37
38
  border-radius: 0;
38
39
  -webkit-user-select: none;
@@ -48,19 +49,19 @@
48
49
  flex-direction: column;
49
50
  flex: 1 0 0;
50
51
  align-items: center;
51
- padding: var(--gap-8) 0;
52
+ padding: var(--gap-8) var(--gap-0);
52
53
  color: var(--color-light-neutral-translucent-700);
53
- } .tab-bar__primary_q3xl2 {
54
+ } .tab-bar__primary_1bx2r {
54
55
  color: var(--color-light-accent-primary);
55
- } .tab-bar__secondary_q3xl2 {
56
+ } .tab-bar__secondary_1bx2r {
56
57
  color: var(--color-light-accent-secondary);
57
- } .tab-bar__icon_q3xl2 {
58
+ } .tab-bar__icon_1bx2r {
58
59
  display: flex;
59
60
  align-items: center;
60
61
  justify-content: center;
61
62
  flex-grow: 1;
62
63
  width: 100%;
63
- } .tab-bar__label_q3xl2 {
64
+ } .tab-bar__label_1bx2r {
64
65
  -webkit-line-clamp: 1;
65
66
  display: -webkit-box;
66
67
  -webkit-box-orient: vertical;
@@ -69,9 +70,9 @@
69
70
  flex-shrink: 0;
70
71
 
71
72
  color: var(--color-light-text-secondary);
72
- } .tab-bar__labelSelected_q3xl2 {
73
+ } .tab-bar__labelSelected_1bx2r {
73
74
  color: inherit;
74
- } .tab-bar__indicator_q3xl2 {
75
+ } .tab-bar__indicator_1bx2r {
75
76
  position: absolute;
76
77
  top: 3px;
77
78
  left: calc(50% + var(--gap-4));
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: fulgz */
1
+ /* hash: 1sc93 */
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-base-bg-alt-primary: #f2f3f5;
@@ -21,7 +21,7 @@
21
21
  /* новые значения, используйте их */
22
22
  } :root {
23
23
  } :root {
24
- } .tab-bar__component_1vfmj {
24
+ } .tab-bar__component_9k0ye {
25
25
  display: flex;
26
26
  justify-content: center;
27
27
  height: 64px;
@@ -29,10 +29,10 @@
29
29
  box-sizing: border-box;
30
30
  overflow: hidden;
31
31
  transition: box-shadow 0.2s ease
32
- } .tab-bar__component_1vfmj.tab-bar__modal-bg-primary_1vfmj {
32
+ } .tab-bar__component_9k0ye.tab-bar__modal-bg-primary_9k0ye {
33
33
  background-color: var(--color-light-base-bg-primary);
34
- } .tab-bar__component_1vfmj.tab-bar__modal-bg-alt-primary_1vfmj {
34
+ } .tab-bar__component_9k0ye.tab-bar__modal-bg-alt-primary_9k0ye {
35
35
  background-color: var(--color-light-base-bg-alt-primary);
36
- } .tab-bar__border_1vfmj {
36
+ } .tab-bar__border_9k0ye {
37
37
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
38
38
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: fulgz */
1
+ /* hash: 1sc93 */
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-base-bg-alt-primary: #f2f3f5;
@@ -21,7 +21,7 @@
21
21
  /* новые значения, используйте их */
22
22
  } :root {
23
23
  } :root {
24
- } .tab-bar__component_1vfmj {
24
+ } .tab-bar__component_9k0ye {
25
25
  display: flex;
26
26
  justify-content: center;
27
27
  height: 64px;
@@ -29,10 +29,10 @@
29
29
  box-sizing: border-box;
30
30
  overflow: hidden;
31
31
  transition: box-shadow 0.2s ease
32
- } .tab-bar__component_1vfmj.tab-bar__modal-bg-primary_1vfmj {
32
+ } .tab-bar__component_9k0ye.tab-bar__modal-bg-primary_9k0ye {
33
33
  background-color: var(--color-light-base-bg-primary);
34
- } .tab-bar__component_1vfmj.tab-bar__modal-bg-alt-primary_1vfmj {
34
+ } .tab-bar__component_9k0ye.tab-bar__modal-bg-alt-primary_9k0ye {
35
35
  background-color: var(--color-light-base-bg-alt-primary);
36
- } .tab-bar__border_1vfmj {
36
+ } .tab-bar__border_9k0ye {
37
37
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
38
38
  }
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import { getDataTestId } from '@alfalab/core-components-shared/modern';
4
4
  import { Tab } from './components/tab/Component.js';
5
5
 
6
- const styles = {"component":"tab-bar__component_1vfmj","modal-bg-primary":"tab-bar__modal-bg-primary_1vfmj","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_1vfmj","border":"tab-bar__border_1vfmj"};
6
+ const styles = {"component":"tab-bar__component_9k0ye","modal-bg-primary":"tab-bar__modal-bg-primary_9k0ye","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_9k0ye","border":"tab-bar__border_9k0ye"};
7
7
  require('./index.css')
8
8
 
9
9
  const TabBarComponent = forwardRef(({ children, className, selectedId, border, dataTestId, tabClassNames, onChange, accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
@@ -4,7 +4,7 @@ import { Indicator } from '@alfalab/core-components-indicator/modern';
4
4
  import { Typography } from '@alfalab/core-components-typography/modern';
5
5
  import { INDICATOR_BORDER_COLOR, INDICATOR_BG_COLOR } from '../../consts.js';
6
6
 
7
- const styles = {"component":"tab-bar__component_q3xl2","primary":"tab-bar__primary_q3xl2","secondary":"tab-bar__secondary_q3xl2","icon":"tab-bar__icon_q3xl2","label":"tab-bar__label_q3xl2","labelSelected":"tab-bar__labelSelected_q3xl2","indicator":"tab-bar__indicator_q3xl2"};
7
+ const styles = {"component":"tab-bar__component_1bx2r","primary":"tab-bar__primary_1bx2r","secondary":"tab-bar__secondary_1bx2r","icon":"tab-bar__icon_1bx2r","label":"tab-bar__label_1bx2r","labelSelected":"tab-bar__labelSelected_1bx2r","indicator":"tab-bar__indicator_1bx2r"};
8
8
  require('./index.css')
9
9
 
10
10
  const TabComponent = forwardRef(({ showIndicator, indicatorProps, label, icon, id, selected, onChange, onClick, tabClassNames = {}, dataTestId, className, labelClassName, selectedClassName, iconClassName, href, Component = href ? 'a' : 'button', accentColor = 'primary', bgColor = 'modal-bg-primary', ...restProps }, ref) => {
@@ -1,4 +1,4 @@
1
- /* hash: 1gdpb */
1
+ /* hash: 1ahji */
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-accent-primary: #ef3124;
@@ -22,17 +22,18 @@
22
22
  --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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-0: 0;
25
26
  --gap-4: var(--gap-2xs);
26
27
  --gap-8: var(--gap-xs);
27
28
  } :root {
28
29
  } :root {
29
- } .tab-bar__component_q3xl2 {
30
+ } .tab-bar__component_1bx2r {
30
31
  box-sizing: border-box;
31
32
  background-color: transparent;
32
33
  -webkit-tap-highlight-color: transparent;
33
34
  outline: none;
34
35
  border: 0;
35
- margin: 0;
36
+ margin: var(--gap-0);
36
37
  box-shadow: none;
37
38
  border-radius: 0;
38
39
  -webkit-user-select: none;
@@ -48,19 +49,19 @@
48
49
  flex-direction: column;
49
50
  flex: 1 0 0;
50
51
  align-items: center;
51
- padding: var(--gap-8) 0;
52
+ padding: var(--gap-8) var(--gap-0);
52
53
  color: var(--color-light-neutral-translucent-700);
53
- } .tab-bar__primary_q3xl2 {
54
+ } .tab-bar__primary_1bx2r {
54
55
  color: var(--color-light-accent-primary);
55
- } .tab-bar__secondary_q3xl2 {
56
+ } .tab-bar__secondary_1bx2r {
56
57
  color: var(--color-light-accent-secondary);
57
- } .tab-bar__icon_q3xl2 {
58
+ } .tab-bar__icon_1bx2r {
58
59
  display: flex;
59
60
  align-items: center;
60
61
  justify-content: center;
61
62
  flex-grow: 1;
62
63
  width: 100%;
63
- } .tab-bar__label_q3xl2 {
64
+ } .tab-bar__label_1bx2r {
64
65
  -webkit-line-clamp: 1;
65
66
  display: -webkit-box;
66
67
  -webkit-box-orient: vertical;
@@ -69,9 +70,9 @@
69
70
  flex-shrink: 0;
70
71
 
71
72
  color: var(--color-light-text-secondary);
72
- } .tab-bar__labelSelected_q3xl2 {
73
+ } .tab-bar__labelSelected_1bx2r {
73
74
  color: inherit;
74
- } .tab-bar__indicator_q3xl2 {
75
+ } .tab-bar__indicator_1bx2r {
75
76
  position: absolute;
76
77
  top: 3px;
77
78
  left: calc(50% + var(--gap-4));
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: fulgz */
1
+ /* hash: 1sc93 */
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-base-bg-alt-primary: #f2f3f5;
@@ -21,7 +21,7 @@
21
21
  /* новые значения, используйте их */
22
22
  } :root {
23
23
  } :root {
24
- } .tab-bar__component_1vfmj {
24
+ } .tab-bar__component_9k0ye {
25
25
  display: flex;
26
26
  justify-content: center;
27
27
  height: 64px;
@@ -29,10 +29,10 @@
29
29
  box-sizing: border-box;
30
30
  overflow: hidden;
31
31
  transition: box-shadow 0.2s ease
32
- } .tab-bar__component_1vfmj.tab-bar__modal-bg-primary_1vfmj {
32
+ } .tab-bar__component_9k0ye.tab-bar__modal-bg-primary_9k0ye {
33
33
  background-color: var(--color-light-base-bg-primary);
34
- } .tab-bar__component_1vfmj.tab-bar__modal-bg-alt-primary_1vfmj {
34
+ } .tab-bar__component_9k0ye.tab-bar__modal-bg-alt-primary_9k0ye {
35
35
  background-color: var(--color-light-base-bg-alt-primary);
36
- } .tab-bar__border_1vfmj {
36
+ } .tab-bar__border_9k0ye {
37
37
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
38
38
  }
@@ -6,7 +6,7 @@
6
6
  -webkit-tap-highlight-color: transparent;
7
7
  outline: none;
8
8
  border: 0;
9
- margin: 0;
9
+ margin: var(--gap-0);
10
10
  box-shadow: none;
11
11
  border-radius: 0;
12
12
  -webkit-user-select: none;
@@ -22,7 +22,7 @@
22
22
  flex-direction: column;
23
23
  flex: 1 0 0;
24
24
  align-items: center;
25
- padding: var(--gap-8) 0;
25
+ padding: var(--gap-8) var(--gap-0);
26
26
  color: var(--color-light-neutral-translucent-700);
27
27
  }
28
28
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-tab-bar",
3
- "version": "2.1.0",
3
+ "version": "2.1.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,12 +15,12 @@
15
15
  "react-dom": ">=16.8.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-typography": "^4.10.0",
19
- "@alfalab/core-components-indicator": "^2.2.0",
20
- "@alfalab/core-components-shared": "^0.12.0",
18
+ "@alfalab/core-components-typography": "^4.10.1",
19
+ "@alfalab/core-components-indicator": "^2.2.1",
20
+ "@alfalab/core-components-shared": "^0.12.1",
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
  }
@@ -8,7 +8,7 @@
8
8
  flex-direction: column;
9
9
  flex: 1 0 0;
10
10
  align-items: center;
11
- padding: var(--gap-8) 0;
11
+ padding: var(--gap-8) var(--gap-0);
12
12
  color: var(--color-light-neutral-translucent-700);
13
13
  }
14
14