1 | import { getGlobalClassNames, HighContrastSelector } from '../../Styling';
|
2 | var GlobalClassNames = {
|
3 | root: 'ms-ExpandingCard-root',
|
4 | compactCard: 'ms-ExpandingCard-compactCard',
|
5 | expandedCard: 'ms-ExpandingCard-expandedCard',
|
6 | expandedCardScroll: 'ms-ExpandingCard-expandedCardScrollRegion',
|
7 | };
|
8 | export function getStyles(props) {
|
9 | var _a;
|
10 | var theme = props.theme, needsScroll = props.needsScroll, expandedCardFirstFrameRendered = props.expandedCardFirstFrameRendered, compactCardHeight = props.compactCardHeight, expandedCardHeight = props.expandedCardHeight, className = props.className;
|
11 | var palette = theme.palette;
|
12 | var classNames = getGlobalClassNames(GlobalClassNames, theme);
|
13 | return {
|
14 | root: [
|
15 | classNames.root,
|
16 | {
|
17 | width: 320,
|
18 | pointerEvents: 'none',
|
19 | selectors: (_a = {},
|
20 | _a[HighContrastSelector] = {
|
21 | border: '1px solid WindowText',
|
22 | },
|
23 | _a),
|
24 | },
|
25 | className,
|
26 | ],
|
27 | compactCard: [
|
28 | classNames.compactCard,
|
29 | {
|
30 | pointerEvents: 'auto',
|
31 | position: 'relative',
|
32 | height: compactCardHeight,
|
33 | },
|
34 | ],
|
35 | expandedCard: [
|
36 | classNames.expandedCard,
|
37 | {
|
38 | height: 1,
|
39 | overflowY: 'hidden',
|
40 | pointerEvents: 'auto',
|
41 | transition: 'height 0.467s cubic-bezier(0.5, 0, 0, 1)',
|
42 | selectors: {
|
43 | ':before': {
|
44 | content: '""',
|
45 | position: 'relative',
|
46 | display: 'block',
|
47 | top: 0,
|
48 | left: 24,
|
49 | width: 272,
|
50 | height: 1,
|
51 | backgroundColor: palette.neutralLighter,
|
52 | },
|
53 | },
|
54 | },
|
55 | expandedCardFirstFrameRendered && {
|
56 | height: expandedCardHeight,
|
57 | },
|
58 | ],
|
59 | expandedCardScroll: [
|
60 | classNames.expandedCardScroll,
|
61 | needsScroll && {
|
62 | height: '100%',
|
63 | boxSizing: 'border-box',
|
64 | overflowY: 'auto',
|
65 | },
|
66 | ],
|
67 | };
|
68 | }
|
69 |
|
\ | No newline at end of file |