office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
117 lines • 4.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Utilities_1 = require("../../Utilities");
var Styling_1 = require("../../Styling");
// Size breakpoint when the default border width changes from 2px to 4px.
var CELL_BORDER_BREAKPOINT = 24;
var LARGE_BORDER = 4;
var SMALL_BORDER = 2;
var DIVIDING_PADDING = 2;
var DEFAULT_CELL_SIZE = 20;
var cellHighContrastFocus = {
left: -2,
top: -2,
bottom: -2,
right: -2,
border: 'none',
outlineColor: 'ButtonText'
};
exports.getStyles = function (props) {
var _a, _b, _c, _d;
var theme = props.theme, disabled = props.disabled, selected = props.selected, circle = props.circle, isWhite = props.isWhite, _e = props.height, height = _e === void 0 ? DEFAULT_CELL_SIZE : _e, _f = props.width, width = _f === void 0 ? DEFAULT_CELL_SIZE : _f, borderWidth = props.borderWidth;
var semanticColors = theme.semanticColors;
// If user provided a value, use it. If not, then we decide depending on the 24px size breakpoint.
var calculatedBorderWidth = borderWidth ? borderWidth : width < CELL_BORDER_BREAKPOINT ? SMALL_BORDER : LARGE_BORDER;
return {
// this is a button that wraps the color
colorCell: [
Styling_1.getFocusStyle(theme, -1, 'relative', cellHighContrastFocus),
{
backgroundColor: semanticColors.bodyBackground,
padding: 0,
position: 'relative',
boxSizing: 'border-box',
display: 'inline-block',
cursor: 'pointer',
userSelect: 'none',
borderRadius: 0,
border: 'none',
height: height,
width: width
},
!circle && {
selectors: (_a = {},
_a["." + Utilities_1.IsFocusVisibleClassName + " &:focus::after"] = {
// -1px so that we don't increase visually the size of the cell.
outlineOffset: calculatedBorderWidth - 1 + "px"
},
_a)
},
// In focus state for circle we want a round border which is not possible with outline.
circle && {
borderRadius: '50%',
selectors: (_b = {},
_b["." + Utilities_1.IsFocusVisibleClassName + " &:focus::after"] = {
outline: 'none',
borderColor: semanticColors.focusBorder,
borderRadius: '50%',
left: -calculatedBorderWidth,
right: -calculatedBorderWidth,
top: -calculatedBorderWidth,
bottom: -calculatedBorderWidth,
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
outline: "1px solid ButtonText"
},
_c)
},
_b)
},
selected && {
padding: DIVIDING_PADDING,
border: calculatedBorderWidth + "px solid " + theme.palette.neutralTertiaryAlt
},
!selected && {
selectors: (_d = {},
_d['&:hover, &:active, &:focus'] = {
backgroundColor: semanticColors.bodyBackground,
padding: DIVIDING_PADDING,
border: calculatedBorderWidth + "px solid " + theme.palette.neutralLight
},
_d['&:focus'] = {
borderColor: semanticColors.bodyBackground,
padding: 0,
selectors: {
':hover': {
borderColor: theme.palette.neutralLight,
padding: DIVIDING_PADDING
}
}
},
_d)
},
disabled && {
color: semanticColors.disabledBodyText,
pointerEvents: 'none',
opacity: 0.3
},
isWhite &&
!selected && {
// fake a border for white
backgroundColor: semanticColors.bodyDivider,
padding: 1
}
],
// the <svg> that holds the color
svg: [
{
width: '100%',
height: '100%'
},
circle && {
borderRadius: '50%'
}
]
};
};
//# sourceMappingURL=ColorPickerGridCell.styles.js.map