tdesign-mobile-vue
Version:
tdesign-mobile-vue
48 lines (39 loc) • 926 B
text/less
@import "../../../base.less";
@import "./_var.less";
.@{tab-bar-cls} {
display: flex;
flex-wrap: nowrap;
align-items: center;
position: relative;
font-size: 16px;
background-color: @tab-bar-bg-color;
box-sizing: border-box;
&--normal&--bordered::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: env(safe-area-inset-bottom);
}
&--round {
margin-left: 16px;
margin-right: 16px;
border-radius: 999px;
box-shadow: @tab-bar-round-shadow;
}
&--fixed&--round&--safe {
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
}
&--fixed&--round&--safe {
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
}
}