Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
_list-group.scss 3.67 KiB
1 
// Base class
2 
//
3 
// Easily usable on <ul>, <ol>, or <div>.
4
5 
.list-group {
6 
  @if $enable-flex {
7 
    display: flex;
8 
    flex-direction: column;
9 
  }
10
11 
  // No need to set list-style: none; since .list-group-item is block level
12 
  padding-left: 0; // reset padding because ul and ol
13 
  margin-bottom: 0;
14 
}
15
16
17 
// Individual list items
18 
//
19 
// Use on `li`s or `div`s within the `.list-group` parent.
20
21 
.list-group-item {
22 
  @if $enable-flex {
23 
    display: flex;
24 
    flex-flow: row wrap;
25 
    align-items: center;
26 
  } @else {
27 
    display: block;
28 
  }
29
30 
  position: relative;
31 
  padding: $list-group-item-padding-y $list-group-item-padding-x;
32 
  // Place the border on the list items and negative margin up for better styling
33 
  margin-bottom: -$list-group-border-width;
34 
  background-color: $list-group-bg;
35 
  border: $list-group-border-width solid $list-group-border-color;
36
37 
  &:first-child {
38 
    @include border-top-radius($list-group-border-radius);
39 
  }
40
41 
  &:last-child {
42 
    margin-bottom: 0;
43 
    @include border-bottom-radius($list-group-border-radius);
44 
  }
45
46 
  &.disabled {
47 
    @include plain-hover-focus {
48 
      color: $list-group-disabled-color;
49 
      cursor: $cursor-disabled;
50 
      background-color: $list-group-disabled-bg;
51
52 
      // Force color to inherit for custom content
53 
      .list-group-item-heading {
54 
        color: inherit;
55 
      }
56 
      .list-group-item-text {
57 
        color: $list-group-disabled-text-color;
58 
      }
59 
    }
60 
  }
61
62 
  &.active {
63 
    @include plain-hover-focus {
64 
      z-index: 2; // Place active items above their siblings for proper border styling
65 
      color: $list-group-active-color;
66 
      text-decoration: none; // Repeat here because it inherits global a:hover otherwise
67 
      background-color: $list-group-active-bg;
68 
      border-color: $list-group-active-border;
69
70 
      // Force color to inherit for custom content
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
.list-group-item-heading, .list-group-item-heading > small, .list-group-item-heading > .small { color: inherit; } .list-group-item-text { color: $list-group-active-text-color; } } } } .list-group-flush { .list-group-item { border-right: 0; border-left: 0; border-radius: 0; } &:first-child { .list-group-item:first-child { border-top: 0; } } &:last-child { .list-group-item:last-child { border-bottom: 0; } } } // Interactive list items // // Use anchor or button elements instead of `li`s or `div`s to create interactive // list items. Includes an extra `.active` modifier class for selected items. .list-group-item-action { width: 100%; // For `<button>`s (anchors become 100% by default though) color: $list-group-link-color; text-align: inherit; // For `<button>`s (anchors inherit) .list-group-item-heading { color: $list-group-link-heading-color; } // Hover state @include hover-focus { color: $list-group-link-hover-color; text-decoration: none; background-color: $list-group-hover-bg; } } // Contextual variants // // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. @include list-group-item-variant(success, $state-success-bg, $state-success-text); @include list-group-item-variant(info, $state-info-bg, $state-info-text); @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); // Custom content options // // Extra classes for creating well-formatted content within `.list-group-item`s.
141142143144145146147148149150
.list-group-item-heading { margin-top: 0; margin-bottom: $list-group-item-heading-margin-bottom; } .list-group-item-text { margin-bottom: 0; line-height: 1.3; }