1 // |
|
2 // Panels |
|
3 // -------------------------------------------------- |
|
4 |
|
5 |
|
6 // Base class |
|
7 .panel { |
|
8 margin-bottom: @line-height-computed; |
|
9 background-color: @panel-bg; |
|
10 border: 1px solid transparent; |
|
11 border-radius: @panel-border-radius; |
|
12 .box-shadow(0 1px 1px rgba(0,0,0,.05)); |
|
13 } |
|
14 |
|
15 // Panel contents |
|
16 .panel-body { |
|
17 padding: 15px; |
|
18 .clearfix(); |
|
19 } |
|
20 |
|
21 |
|
22 // List groups in panels |
|
23 // |
|
24 // By default, space out list group content from panel headings to account for |
|
25 // any kind of custom content between the two. |
|
26 |
|
27 .panel { |
|
28 > .list-group { |
|
29 margin-bottom: 0; |
|
30 |
|
31 .list-group-item { |
|
32 border-width: 1px 0; |
|
33 |
|
34 // Remove border radius for top one |
|
35 &:first-child { |
|
36 .border-top-radius(0); |
|
37 } |
|
38 // But keep it for the last one |
|
39 &:last-child { |
|
40 border-bottom: 0; |
|
41 } |
|
42 } |
|
43 } |
|
44 } |
|
45 // Collapse space between when there's no additional content. |
|
46 .panel-heading + .list-group { |
|
47 .list-group-item:first-child { |
|
48 border-top-width: 0; |
|
49 } |
|
50 } |
|
51 |
|
52 |
|
53 // Tables in panels |
|
54 // |
|
55 // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and |
|
56 // watch it go full width. |
|
57 |
|
58 .panel { |
|
59 > .table, |
|
60 > .table-responsive > .table { |
|
61 margin-bottom: 0; |
|
62 } |
|
63 > .panel-body + .table, |
|
64 > .panel-body + .table-responsive { |
|
65 border-top: 1px solid @table-border-color; |
|
66 } |
|
67 > .table > tbody:first-child th, |
|
68 > .table > tbody:first-child td { |
|
69 border-top: 0; |
|
70 } |
|
71 > .table-bordered, |
|
72 > .table-responsive > .table-bordered { |
|
73 border: 0; |
|
74 > thead, |
|
75 > tbody, |
|
76 > tfoot { |
|
77 > tr { |
|
78 > th:first-child, |
|
79 > td:first-child { |
|
80 border-left: 0; |
|
81 } |
|
82 > th:last-child, |
|
83 > td:last-child { |
|
84 border-right: 0; |
|
85 } |
|
86 |
|
87 &:last-child > th, |
|
88 &:last-child > td { |
|
89 border-bottom: 0; |
|
90 } |
|
91 } |
|
92 } |
|
93 } |
|
94 > .table-responsive { |
|
95 border: 0; |
|
96 margin-bottom: 0; |
|
97 } |
|
98 } |
|
99 |
|
100 |
|
101 // Optional heading |
|
102 .panel-heading { |
|
103 padding: 10px 15px; |
|
104 border-bottom: 1px solid transparent; |
|
105 .border-top-radius(@panel-border-radius - 1); |
|
106 |
|
107 > .dropdown .dropdown-toggle { |
|
108 color: inherit; |
|
109 } |
|
110 } |
|
111 |
|
112 // Within heading, strip any `h*` tag of it's default margins for spacing. |
|
113 .panel-title { |
|
114 margin-top: 0; |
|
115 margin-bottom: 0; |
|
116 font-size: ceil((@font-size-base * 1.125)); |
|
117 color: inherit; |
|
118 |
|
119 > a { |
|
120 color: inherit; |
|
121 } |
|
122 } |
|
123 |
|
124 // Optional footer (stays gray in every modifier class) |
|
125 .panel-footer { |
|
126 padding: 10px 15px; |
|
127 background-color: @panel-footer-bg; |
|
128 border-top: 1px solid @panel-inner-border; |
|
129 .border-bottom-radius(@panel-border-radius - 1); |
|
130 } |
|
131 |
|
132 |
|
133 // Collapsable panels (aka, accordion) |
|
134 // |
|
135 // Wrap a series of panels in `.panel-group` to turn them into an accordion with |
|
136 // the help of our collapse JavaScript plugin. |
|
137 |
|
138 .panel-group { |
|
139 // Tighten up margin so it's only between panels |
|
140 .panel { |
|
141 margin-bottom: 0; |
|
142 border-radius: @panel-border-radius; |
|
143 overflow: hidden; // crop contents when collapsed |
|
144 + .panel { |
|
145 margin-top: 5px; |
|
146 } |
|
147 } |
|
148 |
|
149 .panel-heading { |
|
150 border-bottom: 0; |
|
151 + .panel-collapse .panel-body { |
|
152 border-top: 1px solid @panel-inner-border; |
|
153 } |
|
154 } |
|
155 .panel-footer { |
|
156 border-top: 0; |
|
157 + .panel-collapse .panel-body { |
|
158 border-bottom: 1px solid @panel-inner-border; |
|
159 } |
|
160 } |
|
161 } |
|
162 |
|
163 |
|
164 // Contextual variations |
|
165 .panel-default { |
|
166 .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border); |
|
167 } |
|
168 .panel-primary { |
|
169 .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); |
|
170 } |
|
171 .panel-success { |
|
172 .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); |
|
173 } |
|
174 .panel-warning { |
|
175 .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); |
|
176 } |
|
177 .panel-danger { |
|
178 .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); |
|
179 } |
|
180 .panel-info { |
|
181 .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); |
|
182 } |
|