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 @include hover-focus() { 28 z-index: 1; // Place hover/focus items above their siblings for proper border styling 29 color: $list-group-action-hover-color; 30 text-decoration: none; 31 background-color: $list-group-hover-bg; 32 } 33 34 &:active { 35 color: $list-group-action-active-color; 36 background-color: $list-group-action-active-bg; 37 } 38} 39 40 41// Individual list items 42// 43// Use on `li`s or `div`s within the `.list-group` parent. 44 45.list-group-item { 46 position: relative; 47 display: block; 48 padding: $list-group-item-padding-y $list-group-item-padding-x; 49 color: $list-group-color; 50 text-decoration: if($link-decoration == none, null, none); 51 background-color: $list-group-bg; 52 border: $list-group-border-width solid $list-group-border-color; 53 54 &:first-child { 55 @include border-top-radius(inherit); 56 } 57 58 &:last-child { 59 @include border-bottom-radius(inherit); 60 } 61 62 &.disabled, 63 &:disabled { 64 color: $list-group-disabled-color; 65 pointer-events: none; 66 background-color: $list-group-disabled-bg; 67 } 68 69 // Include both here for `<a>`s and `<button>`s 70 &.active { 71 z-index: 2; // Place active items above their siblings for proper border styling 72 color: $list-group-active-color; 73 background-color: $list-group-active-bg; 74 border-color: $list-group-active-border-color; 75 } 76 77 & + & { 78 border-top-width: 0; 79 80 &.active { 81 margin-top: -$list-group-border-width; 82 border-top-width: $list-group-border-width; 83 } 84 } 85} 86 87 88// Horizontal 89// 90// Change the layout of list group items from vertical (default) to horizontal. 91 92@each $breakpoint in map-keys($grid-breakpoints) { 93 @include media-breakpoint-up($breakpoint) { 94 $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 95 96 .list-group-horizontal#{$infix} { 97 flex-direction: row; 98 99 > .list-group-item { 100 &:first-child { 101 @include border-bottom-left-radius($list-group-border-radius); 102 @include border-top-right-radius(0); 103 } 104 105 &:last-child { 106 @include border-top-right-radius($list-group-border-radius); 107 @include border-bottom-left-radius(0); 108 } 109 110 &.active { 111 margin-top: 0; 112 } 113 114 & + .list-group-item { 115 border-top-width: $list-group-border-width; 116 border-left-width: 0; 117 118 &.active { 119 margin-left: -$list-group-border-width; 120 border-left-width: $list-group-border-width; 121 } 122 } 123 } 124 } 125 } 126} 127 128 129// Flush list items 130// 131// Remove borders and border-radius to keep list group items edge-to-edge. Most 132// useful within other components (e.g., cards). 133 134.list-group-flush { 135 @include border-radius(0); 136 137 > .list-group-item { 138 border-width: 0 0 $list-group-border-width; 139 140 &:last-child { 141 border-bottom-width: 0; 142 } 143 } 144} 145 146 147// Contextual variants 148// 149// Add modifier classes to change text and background color on individual items. 150// Organizationally, this must come after the `:hover` states. 151 152@each $color, $value in $theme-colors { 153 @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6)); 154} 155