@atlaskit/side-navigation
Version:
A highly composable side navigation component that supports nested views.
41 lines • 1.6 kB
JavaScript
import { VAR_SCROLL_INDICATOR_COLOR } from '../../common/constants';
const scrollIndicatorMaskZIndex = 2;
const scrollIndicatorHeight = 2;
const scrollIndicatorBorderRadius = '1px';
export const innerContainerCSS = opts => ({
display: 'flex',
overflow: 'auto',
width: '100%',
position: 'relative',
boxSizing: 'border-box',
flexDirection: 'column',
// This before pseudo element is works by being positioned at the top of this scrolling
// container - so when you scroll down it stops "masking" the actual scroll indicator.
...(!opts.showTopScrollIndicator && {
'&::before': {
borderRadius: `var(--ds-radius-xsmall, ${scrollIndicatorBorderRadius})`,
content: "''",
left: 0,
right: 0,
height: scrollIndicatorHeight,
backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${"var(--ds-surface, #FFFFFF)"})`,
position: 'absolute',
display: 'block',
zIndex: scrollIndicatorMaskZIndex
}
}),
// This after pseudo element abuses being a flex child and pushes itself down to the
// very bottom of the container - doing so ends up "masking" the actual scroll indicator.
'&::after': {
borderRadius: `var(--ds-radius-xsmall, ${scrollIndicatorBorderRadius})`,
content: "''",
display: 'block',
flexShrink: 0,
height: scrollIndicatorHeight,
// This is used to "push" the element to the bottom of the flex container.
marginTop: 'auto',
position: 'relative',
zIndex: scrollIndicatorMaskZIndex,
backgroundColor: `var(${VAR_SCROLL_INDICATOR_COLOR}, ${"var(--ds-surface, #FFFFFF)"})`
}
});