pyc-website

main website for pyc inc.

git clone https://9o.is/git/pyc-website.git

list-group.less

(1914B)


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