rbowen / centos / centos.org

Forked from centos/centos.org 3 years ago
Clone

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

e8ec7a
//
e8ec7a
// Dropdown menus
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
e8ec7a
// Dropdown arrow/caret
e8ec7a
.caret {
e8ec7a
  display: inline-block;
e8ec7a
  width: 0;
e8ec7a
  height: 0;
e8ec7a
  margin-left: 2px;
e8ec7a
  vertical-align: middle;
e8ec7a
  border-top:   $caret-width-base solid $dropdown-caret-color;
e8ec7a
  border-right: $caret-width-base solid transparent;
e8ec7a
  border-left:  $caret-width-base solid transparent;
e8ec7a
  // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
e8ec7a
  // we can just straight up remove this.
e8ec7a
  border-bottom: 0 dotted;
e8ec7a
  content: "";
e8ec7a
}
e8ec7a
e8ec7a
// The dropdown wrapper (div)
e8ec7a
.dropdown {
e8ec7a
  position: relative;
e8ec7a
}
e8ec7a
e8ec7a
// Prevent the focus on the dropdown toggle when closing dropdowns
e8ec7a
.dropdown-toggle:focus {
e8ec7a
  outline: 0;
e8ec7a
}
e8ec7a
e8ec7a
// The dropdown menu (ul)
e8ec7a
.dropdown-menu {
e8ec7a
  position: absolute;
e8ec7a
  top: 100%;
e8ec7a
  left: 0;
e8ec7a
  z-index: $zindex-dropdown;
e8ec7a
  display: none; // none by default, but block on "open" of the menu
e8ec7a
  float: left;
e8ec7a
  min-width: 160px;
e8ec7a
  padding: 5px 0;
e8ec7a
  margin: 2px 0 0; // override default ul
e8ec7a
  list-style: none;
e8ec7a
  font-size: $font-size-base;
e8ec7a
  background-color: $dropdown-bg;
e8ec7a
  border: 1px solid $dropdown-fallback-border; // IE8 fallback
e8ec7a
  border: 1px solid $dropdown-border;
e8ec7a
  border-radius: $border-radius-base;
e8ec7a
  @include box-shadow(0 6px 12px rgba(0,0,0,.175));
e8ec7a
  background-clip: padding-box;
e8ec7a
e8ec7a
  // Aligns the dropdown menu to right
e8ec7a
  &.pull-right {
e8ec7a
    right: 0;
e8ec7a
    left: auto;
e8ec7a
  }
e8ec7a
e8ec7a
  // Dividers (basically an hr) within the dropdown
e8ec7a
  .divider {
e8ec7a
    @include nav-divider($dropdown-divider-bg);
e8ec7a
  }
e8ec7a
e8ec7a
  // Links within the dropdown menu
e8ec7a
  > li > a {
e8ec7a
    display: block;
e8ec7a
    padding: 3px 20px;
e8ec7a
    clear: both;
e8ec7a
    font-weight: normal;
e8ec7a
    line-height: $line-height-base;
e8ec7a
    color: $dropdown-link-color;
e8ec7a
    white-space: nowrap; // prevent links from randomly breaking onto new lines
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Hover/Focus state
e8ec7a
.dropdown-menu > li > a {
e8ec7a
  &:hover,
e8ec7a
  &:focus {
e8ec7a
    text-decoration: none;
e8ec7a
    color: $dropdown-link-hover-color;
e8ec7a
    background-color: $dropdown-link-hover-bg;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Active state
e8ec7a
.dropdown-menu > .active > a {
e8ec7a
  &,
e8ec7a
  &:hover,
e8ec7a
  &:focus {
e8ec7a
    color: $dropdown-link-active-color;
e8ec7a
    text-decoration: none;
e8ec7a
    outline: 0;
e8ec7a
    background-color: $dropdown-link-active-bg;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Disabled state
e8ec7a
//
e8ec7a
// Gray out text and ensure the hover/focus state remains gray
e8ec7a
e8ec7a
.dropdown-menu > .disabled > a {
e8ec7a
  &,
e8ec7a
  &:hover,
e8ec7a
  &:focus {
e8ec7a
    color: $dropdown-link-disabled-color;
e8ec7a
  }
e8ec7a
}
e8ec7a
// Nuke hover/focus effects
e8ec7a
.dropdown-menu > .disabled > a {
e8ec7a
  &:hover,
e8ec7a
  &:focus {
e8ec7a
    text-decoration: none;
e8ec7a
    background-color: transparent;
e8ec7a
    background-image: none; // Remove CSS gradient
e8ec7a
    @include reset-filter();
e8ec7a
    cursor: not-allowed;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Open state for the dropdown
e8ec7a
.open {
e8ec7a
  // Show the menu
e8ec7a
  > .dropdown-menu {
e8ec7a
    display: block;
e8ec7a
  }
e8ec7a
e8ec7a
  // Remove the outline when :focus is triggered
e8ec7a
  > a {
e8ec7a
    outline: 0;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Dropdown section headers
e8ec7a
.dropdown-header {
e8ec7a
  display: block;
e8ec7a
  padding: 3px 20px;
e8ec7a
  font-size: $font-size-small;
e8ec7a
  line-height: $line-height-base;
e8ec7a
  color: $dropdown-header-color;
e8ec7a
}
e8ec7a
e8ec7a
// Backdrop to catch body clicks on mobile, etc.
e8ec7a
.dropdown-backdrop {
e8ec7a
  position: fixed;
e8ec7a
  left: 0;
e8ec7a
  right: 0;
e8ec7a
  bottom: 0;
e8ec7a
  top: 0;
e8ec7a
  z-index: $zindex-dropdown - 10;
e8ec7a
}
e8ec7a
e8ec7a
// Right aligned dropdowns
e8ec7a
.pull-right > .dropdown-menu {
e8ec7a
  right: 0;
e8ec7a
  left: auto;
e8ec7a
}
e8ec7a
e8ec7a
// Allow for dropdowns to go bottom up (aka, dropup-menu)
e8ec7a
//
e8ec7a
// Just add .dropup after the standard .dropdown class and you're set, bro.
e8ec7a
// TODO: abstract this so that the navbar fixed styles are not placed here?
e8ec7a
e8ec7a
.dropup,
e8ec7a
.navbar-fixed-bottom .dropdown {
e8ec7a
  // Reverse the caret
e8ec7a
  .caret {
e8ec7a
    // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
e8ec7a
    // gets fixed, restore `border-top: 0;`.
e8ec7a
    border-top: 0 dotted;
e8ec7a
    border-bottom: 4px solid $dropdown-caret-color;
e8ec7a
    content: "";
e8ec7a
  }
e8ec7a
  // Different positioning for bottom up menu
e8ec7a
  .dropdown-menu {
e8ec7a
    top: auto;
e8ec7a
    bottom: 100%;
e8ec7a
    margin-bottom: 1px;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Component alignment
e8ec7a
//
e8ec7a
// Reiterate per navbar.less and the modified component alignment there.
e8ec7a
e8ec7a
@media (min-width: $grid-float-breakpoint) {
e8ec7a
  .navbar-right {
e8ec7a
    .dropdown-menu {
e8ec7a
      right: 0;
e8ec7a
      left: auto;
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a