source: trip-planner-front/node_modules/bootstrap/less/panels.less@ 6c1585f

Last change on this file since 6c1585f was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

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