@atlaskit/side-navigation
Version:
A highly composable side navigation component that supports nested views.
33 lines (32 loc) • 1.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.containerCSS = void 0;
var containerPadding = 8;
var scrollIndicatorHeight = 2;
var itemHeadingContentHeight = 16; // Originally headingSizes.h100.lineHeight from '@atlaskit/theme/typography'
var skeletonHeadingHeight = containerPadding;
var skeletonHeadingMarginOffset = 3;
var skeletonHeadingTopMargin = containerPadding * 2.5 + (itemHeadingContentHeight - skeletonHeadingHeight) - skeletonHeadingMarginOffset;
var skeletonHeadingBottomMargin = containerPadding * 0.75 + skeletonHeadingMarginOffset;
var containerCSS = exports.containerCSS = function containerCSS(opts) {
return {
// 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
}
};
};