panels.less 5.5 KB

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