Warning, /iDDS/monitor/data/scss/bootstrap/_list-group.scss is written in an unsupported language. File is not indexed.
0001 // Base class
0002 //
0003 // Easily usable on <ul>, <ol>, or <div>.
0004
0005 .list-group {
0006 display: flex;
0007 flex-direction: column;
0008
0009 // No need to set list-style: none; since .list-group-item is block level
0010 padding-left: 0; // reset padding because ul and ol
0011 margin-bottom: 0;
0012 @include border-radius($list-group-border-radius);
0013 }
0014
0015
0016 // Interactive list items
0017 //
0018 // Use anchor or button elements instead of `li`s or `div`s to create interactive
0019 // list items. Includes an extra `.active` modifier class for selected items.
0020
0021 .list-group-item-action {
0022 width: 100%; // For `<button>`s (anchors become 100% by default though)
0023 color: $list-group-action-color;
0024 text-align: inherit; // For `<button>`s (anchors inherit)
0025
0026 // Hover state
0027 &:hover,
0028 &:focus {
0029 z-index: 1; // Place hover/focus items above their siblings for proper border styling
0030 color: $list-group-action-hover-color;
0031 text-decoration: none;
0032 background-color: $list-group-hover-bg;
0033 }
0034
0035 &:active {
0036 color: $list-group-action-active-color;
0037 background-color: $list-group-action-active-bg;
0038 }
0039 }
0040
0041
0042 // Individual list items
0043 //
0044 // Use on `li`s or `div`s within the `.list-group` parent.
0045
0046 .list-group-item {
0047 position: relative;
0048 display: block;
0049 padding: $list-group-item-padding-y $list-group-item-padding-x;
0050 color: $list-group-color;
0051 text-decoration: if($link-decoration == none, null, none);
0052 background-color: $list-group-bg;
0053 border: $list-group-border-width solid $list-group-border-color;
0054
0055 &:first-child {
0056 @include border-top-radius(inherit);
0057 }
0058
0059 &:last-child {
0060 @include border-bottom-radius(inherit);
0061 }
0062
0063 &.disabled,
0064 &:disabled {
0065 color: $list-group-disabled-color;
0066 pointer-events: none;
0067 background-color: $list-group-disabled-bg;
0068 }
0069
0070 // Include both here for `<a>`s and `<button>`s
0071 &.active {
0072 z-index: 2; // Place active items above their siblings for proper border styling
0073 color: $list-group-active-color;
0074 background-color: $list-group-active-bg;
0075 border-color: $list-group-active-border-color;
0076 }
0077
0078 & + & {
0079 border-top-width: 0;
0080
0081 &.active {
0082 margin-top: -$list-group-border-width;
0083 border-top-width: $list-group-border-width;
0084 }
0085 }
0086 }
0087
0088
0089 // Horizontal
0090 //
0091 // Change the layout of list group items from vertical (default) to horizontal.
0092
0093 @each $breakpoint in map-keys($grid-breakpoints) {
0094 @include media-breakpoint-up($breakpoint) {
0095 $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
0096
0097 .list-group-horizontal#{$infix} {
0098 flex-direction: row;
0099
0100 > .list-group-item {
0101 &:first-child {
0102 @include border-bottom-start-radius($list-group-border-radius);
0103 @include border-top-end-radius(0);
0104 }
0105
0106 &:last-child {
0107 @include border-top-end-radius($list-group-border-radius);
0108 @include border-bottom-start-radius(0);
0109 }
0110
0111 &.active {
0112 margin-top: 0;
0113 }
0114
0115 + .list-group-item {
0116 border-top-width: $list-group-border-width;
0117 border-left-width: 0;
0118
0119 &.active {
0120 margin-left: -$list-group-border-width;
0121 border-left-width: $list-group-border-width;
0122 }
0123 }
0124 }
0125 }
0126 }
0127 }
0128
0129
0130 // Flush list items
0131 //
0132 // Remove borders and border-radius to keep list group items edge-to-edge. Most
0133 // useful within other components (e.g., cards).
0134
0135 .list-group-flush {
0136 @include border-radius(0);
0137
0138 > .list-group-item {
0139 border-width: 0 0 $list-group-border-width;
0140
0141 &:last-child {
0142 border-bottom-width: 0;
0143 }
0144 }
0145 }
0146
0147
0148 // scss-docs-start list-group-modifiers
0149 // List group contextual variants
0150 //
0151 // Add modifier classes to change text and background color on individual items.
0152 // Organizationally, this must come after the `:hover` states.
0153
0154 @each $state, $value in $theme-colors {
0155 $background: shift-color($value, $list-group-item-bg-scale);
0156 $color: shift-color($value, $list-group-item-color-scale);
0157 @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
0158 $color: mix($value, color-contrast($background), abs($alert-color-scale));
0159 }
0160
0161 @include list-group-item-variant($state, $background, $color);
0162 }
0163 // scss-docs-end list-group-modifiers
