amazeui/widget/tabs/src/tabs.d2.less

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

/**
  * Tabs Theme: d2
  */

.am-tabs-d2 {
  @tabs-nav-bg: @gray-lighter;
  @tabs-nav-active-bg: lighten(@gray-lighter, 5.5%);
  @tabs-nav-color: @gray-darker;
  @tabs-nav-active-color: @global-primary;

  .am-tabs-nav {
    background-color: @tabs-nav-bg;

    li {
      height: 42px;
    }

    a {
      color: @tabs-nav-color;
      line-height: 42px;
    }

    > .am-active {
      position: relative;
      background-color: @tabs-nav-active-bg;
      border-bottom: 2px solid @tabs-nav-active-color;

      a {
        line-height: 40px;
        color: @tabs-nav-active-color;
      }

      &:after {
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0px;
        left: 50%;
        margin-left: -5px;
        border: 6px rgba(0, 0, 0, 0) solid;
        content: "";
        z-index: 1;
        border-bottom-color: @tabs-nav-active-color;
      }
    }
  }

  .hook-am-tabs-d2;
}

.hook-am-tabs-d2() {}