resources/scss/bootstrap/_panels.scss

   1 //
   2 // Panels
   3 // --------------------------------------------------
   4
   5 // Base class
   6 .panel {
   7   margin-bottom: $line-height-computed;
   8   background-color: $panel-bg;
   9   border: 1px solid transparent;
  10   border-radius: $panel-border-radius;
  11   @include box-shadow(0 1px 1px rgba(0, 0, 0, .05));
  12 }
  13
  14 // Panel contents
  15 .panel-body {
  16   padding: $panel-body-padding;
  17   @include clearfix;
  18 }
  19
  20 // Optional heading
  21 .panel-heading {
  22   padding: $panel-heading-padding;
  23   border-bottom: 1px solid transparent;
  24   @include border-top-radius(($panel-border-radius - 1));
  25
  26   > .dropdown .dropdown-toggle {
  27         color: inherit;
  28   }
  29 }
  30
  31 // Within heading, strip any `h*` tag of its default margins for spacing.
  32 .panel-title {
  33   margin-top: 0;
  34   margin-bottom: 0;
  35   font-size: ceil(($font-size-base * 1.125));
  36   color: inherit;
  37
  38   > a,
  39   > small,
  40   > .small,
  41   > small > a,
  42   > .small > a {
  43         color: inherit;
  44   }
  45 }
  46
  47 // Optional footer (stays gray in every modifier class)
  48 .panel-footer {
  49   padding: $panel-footer-padding;
  50   background-color: $panel-footer-bg;
  51   border-top: 1px solid $panel-inner-border;
  52   @include border-bottom-radius(($panel-border-radius - 1));
  53 }
  54
  55 // List groups in panels
  56 //
  57 // By default, space out list group content from panel headings to account for
  58 // any kind of custom content between the two.
  59
  60 .panel {
  61   > .list-group,
  62   > .panel-collapse > .list-group {
  63         margin-bottom: 0;
  64
  65         .list-group-item {
  66           border-width: 1px 0;
  67           border-radius: 0;
  68         }
  69
  70         // Add border top radius for first one
  71         &:first-child {
  72           .list-group-item:first-child {
  73                 border-top: 0;
  74                 @include border-top-radius(($panel-border-radius - 1));
  75           }
  76         }
  77
  78         // Add border bottom radius for last one
  79         &:last-child {
  80           .list-group-item:last-child {
  81                 border-bottom: 0;
  82                 @include border-bottom-radius(($panel-border-radius - 1));
  83           }
  84         }
  85   }
  86   > .panel-heading + .panel-collapse > .list-group {
  87         .list-group-item:first-child {
  88           @include border-top-radius(0);
  89         }
  90   }
  91 }
  92
  93 // Collapse space between when there's no additional content.
  94 .panel-heading + .list-group {
  95   .list-group-item:first-child {
  96         border-top-width: 0;
  97   }
  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         @include 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         @include 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 // Collapsable panels (aka, accordion)
 217 //
 218 // Wrap a series of panels in `.panel-group` to turn them into an accordion with
 219 // the help of our collapse JavaScript plugin.
 220
 221 .panel-group {
 222   margin-bottom: $line-height-computed;
 223
 224   // Tighten up margin so it's only between panels
 225   .panel {
 226         margin-bottom: 0;
 227         border-radius: $panel-border-radius;
 228
 229         + .panel {
 230           margin-top: 5px;
 231         }
 232   }
 233
 234   .panel-heading {
 235         border-bottom: 0;
 236
 237         + .panel-collapse > .panel-body,
 238         + .panel-collapse > .list-group {
 239           border-top: 1px solid $panel-inner-border;
 240         }
 241   }
 242
 243   .panel-footer {
 244         border-top: 0;
 245         + .panel-collapse .panel-body {
 246           border-bottom: 1px solid $panel-inner-border;
 247         }
 248   }
 249 }
 250
 251 // Contextual variations
 252 .panel-default {
 253   @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
 254 }
 255
 256 .panel-primary {
 257   @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
 258 }
 259
 260 .panel-success {
 261   @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
 262 }
 263
 264 .panel-info {
 265   @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
 266 }
 267
 268 .panel-warning {
 269   @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
 270 }
 271
 272 .panel-danger {
 273   @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
 274 }