@atlaskit/side-navigation
Version:
A highly composable side navigation component that supports nested views.
25 lines • 1.34 kB
JavaScript
const containerPadding = 8;
const scrollIndicatorHeight = 2;
const itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
const skeletonHeadingHeight = containerPadding;
const skeletonHeadingMarginOffset = 3;
const skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
const skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
export const containerCSS = opts => ({
// When the scroll indicator is always shown we need to add some padding
// so the spacing between matches what it would be if the indicator was a "block" element.
// We use margin here so any child absolutely positioned elements are positioned correctly.
marginTop: opts.showTopScrollIndicator ? scrollIndicatorHeight : 0,
marginLeft: "var(--ds-space-100, 8px)",
marginRight: "var(--ds-space-100, 8px)",
// Enables child absolutely positioned elements to be positioned relative to this element.
position: 'relative',
'& [data-ds--menu--heading-item]': {
marginBottom: "var(--ds-space-075, 6px)",
marginTop: "var(--ds-space-200, 16px)"
},
'& [data-ds--menu--skeleton-heading-item]': {
marginTop: skeletonHeadingTopMargin,
marginBottom: skeletonHeadingBottomMargin
}
});