Mercurial > wikked

comparison static/bootstrap/less/list-group.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
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 }