Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
_list-group.scss 3.16 KiB
1 
// Base class
2 
//
3 
// Easily usable on <ul>, <ol>, or <div>.
4
5 
.list-group {
6 
  // No need to set list-style: none; since .list-group-item is block level
7 
  padding-left: 0; // reset padding because ul and ol
8 
  margin-bottom: 0;
9 
}
10
11
12 
// Individual list items
13 
//
14 
// Use on `li`s or `div`s within the `.list-group` parent.
15
16 
.list-group-item {
17 
  position: relative;
18 
  display: block;
19 
  padding: .75rem 1.25rem;
20 
  // Place the border on the list items and negative margin up for better styling
21 
  margin-bottom: -.0625rem;
22 
  background-color: $list-group-bg;
23 
  border: .0625rem solid $list-group-border;
24
25 
  // Round the first and last items
26 
  &:first-child {
27 
    @include border-top-radius($list-group-border-radius);
28 
  }
29 
  &:last-child {
30 
    margin-bottom: 0;
31 
    @include border-bottom-radius($list-group-border-radius);
32 
  }
33 
}
34
35 
.list-group-flush {
36 
  .list-group-item {
37 
    border-width: .0625rem 0;
38 
    border-radius: 0;
39 
  }
40 
}
41
42
43 
// Interactive list items
44 
//
45 
// Use anchor or button elements instead of `li`s or `div`s to create interactive
46 
// list items. Includes an extra `.active` modifier class for selected items.
47
48 
a.list-group-item,
49 
button.list-group-item {
50 
  width: 100%;
51 
  color: $list-group-link-color;
52 
  text-align: inherit;
53
54 
  .list-group-item-heading {
55 
    color: $list-group-link-heading-color;
56 
  }
57
58 
  // Hover state
59 
  @include hover-focus {
60 
    color: $list-group-link-hover-color;
61 
    text-decoration: none;
62 
    background-color: $list-group-hover-bg;
63 
  }
64 
}
65
66 
.list-group-item {
67 
  // Disabled state
68 
  &.disabled {
69 
    @include plain-hover-focus {
70 
      color: $list-group-disabled-color;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
cursor: $cursor-disabled; background-color: $list-group-disabled-bg; // Force color to inherit for custom content .list-group-item-heading { color: inherit; } .list-group-item-text { color: $list-group-disabled-text-color; } } } // Active class on item itself, not parent &.active { @include plain-hover-focus { z-index: 2; // Place active items above their siblings for proper border styling color: $list-group-active-color; background-color: $list-group-active-bg; border-color: $list-group-active-border; // Force color to inherit for custom content .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; } } } } // 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. .list-group-item-heading { margin-top: 0; margin-bottom: 5px; } .list-group-item-text { margin-bottom: 0; line-height: 1.3; }