tt-mp/core/navbar/index.less

一套组件化、可复用、易扩展的头条小程序 UI 组件库

@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';

.navbar-style(@theme, @bg-color, @color) {
  &--@{theme} {
    background-color: @bg-color;
    color: @color;
  }
}

.@{wux-prefix}-navbar {
  display: flex;
  align-items: center;
  height: @navbar-size;
  background-color: @navbar-light-bg;
  color: @navbar-default-color;

  &__left,
  &__title,
  &__right {
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%;
  }

  &__left {
    padding-left: @navbar-margin;
    font-size: @navbar-font-size;
  }

  &__title {
    justify-content: center;
    font-size: @navbar-font-size + 2px;
    white-space: nowrap;
  }

  &__right {
    justify-content: flex-end;
    font-size: @navbar-font-size;
    margin-right: @navbar-margin;
  }

  .navbar-style(light, @navbar-light-bg, @navbar-default-color);
  .navbar-style(stable, @navbar-stable-bg, @navbar-default-color);
  .navbar-style(primary, @navbar-primary-bg, @navbar-active-color);
  .navbar-style(info, @navbar-info-bg, @navbar-active-color);
  .navbar-style(error, @navbar-error-bg, @navbar-active-color);
  .navbar-style(success, @navbar-success-bg, @navbar-active-color);
  .navbar-style(warning, @navbar-warning-bg, @navbar-active-color);
  .navbar-style(royal, @navbar-royal-bg, @navbar-active-color);
  .navbar-style(dark, @navbar-dark-bg, @navbar-active-color);
}