office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
82 lines • 3.02 kB
JavaScript
import { __assign } from "tslib";
import { HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling';
import { IsFocusVisibleClassName } from '../../../Utilities';
import { hiddenContentStyle } from '@uifabric/styling';
export var 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[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),
_a["." + 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: hiddenContentStyle,
};
};
//# sourceMappingURL=ColorRectangle.styles.js.map