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