mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-29 17:36:49 +01:00
74 lines
2.0 KiB
SCSS
74 lines
2.0 KiB
SCSS
$header-icon-size-sm: theme('spacing.5');
|
||
$header-button-size-sm: theme('spacing.8');
|
||
$header-gap: theme('spacing.1');
|
||
$panel-x-offset: calc($header-button-size-sm / 2 + $header-gap);
|
||
|
||
/**
|
||
* Panel styles shared between StreamField and InlinePanel,
|
||
* for repeating collapsible panels which can be reordered.
|
||
* Top-level and nested panels have guiding borders to show their start and end,
|
||
* as well as indentation for nested panels.
|
||
*/
|
||
|
||
// Styles for the top-level panel, and any panel within.
|
||
.w-panel--nested {
|
||
@include guide-line-active();
|
||
|
||
.w-panel__divider {
|
||
@include guide-line-horizontal();
|
||
// Slightly nicer text alignment.
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.w-panel__content {
|
||
@include guide-line-vertical();
|
||
// Center the vertical line.
|
||
margin-inline-start: calc(-1 * theme('spacing.3'));
|
||
padding-inline-start: theme('spacing.3');
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
margin-inline-start: calc(-1 * $panel-x-offset);
|
||
padding-inline-start: $panel-x-offset;
|
||
}
|
||
}
|
||
|
||
.w-panel__anchor {
|
||
// Mask the overlap with the parent panel’s guide line.
|
||
background-color: $color-white;
|
||
}
|
||
}
|
||
|
||
// Styles for nested panels excluding the top level.
|
||
.w-panel--nested .w-panel {
|
||
@include guide-line-nested();
|
||
// Indentation for nested panels.
|
||
margin-inline-start: theme('spacing.7');
|
||
margin-bottom: theme('spacing.6');
|
||
|
||
// Tighter spacing for nested panel headers so their icons align
|
||
// with parent panels’ guiding line.
|
||
.w-panel__header {
|
||
gap: 0;
|
||
transform: translateX(calc(-1 * theme('spacing.5')));
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
transform: translateX(theme('spacing.1'));
|
||
}
|
||
}
|
||
|
||
.w-panel__heading--label {
|
||
// Use smaller labels within nested panels in InlinePanel.
|
||
@apply w-label-2;
|
||
}
|
||
|
||
// For nested panels, there is always enough space for the prefix anchor.
|
||
.w-panel__anchor--prefix {
|
||
display: inline-grid;
|
||
}
|
||
|
||
// Nested panels never need the suffix anchor.
|
||
.w-panel__anchor--suffix {
|
||
display: none;
|
||
}
|
||
}
|