]>
Commit | Line | Data |
---|---|---|
11fdf7f2 TL |
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: @panel-body-padding; | |
18 | &:extend(.clearfix all); | |
19 | } | |
20 | ||
21 | // Optional heading | |
22 | .panel-heading { | |
23 | padding: @panel-heading-padding; | |
24 | border-bottom: 1px solid transparent; | |
25 | .border-top-radius((@panel-border-radius - 1)); | |
26 | ||
27 | > .dropdown .dropdown-toggle { | |
28 | color: inherit; | |
29 | } | |
30 | } | |
31 | ||
32 | // Within heading, strip any `h*` tag of its default margins for spacing. | |
33 | .panel-title { | |
34 | margin-top: 0; | |
35 | margin-bottom: 0; | |
36 | font-size: ceil((@font-size-base * 1.125)); | |
37 | color: inherit; | |
38 | ||
39 | > a, | |
40 | > small, | |
41 | > .small, | |
42 | > small > a, | |
43 | > .small > a { | |
44 | color: inherit; | |
45 | } | |
46 | } | |
47 | ||
48 | // Optional footer (stays gray in every modifier class) | |
49 | .panel-footer { | |
50 | padding: @panel-footer-padding; | |
51 | background-color: @panel-footer-bg; | |
52 | border-top: 1px solid @panel-inner-border; | |
53 | .border-bottom-radius((@panel-border-radius - 1)); | |
54 | } | |
55 | ||
56 | ||
57 | // List groups in panels | |
58 | // | |
59 | // By default, space out list group content from panel headings to account for | |
60 | // any kind of custom content between the two. | |
61 | ||
62 | .panel { | |
63 | > .list-group, | |
64 | > .panel-collapse > .list-group { | |
65 | margin-bottom: 0; | |
66 | ||
67 | .list-group-item { | |
68 | border-width: 1px 0; | |
69 | border-radius: 0; | |
70 | } | |
71 | ||
72 | // Add border top radius for first one | |
73 | &:first-child { | |
74 | .list-group-item:first-child { | |
75 | border-top: 0; | |
76 | .border-top-radius((@panel-border-radius - 1)); | |
77 | } | |
78 | } | |
79 | // Add border bottom radius for last one | |
80 | &:last-child { | |
81 | .list-group-item:last-child { | |
82 | border-bottom: 0; | |
83 | .border-bottom-radius((@panel-border-radius - 1)); | |
84 | } | |
85 | } | |
86 | } | |
87 | } | |
88 | // Collapse space between when there's no additional content. | |
89 | .panel-heading + .list-group { | |
90 | .list-group-item:first-child { | |
91 | border-top-width: 0; | |
92 | } | |
93 | } | |
94 | .list-group + .panel-footer { | |
95 | border-top-width: 0; | |
96 | } | |
97 | ||
98 | // Tables in panels | |
99 | // | |
100 | // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and | |
101 | // watch it go full width. | |
102 | ||
103 | .panel { | |
104 | > .table, | |
105 | > .table-responsive > .table, | |
106 | > .panel-collapse > .table { | |
107 | margin-bottom: 0; | |
108 | ||
109 | caption { | |
110 | padding-left: @panel-body-padding; | |
111 | padding-right: @panel-body-padding; | |
112 | } | |
113 | } | |
114 | // Add border top radius for first one | |
115 | > .table:first-child, | |
116 | > .table-responsive:first-child > .table:first-child { | |
117 | .border-top-radius((@panel-border-radius - 1)); | |
118 | ||
119 | > thead:first-child, | |
120 | > tbody:first-child { | |
121 | > tr:first-child { | |
122 | border-top-left-radius: (@panel-border-radius - 1); | |
123 | border-top-right-radius: (@panel-border-radius - 1); | |
124 | ||
125 | td:first-child, | |
126 | th:first-child { | |
127 | border-top-left-radius: (@panel-border-radius - 1); | |
128 | } | |
129 | td:last-child, | |
130 | th:last-child { | |
131 | border-top-right-radius: (@panel-border-radius - 1); | |
132 | } | |
133 | } | |
134 | } | |
135 | } | |
136 | // Add border bottom radius for last one | |
137 | > .table:last-child, | |
138 | > .table-responsive:last-child > .table:last-child { | |
139 | .border-bottom-radius((@panel-border-radius - 1)); | |
140 | ||
141 | > tbody:last-child, | |
142 | > tfoot:last-child { | |
143 | > tr:last-child { | |
144 | border-bottom-left-radius: (@panel-border-radius - 1); | |
145 | border-bottom-right-radius: (@panel-border-radius - 1); | |
146 | ||
147 | td:first-child, | |
148 | th:first-child { | |
149 | border-bottom-left-radius: (@panel-border-radius - 1); | |
150 | } | |
151 | td:last-child, | |
152 | th:last-child { | |
153 | border-bottom-right-radius: (@panel-border-radius - 1); | |
154 | } | |
155 | } | |
156 | } | |
157 | } | |
158 | > .panel-body + .table, | |
159 | > .panel-body + .table-responsive, | |
160 | > .table + .panel-body, | |
161 | > .table-responsive + .panel-body { | |
162 | border-top: 1px solid @table-border-color; | |
163 | } | |
164 | > .table > tbody:first-child > tr:first-child th, | |
165 | > .table > tbody:first-child > tr:first-child td { | |
166 | border-top: 0; | |
167 | } | |
168 | > .table-bordered, | |
169 | > .table-responsive > .table-bordered { | |
170 | border: 0; | |
171 | > thead, | |
172 | > tbody, | |
173 | > tfoot { | |
174 | > tr { | |
175 | > th:first-child, | |
176 | > td:first-child { | |
177 | border-left: 0; | |
178 | } | |
179 | > th:last-child, | |
180 | > td:last-child { | |
181 | border-right: 0; | |
182 | } | |
183 | } | |
184 | } | |
185 | > thead, | |
186 | > tbody { | |
187 | > tr:first-child { | |
188 | > td, | |
189 | > th { | |
190 | border-bottom: 0; | |
191 | } | |
192 | } | |
193 | } | |
194 | > tbody, | |
195 | > tfoot { | |
196 | > tr:last-child { | |
197 | > td, | |
198 | > th { | |
199 | border-bottom: 0; | |
200 | } | |
201 | } | |
202 | } | |
203 | } | |
204 | > .table-responsive { | |
205 | border: 0; | |
206 | margin-bottom: 0; | |
207 | } | |
208 | } | |
209 | ||
210 | ||
211 | // Collapsable panels (aka, accordion) | |
212 | // | |
213 | // Wrap a series of panels in `.panel-group` to turn them into an accordion with | |
214 | // the help of our collapse JavaScript plugin. | |
215 | ||
216 | .panel-group { | |
217 | margin-bottom: @line-height-computed; | |
218 | ||
219 | // Tighten up margin so it's only between panels | |
220 | .panel { | |
221 | margin-bottom: 0; | |
222 | border-radius: @panel-border-radius; | |
223 | ||
224 | + .panel { | |
225 | margin-top: 5px; | |
226 | } | |
227 | } | |
228 | ||
229 | .panel-heading { | |
230 | border-bottom: 0; | |
231 | ||
232 | + .panel-collapse > .panel-body, | |
233 | + .panel-collapse > .list-group { | |
234 | border-top: 1px solid @panel-inner-border; | |
235 | } | |
236 | } | |
237 | ||
238 | .panel-footer { | |
239 | border-top: 0; | |
240 | + .panel-collapse .panel-body { | |
241 | border-bottom: 1px solid @panel-inner-border; | |
242 | } | |
243 | } | |
244 | } | |
245 | ||
246 | ||
247 | // Contextual variations | |
248 | .panel-default { | |
249 | .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border); | |
250 | } | |
251 | .panel-primary { | |
252 | .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); | |
253 | } | |
254 | .panel-success { | |
255 | .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); | |
256 | } | |
257 | .panel-info { | |
258 | .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); | |
259 | } | |
260 | .panel-warning { | |
261 | .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); | |
262 | } | |
263 | .panel-danger { | |
264 | .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); | |
265 | } |