atui/src/styles/navs.less

components built with Vue.js

// Navs
// --------------------------------------------------
@prefix-cls-nav: e("@{prefix-cls}-nav");
@prefix-cls-tab: e("@{prefix-cls}-tab");

@nav-link-padding:                          13px 30px;
@nav-link-hover-bg:                         @gray-lighter;
@nav-link-default-color:                    #999;
@nav-link-hover-color:                      tint(@primary-color, 40%);

@nav-disabled-link-color:                   @gray-light;
@nav-disabled-link-hover-color:             @gray-light;

//== Tabs
@nav-tabs-border-color:                     @gray-light;

@nav-tabs-link-hover-border-color:          @gray-lighter;

@nav-tabs-active-link-hover-bg:             @body-bg;
// @nav-tabs-active-link-hover-color:          @gray;
@nav-tabs-active-link-hover-color:          @primary-color;
@nav-tabs-active-link-hover-border-color:   @gray-light;

@nav-tabs-justified-link-border-color:            #ddd;
@nav-tabs-justified-active-link-border-color:     @body-bg;

//== Base
@nav-tabs-link-base-hover-border-color:     @nav-link-hover-color;
@nav-disabled-link-base-hover-border-color: @nav-tabs-border-color;


//== Pills
@nav-pills-border-radius:                   @border-radius-base;
@nav-pills-active-link-hover-bg:            @primary-color;
@nav-pills-active-link-hover-color:         @component-active-color;


// Base class
// --------------------------------------------------
.@{prefix-cls-nav} {
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  &:extend(.clearfix all);
  transition: transform .3s linear;

  > li {
    position: relative;
    display: block;

    > a {
      position: relative;
      display: block;
      padding: @nav-link-padding;
      color: @nav-link-default-color;
      &:hover,
      &:focus {
        color: @nav-link-hover-color;
        text-decoration: none;
        background-color: @nav-link-hover-bg;
      }
    }

    // Disabled state sets text to gray and nukes hover/tab effects
    &.@{prefix-cls-nav}-disabled > a {
      color: @nav-disabled-link-color;

      &:hover,
      &:focus {
        color: @nav-disabled-link-hover-color;
        text-decoration: none;
        background-color: transparent;
        cursor: @cursor-disabled;
      }
    }
  }

  // Open dropdowns
  .open > a {
    &,
    &:hover,
    &:focus {
      background-color: @nav-link-hover-bg;
      border-color: @link-color;
    }
  }

  // Nav dividers (deprecated with v3.0.1)
  //
  // This should have been removed in v3 with the dropping of `.@{prefix-cls-nav}-list`, but
  // we missed it. We don't currently support this anywhere, but in the interest
  // of maintaining backward compatibility in case you use it, it's deprecated.
  .@{prefix-cls-nav}-divider {
    .nav-divider();
  }

  // Prevent IE8 from misplacing imgs
  //
  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
  > li > a > img {
    max-width: none;
  }
}


// Tabs
// -------------------------
.@{prefix-cls-tab}-wrapper {
    .@{prefix-cls-tab}-header {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
      // padding-left: 20px;
      // padding-right: 20px;
      width: 100%;
      margin-bottom: 15px;
    }

    .@{prefix-cls-tab}-arrow-next ,.@{prefix-cls-tab}-arrow-prev {
      position: absolute;
      top: -2px;
      z-index: 10;
      cursor: pointer;
      display: inline-block;
      width: 20px;
      height: 54px;
      line-height: 54px;
      text-align: center;
      background-color: #fff;
    }

    .@{prefix-cls-tab}-arrow-prev {
      left: 0;
    }

    .@{prefix-cls-tab}-arrow-next {
      right: 0;
    }

.@{prefix-cls-nav}-tab {
  border-bottom: 1px solid @nav-tabs-border-color;

  &.@{prefix-cls-nav}-small {
    font-size: 12px;
  }

  > li {
    float: left;
    // Make the list-items overlay the bottom border
    margin-bottom: -1px;

    // Actual tabs (as links)
    > a {
      margin-right: 2px;
      line-height: @line-height-base;
      border: 1px solid transparent;
      border-radius: @border-radius-base @border-radius-base 0 0;
      outline: none;
      &:hover {
        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
      }
    }

    // Active state, and its :hover to override normal :hover
    &.@{prefix-cls-nav}-active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-tabs-active-link-hover-color;
        background-color: @nav-tabs-active-link-hover-bg;
        border: 1px solid @nav-tabs-active-link-hover-border-color;
        border-bottom-color: transparent;
        cursor: default;
      }
    }
  }
  // pulling this in mainly for less shorthand
  &.@{prefix-cls-nav}-justified {
    .nav-justified();
    .nav-tabs-justified();
  }
}

// Base
// -------------------------
.@{prefix-cls-nav}-base {
  border-bottom: 1px solid @nav-tabs-border-color !important;

  &.@{prefix-cls-nav}-small {
    font-size: 12px;
  }

  > li {
    float: left;
    // Make the list-items overlay the bottom border
    margin-bottom: -1px;

    // Actual tabs (as links)
    > a {
      //margin-right: 2px;
      line-height: @line-height-base;
      // border: 1px solid transparent;
      // border-radius: @border-radius-base @border-radius-base 0 0;
      border-bottom: 1px solid transparent;
      &:hover {
        //border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
        border-color: @nav-tabs-border-color;
      }
    }

    &.@{prefix-cls-nav}-disabled > a {
      color: @nav-disabled-link-color;

      &:hover,
      &:focus {
        color: @nav-disabled-link-hover-color;
        text-decoration: none;
        background-color: transparent;
        cursor: @cursor-disabled;
        border-bottom: 1px solid @nav-disabled-link-base-hover-border-color;
      }
    }

    // Active state, and its :hover to override normal :hover
    &.@{prefix-cls-nav}-active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-tabs-active-link-hover-color;
        background-color: @nav-tabs-active-link-hover-bg;
        //border: 1px solid @nav-tabs-active-link-hover-border-color;
        border-bottom: 1px solid @nav-tabs-active-link-hover-color;
        //border-bottom-color: transparent;
        cursor: default;
      }
    }


  }
  // pulling this in mainly for less shorthand
  &.@{prefix-cls-nav}-justified {
    .nav-justified();
    .nav-tabs-justified();
  }
}
}


// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------

.nav-justified() {
  width: 100%;

  > li {
    float: none;
    > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @media (min-width: @screen-sm-min) {
    > li {
      display: table-cell;
      width: 1%;
      > a {
        margin-bottom: 0;
      }
    }
  }
}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.@{prefix-cls-nav}-justified` styles for our tabs
.nav-tabs-justified() {
  border-bottom: 0;

  > li > a {
    // Override margin from .@{prefix-cls-nav}-tabs
    margin-right: 0;
    border-radius: @border-radius-base;
  }

  > .active > a,
  > .active > a:hover,
  > .active > a:focus {
    border: 1px solid @nav-tabs-justified-link-border-color;
  }

  @media (min-width: @screen-sm-min) {
    > li > a {
      border-bottom: 1px solid @nav-tabs-justified-link-border-color;
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .active > a,
    > .active > a:hover,
    > .active > a:focus {
      border-bottom-color: @nav-tabs-justified-active-link-border-color;
    }
  }
}

// Dropdowns
// -------------------------

// Specific dropdowns
.@{prefix-cls-nav}-tabs .@{prefix-cls}-dropdown-menu {
  // make dropdown border overlap tab border
  margin-top: -1px;
  // Remove the top rounded corners here since there is a hard edge above the menu
  .border-top-radius(0);
}