mixins
6 years ago
utilities
6 years ago
vendor
6 years ago
_alert.scss
6 years ago
_badge.scss
6 years ago
_breadcrumb.scss
6 years ago
_button-group.scss
6 years ago
_buttons.scss
6 years ago
_card.scss
6 years ago
_carousel.scss
6 years ago
_close.scss
6 years ago
_code.scss
6 years ago
_custom-forms.scss
6 years ago
_dropdown.scss
6 years ago
_forms.scss
6 years ago
_functions.scss
6 years ago
_grid.scss
6 years ago
_images.scss
6 years ago
_input-group.scss
6 years ago
_jumbotron.scss
6 years ago
_list-group.scss
6 years ago
_media.scss
6 years ago
_mixins.scss
6 years ago
_modal.scss
6 years ago
_nav.scss
6 years ago
_navbar.scss
6 years ago
_pagination.scss
6 years ago
_popover.scss
6 years ago
_print.scss
6 years ago
_progress.scss
6 years ago
_reboot.scss
6 years ago
_root.scss
6 years ago
_spinners.scss
6 years ago
_tables.scss
6 years ago
_toasts.scss
6 years ago
_tooltip.scss
6 years ago
_transitions.scss
6 years ago
_type.scss
6 years ago
_utilities.scss
6 years ago
_variables.scss
6 years ago
bootstrap-grid.scss
6 years ago
bootstrap-reboot.scss
6 years ago
bootstrap.scss
6 years ago
_list-group.scss
150 lines
| 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 | z-index: 1; // Place hover/focus items above their siblings for proper border styling |
| 28 | color: $list-group-action-hover-color; |
| 29 | text-decoration: none; |
| 30 | background-color: $list-group-hover-bg; |
| 31 | } |
| 32 | |
| 33 | &:active { |
| 34 | color: $list-group-action-active-color; |
| 35 | background-color: $list-group-action-active-bg; |
| 36 | } |
| 37 | } |
| 38 | |
| 39 | |
| 40 | // Individual list items |
| 41 | // |
| 42 | // Use on `li`s or `div`s within the `.list-group` parent. |
| 43 | |
| 44 | .list-group-item { |
| 45 | position: relative; |
| 46 | display: block; |
| 47 | padding: $list-group-item-padding-y $list-group-item-padding-x; |
| 48 | // Place the border on the list items and negative margin up for better styling |
| 49 | margin-bottom: -$list-group-border-width; |
| 50 | color: $list-group-color; |
| 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($list-group-border-radius); |
| 56 | } |
| 57 | |
| 58 | &:last-child { |
| 59 | margin-bottom: 0; |
| 60 | @include border-bottom-radius($list-group-border-radius); |
| 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 |
| 71 | &.active { |
| 72 | z-index: 2; // Place active items above their siblings for proper border styling |
| 73 | color: $list-group-active-color; |
| 74 | background-color: $list-group-active-bg; |
| 75 | border-color: $list-group-active-border-color; |
| 76 | } |
| 77 | } |
| 78 | |
| 79 | |
| 80 | // Horizontal |
| 81 | // |
| 82 | // Change the layout of list group items from vertical (default) to horizontal. |
| 83 | |
| 84 | @each $breakpoint in map-keys($grid-breakpoints) { |
| 85 | @include media-breakpoint-up($breakpoint) { |
| 86 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); |
| 87 | |
| 88 | .list-group-horizontal#{$infix} { |
| 89 | flex-direction: row; |
| 90 | |
| 91 | .list-group-item { |
| 92 | margin-right: -$list-group-border-width; |
| 93 | margin-bottom: 0; |
| 94 | |
| 95 | &:first-child { |
| 96 | @include border-left-radius($list-group-border-radius); |
| 97 | @include border-top-right-radius(0); |
| 98 | } |
| 99 | |
| 100 | &:last-child { |
| 101 | margin-right: 0; |
| 102 | @include border-right-radius($list-group-border-radius); |
| 103 | @include border-bottom-left-radius(0); |
| 104 | } |
| 105 | } |
| 106 | } |
| 107 | } |
| 108 | } |
| 109 | |
| 110 | |
| 111 | // Flush list items |
| 112 | // |
| 113 | // Remove borders and border-radius to keep list group items edge-to-edge. Most |
| 114 | // useful within other components (e.g., cards). |
| 115 | |
| 116 | .list-group-flush { |
| 117 | .list-group-item { |
| 118 | border-right: 0; |
| 119 | border-left: 0; |
| 120 | @include border-radius(0); |
| 121 | |
| 122 | &:last-child { |
| 123 | margin-bottom: -$list-group-border-width; |
| 124 | } |
| 125 | } |
| 126 | |
| 127 | &:first-child { |
| 128 | .list-group-item:first-child { |
| 129 | border-top: 0; |
| 130 | } |
| 131 | } |
| 132 | |
| 133 | &:last-child { |
| 134 | .list-group-item:last-child { |
| 135 | margin-bottom: 0; |
| 136 | border-bottom: 0; |
| 137 | } |
| 138 | } |
| 139 | } |
| 140 | |
| 141 | |
| 142 | // Contextual variants |
| 143 | // |
| 144 | // Add modifier classes to change text and background color on individual items. |
| 145 | // Organizationally, this must come after the `:hover` states. |
| 146 | |
| 147 | @each $color, $value in $theme-colors { |
| 148 | @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6)); |
| 149 | } |
| 150 |