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