mixins
3 years ago
utilities
3 years ago
vendor
3 years ago
_alert.scss
3 years ago
_badge.scss
3 years ago
_breadcrumb.scss
3 years ago
_button-group.scss
3 years ago
_buttons.scss
3 years ago
_card.scss
3 years ago
_carousel.scss
3 years ago
_close.scss
3 years ago
_code.scss
3 years ago
_custom-forms.scss
3 years ago
_dropdown.scss
3 years ago
_forms.scss
3 years ago
_functions.scss
3 years ago
_grid.scss
3 years ago
_images.scss
3 years ago
_input-group.scss
3 years ago
_jumbotron.scss
3 years ago
_list-group.scss
3 years ago
_media.scss
3 years ago
_mixins.scss
3 years ago
_modal.scss
3 years ago
_nav.scss
3 years ago
_navbar.scss
3 years ago
_pagination.scss
3 years ago
_popover.scss
3 years ago
_print.scss
3 years ago
_progress.scss
3 years ago
_reboot.scss
3 years ago
_root.scss
3 years ago
_spinners.scss
3 years ago
_tables.scss
3 years ago
_toasts.scss
3 years ago
_tooltip.scss
3 years ago
_transitions.scss
3 years ago
_type.scss
3 years ago
_utilities.scss
3 years ago
_variables.scss
3 years ago
bootstrap-grid.scss
3 years ago
bootstrap-reboot.scss
3 years ago
bootstrap-sidepanel.scss
3 years ago
bootstrap.scss
1 year ago
_list-group.scss
155 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 | @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 |