| 1 | {"version":3,"file":"ColorPicker.styles.js","sourceRoot":"../src/","sources":["components/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":";;;AAEO,IAAM,SAAS,GAAG,UAAC,KAA6B;IAC7C,IAAA,SAAS,GAAuB,KAAK,UAA5B,EAAE,KAAK,GAAgB,KAAK,MAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IAE9C,OAAO;QACL,IAAI,EAAE;YACJ,gBAAgB;YAChB,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,GAAG;aACd;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,sBAAsB;YACtB;gBACE,OAAO,EAAE,MAAM;aAChB;SACF;QACD,KAAK,EAAE;YACL,sBAAsB;YACtB;gBACE,WAAW,EAAE,OAAO;gBACpB,KAAK,EAAE,MAAM;gBACb,SAAS,EAAE;oBACT,6CAA6C,EAAE;wBAC7C,YAAY,EAAE,CAAC;qBAChB;iBACF;aACF;SACF;QACD,WAAW,EAAE;YACX,KAAK,CAAC,KAAK,CAAC,KAAK;YACjB;gBACE,SAAS,EAAE;oBACT,EAAE,EAAE;wBACF,aAAa,EAAE,CAAC;qBACjB;iBACF;aACF;SACF;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,KAAK;SACb;QACD,iDAAiD;QACjD,cAAc,EAAE,SAAS,KAAK,cAAc,IAAI;YAC9C,KAAK,EAAE,KAAK;SACb;QACD,WAAW,EAAE;YACX,4BAA4B;YAC5B;gBACE,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,WAAW;gBACnB,MAAM,EAAE,mBAAmB;aAC5B;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM;SAChB;QACD,UAAU,EAAE;YACV,QAAQ,EAAE,GAAG;SACd;QACD,cAAc,EAAE;YACd,QAAQ,EAAE,GAAG;SACd;QACD,KAAK,EAAE;YACL,sBAAsB;YACtB;gBACE,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,YAAY;gBACvB,MAAM,EAAE,EAAE;gBACV,SAAS,EAAE;oBACT,gBAAgB,EAAE;wBAChB,YAAY,EAAE,CAAC;qBAChB;oBACD,uBAAuB,EAAE;wBACvB,QAAQ,EAAE,MAAM;wBAChB,OAAO,EAAE,CAAC;wBACV,YAAY,EAAE,MAAM;qBACrB;iBACF;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAtFW,QAAA,SAAS,aAsFpB","sourcesContent":["import type { IColorPickerStyleProps, IColorPickerStyles } from './ColorPicker.types';\n\nexport const getStyles = (props: IColorPickerStyleProps): IColorPickerStyles => {\n const { className, theme, alphaType } = props;\n\n return {\n root: [\n 'ms-ColorPicker',\n theme.fonts.medium,\n {\n position: 'relative',\n maxWidth: 300,\n },\n className,\n ],\n panel: [\n 'ms-ColorPicker-panel',\n {\n padding: '16px',\n },\n ],\n table: [\n 'ms-ColorPicker-table',\n {\n tableLayout: 'fixed',\n width: '100%',\n selectors: {\n 'tbody td:last-of-type .ms-ColorPicker-input': {\n paddingRight: 0,\n },\n },\n },\n ],\n tableHeader: [\n theme.fonts.small,\n {\n selectors: {\n td: {\n paddingBottom: 4,\n },\n },\n },\n ],\n tableHexCell: {\n width: '25%',\n },\n // Account for \"Transparency\" being a longer word\n tableAlphaCell: alphaType === 'transparency' && {\n width: '22%',\n },\n colorSquare: [\n 'ms-ColorPicker-colorSquare',\n {\n width: 48,\n height: 48,\n margin: '0 0 0 8px',\n border: '1px solid #c8c6c4',\n },\n ],\n flexContainer: {\n display: 'flex',\n },\n flexSlider: {\n flexGrow: '1',\n },\n flexPreviewBox: {\n flexGrow: '0',\n },\n input: [\n 'ms-ColorPicker-input',\n {\n width: '100%',\n border: 'none',\n boxSizing: 'border-box',\n height: 30,\n selectors: {\n '&.ms-TextField': {\n paddingRight: 4,\n },\n '& .ms-TextField-field': {\n minWidth: 'auto',\n padding: 5,\n textOverflow: 'clip',\n },\n },\n },\n ],\n };\n};\n"]} |