rbowen / centos / centos.org

Forked from centos/centos.org 3 years ago
Clone

Blame content/assets/css/bootstrap/_navs.scss

e8ec7a
//
e8ec7a
// Navs
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
e8ec7a
// Base class
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
.nav {
e8ec7a
  margin-bottom: 0;
e8ec7a
  padding-left: 0; // Override default ul/ol
e8ec7a
  list-style: none;
e8ec7a
  @include clearfix();
e8ec7a
e8ec7a
  > li {
e8ec7a
    position: relative;
e8ec7a
    display: block;
e8ec7a
e8ec7a
    > a {
e8ec7a
      position: relative;
e8ec7a
      display: block;
e8ec7a
      padding: $nav-link-padding;
e8ec7a
      &:hover,
e8ec7a
      &:focus {
e8ec7a
        text-decoration: none;
e8ec7a
        background-color: $nav-link-hover-bg;
e8ec7a
      }
e8ec7a
    }
e8ec7a
e8ec7a
    // Disabled state sets text to gray and nukes hover/tab effects
e8ec7a
    &.disabled > a {
e8ec7a
      color: $nav-disabled-link-color;
e8ec7a
e8ec7a
      &:hover,
e8ec7a
      &:focus {
e8ec7a
        color: $nav-disabled-link-hover-color;
e8ec7a
        text-decoration: none;
e8ec7a
        background-color: transparent;
e8ec7a
        cursor: not-allowed;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
e8ec7a
  // Open dropdowns
e8ec7a
  .open > a {
e8ec7a
    &,
e8ec7a
    &:hover,
e8ec7a
    &:focus {
e8ec7a
      background-color: $nav-link-hover-bg;
e8ec7a
      border-color: $link-color;
e8ec7a
    }
e8ec7a
  }
e8ec7a
e8ec7a
  // Dividers (basically an hr) within the dropdown
e8ec7a
  .nav-divider {
e8ec7a
    @include nav-divider();
e8ec7a
  }
e8ec7a
e8ec7a
  // Prevent IE8 from misplacing imgs
e8ec7a
  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
e8ec7a
  > li > a > img {
e8ec7a
    max-width: none;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Tabs
e8ec7a
// -------------------------
e8ec7a
e8ec7a
// Give the tabs something to sit on
e8ec7a
.nav-tabs {
e8ec7a
  border-bottom: 1px solid $nav-tabs-border-color;
e8ec7a
  > li {
e8ec7a
    float: left;
e8ec7a
    // Make the list-items overlay the bottom border
e8ec7a
    margin-bottom: -1px;
e8ec7a
e8ec7a
    // Actual tabs (as links)
e8ec7a
    > a {
e8ec7a
      margin-right: 2px;
e8ec7a
      line-height: $line-height-base;
e8ec7a
      border: 1px solid transparent;
e8ec7a
      border-radius: $border-radius-base $border-radius-base 0 0;
e8ec7a
      &:hover {
e8ec7a
        border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
e8ec7a
      }
e8ec7a
    }
e8ec7a
e8ec7a
    // Active state, and it's :hover to override normal :hover
e8ec7a
    &.active > a {
e8ec7a
      &,
e8ec7a
      &:hover,
e8ec7a
      &:focus {
e8ec7a
        color: $nav-tabs-active-link-hover-color;
e8ec7a
        background-color: $nav-tabs-active-link-hover-bg;
e8ec7a
        border: 1px solid $nav-tabs-active-link-hover-border-color;
e8ec7a
        border-bottom-color: transparent;
e8ec7a
        cursor: default;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
  // pulling this in mainly for less shorthand
e8ec7a
  &.nav-justified {
e8ec7a
    @extend .nav-justified;
e8ec7a
    @extend .nav-tabs-justified;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Pills
e8ec7a
// -------------------------
e8ec7a
.nav-pills {
e8ec7a
  > li {
e8ec7a
    float: left;
e8ec7a
e8ec7a
    // Links rendered as pills
e8ec7a
    > a {
e8ec7a
      border-radius: 5px;
e8ec7a
    }
e8ec7a
    + li {
e8ec7a
      margin-left: 2px;
e8ec7a
    }
e8ec7a
e8ec7a
    // Active state
e8ec7a
    &.active > a {
e8ec7a
      &,
e8ec7a
      &:hover,
e8ec7a
      &:focus {
e8ec7a
        color: $nav-pills-active-link-hover-color;
e8ec7a
        background-color: $nav-pills-active-link-hover-bg;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Stacked pills
e8ec7a
.nav-stacked {
e8ec7a
  > li {
e8ec7a
    float: none;
e8ec7a
    + li {
e8ec7a
      margin-top: 2px;
e8ec7a
      margin-left: 0; // no need for this gap between nav items
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Nav variations
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
// Justified nav links
e8ec7a
// -------------------------
e8ec7a
e8ec7a
.nav-justified {
e8ec7a
  width: 100%;
e8ec7a
e8ec7a
  > li {
e8ec7a
    float: none;
e8ec7a
     > a {
e8ec7a
      text-align: center;
e8ec7a
    }
e8ec7a
  }
e8ec7a
e8ec7a
  @media (min-width: $screen-sm) {
e8ec7a
    > li {
e8ec7a
      display: table-cell;
e8ec7a
      width: 1%;
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Move borders to anchors instead of bottom of list
e8ec7a
.nav-tabs-justified {
e8ec7a
  border-bottom: 0;
e8ec7a
  > li > a {
e8ec7a
    border-bottom: 1px solid $nav-tabs-justified-link-border-color;
e8ec7a
e8ec7a
    // Override margin from .nav-tabs
e8ec7a
    margin-right: 0;
e8ec7a
  }
e8ec7a
  > .active > a {
e8ec7a
    border-bottom-color: $nav-tabs-justified-active-link-border-color;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Tabbable tabs
e8ec7a
// -------------------------
e8ec7a
e8ec7a
// Clear any floats
e8ec7a
.tabbable {
e8ec7a
  @include clearfix();
e8ec7a
}
e8ec7a
e8ec7a
// Show/hide tabbable areas
e8ec7a
.tab-content > .tab-pane,
e8ec7a
.pill-content > .pill-pane {
e8ec7a
  display: none;
e8ec7a
}
e8ec7a
.tab-content,
e8ec7a
.pill-content {
e8ec7a
  > .active {
e8ec7a
    display: block;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
e8ec7a
// Dropdowns
e8ec7a
// -------------------------
e8ec7a
e8ec7a
// Make dropdown carets use link color in navs
e8ec7a
.nav .caret {
e8ec7a
  border-top-color: $link-color;
e8ec7a
  border-bottom-color: $link-color;
e8ec7a
}
e8ec7a
.nav a:hover .caret {
e8ec7a
  border-top-color: $link-hover-color;
e8ec7a
  border-bottom-color: $link-hover-color;
e8ec7a
}
e8ec7a
e8ec7a
// Specific dropdowns
e8ec7a
.nav-tabs .dropdown-menu {
e8ec7a
  // make dropdown border overlap tab border
e8ec7a
  margin-top: -1px;
e8ec7a
  // Remove the top rounded corners here since there is a hard edge above the menu
e8ec7a
  @include border-top-radius(0);
e8ec7a
}