less/bootstrap/panels.less

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