github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/list-group.less (about)

     1  //
     2  // List groups
     3  // --------------------------------------------------
     4  
     5  
     6  // Base class
     7  //
     8  // Easily usable on <ul>, <ol>, or <div>.
     9  
    10  .list-group {
    11    // No need to set list-style: none; since .list-group-item is block level
    12    margin-bottom: 20px;
    13    padding-left: 0; // reset padding because ul and ol
    14  }
    15  
    16  
    17  // Individual list items
    18  //
    19  // Use on `li`s or `div`s within the `.list-group` parent.
    20  
    21  .list-group-item {
    22    position: relative;
    23    display: block;
    24    padding: 10px 15px;
    25    // Place the border on the list items and negative margin up for better styling
    26    margin-bottom: -1px;
    27    background-color: @list-group-bg;
    28    border: 1px solid @list-group-border;
    29  
    30    // Round the first and last items
    31    &:first-child {
    32      .border-top-radius(@list-group-border-radius);
    33    }
    34    &:last-child {
    35      margin-bottom: 0;
    36      .border-bottom-radius(@list-group-border-radius);
    37    }
    38  
    39    // Align badges within list items
    40    > .badge {
    41      float: right;
    42    }
    43    > .badge + .badge {
    44      margin-right: 5px;
    45    }
    46  }
    47  
    48  
    49  // Linked list items
    50  //
    51  // Use anchor elements instead of `li`s or `div`s to create linked list items.
    52  // Includes an extra `.active` modifier class for showing selected items.
    53  
    54  a.list-group-item {
    55    color: @list-group-link-color;
    56  
    57    .list-group-item-heading {
    58      color: @list-group-link-heading-color;
    59    }
    60  
    61    // Hover state
    62    &:hover,
    63    &:focus {
    64      text-decoration: none;
    65      background-color: @list-group-hover-bg;
    66    }
    67  
    68    // Active class on item itself, not parent
    69    &.active,
    70    &.active:hover,
    71    &.active:focus {
    72      z-index: 2; // Place active items above their siblings for proper border styling
    73      color: @list-group-active-color;
    74      background-color: @list-group-active-bg;
    75      border-color: @list-group-active-border;
    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-active-text-color;
    83      }
    84    }
    85  }
    86  
    87  
    88  // Contextual variants
    89  //
    90  // Add modifier classes to change text and background color on individual items.
    91  // Organizationally, this must come after the `:hover` states.
    92  
    93  .list-group-item-variant(success; @state-success-bg; @state-success-text);
    94  .list-group-item-variant(info; @state-info-bg; @state-info-text);
    95  .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
    96  .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
    97  
    98  
    99  // Custom content options
   100  //
   101  // Extra classes for creating well-formatted content within `.list-group-item`s.
   102  
   103  .list-group-item-heading {
   104    margin-top: 0;
   105    margin-bottom: 5px;
   106  }
   107  .list-group-item-text {
   108    margin-bottom: 0;
   109    line-height: 1.3;
   110  }