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