less/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: 15px;
  18   .clearfix();
  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
  31     .list-group-item {
  32       border-width: 1px 0;
  33
  34       // Remove border radius for top one
  35       &:first-child {
  36         .border-top-radius(0);
  37       }
  38       // But keep it for the last one
  39       &:last-child {
  40         border-bottom: 0;
  41       }
  42     }
  43   }
  44 }
  45 // Collapse space between when there's no additional content.
  46 .panel-heading + .list-group {
  47   .list-group-item:first-child {
  48     border-top-width: 0;
  49   }
  50 }
  51
  52
  53 // Tables in panels
  54 //
  55 // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
  56 // watch it go full width.
  57
  58 .panel {
  59   > .table,
  60   > .table-responsive {
  61     margin-bottom: 0;
  62   }
  63   > .panel-body + .table,
  64   > .panel-body + .table-responsive {
  65     border-top: 1px solid @table-border-color;
  66   }
  67   > .table-bordered,
  68   > .table-responsive > .table-bordered {
  69     border: 0;
  70     > thead,
  71     > tbody,
  72     > tfoot {
  73       > tr {
  74         > th:first-child,
  75         > td:first-child {
  76           border-left: 0;
  77         }
  78         > th:last-child,
  79         > td:last-child {
  80           border-right: 0;
  81         }
  82
  83         &:last-child > th,
  84         &:last-child > td {
  85           border-bottom: 0;
  86         }
  87       }
  88     }
  89   }
  90 }
  91
  92
  93 // Optional heading
  94 .panel-heading {
  95   padding: 10px 15px;
  96   border-bottom: 1px solid transparent;
  97   .border-top-radius(@panel-border-radius - 1);
  98
  99   & > .dropdown .dropdown-toggle {
 100     color: inherit;
 101   }
 102 }
 103
 104 // Within heading, strip any `h*` tag of it's default margins for spacing.
 105 .panel-title {
 106   margin-top: 0;
 107   margin-bottom: 0;
 108   font-size: ceil((@font-size-base * 1.125));
 109   > a {
 110     color: inherit;
 111   }
 112 }
 113
 114 // Optional footer (stays gray in every modifier class)
 115 .panel-footer {
 116   padding: 10px 15px;
 117   background-color: @panel-footer-bg;
 118   border-top: 1px solid @panel-inner-border;
 119   .border-bottom-radius(@panel-border-radius - 1);
 120 }
 121
 122
 123 // Collapsable panels (aka, accordion)
 124 //
 125 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
 126 // the help of our collapse JavaScript plugin.
 127
 128 .panel-group {
 129   // Tighten up margin so it's only between panels
 130   .panel {
 131     margin-bottom: 0;
 132     border-radius: @panel-border-radius;
 133     overflow: hidden; // crop contents when collapsed
 134     + .panel {
 135       margin-top: 5px;
 136     }
 137   }
 138
 139   .panel-heading {
 140     border-bottom: 0;
 141     + .panel-collapse .panel-body {
 142       border-top: 1px solid @panel-inner-border;
 143     }
 144   }
 145   .panel-footer {
 146     border-top: 0;
 147     + .panel-collapse .panel-body {
 148       border-bottom: 1px solid @panel-inner-border;
 149     }
 150   }
 151 }
 152
 153
 154 // Contextual variations
 155 .panel-default {
 156   .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
 157 }
 158 .panel-primary {
 159   .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
 160 }
 161 .panel-success {
 162   .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 163 }
 164 .panel-warning {
 165   .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 166 }
 167 .panel-danger {
 168   .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 169 }
 170 .panel-info {
 171   .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
 172 }