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