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