panels.less 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  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. > .panel-collapse > .list-group {
  50. margin-bottom: 0;
  51. .list-group-item {
  52. border-width: 1px 0;
  53. border-radius: 0;
  54. }
  55. // Add border top radius for first one
  56. &:first-child {
  57. .list-group-item:first-child {
  58. border-top: 0;
  59. .border-top-radius((@panel-border-radius - 1));
  60. }
  61. }
  62. // Add border bottom radius for last one
  63. &:last-child {
  64. .list-group-item:last-child {
  65. border-bottom: 0;
  66. .border-bottom-radius((@panel-border-radius - 1));
  67. }
  68. }
  69. }
  70. }
  71. // Collapse space between when there's no additional content.
  72. .panel-heading + .list-group {
  73. .list-group-item:first-child {
  74. border-top-width: 0;
  75. }
  76. }
  77. .list-group + .panel-footer {
  78. border-top-width: 0;
  79. }
  80. // Tables in panels
  81. //
  82. // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
  83. // watch it go full width.
  84. .panel {
  85. > .table,
  86. > .table-responsive > .table,
  87. > .panel-collapse > .table {
  88. margin-bottom: 0;
  89. caption {
  90. padding-left: @panel-body-padding;
  91. padding-right: @panel-body-padding;
  92. }
  93. }
  94. // Add border top radius for first one
  95. > .table:first-child,
  96. > .table-responsive:first-child > .table:first-child {
  97. .border-top-radius((@panel-border-radius - 1));
  98. > thead:first-child,
  99. > tbody:first-child {
  100. > tr:first-child {
  101. border-top-left-radius: (@panel-border-radius - 1);
  102. border-top-right-radius: (@panel-border-radius - 1);
  103. td:first-child,
  104. th:first-child {
  105. border-top-left-radius: (@panel-border-radius - 1);
  106. }
  107. td:last-child,
  108. th:last-child {
  109. border-top-right-radius: (@panel-border-radius - 1);
  110. }
  111. }
  112. }
  113. }
  114. // Add border bottom radius for last one
  115. > .table:last-child,
  116. > .table-responsive:last-child > .table:last-child {
  117. .border-bottom-radius((@panel-border-radius - 1));
  118. > tbody:last-child,
  119. > tfoot:last-child {
  120. > tr:last-child {
  121. border-bottom-left-radius: (@panel-border-radius - 1);
  122. border-bottom-right-radius: (@panel-border-radius - 1);
  123. td:first-child,
  124. th:first-child {
  125. border-bottom-left-radius: (@panel-border-radius - 1);
  126. }
  127. td:last-child,
  128. th:last-child {
  129. border-bottom-right-radius: (@panel-border-radius - 1);
  130. }
  131. }
  132. }
  133. }
  134. > .panel-body + .table,
  135. > .panel-body + .table-responsive,
  136. > .table + .panel-body,
  137. > .table-responsive + .panel-body {
  138. border-top: 1px solid @table-border-color;
  139. }
  140. > .table > tbody:first-child > tr:first-child th,
  141. > .table > tbody:first-child > tr:first-child td {
  142. border-top: 0;
  143. }
  144. > .table-bordered,
  145. > .table-responsive > .table-bordered {
  146. border: 0;
  147. > thead,
  148. > tbody,
  149. > tfoot {
  150. > tr {
  151. > th:first-child,
  152. > td:first-child {
  153. border-left: 0;
  154. }
  155. > th:last-child,
  156. > td:last-child {
  157. border-right: 0;
  158. }
  159. }
  160. }
  161. > thead,
  162. > tbody {
  163. > tr:first-child {
  164. > td,
  165. > th {
  166. border-bottom: 0;
  167. }
  168. }
  169. }
  170. > tbody,
  171. > tfoot {
  172. > tr:last-child {
  173. > td,
  174. > th {
  175. border-bottom: 0;
  176. }
  177. }
  178. }
  179. }
  180. > .table-responsive {
  181. border: 0;
  182. margin-bottom: 0;
  183. }
  184. }
  185. // Collapsable panels (aka, accordion)
  186. //
  187. // Wrap a series of panels in `.panel-group` to turn them into an accordion with
  188. // the help of our collapse JavaScript plugin.
  189. .panel-group {
  190. margin-bottom: @line-height-computed;
  191. // Tighten up margin so it's only between panels
  192. .panel {
  193. margin-bottom: 0;
  194. border-radius: @panel-border-radius;
  195. + .panel {
  196. margin-top: 5px;
  197. }
  198. }
  199. .panel-heading {
  200. border-bottom: 0;
  201. + .panel-collapse > .panel-body,
  202. + .panel-collapse > .list-group {
  203. border-top: 1px solid @panel-inner-border;
  204. }
  205. }
  206. .panel-footer {
  207. border-top: 0;
  208. + .panel-collapse .panel-body {
  209. border-bottom: 1px solid @panel-inner-border;
  210. }
  211. }
  212. }
  213. // Contextual variations
  214. .panel-default {
  215. .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
  216. }
  217. .panel-primary {
  218. .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
  219. }
  220. .panel-success {
  221. .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
  222. }
  223. .panel-info {
  224. .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
  225. }
  226. .panel-warning {
  227. .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
  228. }
  229. .panel-danger {
  230. .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
  231. }