office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
105 lines • 4.43 kB
JavaScript
define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ACTIVE_BORDER_COLOR = '#969696';
function getSvgSelectorStyles(borderColor, isHover) {
return {
width: 12,
height: 12,
border: '4px solid',
borderColor: borderColor,
boxShadow: isHover ? 'none' : '0 0 0 1px #969696',
padding: 4,
margin: 0
};
}
exports.getStyles = function (props) {
var theme = props.theme, disabled = props.disabled, selected = props.selected, circle = props.circle, isWhite = props.isWhite;
var semanticColors = theme.semanticColors, fonts = theme.fonts;
return {
colorCell: [
{
backgroundColor: 'transparent',
padding: 0,
overflow: 'visible',
position: 'relative',
boxSizing: 'border-box',
display: 'inline-block',
border: '1px solid transparent',
background: 'transparent',
cursor: 'pointer',
textAlign: 'center',
verticalAlign: 'top',
userSelect: 'none',
height: 40,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = { border: 'none' },
_a['.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus::after'] = { border: 'none' },
_a['.ms-Fabric.is-focusVisible &:focus $svg'] = getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, false),
_a[':hover $svg'] = getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, true),
_a[':focus $svg'] = getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, false),
_a[':active $svg'] = getSvgSelectorStyles(ACTIVE_BORDER_COLOR, false),
_a)
},
isWhite && {
selectors: {
'$svg': {
padding: 0,
border: '1px solid',
borderColor: theme.palette.neutralTertiary,
margin: 4,
},
}
},
circle && 'is-circle' && {
selectors: {
'$svg': { borderRadius: '100%' },
}
},
selected && 'isSelected' && {
selectors: {
'$svg': {
boxShadow: '0 0 0 1px #969696',
border: '4px solid',
borderColor: theme.palette.neutralTertiaryAlt,
width: 12,
height: 12,
},
':hover $svg': { boxShadow: '0 0 0 1px #969696' },
':focus $svg': {
boxShadow: '0 0 0 1px #969696',
},
':active $svg': {
boxShadow: '0 0 0 1px #969696',
borderColor: ACTIVE_BORDER_COLOR,
},
},
},
selected && isWhite && {
selectors: {
'$svg': {
padding: 4,
margin: 0
}
}
},
disabled && 'is-disabled' && {
color: semanticColors.disabledBodyText,
cursor: 'default',
pointerEvents: 'none',
opacity: .3
}
],
svg: [
{
width: 20,
height: 20,
padding: 4,
boxSizing: 'content-box',
}
]
};
var _a;
};
});
//# sourceMappingURL=ColorPickerGridCell.styles.js.map