@alfalab/core-components-tab-bar 2.1.18 → 2.1.19

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 (16) hide show
  1. package/Component.js +1 -1
  2. package/components/tab/Component.js +1 -1
  3. package/components/tab/index.css +8 -8
  4. package/cssm/index.module.css +7 -1
  5. package/esm/Component.js +1 -1
  6. package/esm/components/tab/Component.js +1 -1
  7. package/esm/components/tab/index.css +8 -8
  8. package/esm/index.css +11 -5
  9. package/index.css +11 -5
  10. package/modern/Component.js +1 -1
  11. package/modern/components/tab/Component.js +1 -1
  12. package/modern/components/tab/index.css +8 -8
  13. package/modern/index.css +11 -5
  14. package/moderncssm/index.module.css +8 -4
  15. package/package.json +2 -2
  16. package/src/index.module.css +5 -0
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_124y1","modal-bg-primary":"tab-bar__modal-bg-primary_124y1","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_124y1","border":"tab-bar__border_124y1"};
16
+ var styles = {"component":"tab-bar__component_jiaw5","modal-bg-primary":"tab-bar__modal-bg-primary_jiaw5","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_jiaw5","border":"tab-bar__border_jiaw5"};
17
17
  require('./index.css')
18
18
 
19
19
  var TabBarComponent = React.forwardRef(function (_a, ref) {
package/components/tab/Component.js CHANGED
@@ -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_o3r7i","primary":"tab-bar__primary_o3r7i","secondary":"tab-bar__secondary_o3r7i","icon":"tab-bar__icon_o3r7i","label":"tab-bar__label_o3r7i","labelSelected":"tab-bar__labelSelected_o3r7i","indicator":"tab-bar__indicator_o3r7i"};
17
+ var styles = {"component":"tab-bar__component_qr9fq","primary":"tab-bar__primary_qr9fq","secondary":"tab-bar__secondary_qr9fq","icon":"tab-bar__icon_qr9fq","label":"tab-bar__label_qr9fq","labelSelected":"tab-bar__labelSelected_qr9fq","indicator":"tab-bar__indicator_qr9fq"};
18
18
  require('./index.css')
19
19
 
20
20
  var TabComponent = React.forwardRef(function (_a, ref) {
package/components/tab/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: fck2m */
1
+ /* hash: wdygi */
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;
@@ -30,7 +30,7 @@
30
30
  --gap-8: var(--gap-xs);
31
31
  } :root {
32
32
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
33
- } /* сбрасывает синюю подсветку при нажатии */ .tab-bar__component_o3r7i {
33
+ } /* сбрасывает синюю подсветку при нажатии */ .tab-bar__component_qr9fq {
34
34
  -webkit-tap-highlight-color: transparent;
35
35
  box-sizing: border-box;
36
36
  background-color: transparent;
@@ -54,17 +54,17 @@
54
54
  align-items: center;
55
55
  padding: var(--gap-8) var(--gap-0);
56
56
  color: var(--color-light-neutral-translucent-700);
57
- } .tab-bar__primary_o3r7i {
57
+ } .tab-bar__primary_qr9fq {
58
58
  color: var(--color-light-accent-primary);
59
- } .tab-bar__secondary_o3r7i {
59
+ } .tab-bar__secondary_qr9fq {
60
60
  color: var(--color-light-accent-secondary);
61
- } .tab-bar__icon_o3r7i {
61
+ } .tab-bar__icon_qr9fq {
62
62
  display: flex;
63
63
  align-items: center;
64
64
  justify-content: center;
65
65
  flex-grow: 1;
66
66
  width: 100%;
67
- } .tab-bar__label_o3r7i {
67
+ } .tab-bar__label_qr9fq {
68
68
  -webkit-line-clamp: 1;
69
69
  display: -webkit-box;
70
70
  -webkit-box-orient: vertical;
@@ -73,9 +73,9 @@
73
73
  flex-shrink: 0;
74
74
 
75
75
  color: var(--color-light-text-secondary);
76
- } .tab-bar__labelSelected_o3r7i {
76
+ } .tab-bar__labelSelected_qr9fq {
77
77
  color: inherit;
78
- } .tab-bar__indicator_o3r7i {
78
+ } .tab-bar__indicator_qr9fq {
79
79
  position: absolute;
80
80
  top: 3px;
81
81
  left: calc(50% + var(--gap-4));
package/cssm/index.module.css CHANGED
@@ -21,9 +21,12 @@
21
21
 
22
22
  /* no-unit может приводить к проблемам в calc (#1559) */
23
23
  /* stylelint-disable-next-line length-zero-no-unit */
24
+ --gap-0: 0px;
24
25
  } :root {
25
26
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
26
- } /* сбрасывает синюю подсветку при нажатии */ .component {
27
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
28
+ --sab: env(safe-area-inset-bottom, var(--gap-0));
29
+ } .component {
27
30
  display: flex;
28
31
  justify-content: center;
29
32
  height: 64px;
@@ -35,6 +38,9 @@
35
38
  background-color: var(--color-light-base-bg-primary);
36
39
  } .component.modal-bg-alt-primary {
37
40
  background-color: var(--color-light-base-bg-alt-primary);
41
+ } @media (display-mode: standalone) { .component {
42
+ padding-bottom: var(--sab)
43
+ }
38
44
  } .border {
39
45
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
40
46
  }
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_124y1","modal-bg-primary":"tab-bar__modal-bg-primary_124y1","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_124y1","border":"tab-bar__border_124y1"};
7
+ var styles = {"component":"tab-bar__component_jiaw5","modal-bg-primary":"tab-bar__modal-bg-primary_jiaw5","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_jiaw5","border":"tab-bar__border_jiaw5"};
8
8
  require('./index.css')
9
9
 
10
10
  var TabBarComponent = forwardRef(function (_a, ref) {
package/esm/components/tab/Component.js CHANGED
@@ -5,7 +5,7 @@ import { Indicator } from '@alfalab/core-components-indicator/esm';
5
5
  import { Text } 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_o3r7i","primary":"tab-bar__primary_o3r7i","secondary":"tab-bar__secondary_o3r7i","icon":"tab-bar__icon_o3r7i","label":"tab-bar__label_o3r7i","labelSelected":"tab-bar__labelSelected_o3r7i","indicator":"tab-bar__indicator_o3r7i"};
8
+ var styles = {"component":"tab-bar__component_qr9fq","primary":"tab-bar__primary_qr9fq","secondary":"tab-bar__secondary_qr9fq","icon":"tab-bar__icon_qr9fq","label":"tab-bar__label_qr9fq","labelSelected":"tab-bar__labelSelected_qr9fq","indicator":"tab-bar__indicator_qr9fq"};
9
9
  require('./index.css')
10
10
 
11
11
  var TabComponent = forwardRef(function (_a, ref) {
package/esm/components/tab/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: fck2m */
1
+ /* hash: wdygi */
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;
@@ -30,7 +30,7 @@
30
30
  --gap-8: var(--gap-xs);
31
31
  } :root {
32
32
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
33
- } /* сбрасывает синюю подсветку при нажатии */ .tab-bar__component_o3r7i {
33
+ } /* сбрасывает синюю подсветку при нажатии */ .tab-bar__component_qr9fq {
34
34
  -webkit-tap-highlight-color: transparent;
35
35
  box-sizing: border-box;
36
36
  background-color: transparent;
@@ -54,17 +54,17 @@
54
54
  align-items: center;
55
55
  padding: var(--gap-8) var(--gap-0);
56
56
  color: var(--color-light-neutral-translucent-700);
57
- } .tab-bar__primary_o3r7i {
57
+ } .tab-bar__primary_qr9fq {
58
58
  color: var(--color-light-accent-primary);
59
- } .tab-bar__secondary_o3r7i {
59
+ } .tab-bar__secondary_qr9fq {
60
60
  color: var(--color-light-accent-secondary);
61
- } .tab-bar__icon_o3r7i {
61
+ } .tab-bar__icon_qr9fq {
62
62
  display: flex;
63
63
  align-items: center;
64
64
  justify-content: center;
65
65
  flex-grow: 1;
66
66
  width: 100%;
67
- } .tab-bar__label_o3r7i {
67
+ } .tab-bar__label_qr9fq {
68
68
  -webkit-line-clamp: 1;
69
69
  display: -webkit-box;
70
70
  -webkit-box-orient: vertical;
@@ -73,9 +73,9 @@
73
73
  flex-shrink: 0;
74
74
 
75
75
  color: var(--color-light-text-secondary);
76
- } .tab-bar__labelSelected_o3r7i {
76
+ } .tab-bar__labelSelected_qr9fq {
77
77
  color: inherit;
78
- } .tab-bar__indicator_o3r7i {
78
+ } .tab-bar__indicator_qr9fq {
79
79
  position: absolute;
80
80
  top: 3px;
81
81
  left: calc(50% + var(--gap-4));
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: in7m7 */
1
+ /* hash: 1j5m0 */
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;
@@ -22,9 +22,12 @@
22
22
 
23
23
  /* no-unit может приводить к проблемам в calc (#1559) */
24
24
  /* stylelint-disable-next-line length-zero-no-unit */
25
+ --gap-0: 0px;
25
26
  } :root {
26
27
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
27
- } /* сбрасывает синюю подсветку при нажатии */ .tab-bar__component_124y1 {
28
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
29
+ --sab: env(safe-area-inset-bottom, var(--gap-0));
30
+ } .tab-bar__component_jiaw5 {
28
31
  display: flex;
29
32
  justify-content: center;
30
33
  height: 64px;
@@ -32,10 +35,13 @@
32
35
  box-sizing: border-box;
33
36
  overflow: hidden;
34
37
  transition: box-shadow 0.2s ease
35
- } .tab-bar__component_124y1.tab-bar__modal-bg-primary_124y1 {
38
+ } .tab-bar__component_jiaw5.tab-bar__modal-bg-primary_jiaw5 {
36
39
  background-color: var(--color-light-base-bg-primary);
37
- } .tab-bar__component_124y1.tab-bar__modal-bg-alt-primary_124y1 {
40
+ } .tab-bar__component_jiaw5.tab-bar__modal-bg-alt-primary_jiaw5 {
38
41
  background-color: var(--color-light-base-bg-alt-primary);
39
- } .tab-bar__border_124y1 {
42
+ } @media (display-mode: standalone) { .tab-bar__component_jiaw5 {
43
+ padding-bottom: var(--sab)
44
+ }
45
+ } .tab-bar__border_jiaw5 {
40
46
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
41
47
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: in7m7 */
1
+ /* hash: 1j5m0 */
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;
@@ -22,9 +22,12 @@
22
22
 
23
23
  /* no-unit может приводить к проблемам в calc (#1559) */
24
24
  /* stylelint-disable-next-line length-zero-no-unit */
25
+ --gap-0: 0px;
25
26
  } :root {
26
27
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
27
- } /* сбрасывает синюю подсветку при нажатии */ .tab-bar__component_124y1 {
28
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
29
+ --sab: env(safe-area-inset-bottom, var(--gap-0));
30
+ } .tab-bar__component_jiaw5 {
28
31
  display: flex;
29
32
  justify-content: center;
30
33
  height: 64px;
@@ -32,10 +35,13 @@
32
35
  box-sizing: border-box;
33
36
  overflow: hidden;
34
37
  transition: box-shadow 0.2s ease
35
- } .tab-bar__component_124y1.tab-bar__modal-bg-primary_124y1 {
38
+ } .tab-bar__component_jiaw5.tab-bar__modal-bg-primary_jiaw5 {
36
39
  background-color: var(--color-light-base-bg-primary);
37
- } .tab-bar__component_124y1.tab-bar__modal-bg-alt-primary_124y1 {
40
+ } .tab-bar__component_jiaw5.tab-bar__modal-bg-alt-primary_jiaw5 {
38
41
  background-color: var(--color-light-base-bg-alt-primary);
39
- } .tab-bar__border_124y1 {
42
+ } @media (display-mode: standalone) { .tab-bar__component_jiaw5 {
43
+ padding-bottom: var(--sab)
44
+ }
45
+ } .tab-bar__border_jiaw5 {
40
46
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
41
47
  }
package/modern/Component.js CHANGED
@@ -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_124y1","modal-bg-primary":"tab-bar__modal-bg-primary_124y1","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_124y1","border":"tab-bar__border_124y1"};
6
+ const styles = {"component":"tab-bar__component_jiaw5","modal-bg-primary":"tab-bar__modal-bg-primary_jiaw5","modal-bg-alt-primary":"tab-bar__modal-bg-alt-primary_jiaw5","border":"tab-bar__border_jiaw5"};
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) => {
package/modern/components/tab/Component.js CHANGED
@@ -4,7 +4,7 @@ import { Indicator } from '@alfalab/core-components-indicator/modern';
4
4
  import { Text } 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_o3r7i","primary":"tab-bar__primary_o3r7i","secondary":"tab-bar__secondary_o3r7i","icon":"tab-bar__icon_o3r7i","label":"tab-bar__label_o3r7i","labelSelected":"tab-bar__labelSelected_o3r7i","indicator":"tab-bar__indicator_o3r7i"};
7
+ const styles = {"component":"tab-bar__component_qr9fq","primary":"tab-bar__primary_qr9fq","secondary":"tab-bar__secondary_qr9fq","icon":"tab-bar__icon_qr9fq","label":"tab-bar__label_qr9fq","labelSelected":"tab-bar__labelSelected_qr9fq","indicator":"tab-bar__indicator_qr9fq"};
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) => {
package/modern/components/tab/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: fck2m */
1
+ /* hash: wdygi */
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;
@@ -30,7 +30,7 @@
30
30
  --gap-8: var(--gap-xs);
31
31
  } :root {
32
32
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
33
- } /* сбрасывает синюю подсветку при нажатии */ .tab-bar__component_o3r7i {
33
+ } /* сбрасывает синюю подсветку при нажатии */ .tab-bar__component_qr9fq {
34
34
  -webkit-tap-highlight-color: transparent;
35
35
  box-sizing: border-box;
36
36
  background-color: transparent;
@@ -54,17 +54,17 @@
54
54
  align-items: center;
55
55
  padding: var(--gap-8) var(--gap-0);
56
56
  color: var(--color-light-neutral-translucent-700);
57
- } .tab-bar__primary_o3r7i {
57
+ } .tab-bar__primary_qr9fq {
58
58
  color: var(--color-light-accent-primary);
59
- } .tab-bar__secondary_o3r7i {
59
+ } .tab-bar__secondary_qr9fq {
60
60
  color: var(--color-light-accent-secondary);
61
- } .tab-bar__icon_o3r7i {
61
+ } .tab-bar__icon_qr9fq {
62
62
  display: flex;
63
63
  align-items: center;
64
64
  justify-content: center;
65
65
  flex-grow: 1;
66
66
  width: 100%;
67
- } .tab-bar__label_o3r7i {
67
+ } .tab-bar__label_qr9fq {
68
68
  -webkit-line-clamp: 1;
69
69
  display: -webkit-box;
70
70
  -webkit-box-orient: vertical;
@@ -73,9 +73,9 @@
73
73
  flex-shrink: 0;
74
74
 
75
75
  color: var(--color-light-text-secondary);
76
- } .tab-bar__labelSelected_o3r7i {
76
+ } .tab-bar__labelSelected_qr9fq {
77
77
  color: inherit;
78
- } .tab-bar__indicator_o3r7i {
78
+ } .tab-bar__indicator_qr9fq {
79
79
  position: absolute;
80
80
  top: 3px;
81
81
  left: calc(50% + var(--gap-4));
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: in7m7 */
1
+ /* hash: 1j5m0 */
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;
@@ -22,9 +22,12 @@
22
22
 
23
23
  /* no-unit может приводить к проблемам в calc (#1559) */
24
24
  /* stylelint-disable-next-line length-zero-no-unit */
25
+ --gap-0: 0px;
25
26
  } :root {
26
27
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
27
- } /* сбрасывает синюю подсветку при нажатии */ .tab-bar__component_124y1 {
28
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
29
+ --sab: env(safe-area-inset-bottom, var(--gap-0));
30
+ } .tab-bar__component_jiaw5 {
28
31
  display: flex;
29
32
  justify-content: center;
30
33
  height: 64px;
@@ -32,10 +35,13 @@
32
35
  box-sizing: border-box;
33
36
  overflow: hidden;
34
37
  transition: box-shadow 0.2s ease
35
- } .tab-bar__component_124y1.tab-bar__modal-bg-primary_124y1 {
38
+ } .tab-bar__component_jiaw5.tab-bar__modal-bg-primary_jiaw5 {
36
39
  background-color: var(--color-light-base-bg-primary);
37
- } .tab-bar__component_124y1.tab-bar__modal-bg-alt-primary_124y1 {
40
+ } .tab-bar__component_jiaw5.tab-bar__modal-bg-alt-primary_jiaw5 {
38
41
  background-color: var(--color-light-base-bg-alt-primary);
39
- } .tab-bar__border_124y1 {
42
+ } @media (display-mode: standalone) { .tab-bar__component_jiaw5 {
43
+ padding-bottom: var(--sab)
44
+ }
45
+ } .tab-bar__border_jiaw5 {
40
46
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
41
47
  }
package/moderncssm/index.module.css CHANGED
@@ -1,5 +1,7 @@
1
1
  /* */
2
-
2
+ :root {
3
+ --sab: env(safe-area-inset-bottom, var(--gap-0));
4
+ }
3
5
  .component {
4
6
  display: flex;
5
7
  justify-content: center;
@@ -9,15 +11,17 @@
9
11
  overflow: hidden;
10
12
  transition: box-shadow 0.2s ease
11
13
  }
12
-
13
14
  .component.modal-bg-primary {
14
15
  background-color: var(--color-light-base-bg-primary);
15
16
  }
16
-
17
17
  .component.modal-bg-alt-primary {
18
18
  background-color: var(--color-light-base-bg-alt-primary);
19
19
  }
20
-
20
+ @media (display-mode: standalone) {
21
+ .component {
22
+ padding-bottom: var(--sab)
23
+ }
24
+ }
21
25
  .border {
22
26
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-translucent-300);
23
27
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-tab-bar",
3
- "version": "2.1.18",
3
+ "version": "2.1.19",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -23,5 +23,5 @@
23
23
  "tslib": "^2.4.0"
24
24
  },
25
25
  "themesVersion": "13.7.4",
26
- "varsVersion": "9.20.1"
26
+ "varsVersion": "9.21.0"
27
27
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @import '@alfalab/core-components-vars/src/index.css';
2
+ @import '@alfalab/core-components-vars/src/safe-area.css';
2
3
 
3
4
  .component {
4
5
  display: flex;
@@ -16,6 +17,10 @@
16
17
  &.modal-bg-alt-primary {
17
18
  background-color: var(--color-light-base-bg-alt-primary);
18
19
  }
20
+
21
+ @media (display-mode: standalone) {
22
+ padding-bottom: var(--sab);
23
+ }
19
24
  }
20
25
 
21
26
  .border {