corrade-http-templates – Blame information for rev
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
38 | office | 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 | |||
80 | // Add border bottom radius for last one |
||
81 | &:last-child { |
||
82 | .list-group-item:last-child { |
||
83 | border-bottom: 0; |
||
84 | .border-bottom-radius((@panel-border-radius - 1)); |
||
85 | } |
||
86 | } |
||
87 | } |
||
88 | > .panel-heading + .panel-collapse > .list-group { |
||
89 | .list-group-item:first-child { |
||
90 | .border-top-radius(0); |
||
91 | } |
||
92 | } |
||
93 | } |
||
94 | // Collapse space between when there's no additional content. |
||
95 | .panel-heading + .list-group { |
||
96 | .list-group-item:first-child { |
||
97 | border-top-width: 0; |
||
98 | } |
||
99 | } |
||
100 | .list-group + .panel-footer { |
||
101 | border-top-width: 0; |
||
102 | } |
||
103 | |||
104 | // Tables in panels |
||
105 | // |
||
106 | // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and |
||
107 | // watch it go full width. |
||
108 | |||
109 | .panel { |
||
110 | > .table, |
||
111 | > .table-responsive > .table, |
||
112 | > .panel-collapse > .table { |
||
113 | margin-bottom: 0; |
||
114 | |||
115 | caption { |
||
116 | padding-left: @panel-body-padding; |
||
117 | padding-right: @panel-body-padding; |
||
118 | } |
||
119 | } |
||
120 | // Add border top radius for first one |
||
121 | > .table:first-child, |
||
122 | > .table-responsive:first-child > .table:first-child { |
||
123 | .border-top-radius((@panel-border-radius - 1)); |
||
124 | |||
125 | > thead:first-child, |
||
126 | > tbody:first-child { |
||
127 | > tr:first-child { |
||
128 | border-top-left-radius: (@panel-border-radius - 1); |
||
129 | border-top-right-radius: (@panel-border-radius - 1); |
||
130 | |||
131 | td:first-child, |
||
132 | th:first-child { |
||
133 | border-top-left-radius: (@panel-border-radius - 1); |
||
134 | } |
||
135 | td:last-child, |
||
136 | th:last-child { |
||
137 | border-top-right-radius: (@panel-border-radius - 1); |
||
138 | } |
||
139 | } |
||
140 | } |
||
141 | } |
||
142 | // Add border bottom radius for last one |
||
143 | > .table:last-child, |
||
144 | > .table-responsive:last-child > .table:last-child { |
||
145 | .border-bottom-radius((@panel-border-radius - 1)); |
||
146 | |||
147 | > tbody:last-child, |
||
148 | > tfoot:last-child { |
||
149 | > tr:last-child { |
||
150 | border-bottom-left-radius: (@panel-border-radius - 1); |
||
151 | border-bottom-right-radius: (@panel-border-radius - 1); |
||
152 | |||
153 | td:first-child, |
||
154 | th:first-child { |
||
155 | border-bottom-left-radius: (@panel-border-radius - 1); |
||
156 | } |
||
157 | td:last-child, |
||
158 | th:last-child { |
||
159 | border-bottom-right-radius: (@panel-border-radius - 1); |
||
160 | } |
||
161 | } |
||
162 | } |
||
163 | } |
||
164 | > .panel-body + .table, |
||
165 | > .panel-body + .table-responsive, |
||
166 | > .table + .panel-body, |
||
167 | > .table-responsive + .panel-body { |
||
168 | border-top: 1px solid @table-border-color; |
||
169 | } |
||
170 | > .table > tbody:first-child > tr:first-child th, |
||
171 | > .table > tbody:first-child > tr:first-child td { |
||
172 | border-top: 0; |
||
173 | } |
||
174 | > .table-bordered, |
||
175 | > .table-responsive > .table-bordered { |
||
176 | border: 0; |
||
177 | > thead, |
||
178 | > tbody, |
||
179 | > tfoot { |
||
180 | > tr { |
||
181 | > th:first-child, |
||
182 | > td:first-child { |
||
183 | border-left: 0; |
||
184 | } |
||
185 | > th:last-child, |
||
186 | > td:last-child { |
||
187 | border-right: 0; |
||
188 | } |
||
189 | } |
||
190 | } |
||
191 | > thead, |
||
192 | > tbody { |
||
193 | > tr:first-child { |
||
194 | > td, |
||
195 | > th { |
||
196 | border-bottom: 0; |
||
197 | } |
||
198 | } |
||
199 | } |
||
200 | > tbody, |
||
201 | > tfoot { |
||
202 | > tr:last-child { |
||
203 | > td, |
||
204 | > th { |
||
205 | border-bottom: 0; |
||
206 | } |
||
207 | } |
||
208 | } |
||
209 | } |
||
210 | > .table-responsive { |
||
211 | border: 0; |
||
212 | margin-bottom: 0; |
||
213 | } |
||
214 | } |
||
215 | |||
216 | |||
217 | // Collapsible panels (aka, accordion) |
||
218 | // |
||
219 | // Wrap a series of panels in `.panel-group` to turn them into an accordion with |
||
220 | // the help of our collapse JavaScript plugin. |
||
221 | |||
222 | .panel-group { |
||
223 | margin-bottom: @line-height-computed; |
||
224 | |||
225 | // Tighten up margin so it's only between panels |
||
226 | .panel { |
||
227 | margin-bottom: 0; |
||
228 | border-radius: @panel-border-radius; |
||
229 | |||
230 | + .panel { |
||
231 | margin-top: 5px; |
||
232 | } |
||
233 | } |
||
234 | |||
235 | .panel-heading { |
||
236 | border-bottom: 0; |
||
237 | |||
238 | + .panel-collapse > .panel-body, |
||
239 | + .panel-collapse > .list-group { |
||
240 | border-top: 1px solid @panel-inner-border; |
||
241 | } |
||
242 | } |
||
243 | |||
244 | .panel-footer { |
||
245 | border-top: 0; |
||
246 | + .panel-collapse .panel-body { |
||
247 | border-bottom: 1px solid @panel-inner-border; |
||
248 | } |
||
249 | } |
||
250 | } |
||
251 | |||
252 | |||
253 | // Contextual variations |
||
254 | .panel-default { |
||
255 | .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border); |
||
256 | } |
||
257 | .panel-primary { |
||
258 | .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); |
||
259 | } |
||
260 | .panel-success { |
||
261 | .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); |
||
262 | } |
||
263 | .panel-info { |
||
264 | .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); |
||
265 | } |
||
266 | .panel-warning { |
||
267 | .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); |
||
268 | } |
||
269 | .panel-danger { |
||
270 | .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); |
||
271 | } |