// Panels // ==========================================================================
.panel {
@include box-sizing(border-box); @extend %contain-floats; clear: both; border-left-style: solid; border-color: $border-colour; padding: em(15, 19); margin-bottom: em(15, 19); :first-child { margin-top: 0; } :only-child, :last-child { margin-bottom: 0; }
}
.panel-border-wide {
border-left-width: 10px;
}
// Used to show the left edge of “toggled” content .panel-border-narrow {
border-left-width: 5px;
}
// Panels within form groups // By default, panels have 15px bottom margin .form-group .panel-border-narrow {
float: left; width: 100%; // Remove the bottom padding as .form-group sets a bottom margin padding-bottom: 0; // Don't remove the bottom margin for all panels, assume they are often within stacked groups
}
// Note: This is incredibly fragile, and needs rebuilding.
// The first panel in a group .form-group .panel-border-narrow:first-child {
margin-top: 10px;
}
// The last panel in a group .form-group .panel-border-narrow:last-child {
margin-top: 0; margin-bottom: 0;
}
// For inline panels .inline .panel-border-narrow, .inline .panel-border-narrow:last-child {
margin-top: 10px; margin-bottom: 0;
}