1// 2// List groups 3// -------------------------------------------------- 4 5 6// Base class 7// 8// Easily usable on <ul>, <ol>, or <div>. 9 10.list-group { 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: 20px; 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 position: relative; 23 display: block; 24 padding: 10px 15px; 25 // Place the border on the list items and negative margin up for better styling 26 margin-bottom: -1px; 27 background-color: $list-group-bg; 28 border: 1px solid $list-group-border; 29 30 // Round the first and last items 31 &:first-child { 32 @include border-top-radius($list-group-border-radius); 33 } 34 &:last-child { 35 margin-bottom: 0; 36 @include border-bottom-radius($list-group-border-radius); 37 } 38 39 // Disabled state 40 &.disabled, 41 &.disabled:hover, 42 &.disabled:focus { 43 color: $list-group-disabled-color; 44 cursor: $cursor-disabled; 45 background-color: $list-group-disabled-bg; 46 47 // Force color to inherit for custom content 48 .list-group-item-heading { 49 color: inherit; 50 } 51 .list-group-item-text { 52 color: $list-group-disabled-text-color; 53 } 54 } 55 56 // Active class on item itself, not parent 57 &.active, 58 &.active:hover, 59 &.active:focus { 60 z-index: 2; // Place active items above their siblings for proper border styling 61 color: $list-group-active-color; 62 background-color: $list-group-active-bg; 63 border-color: $list-group-active-border; 64 65 // Force color to inherit for custom content 66 .list-group-item-heading, 67 .list-group-item-heading > small, 68 .list-group-item-heading > .small { 69 color: inherit; 70 } 71 .list-group-item-text { 72 color: $list-group-active-text-color; 73 } 74 } 75} 76 77 78// Interactive list items 79// 80// Use anchor or button elements instead of `li`s or `div`s to create interactive items. 81// Includes an extra `.active` modifier class for showing selected items. 82 83a.list-group-item, 84button.list-group-item { 85 color: $list-group-link-color; 86 87 .list-group-item-heading { 88 color: $list-group-link-heading-color; 89 } 90 91 // Hover state 92 &:hover, 93 &:focus { 94 color: $list-group-link-hover-color; 95 text-decoration: none; 96 background-color: $list-group-hover-bg; 97 } 98} 99 100button.list-group-item { 101 width: 100%; 102 text-align: left; 103} 104 105 106// Contextual variants 107// 108// Add modifier classes to change text and background color on individual items. 109// Organizationally, this must come after the `:hover` states. 110 111@include list-group-item-variant(success, $state-success-bg, $state-success-text); 112@include list-group-item-variant(info, $state-info-bg, $state-info-text); 113@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); 114@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text); 115 116 117// Custom content options 118// 119// Extra classes for creating well-formatted content within `.list-group-item`s. 120 121.list-group-item-heading { 122 margin-top: 0; 123 margin-bottom: 5px; 124} 125.list-group-item-text { 126 margin-bottom: 0; 127 line-height: 1.3; 128} 129