git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/list-group.less

   1 //
   2 // List groups
   3 // --------------------------------------------------
   4
   5 // Base class
   6 //
   7 // Easily usable on <ul>, <ol>, or <div>.
   8 .list-group {
   9   // No need to set list-style: none; since .list-group-item is block level
  10   margin-bottom: 20px;
  11   padding-left: 0; // reset padding because ul and ol
  12   background-color: @list-group-bg;
  13 }
  14
  15 // Individual list items
  16 // -------------------------
  17
  18 .list-group-item {
  19   position: relative;
  20   display: block;
  21   padding: 10px 30px 10px 15px;
  22   // Place the border on the list items and negative margin up for better styling
  23   margin-bottom: -1px;
  24   border: 1px solid @list-group-border;
  25
  26   // Round the first and last items
  27   &:first-child {
  28     .border-top-radius(@border-radius-base);
  29   }
  30   &:last-child {
  31     margin-bottom: 0;
  32     .border-bottom-radius(@border-radius-base);
  33   }
  34
  35   // Align badges within list items
  36   > .badge {
  37     float: right;
  38     margin-right: -15px;
  39   }
  40 }
  41
  42 // Custom content options
  43 // -------------------------
  44
  45 .list-group-item-heading {
  46   margin-top: 0;
  47   margin-bottom: 5px;
  48 }
  49 .list-group-item-text {
  50   margin-bottom: 0;
  51   line-height: 1.3;
  52 }
  53
  54 // Linked list items
  55 // -------------------------
  56
  57 // Custom content within linked items
  58 a.list-group-item {
  59   // Colorize content accordingly
  60   .list-group-item-heading {
  61     color: @list-group-link-heading-color;
  62   }
  63   .list-group-item-text {
  64     color: @list-group-link-color;
  65   }
  66
  67   // Hover state
  68   &:hover,
  69   &:focus {
  70     text-decoration: none;
  71     background-color: @list-group-hover-bg;
  72   }
  73
  74   // Active class on item itself, not parent
  75   &.active {
  76     z-index: 2; // Place active items above their siblings for proper border styling
  77     color: @list-group-active-color;
  78     background-color: @list-group-active-bg;
  79     border-color: @list-group-active-border;
  80
  81     // Force color to inherit for custom content
  82     .list-group-item-heading {
  83       color: inherit;
  84     }
  85     .list-group-item-text {
  86       color: lighten(@list-group-active-bg, 40%);
  87     }
  88   }
  89 }