| 1 | import { IRawStyle } from '@uifabric/merge-styles';
|
| 2 | import { ITheme, ISemanticColors, IPalette } from '../interfaces/index';
|
| 3 | /**
|
| 4 | * - Generates a style used to fade out an overflowing content by defining a style for an :after pseudo element.
|
| 5 | * - Apply it to the :after selector for all combination of states the parent of content might have (normal, hover,
|
| 6 | * selected, focus).
|
| 7 | * - Requires the target to have position set to relative and overflow set to hidden.
|
| 8 | *
|
| 9 | * @example
|
| 10 | * ```tsx
|
| 11 | * // Assuming the following DOM structure and the different background colors coming from
|
| 12 | * // the parent holding the content.
|
| 13 | * <div className={classNames.parent}>
|
| 14 | * <span className={classNames.content}>Overflown Content</span>
|
| 15 | * </div>
|
| 16 | * ```
|
| 17 | * ```ts
|
| 18 | * // This is how the style set would look in Component.styles.ts
|
| 19 | * const { bodyBackground } = theme.semanticColors;
|
| 20 | * const { neutralLighter } = theme.palette;
|
| 21 | *
|
| 22 | * // The second argument of getFadedOverflowStyle function is a string representing a key of
|
| 23 | * // ISemanticColors or IPalette.
|
| 24 | *
|
| 25 | * const styles = {
|
| 26 | * parent: [
|
| 27 | * backgroundColor: bodyBackground,
|
| 28 | * selectors: {
|
| 29 | * '&:hover: {
|
| 30 | * backgroundColor: neutralLighter
|
| 31 | * },
|
| 32 | * '$content:after': {
|
| 33 | * ...getFadedOverflowStyle(theme, 'bodyBackground')
|
| 34 | * },
|
| 35 | * '&:hover $content:after': {
|
| 36 | * ...getFadedOverflowStyle(theme, 'neutralLighter')
|
| 37 | * }
|
| 38 | * }
|
| 39 | * ],
|
| 40 | * content: [
|
| 41 | * width: '100%',
|
| 42 | * display: 'inline-block',
|
| 43 | * position: 'relative',
|
| 44 | * overflow: 'hidden'
|
| 45 | * ]
|
| 46 | * }
|
| 47 | * ```
|
| 48 | * @param theme - The theme object to use.
|
| 49 | * @param color - The background color to fade out to. Accepts only keys of ISemanticColors or IPalette.
|
| 50 | * Defaults to 'bodyBackground'.
|
| 51 | * @param direction - The direction of the overflow. Defaults to horizontal.
|
| 52 | * @param width - The width of the fading overflow. Vertical direction defaults it to 100% vs 20px when horizontal.
|
| 53 | * @param height - The Height of the fading overflow. Vertical direction defaults it to 50% vs 100% when horizontal.
|
| 54 | * @returns The style object.
|
| 55 | */
|
| 56 | export declare function getFadedOverflowStyle(theme: ITheme, color?: keyof ISemanticColors | keyof IPalette, direction?: 'horizontal' | 'vertical', width?: string | number, height?: string | number): IRawStyle;
|