Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
_list-group.scss 2.72 KiB
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 
}
13
14
15 
// Interactive list items
16 
//
17 
// Use anchor or button elements instead of `li`s or `div`s to create interactive
18 
// list items. Includes an extra `.active` modifier class for selected items.
19
20 
.list-group-item-action {
21 
  width: 100%; // For `<button>`s (anchors become 100% by default though)
22 
  color: $list-group-action-color;
23 
  text-align: inherit; // For `<button>`s (anchors inherit)
24
25 
  // Hover state
26 
  @include hover-focus {
27 
    color: $list-group-action-hover-color;
28 
    text-decoration: none;
29 
    background-color: $list-group-hover-bg;
30 
  }
31
32 
  &:active {
33 
    color: $list-group-action-active-color;
34 
    background-color: $list-group-action-active-bg;
35 
  }
36 
}
37
38
39 
// Individual list items
40 
//
41 
// Use on `li`s or `div`s within the `.list-group` parent.
42
43 
.list-group-item {
44 
  position: relative;
45 
  display: block;
46 
  padding: $list-group-item-padding-y $list-group-item-padding-x;
47 
  // Place the border on the list items and negative margin up for better styling
48 
  margin-bottom: -$list-group-border-width;
49 
  background-color: $list-group-bg;
50 
  border: $list-group-border-width solid $list-group-border-color;
51
52 
  &:first-child {
53 
    @include border-top-radius($list-group-border-radius);
54 
  }
55
56 
  &:last-child {
57 
    margin-bottom: 0;
58 
    @include border-bottom-radius($list-group-border-radius);
59 
  }
60
61 
  @include hover-focus {
62 
    text-decoration: none;
63 
  }
64
65 
  &.disabled,
66 
  &:disabled {
67 
    color: $list-group-disabled-color;
68 
    background-color: $list-group-disabled-bg;
69 
  }
70
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
// Include both here for `<a>`s and `<button>`s &.active { 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-color; } } // Flush list items // // Remove borders and border-radius to keep list group items edge-to-edge. Most // useful within other components (e.g., cards). .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; } } } // Contextual variants // // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. @each $color, $value in $theme-colors { @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6)); }