@fluentui/react
Version:
Reusable React components for building web experiences.
267 lines • 10.9 kB
JavaScript
import { __assign, __spreadArray } from "tslib";
import { AnimationVariables, getGlobalClassNames, HighContrastSelector, normalize, FontWeights, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities';
import { IsFocusVisibleClassName } from '@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(IsFocusVisibleClassName, " &:focus, :host(.").concat(IsFocusVisibleClassName, ") &:focus")] = {
outline: "1px solid ".concat(semanticColors.focusBorder),
},
_a[".".concat(IsFocusVisibleClassName, " &:focus:after, :host(.").concat(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(AnimationVariables.durationValue2, " ").concat(AnimationVariables.easeFunction2, ",\n right ").concat(AnimationVariables.durationValue2, " ").concat(AnimationVariables.easeFunction2),
},
_a[':after'] = {
color: 'transparent',
content: 'attr(data-content)',
display: 'block',
fontWeight: 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(IsFocusVisibleClassName, " &:focus::before, :host(.").concat(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: 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[HighContrastSelector] = __assign({ fontWeight: FontWeights.semibold, color: 'HighlightText', background: 'Highlight' }, getHighContrastNoAdjustStyle()),
_c),
},
// eslint-disable-next-line @fluentui/max-len
_b[".".concat(IsFocusVisibleClassName, " &.").concat(classNames.linkIsSelected, ":focus, :host(.").concat(IsFocusVisibleClassName, ") &.").concat(classNames.linkIsSelected, ":focus")] = {
outlineColor: semanticColors.primaryButtonText,
},
_b),
},
],
],
];
};
export 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 = getGlobalClassNames(globalClassNames, theme);
var rootIsLarge = linkSize === 'large';
var rootIsTabs = linkFormat === 'tabs';
return {
root: [
classNames.root,
fonts.medium,
normalize,
{
position: 'relative',
color: semanticColors.link,
whiteSpace: 'nowrap',
},
rootIsLarge && classNames.rootIsLarge,
rootIsTabs && classNames.rootIsTabs,
className,
],
itemContainer: {
selectors: {
'&[hidden]': {
display: 'none',
},
},
},
link: __spreadArray(__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: __spreadArray(__spreadArray([
classNames.linkInMenu
], getLinkStyles(props, classNames, true), true), [
{
textAlign: 'left',
width: '100%',
height: 36,
lineHeight: 36,
},
], false),
linkIsSelected: [
classNames.link,
classNames.linkIsSelected,
{
fontWeight: FontWeights.semibold,
selectors: (_c = {
':before': {
backgroundColor: semanticColors.inputBackgroundChecked,
selectors: (_d = {},
_d[HighContrastSelector] = {
backgroundColor: 'Highlight',
},
_d),
},
':hover::before': {
left: 0,
right: 0,
}
},
_c[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,
};
};
//# sourceMappingURL=Pivot.styles.js.map