@atlaskit/side-navigation

Version:

A highly composable side navigation component that supports nested views.

atlassian.design/components/side-navigation/

44 lines (43 loc) • 1.54 kB

JavaScript

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.outerContainerCSS = void 0;
var _constants = require("../../common/constants");
var scrollIndicatorZIndex = 1;
var scrollIndicatorHeight = 2;
var scrollIndicatorBorderRadius = '1px';
var containerPadding = 8;
var outerContainerCSS = exports.outerContainerCSS = function outerContainerCSS(opts) {
  return {
    // 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, ".concat(scrollIndicatorBorderRadius, ")"),
      backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")"),
      position: 'absolute',
      zIndex: scrollIndicatorZIndex
    },
    '&::after': {
      content: "''",
      position: 'absolute',
      display: 'block',
      borderRadius: "var(--ds-radius-xsmall, ".concat(scrollIndicatorBorderRadius, ")"),
      flexShrink: 0,
      height: scrollIndicatorHeight,
      left: "var(--ds-space-100, 8px)",
      right: containerPadding + opts.scrollbarWidth,
      bottom: 0,
      zIndex: scrollIndicatorZIndex,
      backgroundColor: "var(".concat(_constants.VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, #0B120E24)", ")")
    }
  };
};