office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
82 lines • 3.41 kB
JavaScript
define(["require", "exports", "tslib", "../../../Styling", "../../../Utilities", "@uifabric/styling"], function (require, exports, tslib_1, 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] = tslib_1.__assign({}, Styling_1.getHighContrastNoAdjustStyle()),
_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