tools/side_chain_tool/web/node_modules/bootstrap/scss/_list-group.scss

   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 }
  13
  14
  15 // Interactive list items
  16 //
  17 // Use anchor or button elements instead of `li`s or `div`s to create interactive
  18 // list items. Includes an extra `.active` modifier class for selected items.
  19
  20 .list-group-item-action {
  21   width: 100%; // For `<button>`s (anchors become 100% by default though)
  22   color: $list-group-action-color;
  23   text-align: inherit; // For `<button>`s (anchors inherit)
  24
  25   // Hover state
  26   @include hover-focus {
  27     color: $list-group-action-hover-color;
  28     text-decoration: none;
  29     background-color: $list-group-hover-bg;
  30   }
  31
  32   &:active {
  33     color: $list-group-action-active-color;
  34     background-color: $list-group-action-active-bg;
  35   }
  36 }
  37
  38
  39 // Individual list items
  40 //
  41 // Use on `li`s or `div`s within the `.list-group` parent.
  42
  43 .list-group-item {
  44   position: relative;
  45   display: block;
  46   padding: $list-group-item-padding-y $list-group-item-padding-x;
  47   // Place the border on the list items and negative margin up for better styling
  48   margin-bottom: -$list-group-border-width;
  49   background-color: $list-group-bg;
  50   border: $list-group-border-width solid $list-group-border-color;
  51
  52   &:first-child {
  53     @include border-top-radius($list-group-border-radius);
  54   }
  55
  56   &:last-child {
  57     margin-bottom: 0;
  58     @include border-bottom-radius($list-group-border-radius);
  59   }
  60
  61   @include hover-focus {
  62     z-index: 1; // Place hover/active items above their siblings for proper border styling
  63     text-decoration: none;
  64   }
  65
  66   &.disabled,
  67   &:disabled {
  68     color: $list-group-disabled-color;
  69     background-color: $list-group-disabled-bg;
  70   }
  71
  72   // Include both here for `<a>`s and `<button>`s
  73   &.active {
  74     z-index: 2; // Place active items above their siblings for proper border styling
  75     color: $list-group-active-color;
  76     background-color: $list-group-active-bg;
  77     border-color: $list-group-active-border-color;
  78   }
  79 }
  80
  81
  82 // Flush list items
  83 //
  84 // Remove borders and border-radius to keep list group items edge-to-edge. Most
  85 // useful within other components (e.g., cards).
  86
  87 .list-group-flush {
  88   .list-group-item {
  89     border-right: 0;
  90     border-left: 0;
  91     @include border-radius(0);
  92   }
  93
  94   &:first-child {
  95     .list-group-item:first-child {
  96       border-top: 0;
  97     }
  98   }
  99
 100   &:last-child {
 101     .list-group-item:last-child {
 102       border-bottom: 0;
 103     }
 104   }
 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 @each $color, $value in $theme-colors {
 114   @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
 115 }