amazeui/widget/titlebar/src/titlebar.cols.less

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

/**
  * Titlebar Theme: cols
  */

.am-titlebar-cols {
  @titlebar-bg: #f5f5f5;
  @titlebar-color: @gray;
  @titlebar-border-color: darken(@titlebar-bg, 8%);
  @titlebar-link-color: @gray;
  @titlebar-link-active-color: @global-primary;

  position: relative;
  display: flex;
  padding-left: 10px;
  background-color: @titlebar-bg;
  color: @titlebar-color;
  font-size: 18px;
  border-top: 2px solid @titlebar-border-color;
  line-height: 41px;

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

  .am-titlebar-title {
    color: @titlebar-link-active-color;
    margin-right: 15px;
    border-bottom: 2px solid @titlebar-link-active-color;
    font-weight: bold;

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

  .am-titlebar-nav {
    flex: 1;

    a {
      display: inline-block;
      margin-right: 15px;
      line-height: 41px;
      border-bottom: 2px solid transparent;

      &:hover {
        color: darken(@titlebar-link-color, 10%);
        border-bottom-color: @titlebar-link-active-color;
      }

      &:last-child {
        margin-right: 10px;
      }
    }
  }

  .hook-am-titlebar-cols;
}

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