Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 33x 33x 813x 271x 271x 271x | import { ILegendsStyles, ILegendStyleProps } from './Legends.types';
import { HighContrastSelector, getFocusStyle, IGetFocusStylesOptions, IStyle } from '@fluentui/react/lib/Styling';
export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
const { className, theme, isLineLegendInBarChart = false } = props;
const { palette, fonts } = theme!;
const options: IGetFocusStylesOptions = {
inset: undefined,
position: undefined,
highContrastStyle: {
outlineColor: theme!.semanticColors.focusBorder,
},
borderColor: 'transparent',
outlineColor: undefined,
};
return {
root: [
{
whiteSpace: 'nowrap',
width: '100%',
alignItems: 'center',
margin: '-8px 0 0 -8px',
},
className,
],
legend: [
getFocusStyle(theme!, options),
{
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
border: 'none',
padding: '8px',
background: 'none',
textTransform: 'capitalize',
},
],
rect: {
selectors: {
[HighContrastSelector]: {
content: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,
opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? '0.6' : '',
},
},
width: '12px',
height: isLineLegendInBarChart ? '4px' : '12px',
backgroundColor: props.stripePattern ? '' : props.colorOnSelectedState,
marginRight: '8px',
border: '1px solid',
borderColor: props.borderColor ? props.borderColor : theme?.semanticColors.buttonBorder,
content: props.stripePattern
? // eslint-disable-next-line @fluentui/max-len
`repeating-linear-gradient(135deg, transparent, transparent 3px, ${props.colorOnSelectedState} 1px, ${props.colorOnSelectedState} 4px)`
: '',
},
shape: [
{
marginRight: '8px',
},
],
triangle: {
width: '0',
height: '0',
borderLeft: '6px solid transparent',
borderRight: '6px solid transparent',
borderTop: '10.4px solid',
borderTopColor: props.colorOnSelectedState,
marginRight: '8px',
opacity:
props.colorOnSelectedState === theme!.semanticColors.buttonBackground
? '0.6'
: props.opacity
? props.opacity
: '',
selectors: {
[HighContrastSelector]: {
border: '0px',
height: '10.4px',
width: '10.4px',
clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
backgroundImage: `linear-gradient(to right, ${props.colorOnSelectedState}, ${props.colorOnSelectedState})`,
} as IStyle,
},
},
text: {
...fonts.small,
lineHeight: '16px',
color: theme?.semanticColors.bodyText,
opacity: props.colorOnSelectedState === theme!.semanticColors.buttonBackground ? '0.67' : '',
},
hoverChange: {
width: '12px',
height: '12px',
backgroundColor: theme!.semanticColors.buttonBackground,
marginRight: '8px',
border: '1px solid',
borderColor: props.borderColor ? props.borderColor : palette.black,
},
overflowIndicationTextStyle: [
getFocusStyle(theme!, options),
{
cursor: 'pointer',
color: theme?.semanticColors.bodyText,
...fonts.small,
lineHeight: '16px',
padding: '8px',
},
],
hoverCardRoot: {
padding: '8px',
},
subComponentStyles: {
hoverCardStyles: {
host: [getFocusStyle(theme!, options)],
},
},
};
};
|