app/webpack/stylesheets/_panels.scss
.panel .cocoon-insert-wrapper {
margin-bottom: $govuk-gutter;
}
// Ported from v1 stylesheets
.panel {
box-sizing: border-box;
@include govuk-clearfix;
margin-bottom: em(15, 19);
padding: em(15, 19);
clear: both;
border-left-style: solid;
border-color: $govuk-border-colour;
:first-child {
margin-top: 0;
}
:only-child,
:last-child {
margin-bottom: 0;
}
}
.panel-border-wide {
border-left-width: $gutter-one-third;
}
// Used to show the left edge of "toggled" content
.panel-border-narrow {
border-left-width: $gutter-one-sixth;
}
// Panels within form groups
// By default, panels have 15px bottom margin
.form-group .panel-border-narrow {
width: govuk-grid-widths('full');
// Remove the bottom padding as .form-group sets a bottom margin
padding-bottom: 0;
float: left;
// 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: $gutter-one-third;
}
// 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: $gutter-one-third;
margin-bottom: 0;
}