Stefan Hacker
271 lines
11 KiB
JavaScript
271 lines
11 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var style_utilities_1 = require("@fluentui/style-utilities");
|
|
var utilities_1 = require("@fluentui/utilities");
|
|
var globalClassNames = {
|
|
count: 'ms-Pivot-count',
|
|
icon: 'ms-Pivot-icon',
|
|
linkIsSelected: 'is-selected',
|
|
link: 'ms-Pivot-link',
|
|
linkContent: 'ms-Pivot-linkContent',
|
|
root: 'ms-Pivot',
|
|
rootIsLarge: 'ms-Pivot--large',
|
|
rootIsTabs: 'ms-Pivot--tabs',
|
|
text: 'ms-Pivot-text',
|
|
linkInMenu: 'ms-Pivot-linkInMenu',
|
|
overflowMenuButton: 'ms-Pivot-overflowMenuButton',
|
|
};
|
|
var getLinkStyles = function (props, classNames, isLinkInOverflowMenu) {
|
|
var _a, _b, _c;
|
|
if (isLinkInOverflowMenu === void 0) { isLinkInOverflowMenu = false; }
|
|
var linkSize = props.linkSize, linkFormat = props.linkFormat;
|
|
var _d = props.theme, semanticColors = _d.semanticColors, fonts = _d.fonts;
|
|
var rootIsLarge = linkSize === 'large';
|
|
var rootIsTabs = linkFormat === 'tabs';
|
|
return [
|
|
fonts.medium,
|
|
{
|
|
color: semanticColors.actionLink,
|
|
padding: '0 8px',
|
|
position: 'relative',
|
|
backgroundColor: 'transparent',
|
|
border: 0,
|
|
borderRadius: 0,
|
|
selectors: {
|
|
':hover': {
|
|
backgroundColor: semanticColors.buttonBackgroundHovered,
|
|
color: semanticColors.buttonTextHovered,
|
|
cursor: 'pointer',
|
|
},
|
|
':active': {
|
|
backgroundColor: semanticColors.buttonBackgroundPressed,
|
|
color: semanticColors.buttonTextHovered,
|
|
},
|
|
':focus': {
|
|
outline: 'none',
|
|
},
|
|
},
|
|
},
|
|
!isLinkInOverflowMenu && [
|
|
{
|
|
display: 'inline-block',
|
|
lineHeight: 44,
|
|
height: 44,
|
|
marginRight: 8,
|
|
textAlign: 'center',
|
|
selectors: (_a = {},
|
|
_a[".".concat(utilities_1.IsFocusVisibleClassName, " &:focus, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &:focus")] = {
|
|
outline: "1px solid ".concat(semanticColors.focusBorder),
|
|
},
|
|
_a[".".concat(utilities_1.IsFocusVisibleClassName, " &:focus:after, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &:focus:after")] = {
|
|
content: 'attr(data-content)',
|
|
position: 'relative',
|
|
border: 0,
|
|
},
|
|
_a[':before'] = {
|
|
backgroundColor: 'transparent',
|
|
bottom: 0,
|
|
content: '""',
|
|
height: 2,
|
|
left: 8,
|
|
position: 'absolute',
|
|
right: 8,
|
|
transition: "left ".concat(style_utilities_1.AnimationVariables.durationValue2, " ").concat(style_utilities_1.AnimationVariables.easeFunction2, ",\n right ").concat(style_utilities_1.AnimationVariables.durationValue2, " ").concat(style_utilities_1.AnimationVariables.easeFunction2),
|
|
},
|
|
_a[':after'] = {
|
|
color: 'transparent',
|
|
content: 'attr(data-content)',
|
|
display: 'block',
|
|
fontWeight: style_utilities_1.FontWeights.bold,
|
|
height: 1,
|
|
overflow: 'hidden',
|
|
visibility: 'hidden',
|
|
},
|
|
_a),
|
|
},
|
|
rootIsLarge && {
|
|
fontSize: fonts.large.fontSize,
|
|
},
|
|
rootIsTabs && [
|
|
{
|
|
marginRight: 0,
|
|
height: 44,
|
|
lineHeight: 44,
|
|
backgroundColor: semanticColors.buttonBackground,
|
|
padding: '0 10px',
|
|
verticalAlign: 'top',
|
|
selectors: (_b = {
|
|
':focus': {
|
|
outlineOffset: '-2px',
|
|
}
|
|
},
|
|
_b[".".concat(utilities_1.IsFocusVisibleClassName, " &:focus::before, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &:focus::before")] = {
|
|
height: 'auto',
|
|
background: 'transparent',
|
|
transition: 'none',
|
|
},
|
|
_b['&:hover, &:focus'] = {
|
|
color: semanticColors.buttonTextCheckedHovered,
|
|
},
|
|
_b['&:active, &:hover'] = {
|
|
color: semanticColors.primaryButtonText,
|
|
backgroundColor: semanticColors.primaryButtonBackground,
|
|
},
|
|
_b["&.".concat(classNames.linkIsSelected)] = {
|
|
backgroundColor: semanticColors.primaryButtonBackground,
|
|
color: semanticColors.primaryButtonText,
|
|
fontWeight: style_utilities_1.FontWeights.regular,
|
|
selectors: (_c = {
|
|
':before': {
|
|
backgroundColor: 'transparent',
|
|
transition: 'none',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
content: '""',
|
|
height: 0,
|
|
},
|
|
':hover': {
|
|
backgroundColor: semanticColors.primaryButtonBackgroundHovered,
|
|
color: semanticColors.primaryButtonText,
|
|
},
|
|
':active': {
|
|
backgroundColor: semanticColors.primaryButtonBackgroundPressed,
|
|
color: semanticColors.primaryButtonText,
|
|
}
|
|
},
|
|
_c[style_utilities_1.HighContrastSelector] = tslib_1.__assign({ fontWeight: style_utilities_1.FontWeights.semibold, color: 'HighlightText', background: 'Highlight' }, (0, style_utilities_1.getHighContrastNoAdjustStyle)()),
|
|
_c),
|
|
},
|
|
// eslint-disable-next-line @fluentui/max-len
|
|
_b[".".concat(utilities_1.IsFocusVisibleClassName, " &.").concat(classNames.linkIsSelected, ":focus, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &.").concat(classNames.linkIsSelected, ":focus")] = {
|
|
outlineColor: semanticColors.primaryButtonText,
|
|
},
|
|
_b),
|
|
},
|
|
],
|
|
],
|
|
];
|
|
};
|
|
var getStyles = function (props) {
|
|
var _a, _b, _c, _d;
|
|
var className = props.className, linkSize = props.linkSize, linkFormat = props.linkFormat, theme = props.theme;
|
|
var semanticColors = theme.semanticColors, fonts = theme.fonts;
|
|
var classNames = (0, style_utilities_1.getGlobalClassNames)(globalClassNames, theme);
|
|
var rootIsLarge = linkSize === 'large';
|
|
var rootIsTabs = linkFormat === 'tabs';
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
fonts.medium,
|
|
style_utilities_1.normalize,
|
|
{
|
|
position: 'relative',
|
|
color: semanticColors.link,
|
|
whiteSpace: 'nowrap',
|
|
},
|
|
rootIsLarge && classNames.rootIsLarge,
|
|
rootIsTabs && classNames.rootIsTabs,
|
|
className,
|
|
],
|
|
itemContainer: {
|
|
selectors: {
|
|
'&[hidden]': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
},
|
|
link: tslib_1.__spreadArray(tslib_1.__spreadArray([
|
|
classNames.link
|
|
], getLinkStyles(props, classNames), true), [
|
|
(_a = {},
|
|
_a["&[data-is-overflowing='true']"] = {
|
|
display: 'none',
|
|
},
|
|
_a),
|
|
], false),
|
|
overflowMenuButton: [
|
|
classNames.overflowMenuButton,
|
|
(_b = {
|
|
visibility: 'hidden',
|
|
position: 'absolute',
|
|
right: 0
|
|
},
|
|
_b[".".concat(classNames.link, "[data-is-overflowing='true'] ~ &")] = {
|
|
visibility: 'visible',
|
|
position: 'relative',
|
|
},
|
|
_b),
|
|
],
|
|
linkInMenu: tslib_1.__spreadArray(tslib_1.__spreadArray([
|
|
classNames.linkInMenu
|
|
], getLinkStyles(props, classNames, true), true), [
|
|
{
|
|
justifyContent: 'start',
|
|
height: 36,
|
|
lineHeight: 36,
|
|
width: '100%',
|
|
},
|
|
], false),
|
|
linkIsSelected: [
|
|
classNames.link,
|
|
classNames.linkIsSelected,
|
|
{
|
|
fontWeight: style_utilities_1.FontWeights.semibold,
|
|
selectors: (_c = {
|
|
':before': {
|
|
backgroundColor: semanticColors.inputBackgroundChecked,
|
|
selectors: (_d = {},
|
|
_d[style_utilities_1.HighContrastSelector] = {
|
|
backgroundColor: 'Highlight',
|
|
},
|
|
_d),
|
|
},
|
|
':hover::before': {
|
|
left: 0,
|
|
right: 0,
|
|
}
|
|
},
|
|
_c[style_utilities_1.HighContrastSelector] = {
|
|
color: 'Highlight',
|
|
},
|
|
_c),
|
|
},
|
|
],
|
|
linkContent: [
|
|
classNames.linkContent,
|
|
{
|
|
flex: '0 1 100%',
|
|
selectors: {
|
|
'& > * ': {
|
|
marginLeft: 4,
|
|
},
|
|
'& > *:first-child': {
|
|
marginLeft: 0,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
text: [
|
|
classNames.text,
|
|
{
|
|
display: 'inline-block',
|
|
verticalAlign: 'top',
|
|
},
|
|
],
|
|
count: [
|
|
classNames.count,
|
|
{
|
|
display: 'inline-block',
|
|
verticalAlign: 'top',
|
|
},
|
|
],
|
|
icon: classNames.icon,
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
//# sourceMappingURL=Pivot.styles.js.map
|