• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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}
266