git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/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 > .table {
  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 > tbody:first-child th,
  68   > .table > tbody:first-child td {
  69     border-top: 0;
  70   }
  71   > .table-bordered,
  72   > .table-responsive > .table-bordered {
  73     border: 0;
  74     > thead,
  75     > tbody,
  76     > tfoot {
  77       > tr {
  78         > th:first-child,
  79         > td:first-child {
  80           border-left: 0;
  81         }
  82         > th:last-child,
  83         > td:last-child {
  84           border-right: 0;
  85         }
  86
  87         &:last-child > th,
  88         &:last-child > td {
  89           border-bottom: 0;
  90         }
  91       }
  92     }
  93   }
  94   > .table-responsive {
  95     border: 0;
  96     margin-bottom: 0;
  97   }
  98 }
  99
 100
 101 // Optional heading
 102 .panel-heading {
 103   padding: 10px 15px;
 104   border-bottom: 1px solid transparent;
 105   .border-top-radius(@panel-border-radius - 1);
 106
 107   > .dropdown .dropdown-toggle {
 108     color: inherit;
 109   }
 110 }
 111
 112 // Within heading, strip any `h*` tag of it's default margins for spacing.
 113 .panel-title {
 114   margin-top: 0;
 115   margin-bottom: 0;
 116   font-size: ceil((@font-size-base * 1.125));
 117   color: inherit;
 118
 119   > a {
 120     color: inherit;
 121   }
 122 }
 123
 124 // Optional footer (stays gray in every modifier class)
 125 .panel-footer {
 126   padding: 10px 15px;
 127   background-color: @panel-footer-bg;
 128   border-top: 1px solid @panel-inner-border;
 129   .border-bottom-radius(@panel-border-radius - 1);
 130 }
 131
 132
 133 // Collapsable panels (aka, accordion)
 134 //
 135 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
 136 // the help of our collapse JavaScript plugin.
 137
 138 .panel-group {
 139   // Tighten up margin so it's only between panels
 140   .panel {
 141     margin-bottom: 0;
 142     border-radius: @panel-border-radius;
 143     overflow: hidden; // crop contents when collapsed
 144     + .panel {
 145       margin-top: 5px;
 146     }
 147   }
 148
 149   .panel-heading {
 150     border-bottom: 0;
 151     + .panel-collapse .panel-body {
 152       border-top: 1px solid @panel-inner-border;
 153     }
 154   }
 155   .panel-footer {
 156     border-top: 0;
 157     + .panel-collapse .panel-body {
 158       border-bottom: 1px solid @panel-inner-border;
 159     }
 160   }
 161 }
 162
 163
 164 // Contextual variations
 165 .panel-default {
 166   .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
 167 }
 168 .panel-primary {
 169   .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
 170 }
 171 .panel-success {
 172   .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 173 }
 174 .panel-warning {
 175   .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 176 }
 177 .panel-danger {
 178   .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 179 }
 180 .panel-info {
 181   .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
 182 }