| 1 | {"version":3,"file":"ProgressIndicator.styles.js","sourceRoot":"../src/","sources":["components/ProgressIndicator/ProgressIndicator.styles.ts"],"names":[],"mappings":";;;;AAAA,yCAMuB;AACvB,6CAA0D;AAI1D,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,sBAAsB;IAC5B,QAAQ,EAAE,+BAA+B;IACzC,eAAe,EAAE,sCAAsC;IACvD,YAAY,EAAE,mCAAmC;IACjD,aAAa,EAAE,oCAAoC;IACnD,WAAW,EAAE,kCAAkC;CAChD,CAAC;AAEF,IAAM,qBAAqB,GAAG,2BAAe,CAAC;IAC5C,OAAA,mBAAS,CAAC;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;SACb;QACD,MAAM,EAAE;YACN,IAAI,EAAE,MAAM;SACb;KACF,CAAC;AAPF,CAOE,CACH,CAAC;AAEF,IAAM,wBAAwB,GAAG,2BAAe,CAAC;IAC/C,OAAA,mBAAS,CAAC;QACR,MAAM,EAAE;YACN,KAAK,EAAE,MAAM;SACd;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;SACd;KACF,CAAC;AAPF,CAOE,CACH,CAAC;AAEK,IAAM,SAAS,GAAG,UAAC,KAAmC;;IAC3D,IAAM,KAAK,GAAG,kBAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1B,IAAA,SAAS,GAA0C,KAAK,UAA/C,EAAE,aAAa,GAA2B,KAAK,cAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,KAAkB,KAAK,UAAV,EAAb,SAAS,mBAAG,CAAC,KAAA,CAAW;IAEzD,IAAA,OAAO,GAA4B,KAAK,QAAjC,EAAE,cAAc,GAAY,KAAK,eAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACjD,IAAM,UAAU,GAAG,6BAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEhE,IAAM,iBAAiB,GAAG,CAAC,CAAC;IAC5B,IAAM,UAAU,GAAG,EAAE,CAAC;IACtB,IAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,CAAC;IAEhD,OAAO;QACL,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC;QAEhD,QAAQ,EAAE;YACR,UAAU,CAAC,QAAQ;YACnB,gBAAM;YACN;gBACE,KAAK,EAAE,cAAc,CAAC,QAAQ;gBAC9B,UAAU,EAAE,iBAAiB,GAAG,CAAC;gBACjC,UAAU,EAAE,UAAU,GAAG,CAAC;aAC3B;SACF;QAED,eAAe,EAAE;YACf,UAAU,CAAC,eAAe;YAC1B;gBACE,KAAK,EAAE,cAAc,CAAC,WAAW;gBACjC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ;gBAC9B,UAAU,EAAE,UAAU;aACvB;SACF;QAED,YAAY,EAAE;YACZ,UAAU,CAAC,YAAY;YACvB;gBACE,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,MAAM,EAAE,SAAS;gBACjB,OAAO,EAAK,iBAAiB,SAAM;aACpC;SACF;QAED,aAAa,EAAE;YACb,UAAU,CAAC,aAAa;YACxB;gBACE,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,SAAS;gBACjB,eAAe,EAAE,kBAAkB;gBAEnC,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,YAAY,EAAE,sBAAsB;qBACrC;uBACF;aACF;SACF;QAED,WAAW,EAAE;YACX;gBACE,eAAe,EAAE,OAAO,CAAC,YAAY;gBACrC,MAAM,EAAE,SAAS;gBACjB,QAAQ,EAAE,UAAU;gBACpB,UAAU,EAAE,gBAAgB;gBAC5B,KAAK,EAAE,CAAC;gBAER,SAAS;oBACP,GAAC,8BAAoB,uBACnB,eAAe,EAAE,WAAW,IACzB,sCAA4B,EAAE,CAClC;uBACF;aACF;YAED,aAAa;gBACX,CAAC,CAAE;oBACC,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,KAAK;oBACf,UAAU,EACR,+BAA6B,kBAAkB,UAAO;yBACnD,OAAO,CAAC,YAAY,cAAS,kBAAkB,WAAQ,CAAA;oBAC5D,SAAS,EAAE,CAAG,KAAK,CAAC,CAAC,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE,kBAAc;oBACxF,SAAS;wBACP,GAAC,8BAAoB,IAAG;4BACtB,UAAU,EAAE,WAAW;yBACxB;2BACF;iBACY;gBACjB,CAAC,CAAE;oBACC,UAAU,EAAE,mBAAmB;iBAClB;YACnB,UAAU,CAAC,WAAW;SACvB;KACF,CAAC;AACJ,CAAC,CAAC;AA/FW,QAAA,SAAS,aA+FpB","sourcesContent":["import {\n HighContrastSelector,\n keyframes,\n noWrap,\n getGlobalClassNames,\n getHighContrastNoAdjustStyle,\n} from '../../Styling';\nimport { getRTL, memoizeFunction } from '../../Utilities';\nimport type { IRawStyle } from '../../Styling';\nimport type { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types';\n\nconst GlobalClassNames = {\n root: 'ms-ProgressIndicator',\n itemName: 'ms-ProgressIndicator-itemName',\n itemDescription: 'ms-ProgressIndicator-itemDescription',\n itemProgress: 'ms-ProgressIndicator-itemProgress',\n progressTrack: 'ms-ProgressIndicator-progressTrack',\n progressBar: 'ms-ProgressIndicator-progressBar',\n};\n\nconst IndeterminateProgress = memoizeFunction(() =>\n keyframes({\n '0%': {\n left: '-30%',\n },\n '100%': {\n left: '100%',\n },\n }),\n);\n\nconst IndeterminateProgressRTL = memoizeFunction(() =>\n keyframes({\n '100%': {\n right: '-30%',\n },\n '0%': {\n right: '100%',\n },\n }),\n);\n\nexport const getStyles = (props: IProgressIndicatorStyleProps): IProgressIndicatorStyles => {\n const isRTL = getRTL(props.theme);\n const { className, indeterminate, theme, barHeight = 2 } = props;\n\n const { palette, semanticColors, fonts } = theme;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const marginBetweenText = 8;\n const textHeight = 18;\n const progressTrackColor = palette.neutralLight;\n\n return {\n root: [classNames.root, fonts.medium, className],\n\n itemName: [\n classNames.itemName,\n noWrap,\n {\n color: semanticColors.bodyText,\n paddingTop: marginBetweenText / 2,\n lineHeight: textHeight + 2,\n },\n ],\n\n itemDescription: [\n classNames.itemDescription,\n {\n color: semanticColors.bodySubtext,\n fontSize: fonts.small.fontSize,\n lineHeight: textHeight,\n },\n ],\n\n itemProgress: [\n classNames.itemProgress,\n {\n position: 'relative',\n overflow: 'hidden',\n height: barHeight,\n padding: `${marginBetweenText}px 0`,\n },\n ],\n\n progressTrack: [\n classNames.progressTrack,\n {\n position: 'absolute',\n width: '100%',\n height: barHeight,\n backgroundColor: progressTrackColor,\n\n selectors: {\n [HighContrastSelector]: {\n borderBottom: '1px solid WindowText',\n },\n },\n },\n ],\n\n progressBar: [\n {\n backgroundColor: palette.themePrimary,\n height: barHeight,\n position: 'absolute',\n transition: 'width .3s ease',\n width: 0,\n\n selectors: {\n [HighContrastSelector]: {\n backgroundColor: 'highlight',\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n\n indeterminate\n ? ({\n position: 'absolute',\n minWidth: '33%',\n background:\n `linear-gradient(to right, ${progressTrackColor} 0%, ` +\n `${palette.themePrimary} 50%, ${progressTrackColor} 100%)`,\n animation: `${isRTL ? IndeterminateProgressRTL() : IndeterminateProgress()} 3s infinite`,\n selectors: {\n [HighContrastSelector]: {\n background: `highlight`,\n },\n },\n } as IRawStyle)\n : ({\n transition: 'width .15s linear',\n } as IRawStyle),\n classNames.progressBar,\n ],\n };\n};\n"]} |