info@53: //
info@53: // Panels
info@53: // --------------------------------------------------
info@53: 
info@53: 
info@53: // Base class
info@53: .panel {
info@53:   margin-bottom: @line-height-computed;
info@53:   background-color: @panel-bg;
info@53:   border: 1px solid transparent;
info@53:   border-radius: @panel-border-radius;
info@53:   .box-shadow(0 1px 1px rgba(0,0,0,.05));
info@53: }
info@53: 
info@53: // Panel contents
info@53: .panel-body {
info@53:   padding: 15px;
info@53:   .clearfix();
info@53: }
info@53: 
info@53: 
info@53: // List groups in panels
info@53: //
info@53: // By default, space out list group content from panel headings to account for
info@53: // any kind of custom content between the two.
info@53: 
info@53: .panel {
info@53:   > .list-group {
info@53:     margin-bottom: 0;
info@53: 
info@53:     .list-group-item {
info@53:       border-width: 1px 0;
info@53: 
info@53:       // Remove border radius for top one
info@53:       &:first-child {
info@53:         .border-top-radius(0);
info@53:       }
info@53:       // But keep it for the last one
info@53:       &:last-child {
info@53:         border-bottom: 0;
info@53:       }
info@53:     }
info@53:   }
info@53: }
info@53: // Collapse space between when there's no additional content.
info@53: .panel-heading + .list-group {
info@53:   .list-group-item:first-child {
info@53:     border-top-width: 0;
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Tables in panels
info@53: //
info@53: // Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
info@53: // watch it go full width.
info@53: 
info@53: .panel {
info@53:   > .table,
info@53:   > .table-responsive > .table {
info@53:     margin-bottom: 0;
info@53:   }
info@53:   > .panel-body + .table,
info@53:   > .panel-body + .table-responsive {
info@53:     border-top: 1px solid @table-border-color;
info@53:   }
info@53:   > .table > tbody:first-child th,
info@53:   > .table > tbody:first-child td {
info@53:     border-top: 0;
info@53:   }
info@53:   > .table-bordered,
info@53:   > .table-responsive > .table-bordered {
info@53:     border: 0;
info@53:     > thead,
info@53:     > tbody,
info@53:     > tfoot {
info@53:       > tr {
info@53:         > th:first-child,
info@53:         > td:first-child {
info@53:           border-left: 0;
info@53:         }
info@53:         > th:last-child,
info@53:         > td:last-child {
info@53:           border-right: 0;
info@53:         }
info@53: 
info@53:         &:last-child > th,
info@53:         &:last-child > td {
info@53:           border-bottom: 0;
info@53:         }
info@53:       }
info@53:     }
info@53:   }
info@53:   > .table-responsive {
info@53:     border: 0;
info@53:     margin-bottom: 0;
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Optional heading
info@53: .panel-heading {
info@53:   padding: 10px 15px;
info@53:   border-bottom: 1px solid transparent;
info@53:   .border-top-radius(@panel-border-radius - 1);
info@53: 
info@53:   > .dropdown .dropdown-toggle {
info@53:     color: inherit;
info@53:   }
info@53: }
info@53: 
info@53: // Within heading, strip any `h*` tag of it's default margins for spacing.
info@53: .panel-title {
info@53:   margin-top: 0;
info@53:   margin-bottom: 0;
info@53:   font-size: ceil((@font-size-base * 1.125));
info@53:   color: inherit;
info@53: 
info@53:   > a {
info@53:     color: inherit;
info@53:   }
info@53: }
info@53: 
info@53: // Optional footer (stays gray in every modifier class)
info@53: .panel-footer {
info@53:   padding: 10px 15px;
info@53:   background-color: @panel-footer-bg;
info@53:   border-top: 1px solid @panel-inner-border;
info@53:   .border-bottom-radius(@panel-border-radius - 1);
info@53: }
info@53: 
info@53: 
info@53: // Collapsable panels (aka, accordion)
info@53: //
info@53: // Wrap a series of panels in `.panel-group` to turn them into an accordion with
info@53: // the help of our collapse JavaScript plugin.
info@53: 
info@53: .panel-group {
info@53:   // Tighten up margin so it's only between panels
info@53:   .panel {
info@53:     margin-bottom: 0;
info@53:     border-radius: @panel-border-radius;
info@53:     overflow: hidden; // crop contents when collapsed
info@53:     + .panel {
info@53:       margin-top: 5px;
info@53:     }
info@53:   }
info@53: 
info@53:   .panel-heading {
info@53:     border-bottom: 0;
info@53:     + .panel-collapse .panel-body {
info@53:       border-top: 1px solid @panel-inner-border;
info@53:     }
info@53:   }
info@53:   .panel-footer {
info@53:     border-top: 0;
info@53:     + .panel-collapse .panel-body {
info@53:       border-bottom: 1px solid @panel-inner-border;
info@53:     }
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Contextual variations
info@53: .panel-default {
info@53:   .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
info@53: }
info@53: .panel-primary {
info@53:   .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
info@53: }
info@53: .panel-success {
info@53:   .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
info@53: }
info@53: .panel-warning {
info@53:   .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
info@53: }
info@53: .panel-danger {
info@53:   .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
info@53: }
info@53: .panel-info {
info@53:   .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
info@53: }