amazeui/less/nav.less

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

// Name:                       Nav
//
// Description:                Define style for Nav

// Component:                  `.am-nav`
//
// Sub-objects:                `.am-nav-header`
//                             `.am-nav-divider`
//
// Modifiers:                  `.am-nav-pills`
//                             `.am-nav-tabs`
//                             `.am-nav-justify`
//
// States:                     `.am-active`
//                             `.am-disabled`
//
// Uses:                        Icon
//
// Used by:                     Dropdown
//
// =============================================================================


// Tabs justify mixin
// =============================================================================

.nav-tabs-justify() {
  border-bottom: 0;

  /*  > li > a {
      margin-right: 0;
      border-radius: @global-radius;
    }

    > .am-active > a {
      &,
      &:hover,
      &:focus {
        border: 1px solid @nav-tabs-justify-link-border-color;
      }
    }*/

  // @media @medium-up {
  > li > a {
    margin-right: 0;
    border-bottom: 1px solid @nav-tabs-justify-link-border-color;
    border-radius: @global-radius @global-radius 0 0;
  }

  > .am-active > a {
    &,
    &:hover,
    &:focus {
      border-bottom-color: @nav-tabs-justify-active-link-border-color;
    }
  }
  // }
}

/* ==========================================================================
   Component: Nav
 ============================================================================ */

.@{ns}nav {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  .clearfix();

  > li {
    position: relative;
    display: block;

    + li {
      margin-top: 5px; // Stacked
    }

    + .@{ns}nav-header {
      margin-top: @nav-header-margin-top;
    }

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

    &.@{ns}active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-active-link-color;
        background-color: @nav-active-link-bg;
        cursor: default;
      }
      .hook-nav-active;
    }

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

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

      .hook-nav-disabled;
    }
  }

  .hook-nav;
}


.@{ns}nav-header {
  padding: @nav-link-padding;
  text-transform: @nav-header-text-transform;
  font-weight: @nav-header-font-weight;
  font-size: @nav-header-font-size;
  color: @nav-header-color;
  .hook-nav-header;
}


.@{ns}nav-divider {
  margin: 15px 1em !important;
  border-top: 1px solid #ddd;
  box-shadow: 0 1px 0 #fff;
  .hook-nav-divider;
}


// Horizontal
// =============================================================================

.@{ns}nav-pills {
  > li {
    float: left;

    + li {
      margin-left: 5px;
      margin-top: 0;
    }
  }
  .hook-nav-pills;
}



// Tabs nav
// =============================================================================

.@{ns}nav-tabs {
  border-bottom: 1px solid @nav-tabs-border-color;

  > li {
    float: left;
    margin-bottom: -1px;

    + li {
      margin-top: 0;
    }

    > a {
      margin-right: 5px;
      line-height: @line-height-base;
      border: 1px solid transparent;
      border-radius: @global-radius @global-radius 0 0;
      &:hover {
        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
      }
    }

    // Active state
    &.@{ns}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;
      }
    }
  }

  &.@{ns}nav-justify {
    .nav-tabs-justify();
  }

  .hook-nav-tabs;
}


// Justify links
// =============================================================================

.@{ns}nav-justify {
  width: 100%;
  // display: flex;

  > li {
    float: none;
    // flex: 1;
    display: table-cell;
    width: 1%;

    > a {
      text-align: center;
      margin-bottom: 0;
    }
  }

  .hook-nav-justify;
}


// Hooks
// =============================================================================

.hook-nav() {}
.hook-nav-disabled() {}
.hook-nav-active() {}
.hook-nav-hover() {}

.hook-nav-header() {}
.hook-nav-divider() {}
.hook-nav-pills() {}
.hook-nav-tabs() {}
.hook-nav-justify() {}