1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | var CommonStyles_1 = require("./CommonStyles");
|
4 | var utilities_1 = require("@uifabric/utilities");
|
5 | var zIndexes_1 = require("./zIndexes");
|
6 | function getFocusStyle(theme, insetOrOptions, position, highContrastStyle, borderColor, outlineColor, isFocusedOnly) {
|
7 | if (typeof insetOrOptions === 'number' || !insetOrOptions) {
|
8 | return _getFocusStyleInternal(theme, {
|
9 | inset: insetOrOptions,
|
10 | position: position,
|
11 | highContrastStyle: highContrastStyle,
|
12 | borderColor: borderColor,
|
13 | outlineColor: outlineColor,
|
14 | isFocusedOnly: isFocusedOnly,
|
15 | });
|
16 | }
|
17 | else {
|
18 | return _getFocusStyleInternal(theme, insetOrOptions);
|
19 | }
|
20 | }
|
21 | exports.getFocusStyle = getFocusStyle;
|
22 | function _getFocusStyleInternal(theme, options) {
|
23 | var _a, _b;
|
24 | if (options === void 0) { options = {}; }
|
25 | var _c = options.inset, inset = _c === void 0 ? 0 : _c, _d = options.width, width = _d === void 0 ? 1 : _d, _e = options.position, position = _e === void 0 ? 'relative' : _e, highContrastStyle = options.highContrastStyle, _f = options.borderColor, borderColor = _f === void 0 ? theme.palette.white : _f, _g = options.outlineColor, outlineColor = _g === void 0 ? theme.palette.neutralSecondary : _g, _h = options.isFocusedOnly, isFocusedOnly = _h === void 0 ? true : _h;
|
26 | return {
|
27 |
|
28 | outline: 'transparent',
|
29 |
|
30 | position: position,
|
31 | selectors: (_a = {
|
32 |
|
33 |
|
34 | '::-moz-focus-inner': {
|
35 | border: '0',
|
36 | }
|
37 | },
|
38 |
|
39 |
|
40 | _a["." + utilities_1.IsFocusVisibleClassName + " &" + (isFocusedOnly ? ':focus' : '') + ":after"] = {
|
41 | content: '""',
|
42 | position: 'absolute',
|
43 | left: inset + 1,
|
44 | top: inset + 1,
|
45 | bottom: inset + 1,
|
46 | right: inset + 1,
|
47 | border: width + "px solid " + borderColor,
|
48 | outline: width + "px solid " + outlineColor,
|
49 | zIndex: zIndexes_1.ZIndexes.FocusStyle,
|
50 | selectors: (_b = {},
|
51 | _b[CommonStyles_1.HighContrastSelector] = highContrastStyle,
|
52 | _b),
|
53 | },
|
54 | _a),
|
55 | };
|
56 | }
|
57 |
|
58 |
|
59 |
|
60 | function focusClear() {
|
61 | return {
|
62 | selectors: {
|
63 | '&::-moz-focus-inner': {
|
64 |
|
65 | border: 0,
|
66 | },
|
67 | '&': {
|
68 |
|
69 | outline: 'transparent',
|
70 | },
|
71 | },
|
72 | };
|
73 | }
|
74 | exports.focusClear = focusClear;
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 | function getFocusOutlineStyle(theme, inset, width, color) {
|
85 | var _a;
|
86 | if (inset === void 0) { inset = 0; }
|
87 | if (width === void 0) { width = 1; }
|
88 | return {
|
89 | selectors: (_a = {},
|
90 | _a[":global(" + utilities_1.IsFocusVisibleClassName + ") &:focus"] = {
|
91 | outline: width + " solid " + (color || theme.palette.neutralSecondary),
|
92 | outlineOffset: -inset + "px",
|
93 | },
|
94 | _a),
|
95 | };
|
96 | }
|
97 | exports.getFocusOutlineStyle = getFocusOutlineStyle;
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 | exports.getInputFocusStyle = function (borderColor, borderRadius, borderType, borderPosition) {
|
109 | var _a, _b, _c;
|
110 | if (borderType === void 0) { borderType = 'border'; }
|
111 | if (borderPosition === void 0) { borderPosition = -1; }
|
112 | var isBorderBottom = borderType === 'borderBottom';
|
113 | return {
|
114 | borderColor: borderColor,
|
115 | selectors: {
|
116 | ':after': (_a = {
|
117 | pointerEvents: 'none',
|
118 | content: "''",
|
119 | position: 'absolute',
|
120 | left: isBorderBottom ? 0 : borderPosition,
|
121 | top: borderPosition,
|
122 | bottom: borderPosition,
|
123 | right: isBorderBottom ? 0 : borderPosition
|
124 | },
|
125 | _a[borderType] = "2px solid " + borderColor,
|
126 | _a.borderRadius = borderRadius,
|
127 | _a.width = borderType === 'borderBottom' ? '100%' : undefined,
|
128 | _a.selectors = (_b = {},
|
129 | _b[CommonStyles_1.HighContrastSelector] = (_c = {},
|
130 | _c[borderType === 'border' ? 'borderColor' : 'borderBottomColor'] = 'Highlight',
|
131 | _c),
|
132 | _b),
|
133 | _a),
|
134 | },
|
135 | };
|
136 | };
|
137 |
|
\ | No newline at end of file |