@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
184 lines • 7.25 kB
JavaScript
import { FontSizes } from 'office-ui-fabric-react/lib/Styling';
import { HighContrastSelector } from 'office-ui-fabric-react/lib/Styling';
export var getStyles = function (props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
var maybeTheme = props.theme, isSelected = props.isSelected, isValid = props.isValid;
// theme is actually non-nullable (supplied by styles)
var theme = maybeTheme;
var palette = theme.palette;
return {
personaContainer: [
(_a = {
borderRadius: 15,
display: 'inline-flex',
alignItems: 'center',
background: palette.themeLighterAlt,
margin: 4,
cursor: 'default',
userSelect: 'none',
verticalAlign: 'middle',
position: 'relative',
// hover + selected hover state
':hover': (_b = {
background: isSelected ? palette.themePrimary : palette.themeLighter
},
// high contrast hover state
_b[HighContrastSelector] = (_c = {
border: '1px solid ButtonText',
color: 'HighlightText',
background: 'Highlight'
},
// persona text
_c['.ms-PickerItem-content'] = {
color: 'HighlightText',
},
// remove/expand buttons
_c['.ms-PickerItem-removeButton'] = {
color: 'HighlightText',
},
_c),
_b)
},
// high contrast normal state
_a[HighContrastSelector] = (_d = {
border: '1px solid ButtonText',
color: !isValid ? palette.red : 'ButtonText',
background: 'ButtonFace',
'-ms-high-contrast-adjust': 'none'
},
// remove/expand buttons
_d['.ms-PickerItem-removeButton'] = {
color: 'ButtonText',
},
_d),
_a),
isSelected && (_e = {
background: palette.themePrimary
},
// high contrast selected state
_e[HighContrastSelector] = (_f = {
color: 'HighlightText',
background: 'Highlight'
},
// remove/expand buttons
_f['.ms-PickerItem-removeButton'] = {
color: 'HighlightText',
},
_f),
_e),
],
personaWrapper: {
position: 'relative',
display: 'inherit',
},
expandButton: {
borderRadius: '15px 0px 0px 15px',
height: 32,
width: 44,
paddingRight: 16,
position: 'inherit',
display: 'flex',
marginRight: -17,
},
removeButton: {
borderRadius: 15,
flex: '0 0 auto',
width: 32,
height: 32,
},
itemContentWrapper: {
flex: '0 1 auto',
minWidth: 0,
/** Needed for IE 11 to properly truncate long persona names in the picker **/
maxWidth: '100%',
},
subComponentStyles: {
personaStyles: {
root: {
// use color logic from personaContainer
color: 'inherit',
},
// primary text in personas
primaryText: [
(_g = {
color: !isValid ? palette.red : palette.themeDark,
fontSize: FontSizes.medium,
':hover': (_h = {
color: !isValid ? palette.red : palette.themeDark
},
// high contrast: use color logic from personaContainer
_h[HighContrastSelector] = {
color: 'inherit',
},
_h)
},
// high contrast: use color logic from personaContainer
_g[HighContrastSelector] = {
color: 'inherit',
},
_g),
isSelected && {
color: palette.white,
':hover': {
color: palette.white,
},
},
],
details: {
padding: '0 8px',
},
},
personaCoinStyles: {
initials: isValid
? {}
: {
fontSize: 20,
},
},
actionButtonStyles: {
// root element for remove/expand button
root: [
(_j = {
color: palette.themeDark
},
_j[HighContrastSelector] = {
// high contrast: use color logic from personaContainer
color: 'inherit',
backgroundColor: 'inherit',
},
_j),
isSelected && {
color: palette.white,
},
],
rootHovered: [
(_k = {
color: palette.themeDark,
backgroundColor: palette.themeLight
},
_k[HighContrastSelector] = {
// high contrast: use color logic from personaContainer
color: 'inherit',
background: 'inherit',
},
_k),
isSelected && {
color: palette.white,
backgroundColor: palette.themeDarkAlt,
},
],
rootPressed: (_l = {
color: palette.white,
backgroundColor: palette.themeDarkAlt
},
_l[HighContrastSelector] = {
// high contrast: use color logic from personaContainer
color: 'inherit',
background: 'inherit',
},
_l),
},
},
};
};
//# sourceMappingURL=SelectedPersona.styles.js.map