_panels.scss 6.2 KB

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