mirror of
https://github.com/wagtail/wagtail.git
synced 2024-12-01 11:41:20 +01:00
103 lines
2.7 KiB
SCSS
103 lines
2.7 KiB
SCSS
$header-icon-size: theme('spacing.4');
|
||
$icon-center-offset: 2px;
|
||
$guide-line-bottom-margin: calc($form-field-spacing / 3);
|
||
|
||
/**
|
||
* 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 {
|
||
--nesting-indent: #{$nested-field-indent-sm};
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
--nesting-indent: #{$nested-field-indent};
|
||
}
|
||
|
||
.w-panel__content {
|
||
@include guide-line-vertical();
|
||
// Center the vertical line.
|
||
margin-inline-start: calc(-1 * var(--nesting-indent));
|
||
padding-inline-start: var(--nesting-indent);
|
||
margin-bottom: $guide-line-bottom-margin;
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
// Extra pixels for better alignment with center of icon.
|
||
margin-inline-start: calc(
|
||
-1 * var(--nesting-indent) + $icon-center-offset
|
||
);
|
||
}
|
||
}
|
||
|
||
.w-panel__anchor {
|
||
// Mask the overlap with the parent panel’s guide line.
|
||
background-color: theme('colors.surface-page');
|
||
}
|
||
|
||
.w-field__wrapper {
|
||
// Reduced field spacing for nested panels.
|
||
// Using both padding and margin so the field guide line extends below.
|
||
padding-bottom: calc($form-field-spacing / 2);
|
||
margin-bottom: $guide-line-bottom-margin;
|
||
}
|
||
}
|
||
|
||
// Styles for nested panels at the top level only.
|
||
.w-panel--nested:not(.w-panel .w-panel) {
|
||
> .w-panel__content {
|
||
@include guide-line-vertical-stop();
|
||
}
|
||
}
|
||
|
||
// Styles for nested panels excluding the top level.
|
||
.w-panel--nested .w-panel {
|
||
@include guide-line-nested();
|
||
margin-inline-start: var(--nesting-indent);
|
||
margin-bottom: 0;
|
||
|
||
.w-panel__content {
|
||
margin-inline-start: calc(
|
||
-1 * (var(--nesting-indent) + $icon-center-offset - var(--header-gap) / 2)
|
||
);
|
||
}
|
||
|
||
// Tighter spacing for nested panel headers so their icons align
|
||
// with parent panels’ guiding line.
|
||
.w-panel__header {
|
||
gap: 0;
|
||
transform: translateX(
|
||
calc(var(--w-direction-factor) * -1 * var(--nesting-indent))
|
||
);
|
||
|
||
@include media-breakpoint-up(sm) {
|
||
transform: translateX(
|
||
calc(var(--w-direction-factor) * theme('spacing.1'))
|
||
);
|
||
}
|
||
}
|
||
|
||
.w-panel__divider {
|
||
@include guide-line-horizontal();
|
||
// Slightly nicer text alignment.
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|