zui/src/less/components/navs.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// Bootstrap: navs.less
/// https://github.com/twbs/bootstrap/blob/master/less/navs.less
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Bootsrap version in the future.
/// http://openzui.com
/// ========================================================================
/// Bootrap: Copyright 2011-2016 Twitter, Inc. Licensed under MIT
/// ========================================================================


// Base class

.nav {
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  list-style: none;
  &:extend(.clearfix all);

  // nav heading is <li> tag without <a> in side
  > .nav-heading {
    padding: @nav-link-padding;
    color: @color-gray;
    font-weight: @headings-font-weight;
  }

  > li {
    position: relative;
    display: block;

    > a {
      position: relative;
      display: block;
      padding: @nav-link-padding;
      color: @color-fore;

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

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

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

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

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


// Default simple nav

.nav-default {
  > li {
    float: left;
  }
}


// Simple nav
.nav-simple {
  > li {
    float: left;

    > a {
      border-radius: @border-radius-base;
    }

    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-simple-active-link-color;
        background-color: @nav-simple-active-link-bg;
      }
    }
  }
}


// Pills

.nav-pills {
  > li {
    float: left;

    // Links rendered as pills
    > a { border-radius: @nav-pills-border-radius; }
    + li { margin-left: 2px; }

    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-pills-active-link-hover-color;
        background-color: @nav-pills-active-link-hover-bg;
      }
    }
  }
}


// Primary

.nav-primary {
  > li {
    float: left;
    margin-left: -1px;

    &:first-child {
      > a {
        margin-left: 0;
        .border-left-radius(@border-radius-base);
      }
    }

    &:last-child {
      > a {
        .border-right-radius(@border-radius-base);
      }
    }

    // Links rendered
    > a { border: 1px solid @nav-primary-border-color; }

    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        background-color: @component-active-bg;
        border-color: @component-active-bg;
        color: @component-active-color;
      }
    }
  }
}


// Secondary

.nav-secondary {
  > li {
    float: left;

    // Links rendered
    > a { border-bottom: 2px solid @nav-secondary-border-color; }

    // Active state
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-secondary-active-link-hover-color;
        border-bottom-color: @nav-secondary-active-border-color;
      }
    }

    &.nav-heading {
      border-bottom: 2px solid @nav-secondary-border-color;
    }
  }
}


// Stacked navs

.nav-stacked {
  > li {
    float: none;
    + li {
      margin-top: 2px;
      margin-left: 0; // no need for this gap between nav items
    }
  }

  &.nav-primary {
    > li {
      &,
      > a {
        margin-left: 0;
        .border-bottom-radius(0);
      }
      + li {
        margin-top: -1px;
      }
      &:first-child {
        margin-top: 0;
        > a,
        &.nav-heading {
          margin-left: 0;
          .border-top-radius(@border-radius-base);
        }
      }

      &:last-child {
        > a {
          .border-top-radius(0);
          .border-bottom-radius(@border-radius-base);
        }
      }

      // Active state
      &.active > a {
        &,
        &:hover,
        &:focus {
        }
      }
      &.nav-heading {
        border: 1px solid @color-gray-light;
        background-color: @color-gray-pale;
      }
    }
  }

  &.nav-secondary {
    > li {
      > a {
        border: none;
        box-shadow: inset 2px 0 0 @nav-secondary-active-link-hover-bg;
        .border-right-radius(@border-radius-base);

        &:hover { box-shadow: inset 2px 0 0 @nav-secondary-border-color; }
      }
      + li { margin-top: -1px; }
      &:first-child { margin-top: 0; }
      // Active state
      &.active > a {
        &,
        &:hover,
        &:focus {
          background-color: @nav-secondary-active-link-hover-bg;
          box-shadow: inset 2px 0 0 @nav-secondary-active-border-color;

        }
      }
      &.nav-heading { border-bottom: 1px solid @color-gray-light; }
    }
  }
}


// Justified nav links

.nav-justified {
  width: 100%;

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

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

    &.nav-primary {
      > li + li > a { border-left: 0; }
    }
  }
}