amazeui/widget/titlebar/src/titlebar.one.less

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

/**
  * Titlebar Theme: one
  */

.am-titlebar-one {

  @titlebar-bg: @white;
  @titlebar-color: @one-primary;
  @titlebar-title-color: @gray-darker;
  @titlebar-title-link-color: @gray-darker;
  @titlebar-border-color: @one-primary;
  @titlebar-nav-link-color: @gray-light;

  display: flex;
  margin-left: 10px;
  margin-right: 10px;
  height: 45px;
  line-height: 44px;
  background-color: @titlebar-bg;
  overflow: hidden;
  border-bottom: 1px solid @titlebar-border-color;

  .am-titlebar-title {
    padding-left: 12px;
    position: relative;
    color: @titlebar-title-color;
    .text-overflow();

    &:before {
      content: "";
      position: absolute;
      left: 2px;
      top: 8px;
      bottom: 8px;
      border-left: 3px solid @titlebar-color;
    }

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

    img {
      height: 24px;
      vertical-align: top;
      margin-top: 10px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    em {
      font-style: normal;
      font-weight: normal;
      margin-bottom: 0;
    }

    ul,
    li {
      list-style: none;
      padding-left: 0;
    }
  }

  .am-titlebar-nav {
    flex: 1;
    text-align: right;
    padding-right: 5px;
    color: @titlebar-nav-link-color;
    font-size: 1.4rem;

    a {
      color: @titlebar-nav-link-color;
    }
  }

  .hook-am-titlebar-one;
}

.hook-am-titlebar-one() {}