git.roojs.org Git - roojs1/blob - scss/bootstrap/_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     pointer-events: none;
  70     background-color: $list-group-disabled-bg;
  71   }
  72
  73   // Include both here for `<a>`s and `<button>`s
  74   &.active {
  75     z-index: 2; // Place active items above their siblings for proper border styling
  76     color: $list-group-active-color;
  77     background-color: $list-group-active-bg;
  78     border-color: $list-group-active-border-color;
  79   }
  80 }
  81
  82
  83 // Flush list items
  84 //
  85 // Remove borders and border-radius to keep list group items edge-to-edge. Most
  86 // useful within other components (e.g., cards).
  87
  88 .list-group-flush {
  89   .list-group-item {
  90     border-right: 0;
  91     border-left: 0;
  92     @include border-radius(0);
  93
  94     &:last-child {
  95       margin-bottom: -$list-group-border-width;
  96     }
  97   }
  98
  99   &:first-child {
 100     .list-group-item:first-child {
 101       border-top: 0;
 102     }
 103   }
 104
 105   &:last-child {
 106     .list-group-item:last-child {
 107       margin-bottom: 0;
 108       border-bottom: 0;
 109     }
 110   }
 111 }
 112
 113
 114 // Contextual variants
 115 //
 116 // Add modifier classes to change text and background color on individual items.
 117 // Organizationally, this must come after the `:hover` states.
 118
 119 @each $color, $value in $theme-colors {
 120   @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
 121 }