@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
40 lines (38 loc) • 1.17 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { easeOut } from '@atlaskit/motion';
import { useIsSidebarDragging } from '../../common/hooks';
var transitionDuration = '0.22s';
var shadowStyles = css({
width: 3,
position: 'absolute',
background: "var(--ds-border, #0B120E24)",
insetBlockEnd: 0,
insetBlockStart: 0,
insetInlineStart: -1,
opacity: 0.5,
pointerEvents: 'none',
transitionDuration: transitionDuration,
transitionProperty: 'left, opacity, width',
transitionTimingFunction: easeOut
});
var draggingStyles = css({
width: 6,
background: "var(--ds-background-neutral-subtle, #00000000)",
insetInlineStart: "var(--ds-space-negative-075, -6px)",
opacity: 0.8
});
var Shadow = function Shadow(_ref) {
var testId = _ref.testId;
var isDragging = useIsSidebarDragging();
return jsx("div", {
"data-testid": testId,
css: [shadowStyles, isDragging && draggingStyles]
});
};
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default Shadow;