Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
_list-group.scss 3.90 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 
  @include border-radius($list-group-border-radius);
13 
}
14
15
16 
// Interactive list items
17 
//
18 
// Use anchor or button elements instead of `li`s or `div`s to create interactive
19 
// list items. Includes an extra `.active` modifier class for selected items.
20
21 
.list-group-item-action {
22 
  width: 100%; // For `<button>`s (anchors become 100% by default though)
23 
  color: $list-group-action-color;
24 
  text-align: inherit; // For `<button>`s (anchors inherit)
25
26 
  // Hover state
27 
  &:hover,
28 
  &:focus {
29 
    z-index: 1; // Place hover/focus items above their siblings for proper border styling
30 
    color: $list-group-action-hover-color;
31 
    text-decoration: none;
32 
    background-color: $list-group-hover-bg;
33 
  }
34
35 
  &:active {
36 
    color: $list-group-action-active-color;
37 
    background-color: $list-group-action-active-bg;
38 
  }
39 
}
40
41
42 
// Individual list items
43 
//
44 
// Use on `li`s or `div`s within the `.list-group` parent.
45
46 
.list-group-item {
47 
  position: relative;
48 
  display: block;
49 
  padding: $list-group-item-padding-y $list-group-item-padding-x;
50 
  color: $list-group-color;
51 
  text-decoration: if($link-decoration == none, null, none);
52 
  background-color: $list-group-bg;
53 
  border: $list-group-border-width solid $list-group-border-color;
54
55 
  &:first-child {
56 
    @include border-top-radius(inherit);
57 
  }
58
59 
  &:last-child {
60 
    @include border-bottom-radius(inherit);
61 
  }
62
63 
  &.disabled,
64 
  &:disabled {
65 
    color: $list-group-disabled-color;
66 
    pointer-events: none;
67 
    background-color: $list-group-disabled-bg;
68 
  }
69
70 
  // Include both here for `<a>`s and `<button>`s
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
&.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; } & + & { border-top-width: 0; &.active { margin-top: -$list-group-border-width; border-top-width: $list-group-border-width; } } } // Horizontal // // Change the layout of list group items from vertical (default) to horizontal. @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); .list-group-horizontal#{$infix} { flex-direction: row; > .list-group-item { &:first-child { @include border-bottom-left-radius($list-group-border-radius); @include border-top-right-radius(0); } &:last-child { @include border-top-right-radius($list-group-border-radius); @include border-bottom-left-radius(0); } &.active { margin-top: 0; } + .list-group-item { border-top-width: $list-group-border-width; border-left-width: 0; &.active { margin-left: -$list-group-border-width; border-left-width: $list-group-border-width; } } } } } } // 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 { @include border-radius(0); > .list-group-item { border-width: 0 0 $list-group-border-width;
141142143144145146147148149150151152153154155156157158
&:last-child { border-bottom-width: 0; } } } // scss-docs-start list-group-modifiers // List group 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, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level)); } // scss-docs-end list-group-modifiers