@atlaskit/side-navigation
Version:
A highly composable side navigation component that supports nested views.
36 lines • 1.26 kB
JavaScript
import { VAR_SEPARATOR_COLOR } from '../../common/constants';
const scrollIndicatorZIndex = 1;
const scrollIndicatorHeight = 2;
const scrollIndicatorBorderRadius = '1px';
const containerPadding = 8;
export const outerContainerCSS = opts => ({
// Flex is needed to ensure the overflow indicators are positioned correctly.
display: 'flex',
height: '100%',
overflow: 'hidden',
position: 'relative',
'&::before': {
content: "''",
display: 'block',
left: "var(--ds-space-100, 8px)",
right: containerPadding + opts.scrollbarWidth,
height: scrollIndicatorHeight,
borderRadius: `var(--ds-radius-xsmall, ${scrollIndicatorBorderRadius})`,
backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${"var(--ds-border, #0B120E24)"})`,
position: 'absolute',
zIndex: scrollIndicatorZIndex
},
'&::after': {
content: "''",
position: 'absolute',
display: 'block',
borderRadius: `var(--ds-radius-xsmall, ${scrollIndicatorBorderRadius})`,
flexShrink: 0,
height: scrollIndicatorHeight,
left: "var(--ds-space-100, 8px)",
right: containerPadding + opts.scrollbarWidth,
bottom: 0,
zIndex: scrollIndicatorZIndex,
backgroundColor: `var(${VAR_SEPARATOR_COLOR}, ${"var(--ds-border, #0B120E24)"})`
}
});