codekingpro/portable-devtools

1// Base class2//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 level10  padding-left: 0; // reset padding because ul and ol11  margin-bottom: 0;12  @include border-radius($list-group-border-radius);13}14 15 16// Interactive list items17//18// Use anchor or button elements instead of `li`s or `div`s to create interactive19// 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 state27  @include hover-focus() {28    z-index: 1; // Place hover/focus items above their siblings for proper border styling29    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 items42//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>`s70  &.active {71    z-index: 2; // Place active items above their siblings for proper border styling72    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// Horizontal89//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 items130//131// Remove borders and border-radius to keep list group items edge-to-edge. Most132// 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 variants148//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