Stefan Hacker
124 lines
5.7 KiB
JavaScript
124 lines
5.7 KiB
JavaScript
define(["require", "exports", "@fluentui/style-utilities", "@fluentui/utilities"], function (require, exports, style_utilities_1, utilities_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = exports.GlobalClassNames = void 0;
|
|
exports.GlobalClassNames = {
|
|
root: 'ms-Link',
|
|
};
|
|
var getStyles = function (props) {
|
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
var className = props.className, isButton = props.isButton, isDisabled = props.isDisabled, isUnderlined = props.isUnderlined, theme = props.theme;
|
|
var semanticColors = theme.semanticColors;
|
|
// Tokens
|
|
var linkColor = semanticColors.link;
|
|
var linkInteractedColor = semanticColors.linkHovered;
|
|
var linkDisabledColor = semanticColors.disabledText;
|
|
var focusBorderColor = semanticColors.focusBorder;
|
|
var classNames = (0, style_utilities_1.getGlobalClassNames)(exports.GlobalClassNames, theme);
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
theme.fonts.medium,
|
|
{
|
|
color: linkColor,
|
|
outline: 'none',
|
|
fontSize: 'inherit',
|
|
fontWeight: 'inherit',
|
|
textDecoration: isUnderlined ? 'underline' : 'none',
|
|
selectors: (_a = {},
|
|
_a[".".concat(utilities_1.IsFocusVisibleClassName, " &:focus, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &:focus")] = {
|
|
// Can't use getFocusStyle because it doesn't support wrapping links
|
|
// https://github.com/microsoft/fluentui/issues/4883#issuecomment-406743543
|
|
// Using box-shadow and outline allows the focus rect to wrap links that span multiple lines
|
|
// and helps the focus rect avoid getting clipped.
|
|
boxShadow: "0 0 0 1px ".concat(focusBorderColor, " inset"),
|
|
outline: "1px auto ".concat(focusBorderColor),
|
|
selectors: (_b = {},
|
|
_b[style_utilities_1.HighContrastSelector] = {
|
|
outline: '1px solid WindowText',
|
|
},
|
|
_b),
|
|
},
|
|
_a[style_utilities_1.HighContrastSelector] = {
|
|
// For IE high contrast mode
|
|
borderBottom: 'none',
|
|
},
|
|
_a),
|
|
},
|
|
isButton && {
|
|
background: 'none',
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
display: 'inline',
|
|
margin: 0,
|
|
overflow: 'inherit',
|
|
padding: 0,
|
|
textAlign: 'left',
|
|
textOverflow: 'inherit',
|
|
userSelect: 'text',
|
|
borderBottom: '1px solid transparent', // For Firefox high contrast mode
|
|
selectors: (_c = {},
|
|
_c[style_utilities_1.HighContrastSelector] = {
|
|
color: 'LinkText',
|
|
forcedColorAdjust: 'none',
|
|
},
|
|
_c),
|
|
},
|
|
!isButton && {
|
|
selectors: (_d = {},
|
|
_d[style_utilities_1.HighContrastSelector] = {
|
|
// This is mainly for MessageBar, which sets MsHighContrastAdjust: none by default
|
|
MsHighContrastAdjust: 'auto',
|
|
forcedColorAdjust: 'auto',
|
|
},
|
|
_d),
|
|
},
|
|
isDisabled && [
|
|
'is-disabled',
|
|
{
|
|
color: linkDisabledColor,
|
|
cursor: 'default',
|
|
},
|
|
{
|
|
selectors: (_e = {
|
|
'&:link, &:visited': {
|
|
pointerEvents: 'none',
|
|
}
|
|
},
|
|
_e[style_utilities_1.HighContrastSelector] = {
|
|
// We need to specify the color in High Contrast because of the case of Links rendering as buttons.
|
|
color: 'GrayText',
|
|
},
|
|
_e),
|
|
},
|
|
],
|
|
!isDisabled && {
|
|
selectors: {
|
|
'&:active, &:hover, &:active:hover': {
|
|
color: linkInteractedColor,
|
|
textDecoration: 'underline',
|
|
selectors: (_f = {},
|
|
_f[style_utilities_1.HighContrastSelector] = {
|
|
color: 'LinkText',
|
|
},
|
|
_f),
|
|
},
|
|
'&:focus': {
|
|
color: linkColor,
|
|
selectors: (_g = {},
|
|
_g[style_utilities_1.HighContrastSelector] = {
|
|
color: 'LinkText',
|
|
},
|
|
_g),
|
|
},
|
|
},
|
|
},
|
|
classNames.root,
|
|
className,
|
|
],
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
});
|
|
//# sourceMappingURL=Link.styles.js.map
|