src/scss/bootstrap-4.0.0-alpha.6/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-link-color;
  23   text-align: inherit; // For `<button>`s (anchors inherit)
  24
  25   .list-group-item-heading {
  26     color: $list-group-link-heading-color;
  27   }
  28
  29   // Hover state
  30   @include hover-focus {
  31     color: $list-group-link-hover-color;
  32     text-decoration: none;
  33     background-color: $list-group-hover-bg;
  34   }
  35
  36   &:active {
  37     color: $list-group-link-active-color;
  38     background-color: $list-group-link-active-bg;
  39   }
  40 }
  41
  42
  43 // Individual list items
  44 //
  45 // Use on `li`s or `div`s within the `.list-group` parent.
  46
  47 .list-group-item {
  48   position: relative;
  49   display: flex;
  50   flex-flow: row wrap;
  51   align-items: center;
  52   padding: $list-group-item-padding-y $list-group-item-padding-x;
  53   // Place the border on the list items and negative margin up for better styling
  54   margin-bottom: -$list-group-border-width;
  55   background-color: $list-group-bg;
  56   border: $list-group-border-width solid $list-group-border-color;
  57
  58   &:first-child {
  59     @include border-top-radius($list-group-border-radius);
  60   }
  61
  62   &:last-child {
  63     margin-bottom: 0;
  64     @include border-bottom-radius($list-group-border-radius);
  65   }
  66
  67   @include hover-focus {
  68     text-decoration: none;
  69   }
  70
  71   &.disabled,
  72   &:disabled {
  73     color: $list-group-disabled-color;
  74     cursor: $cursor-disabled;
  75     background-color: $list-group-disabled-bg;
  76
  77     // Force color to inherit for custom content
  78     .list-group-item-heading {
  79       color: inherit;
  80     }
  81     .list-group-item-text {
  82       color: $list-group-disabled-text-color;
  83     }
  84   }
  85
  86   // Include both here for `<a>`s and `<button>`s
  87   &.active {
  88     z-index: 2; // Place active items above their siblings for proper border styling
  89     color: $list-group-active-color;
  90     background-color: $list-group-active-bg;
  91     border-color: $list-group-active-border;
  92
  93     // Force color to inherit for custom content
  94     .list-group-item-heading,
  95     .list-group-item-heading > small,
  96     .list-group-item-heading > .small {
  97       color: inherit;
  98     }
  99
 100     .list-group-item-text {
 101       color: $list-group-active-text-color;
 102     }
 103   }
 104 }
 105
 106
 107 // Flush list items
 108 //
 109 // Remove borders and border-radius to keep list group items edge-to-edge. Most
 110 // useful within other components (e.g., cards).
 111
 112 .list-group-flush {
 113   .list-group-item {
 114     border-right: 0;
 115     border-left: 0;
 116     border-radius: 0;
 117   }
 118
 119   &:first-child {
 120     .list-group-item:first-child {
 121       border-top: 0;
 122     }
 123   }
 124
 125   &:last-child {
 126     .list-group-item:last-child {
 127       border-bottom: 0;
 128     }
 129   }
 130 }
 131
 132
 133 // Contextual variants
 134 //
 135 // Add modifier classes to change text and background color on individual items.
 136 // Organizationally, this must come after the `:hover` states.
 137
 138 @include list-group-item-variant(success, $state-success-bg, $state-success-text);
 139 @include list-group-item-variant(info, $state-info-bg, $state-info-text);
 140 @include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
 141 @include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);