Mercurial > minori

comparison dep/fmt/doc/bootstrap/panels.less @ 343:1faa72660932

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: transfer back to cmake from autotools autotools just made lots of things more complicated than they should have and many things broke (i.e. translations)
author Paper <paper@paper.us.eu.org>
date Thu, 20 Jun 2024 05:56:06 -0400
parents
children
comparison
equal deleted inserted replaced
342:adb79bdde329 343:1faa72660932
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 }