antd-mobile/lib/nav-bar/style/index.less

基于 React 的移动设计规范实现

@import '../../style/mixins';
@import '../../style/themes/default';

@navbarPrefixCls: am-navbar;
.@{navbarPrefixCls} {
  .display-box;
  .box-align;
  padding: @h-spacing-sm @h-spacing-lg;
  background-color: @brand-primary;
  color: @fill-base;
  &-light {
    background-color: @fill-base;
    color: @brand-primary;
  }
  &-left {
    .box-flex(1);
    font-size: @link-button-font-size;
    &-icon {
      margin-right: @h-spacing-sm;
    }
  }
  &-title {
    .box-flex(1);
    .ellipsis;
    max-width: 80%;
    text-align: center;
    font-size: @font-size-display-sm;
    line-height: 1.5;
  }
  &-light &-title {
    color: @color-text-base;
  }
  &-right {
    .box-flex(1);
    font-size: @link-button-font-size;
    text-align: right;
    .anticon {
      margin-right: @h-spacing-sm;
      &:last-child {
        margin-right: 0;
      }
    }
    &-content {
      margin-right: @h-spacing-sm;
    }
  }
}