tdesign-mobile-vue/esm/_common/style/mobile/components/navbar/_index.less

tdesign-mobile-vue

@import "../../base.less";

@import "./_var.less";

.@{prefix}-navbar {
  background-color: @bg-color-container;
  position: relative;
  display: flex;
  height: @navbar-height;
  align-items: center;
  justify-content: center;
  font-size: @navbar-font-size;
  top: 0;
  left: 0;
  width: 100%;

  & .@{prefix}-icon {
    font-size: @navbar-icon-font-size;
  }

  &__back {
    cursor: pointer;
    position: absolute;
    left: @navbar-horizontal-padding;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;

    &--arrow {
      margin-right: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  &__text {
    font-family: PingFangSC-Medium;
    user-select: none;
    color: @navbar-font-color;
    letter-spacing: 0;
    text-align: center;
  }

  &__right {
    position: absolute;
    right: @navbar-horizontal-padding;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;

    &--more {
      margin-left: @navbar-horizontal-padding;
      font-style: normal;
      display: inline-block;
    }
  }
}