eskp-app/1.0: static/less/list-group.less@3416f82943ea

     1 //

     2 // List groups

     3 // --------------------------------------------------

     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 }

    14 // Individual list items

    15 // -------------------------

    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;

    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   }

    35   // Align badges within list items

    36   > .badge {

    37     float: right;

    38   }

    39   > .badge + .badge {

    40     margin-right: 5px;

    41   }

    42 }

    44 // Linked list items

    45 a.list-group-item {

    46   color: @list-group-link-color;

    48   .list-group-item-heading {

    49     color: @list-group-link-heading-color;

    50   }

    52   // Hover state

    53   &:hover,

    54   &:focus {

    55     text-decoration: none;

    56     background-color: @list-group-hover-bg;

    57   }

    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;

    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 }

    78 // Custom content options

    79 // -------------------------

    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 }

author	stetrabby <info@trabucchi.de>
	Fri, 20 Dec 2013 22:30:44 +0100
changeset 53	3416f82943ea
permissions	-rwxr-xr-x