UNPKG

@uifabric/styling

Version:

Styling helpers for Fluent UI React.

github.com/microsoft/fluentui

microsoft/fluentui

51 lines (50 loc) • 2.47 kB
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
import { IRawStyle } from '@uifabric/merge-styles'; import { IGetFocusStylesOptions, ITheme } from '../interfaces/index'; /** * Generates a focus style which can be used to define an :after focus border. * * @param theme - The theme object to use. * @param options - Options to customize the focus border. * @returns The style object. */ export declare function getFocusStyle(theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle; /** * Generates a focus style which can be used to define an :after focus border. * * @param theme - The theme object to use. * @param inset - The number of pixels to inset the border. * @param position - The positioning applied to the container. Must * be 'relative' or 'absolute' so that the focus border can live around it. * @param highContrastStyle - Style for high contrast mode. * @param borderColor - Color of the border. * @param outlineColor - Color of the outline. * @param isFocusedOnly - If the styles should apply on focus or not. * @returns The style object. * @deprecated Use the object parameter version instead. */ export declare function getFocusStyle(theme: ITheme, inset?: number, position?: 'relative' | 'absolute', highContrastStyle?: IRawStyle | undefined, borderColor?: string, outlineColor?: string, isFocusedOnly?: boolean): IRawStyle; /** * Generates style to clear browser specific focus styles. */ export declare function focusClear(): IRawStyle; /** * Generates a style which can be used to set a border on focus. * * @param theme - The theme object to use. * @param inset - The number of pixels to inset the border (default 0) * @param width - The border width in pixels (default 1) * @param color - Color of the outline (default `theme.palette.neutralSecondary`) * @returns The style object. */ export declare function getFocusOutlineStyle(theme: ITheme, inset?: number, width?: number, color?: string): IRawStyle; /** * Generates text input border styles on focus. * * @param borderColor - Color of the border. * @param borderRadius - Radius of the border. * @param borderType - Type of the border. * @param borderPosition - Position of the border relative to the input element (default to -1 * as it's the most common border width of the input element) * @returns The style object. */ export declare const getInputFocusStyle: (borderColor: string, borderRadius: string | number, borderType?: "border" | "borderBottom", borderPosition?: number) => IRawStyle;