Commit | Line | Data |
---|---|---|
7b869721 S |
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 { | |
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-bordered, | |
68 | > .table-responsive > .table-bordered { | |
69 | border: 0; | |
70 | > thead, | |
71 | > tbody, | |
72 | > tfoot { | |
73 | > tr { | |
74 | > th:first-child, | |
75 | > td:first-child { | |
76 | border-left: 0; | |
77 | } | |
78 | > th:last-child, | |
79 | > td:last-child { | |
80 | border-right: 0; | |
81 | } | |
82 | ||
83 | &:last-child > th, | |
84 | &:last-child > td { | |
85 | border-bottom: 0; | |
86 | } | |
87 | } | |
88 | } | |
89 | } | |
90 | } | |
91 | ||
92 | ||
93 | // Optional heading | |
94 | .panel-heading { | |
95 | padding: 10px 15px; | |
96 | border-bottom: 1px solid transparent; | |
97 | .border-top-radius(@panel-border-radius - 1); | |
98 | ||
99 | & > .dropdown .dropdown-toggle { | |
100 | color: inherit; | |
101 | } | |
102 | } | |
103 | ||
104 | // Within heading, strip any `h*` tag of it's default margins for spacing. | |
105 | .panel-title { | |
106 | margin-top: 0; | |
107 | margin-bottom: 0; | |
108 | font-size: ceil((@font-size-base * 1.125)); | |
109 | > a { | |
110 | color: inherit; | |
111 | } | |
112 | } | |
113 | ||
114 | // Optional footer (stays gray in every modifier class) | |
115 | .panel-footer { | |
116 | padding: 10px 15px; | |
117 | background-color: @panel-footer-bg; | |
118 | border-top: 1px solid @panel-inner-border; | |
119 | .border-bottom-radius(@panel-border-radius - 1); | |
120 | } | |
121 | ||
122 | ||
123 | // Collapsable panels (aka, accordion) | |
124 | // | |
125 | // Wrap a series of panels in `.panel-group` to turn them into an accordion with | |
126 | // the help of our collapse JavaScript plugin. | |
127 | ||
128 | .panel-group { | |
129 | // Tighten up margin so it's only between panels | |
130 | .panel { | |
131 | margin-bottom: 0; | |
132 | border-radius: @panel-border-radius; | |
133 | overflow: hidden; // crop contents when collapsed | |
134 | + .panel { | |
135 | margin-top: 5px; | |
136 | } | |
137 | } | |
138 | ||
139 | .panel-heading { | |
140 | border-bottom: 0; | |
141 | + .panel-collapse .panel-body { | |
142 | border-top: 1px solid @panel-inner-border; | |
143 | } | |
144 | } | |
145 | .panel-footer { | |
146 | border-top: 0; | |
147 | + .panel-collapse .panel-body { | |
148 | border-bottom: 1px solid @panel-inner-border; | |
149 | } | |
150 | } | |
151 | } | |
152 | ||
153 | ||
154 | // Contextual variations | |
155 | .panel-default { | |
156 | .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border); | |
157 | } | |
158 | .panel-primary { | |
159 | .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); | |
160 | } | |
161 | .panel-success { | |
162 | .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); | |
163 | } | |
164 | .panel-warning { | |
165 | .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); | |
166 | } | |
167 | .panel-danger { | |
168 | .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); | |
169 | } | |
170 | .panel-info { | |
171 | .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); | |
172 | } |