| 1 | // Base class
|
|---|
| 2 | //
|
|---|
| 3 | // Easily usable on <ul>, <ol>, or <div>.
|
|---|
| 4 |
|
|---|
| 5 | .list-group {
|
|---|
| 6 | // scss-docs-start list-group-css-vars
|
|---|
| 7 | --#{$prefix}list-group-color: #{$list-group-color};
|
|---|
| 8 | --#{$prefix}list-group-bg: #{$list-group-bg};
|
|---|
| 9 | --#{$prefix}list-group-border-color: #{$list-group-border-color};
|
|---|
| 10 | --#{$prefix}list-group-border-width: #{$list-group-border-width};
|
|---|
| 11 | --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
|
|---|
| 12 | --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
|
|---|
| 13 | --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
|
|---|
| 14 | --#{$prefix}list-group-action-color: #{$list-group-action-color};
|
|---|
| 15 | --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
|
|---|
| 16 | --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
|
|---|
| 17 | --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
|
|---|
| 18 | --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
|
|---|
| 19 | --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
|
|---|
| 20 | --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
|
|---|
| 21 | --#{$prefix}list-group-active-color: #{$list-group-active-color};
|
|---|
| 22 | --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
|
|---|
| 23 | --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
|
|---|
| 24 | // scss-docs-end list-group-css-vars
|
|---|
| 25 |
|
|---|
| 26 | display: flex;
|
|---|
| 27 | flex-direction: column;
|
|---|
| 28 |
|
|---|
| 29 | // No need to set list-style: none; since .list-group-item is block level
|
|---|
| 30 | padding-left: 0; // reset padding because ul and ol
|
|---|
| 31 | margin-bottom: 0;
|
|---|
| 32 | @include border-radius(var(--#{$prefix}list-group-border-radius));
|
|---|
| 33 | }
|
|---|
| 34 |
|
|---|
| 35 | .list-group-numbered {
|
|---|
| 36 | list-style-type: none;
|
|---|
| 37 | counter-reset: section;
|
|---|
| 38 |
|
|---|
| 39 | > .list-group-item::before {
|
|---|
| 40 | // Increments only this instance of the section counter
|
|---|
| 41 | content: counters(section, ".") ". ";
|
|---|
| 42 | counter-increment: section;
|
|---|
| 43 | }
|
|---|
| 44 | }
|
|---|
| 45 |
|
|---|
| 46 | // Interactive list items
|
|---|
| 47 | //
|
|---|
| 48 | // Use anchor or button elements instead of `li`s or `div`s to create interactive
|
|---|
| 49 | // list items. Includes an extra `.active` modifier class for selected items.
|
|---|
| 50 |
|
|---|
| 51 | .list-group-item-action {
|
|---|
| 52 | width: 100%; // For `<button>`s (anchors become 100% by default though)
|
|---|
| 53 | color: var(--#{$prefix}list-group-action-color);
|
|---|
| 54 | text-align: inherit; // For `<button>`s (anchors inherit)
|
|---|
| 55 |
|
|---|
| 56 | // Hover state
|
|---|
| 57 | &:hover,
|
|---|
| 58 | &:focus {
|
|---|
| 59 | z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
|---|
| 60 | color: var(--#{$prefix}list-group-action-hover-color);
|
|---|
| 61 | text-decoration: none;
|
|---|
| 62 | background-color: var(--#{$prefix}list-group-action-hover-bg);
|
|---|
| 63 | }
|
|---|
| 64 |
|
|---|
| 65 | &:active {
|
|---|
| 66 | color: var(--#{$prefix}list-group-action-active-color);
|
|---|
| 67 | background-color: var(--#{$prefix}list-group-action-active-bg);
|
|---|
| 68 | }
|
|---|
| 69 | }
|
|---|
| 70 |
|
|---|
| 71 | // Individual list items
|
|---|
| 72 | //
|
|---|
| 73 | // Use on `li`s or `div`s within the `.list-group` parent.
|
|---|
| 74 |
|
|---|
| 75 | .list-group-item {
|
|---|
| 76 | position: relative;
|
|---|
| 77 | display: block;
|
|---|
| 78 | padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
|
|---|
| 79 | color: var(--#{$prefix}list-group-color);
|
|---|
| 80 | text-decoration: if($link-decoration == none, null, none);
|
|---|
| 81 | background-color: var(--#{$prefix}list-group-bg);
|
|---|
| 82 | border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
|
|---|
| 83 |
|
|---|
| 84 | &:first-child {
|
|---|
| 85 | @include border-top-radius(inherit);
|
|---|
| 86 | }
|
|---|
| 87 |
|
|---|
| 88 | &:last-child {
|
|---|
| 89 | @include border-bottom-radius(inherit);
|
|---|
| 90 | }
|
|---|
| 91 |
|
|---|
| 92 | &.disabled,
|
|---|
| 93 | &:disabled {
|
|---|
| 94 | color: var(--#{$prefix}list-group-disabled-color);
|
|---|
| 95 | pointer-events: none;
|
|---|
| 96 | background-color: var(--#{$prefix}list-group-disabled-bg);
|
|---|
| 97 | }
|
|---|
| 98 |
|
|---|
| 99 | // Include both here for `<a>`s and `<button>`s
|
|---|
| 100 | &.active {
|
|---|
| 101 | z-index: 2; // Place active items above their siblings for proper border styling
|
|---|
| 102 | color: var(--#{$prefix}list-group-active-color);
|
|---|
| 103 | background-color: var(--#{$prefix}list-group-active-bg);
|
|---|
| 104 | border-color: var(--#{$prefix}list-group-active-border-color);
|
|---|
| 105 | }
|
|---|
| 106 |
|
|---|
| 107 | // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
|
|---|
| 108 | & + .list-group-item {
|
|---|
| 109 | border-top-width: 0;
|
|---|
| 110 |
|
|---|
| 111 | &.active {
|
|---|
| 112 | margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
|---|
| 113 | border-top-width: var(--#{$prefix}list-group-border-width);
|
|---|
| 114 | }
|
|---|
| 115 | }
|
|---|
| 116 | }
|
|---|
| 117 |
|
|---|
| 118 | // Horizontal
|
|---|
| 119 | //
|
|---|
| 120 | // Change the layout of list group items from vertical (default) to horizontal.
|
|---|
| 121 |
|
|---|
| 122 | @each $breakpoint in map-keys($grid-breakpoints) {
|
|---|
| 123 | @include media-breakpoint-up($breakpoint) {
|
|---|
| 124 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|---|
| 125 |
|
|---|
| 126 | .list-group-horizontal#{$infix} {
|
|---|
| 127 | flex-direction: row;
|
|---|
| 128 |
|
|---|
| 129 | > .list-group-item {
|
|---|
| 130 | &:first-child:not(:last-child) {
|
|---|
| 131 | @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
|
|---|
| 132 | @include border-top-end-radius(0);
|
|---|
| 133 | }
|
|---|
| 134 |
|
|---|
| 135 | &:last-child:not(:first-child) {
|
|---|
| 136 | @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
|
|---|
| 137 | @include border-bottom-start-radius(0);
|
|---|
| 138 | }
|
|---|
| 139 |
|
|---|
| 140 | &.active {
|
|---|
| 141 | margin-top: 0;
|
|---|
| 142 | }
|
|---|
| 143 |
|
|---|
| 144 | + .list-group-item {
|
|---|
| 145 | border-top-width: var(--#{$prefix}list-group-border-width);
|
|---|
| 146 | border-left-width: 0;
|
|---|
| 147 |
|
|---|
| 148 | &.active {
|
|---|
| 149 | margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
|---|
| 150 | border-left-width: var(--#{$prefix}list-group-border-width);
|
|---|
| 151 | }
|
|---|
| 152 | }
|
|---|
| 153 | }
|
|---|
| 154 | }
|
|---|
| 155 | }
|
|---|
| 156 | }
|
|---|
| 157 |
|
|---|
| 158 |
|
|---|
| 159 | // Flush list items
|
|---|
| 160 | //
|
|---|
| 161 | // Remove borders and border-radius to keep list group items edge-to-edge. Most
|
|---|
| 162 | // useful within other components (e.g., cards).
|
|---|
| 163 |
|
|---|
| 164 | .list-group-flush {
|
|---|
| 165 | @include border-radius(0);
|
|---|
| 166 |
|
|---|
| 167 | > .list-group-item {
|
|---|
| 168 | border-width: 0 0 var(--#{$prefix}list-group-border-width);
|
|---|
| 169 |
|
|---|
| 170 | &:last-child {
|
|---|
| 171 | border-bottom-width: 0;
|
|---|
| 172 | }
|
|---|
| 173 | }
|
|---|
| 174 | }
|
|---|
| 175 |
|
|---|
| 176 |
|
|---|
| 177 | // scss-docs-start list-group-modifiers
|
|---|
| 178 | // List group contextual variants
|
|---|
| 179 | //
|
|---|
| 180 | // Add modifier classes to change text and background color on individual items.
|
|---|
| 181 | // Organizationally, this must come after the `:hover` states.
|
|---|
| 182 |
|
|---|
| 183 | @each $state in map-keys($theme-colors) {
|
|---|
| 184 | .list-group-item-#{$state} {
|
|---|
| 185 | --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
|---|
| 186 | --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
|---|
| 187 | --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
|
|---|
| 188 | --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
|
|---|
| 189 | --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
|
|---|
| 190 | --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
|
|---|
| 191 | --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
|
|---|
| 192 | --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
|
|---|
| 193 | --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
|
|---|
| 194 | --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
|
|---|
| 195 | }
|
|---|
| 196 | }
|
|---|
| 197 | // scss-docs-end list-group-modifiers
|
|---|
