corrade-nucleus-nucleons – Blame information for rev 10
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
10 | office | 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 | |||
40 | |||
41 | // Interactive list items |
||
42 | // |
||
43 | // Use anchor or button elements instead of `li`s or `div`s to create interactive items. |
||
44 | // Includes an extra `.active` modifier class for showing selected items. |
||
45 | |||
46 | a.list-group-item, |
||
47 | button.list-group-item { |
||
48 | color: @list-group-link-color; |
||
49 | |||
50 | .list-group-item-heading { |
||
51 | color: @list-group-link-heading-color; |
||
52 | } |
||
53 | |||
54 | // Hover state |
||
55 | &:hover, |
||
56 | &:focus { |
||
57 | text-decoration: none; |
||
58 | color: @list-group-link-hover-color; |
||
59 | background-color: @list-group-hover-bg; |
||
60 | } |
||
61 | } |
||
62 | |||
63 | button.list-group-item { |
||
64 | width: 100%; |
||
65 | text-align: left; |
||
66 | } |
||
67 | |||
68 | .list-group-item { |
||
69 | // Disabled state |
||
70 | &.disabled, |
||
71 | &.disabled:hover, |
||
72 | &.disabled:focus { |
||
73 | background-color: @list-group-disabled-bg; |
||
74 | color: @list-group-disabled-color; |
||
75 | cursor: @cursor-disabled; |
||
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-disabled-text-color; |
||
83 | } |
||
84 | } |
||
85 | |||
86 | // Active class on item itself, not parent |
||
87 | &.active, |
||
88 | &.active:hover, |
||
89 | &.active:focus { |
||
90 | z-index: 2; // Place active items above their siblings for proper border styling |
||
91 | color: @list-group-active-color; |
||
92 | background-color: @list-group-active-bg; |
||
93 | border-color: @list-group-active-border; |
||
94 | |||
95 | // Force color to inherit for custom content |
||
96 | .list-group-item-heading, |
||
97 | .list-group-item-heading > small, |
||
98 | .list-group-item-heading > .small { |
||
99 | color: inherit; |
||
100 | } |
||
101 | .list-group-item-text { |
||
102 | color: @list-group-active-text-color; |
||
103 | } |
||
104 | } |
||
105 | } |
||
106 | |||
107 | |||
108 | // Contextual variants |
||
109 | // |
||
110 | // Add modifier classes to change text and background color on individual items. |
||
111 | // Organizationally, this must come after the `:hover` states. |
||
112 | |||
113 | .list-group-item-variant(success; @state-success-bg; @state-success-text); |
||
114 | .list-group-item-variant(info; @state-info-bg; @state-info-text); |
||
115 | .list-group-item-variant(warning; @state-warning-bg; @state-warning-text); |
||
116 | .list-group-item-variant(danger; @state-danger-bg; @state-danger-text); |
||
117 | |||
118 | |||
119 | // Custom content options |
||
120 | // |
||
121 | // Extra classes for creating well-formatted content within `.list-group-item`s. |
||
122 | |||
123 | .list-group-item-heading { |
||
124 | margin-top: 0; |
||
125 | margin-bottom: 5px; |
||
126 | } |
||
127 | .list-group-item-text { |
||
128 | margin-bottom: 0; |
||
129 | line-height: 1.3; |
||
130 | } |