panels.less 6.3 KB

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