amazeui/widget/header/src/header.default.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

/**
  * Header Theme: default
  */

.am-header-default {
  @header-bg: @global-primary;
  @header-title-color: @white;
  @header-title-link-color: @header-title-color;
  @header-nav-color: @gray-lighter;

  background-color: @header-bg;

  .am-header-title {
    color: @header-title-color;

    a {
      color: @header-title-link-color;
    }
  }

  .am-header-icon {
    font-size: 20px;
  }

  .am-header-nav {
    color: @header-nav-color;

    > a {
      display: inline-block;
      min-width: 36px;
      text-align: center;
      color: @header-nav-color;

      & + a {
        margin-left: 5px;
      }
    }

    .am-btn {
      margin-top: 9px;
      height: 31px;
      padding: 0 0.5em;
      line-height: 30px;
      font-size: 14px;
      vertical-align: top;

      .am-header-icon {
        font-size: inherit;
      }
    }

    .am-btn-default {
      color: @gray-light;
    }
  }

  .am-header-nav-title,
  .am-header-nav-title + .am-header-icon {
    font-size: 14px;
  }

  .hook-am-header-default;
}

.hook-am-header-default() {}

// TODO: 使用 flex 布局，让中间部分宽度自适应