_panels.scss 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  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. @include box-shadow(0 1px 1px rgba(0,0,0,.05));
  11. }
  12. // Panel contents
  13. .panel-body {
  14. padding: $panel-body-padding;
  15. @include clearfix();
  16. }
  17. // Optional heading
  18. .panel-heading {
  19. padding: 10px 15px;
  20. border-bottom: 1px solid transparent;
  21. @include 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: 10px 15px;
  39. background-color: $panel-footer-bg;
  40. border-top: 1px solid $panel-inner-border;
  41. @include 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. @include 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. @include 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. // Tables in panels
  77. //
  78. // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
  79. // watch it go full width.
  80. .panel {
  81. > .table,
  82. > .table-responsive > .table {
  83. margin-bottom: 0;
  84. }
  85. // Add border top radius for first one
  86. > .table:first-child,
  87. > .table-responsive:first-child > .table:first-child {
  88. @include border-top-radius(($panel-border-radius - 1));
  89. > thead:first-child,
  90. > tbody:first-child {
  91. > tr:first-child {
  92. td:first-child,
  93. th:first-child {
  94. border-top-left-radius: ($panel-border-radius - 1);
  95. }
  96. td:last-child,
  97. th:last-child {
  98. border-top-right-radius: ($panel-border-radius - 1);
  99. }
  100. }
  101. }
  102. }
  103. // Add border bottom radius for last one
  104. > .table:last-child,
  105. > .table-responsive:last-child > .table:last-child {
  106. @include border-bottom-radius(($panel-border-radius - 1));
  107. > tbody:last-child,
  108. > tfoot:last-child {
  109. > tr:last-child {
  110. td:first-child,
  111. th:first-child {
  112. border-bottom-left-radius: ($panel-border-radius - 1);
  113. }
  114. td:last-child,
  115. th:last-child {
  116. border-bottom-right-radius: ($panel-border-radius - 1);
  117. }
  118. }
  119. }
  120. }
  121. > .panel-body + .table,
  122. > .panel-body + .table-responsive {
  123. border-top: 1px solid $table-border-color;
  124. }
  125. > .table > tbody:first-child > tr:first-child th,
  126. > .table > tbody:first-child > tr:first-child td {
  127. border-top: 0;
  128. }
  129. > .table-bordered,
  130. > .table-responsive > .table-bordered {
  131. border: 0;
  132. > thead,
  133. > tbody,
  134. > tfoot {
  135. > tr {
  136. > th:first-child,
  137. > td:first-child {
  138. border-left: 0;
  139. }
  140. > th:last-child,
  141. > td:last-child {
  142. border-right: 0;
  143. }
  144. }
  145. }
  146. > thead,
  147. > tbody {
  148. > tr:first-child {
  149. > td,
  150. > th {
  151. border-bottom: 0;
  152. }
  153. }
  154. }
  155. > tbody,
  156. > tfoot {
  157. > tr:last-child {
  158. > td,
  159. > th {
  160. border-bottom: 0;
  161. }
  162. }
  163. }
  164. }
  165. > .table-responsive {
  166. border: 0;
  167. margin-bottom: 0;
  168. }
  169. }
  170. // Collapsable panels (aka, accordion)
  171. //
  172. // Wrap a series of panels in `.panel-group` to turn them into an accordion with
  173. // the help of our collapse JavaScript plugin.
  174. .panel-group {
  175. margin-bottom: $line-height-computed;
  176. // Tighten up margin so it's only between panels
  177. .panel {
  178. margin-bottom: 0;
  179. border-radius: $panel-border-radius;
  180. overflow: hidden; // crop contents when collapsed
  181. + .panel {
  182. margin-top: 5px;
  183. }
  184. }
  185. .panel-heading {
  186. border-bottom: 0;
  187. + .panel-collapse .panel-body {
  188. border-top: 1px solid $panel-inner-border;
  189. }
  190. }
  191. .panel-footer {
  192. border-top: 0;
  193. + .panel-collapse .panel-body {
  194. border-bottom: 1px solid $panel-inner-border;
  195. }
  196. }
  197. }
  198. // Contextual variations
  199. .panel-default {
  200. @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
  201. }
  202. .panel-primary {
  203. @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
  204. }
  205. .panel-success {
  206. @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
  207. }
  208. .panel-info {
  209. @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
  210. }
  211. .panel-warning {
  212. @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
  213. }
  214. .panel-danger {
  215. @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
  216. }