office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
84 lines • 3.4 kB
JavaScript
define(["require", "exports", "../../../Styling", "../../../Utilities", "@uifabric/styling"], function (require, exports, Styling_1, Utilities_1, styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = function (props) {
var _a;
var className = props.className, theme = props.theme, minSize = props.minSize;
var palette = theme.palette, effects = theme.effects;
return {
root: [
'ms-ColorPicker-colorRect',
{
position: 'relative',
marginBottom: 8,
border: "1px solid " + palette.neutralLighter,
borderRadius: effects.roundedCorner2,
minWidth: minSize,
minHeight: minSize,
outline: 'none',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
MsHighContrastAdjust: 'none'
},
_a["." + Utilities_1.IsFocusVisibleClassName + " &:focus"] = {
outline: "1px solid " + palette.neutralSecondary
},
_a)
},
className
],
light: [
'ms-ColorPicker-light',
{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
// Intentionally DO NOT flip the color picker in RTL: its orientation is not very meaningful,
// and getting all the math and styles flipped correctly is tricky
background: 'linear-gradient(to right, white 0%, transparent 100%) /*@noflip*/'
}
],
dark: [
'ms-ColorPicker-dark',
{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
background: 'linear-gradient(to bottom, transparent 0, #000 100%)'
}
],
thumb: [
'ms-ColorPicker-thumb',
{
position: 'absolute',
width: 20,
height: 20,
background: 'white',
border: "1px solid " + palette.neutralSecondaryAlt,
borderRadius: '50%',
boxShadow: effects.elevation8,
transform: 'translate(-50%, -50%)',
selectors: {
':before': {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
border: "2px solid " + palette.white,
borderRadius: '50%',
boxSizing: 'border-box',
content: '""'
}
}
}
],
description: styling_1.hiddenContentStyle
};
};
});
//# sourceMappingURL=ColorRectangle.styles.js.map