tdesign-miniprogram/packages/components/tab-bar/tab-bar.less at 9c4ad748f94f012780d96c7a9e0f969fe5e7c191 · Tencent/tdesign-miniprogram · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@import '../common/style/base.less';

@tab-bar-cls: ~'@{prefix}-tab-bar';

@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container);
@tab-bar-border-color: var(--td-tab-bar-border-color, @border-level-1-color);
@tab-bar-round-shadow: var(--td-tab-bar-round-shadow, @shadow-3);

.@{tab-bar-cls} {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  background-color: @tab-bar-bg-color;
  box-sizing: border-box;
  pointer-events: auto;

  &--normal&--border::before {
    z-index: 1;
    .hairline-top(@color: @tab-bar-border-color);
  }

  &--fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
  }

  &--normal&--safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: var(--safe-area-inset-bottom);
  }

  &--round {
    margin-left: 32rpx;
    margin-right: 32rpx;
    border-radius: 999px;
    box-shadow: @tab-bar-round-shadow;
  }

  &--fixed&--round&--safe {
    bottom: constant(safe-area-inset-bottom);
    bottom: var(--safe-area-inset-bottom);
  }
}