arrfab / centos / centos.org

Forked from centos/centos.org 2 years ago
Clone

Blame content/assets/css/bootstrap/_list-group.scss

e8ec7a
//
e8ec7a
// List groups
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
// Base class
e8ec7a
//
e8ec7a
// Easily usable on 
    ,
      , or
      .
e8ec7a
.list-group {
e8ec7a
  // No need to set list-style: none; since .list-group-item is block level
e8ec7a
  margin-bottom: 20px;
e8ec7a
  padding-left: 0; // reset padding because ul and ol
e8ec7a
}
e8ec7a
e8ec7a
// Individual list items
e8ec7a
// -------------------------
e8ec7a
e8ec7a
.list-group-item {
e8ec7a
  position: relative;
e8ec7a
  display: block;
e8ec7a
  padding: 10px 15px;
e8ec7a
  // Place the border on the list items and negative margin up for better styling
e8ec7a
  margin-bottom: -1px;
e8ec7a
  background-color: $list-group-bg;
e8ec7a
  border: 1px solid $list-group-border;
e8ec7a
e8ec7a
  // Round the first and last items
e8ec7a
  &:first-child {
e8ec7a
    @include border-top-radius($list-group-border-radius);
e8ec7a
  }
e8ec7a
  &:last-child {
e8ec7a
    margin-bottom: 0;
e8ec7a
    @include border-bottom-radius($list-group-border-radius);
e8ec7a
  }
e8ec7a
e8ec7a
  // Align badges within list items
e8ec7a
  > .badge {
e8ec7a
    float: right;
e8ec7a
  }
e8ec7a
  > .badge + .badge {
e8ec7a
    margin-right: 5px;
e8ec7a
  }
e8ec7a
e8ec7a
  // [converter] extracted a& to a.list-group-item
e8ec7a
e8ec7a
  // Active class on item itself, not parent
e8ec7a
  &.active,
e8ec7a
  &.active:hover,
e8ec7a
  &.active:focus {
e8ec7a
    z-index: 2; // Place active items above their siblings for proper border styling
e8ec7a
    color: $list-group-active-color;
e8ec7a
    background-color: $list-group-active-bg;
e8ec7a
    border-color: $list-group-active-border;
e8ec7a
e8ec7a
    // Force color to inherit for custom content
e8ec7a
    .list-group-item-heading {
e8ec7a
      color: inherit;
e8ec7a
    }
e8ec7a
    .list-group-item-text {
e8ec7a
      color: lighten($list-group-active-bg, 40%);
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Linked list items
e8ec7a
a.list-group-item {
e8ec7a
  color: $list-group-link-color;
e8ec7a
e8ec7a
  .list-group-item-heading {
e8ec7a
    color: $list-group-link-heading-color;
e8ec7a
  }
e8ec7a
e8ec7a
  // Hover state
e8ec7a
  &:hover,
e8ec7a
  &:focus {
e8ec7a
    text-decoration: none;
e8ec7a
    background-color: $list-group-hover-bg;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Custom content options
e8ec7a
// -------------------------
e8ec7a
e8ec7a
.list-group-item-heading {
e8ec7a
  margin-top: 0;
e8ec7a
  margin-bottom: 5px;
e8ec7a
}
e8ec7a
.list-group-item-text {
e8ec7a
  margin-bottom: 0;
e8ec7a
  line-height: 1.3;
e8ec7a
}