[Summary view] [Print] [Text view]

   1  // Base class
   2  //
   3  // Easily usable on <ul>, <ol>, or <div>.
   4  
   5  .list-group {
   6    display: flex;
   7    flex-direction: column;
   8  
   9    // No need to set list-style: none; since .list-group-item is block level
  10    padding-left: 0; // reset padding because ul and ol
  11    margin-bottom: 0;
  12    @include border-radius($list-group-border-radius);
  13  }
  14  
  15  .list-group-numbered {
  16    list-style-type: none;
  17    counter-reset: section;
  18  
  19    > li::before {
  20      // Increments only this instance of the section counter
  21      content: counters(section, ".") ". ";
  22      counter-increment: section;
  23    }
  24  }
  25  
  26  
  27  // Interactive list items
  28  //
  29  // Use anchor or button elements instead of `li`s or `div`s to create interactive
  30  // list items. Includes an extra `.active` modifier class for selected items.
  31  
  32  .list-group-item-action {
  33    width: 100%; // For `<button>`s (anchors become 100% by default though)
  34    color: $list-group-action-color;
  35    text-align: inherit; // For `<button>`s (anchors inherit)
  36  
  37    // Hover state
  38    &:hover,
  39    &:focus {
  40      z-index: 1; // Place hover/focus items above their siblings for proper border styling
  41      color: $list-group-action-hover-color;
  42      text-decoration: none;
  43      background-color: $list-group-hover-bg;
  44    }
  45  
  46    &:active {
  47      color: $list-group-action-active-color;
  48      background-color: $list-group-action-active-bg;
  49    }
  50  }
  51  
  52  
  53  // Individual list items
  54  //
  55  // Use on `li`s or `div`s within the `.list-group` parent.
  56  
  57  .list-group-item {
  58    position: relative;
  59    display: block;
  60    padding: $list-group-item-padding-y $list-group-item-padding-x;
  61    color: $list-group-color;
  62    text-decoration: if($link-decoration == none, null, none);
  63    background-color: $list-group-bg;
  64    border: $list-group-border-width solid $list-group-border-color;
  65  
  66    &:first-child {
  67      @include border-top-radius(inherit);
  68    }
  69  
  70    &:last-child {
  71      @include border-bottom-radius(inherit);
  72    }
  73  
  74    &.disabled,
  75    &:disabled {
  76      color: $list-group-disabled-color;
  77      pointer-events: none;
  78      background-color: $list-group-disabled-bg;
  79    }
  80  
  81    // Include both here for `<a>`s and `<button>`s
  82    &.active {
  83      z-index: 2; // Place active items above their siblings for proper border styling
  84      color: $list-group-active-color;
  85      background-color: $list-group-active-bg;
  86      border-color: $list-group-active-border-color;
  87    }
  88  
  89    & + & {
  90      border-top-width: 0;
  91  
  92      &.active {
  93        margin-top: -$list-group-border-width;
  94        border-top-width: $list-group-border-width;
  95      }
  96    }
  97  }
  98  
  99  
 100  // Horizontal
 101  //
 102  // Change the layout of list group items from vertical (default) to horizontal.
 103  
 104  @each $breakpoint in map-keys($grid-breakpoints) {
 105    @include media-breakpoint-up($breakpoint) {
 106      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 107  
 108      .list-group-horizontal#{$infix} {
 109        flex-direction: row;
 110  
 111        > .list-group-item {
 112          &:first-child {
 113            @include border-bottom-start-radius($list-group-border-radius);
 114            @include border-top-end-radius(0);
 115          }
 116  
 117          &:last-child {
 118            @include border-top-end-radius($list-group-border-radius);
 119            @include border-bottom-start-radius(0);
 120          }
 121  
 122          &.active {
 123            margin-top: 0;
 124          }
 125  
 126          + .list-group-item {
 127            border-top-width: $list-group-border-width;
 128            border-left-width: 0;
 129  
 130            &.active {
 131              margin-left: -$list-group-border-width;
 132              border-left-width: $list-group-border-width;
 133            }
 134          }
 135        }
 136      }
 137    }
 138  }
 139  
 140  
 141  // Flush list items
 142  //
 143  // Remove borders and border-radius to keep list group items edge-to-edge. Most
 144  // useful within other components (e.g., cards).
 145  
 146  .list-group-flush {
 147    @include border-radius(0);
 148  
 149    > .list-group-item {
 150      border-width: 0 0 $list-group-border-width;
 151  
 152      &:last-child {
 153        border-bottom-width: 0;
 154      }
 155    }
 156  }
 157  
 158  
 159  // scss-docs-start list-group-modifiers
 160  // List group contextual variants
 161  //
 162  // Add modifier classes to change text and background color on individual items.
 163  // Organizationally, this must come after the `:hover` states.
 164  
 165  @each $state, $value in $theme-colors {
 166    $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
 167    $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
 168    @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
 169      $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
 170    }
 171  
 172    @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
 173  }
 174  // scss-docs-end list-group-modifiers