| 1 | {"version":3,"file":"Shimmer.styles.js","sourceRoot":"../src/","sources":["components/Shimmer/Shimmer.styles.ts"],"names":[],"mappings":";;;;AAAA,yCAMuB;AACvB,6CAA0D;AAG1D,IAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,sBAAsB;IAC5B,cAAc,EAAE,2BAA2B;IAC3C,eAAe,EAAE,4BAA4B;IAC7C,WAAW,EAAE,wBAAwB;CACtC,CAAC;AAEF,IAAM,8BAA8B,GAAG,MAAM,CAAC;AAE9C,IAAM,gBAAgB,GAAG,2BAAe,CAAC;IACvC,OAAA,mBAAS,CAAC;QACR,IAAI,EAAE;YACJ,SAAS,EAAE,iBAAe,8BAA8B,MAAG;SAC5D;QACD,MAAM,EAAE;YACN,SAAS,EAAE,gBAAc,8BAA8B,MAAG;SAC3D;KACF,CAAC;AAPF,CAOE,CACH,CAAC;AAEF,IAAM,mBAAmB,GAAG,2BAAe,CAAC;IAC1C,OAAA,mBAAS,CAAC;QACR,MAAM,EAAE;YACN,SAAS,EAAE,iBAAe,8BAA8B,MAAG;SAC5D;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,gBAAc,8BAA8B,MAAG;SAC3D;KACF,CAAC;AAPF,CAOE,CACH,CAAC;AAEF,SAAgB,SAAS,CAAC,KAAyB;;IACzC,IAAA,YAAY,GAAoF,KAAK,aAAzF,EAAE,SAAS,GAAyE,KAAK,UAA9E,EAAE,KAAK,GAAkE,KAAK,MAAvE,EAAE,2BAA2B,GAAqC,KAAK,4BAA1C,EAAE,YAAY,GAAuB,KAAK,aAA5B,EAAE,gBAAgB,GAAK,KAAK,iBAAV,CAAW;IAEtG,IAAA,cAAc,GAAK,KAAK,eAAV,CAAW;IACjC,IAAM,UAAU,GAAG,6BAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;IAEhE,IAAM,KAAK,GAAG,kBAAM,CAAC,KAAK,CAAC,CAAC;IAE5B,OAAO;QACL,IAAI,EAAE;YACJ,UAAU,CAAC,IAAI;YACf,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,MAAM;aACf;YACD,SAAS;SACV;QACD,cAAc,EAAE;YACd,UAAU,CAAC,cAAc;YACzB;gBACE,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,SAAS,EAAE,eAAe;gBAC1B,eAAe,EAAE,YAAY,IAAI,cAAc,CAAC,kBAAkB;gBAClE,UAAU,EAAE,aAAW,2BAA2B,OAAI;gBACtD,SAAS;wBACP,KAAK,EAAE;4BACL,SAAS,EAAE,eAAe;yBAC3B;;oBACD,GAAC,8BAAoB,uBACnB,UAAU,EAAE,qSAOU,IACnB,sCAA4B,EAAE,CAClC;uBACF;aACF;YACD,YAAY,IAAI;gBACd,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,GAAG;gBACR,MAAM,EAAE,GAAG;gBACX,IAAI,EAAE,GAAG;gBACT,KAAK,EAAE,GAAG;aACX;SACF;QACD,eAAe,EAAE;YACf,UAAU,CAAC,eAAe;YAC1B;gBACE,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,UAAU,EAAE,CAAG,YAAY,IAAI,cAAc,CAAC,kBAAkB,+GAG9C,YAAY,IAAI,cAAc,CAAC,kBAAkB,wCACjD,gBAAgB,IAAI,cAAc,CAAC,WAAW,yCAC9C,YAAY,IAAI,cAAc,CAAC,kBAAkB,mFAE3C;gBACxB,SAAS,EAAE,iBAAe,8BAA8B,MAAG;gBAC3D,iBAAiB,EAAE,IAAI;gBACvB,uBAAuB,EAAE,aAAa;gBACtC,kBAAkB,EAAE,QAAQ;gBAC5B,uBAAuB,EAAE,UAAU;gBACnC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;aAClE;SACF;QACD,WAAW,EAAE;YACX,UAAU,CAAC,WAAW;YACtB;gBACE,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,GAAG;gBACR,MAAM,EAAE,GAAG;gBACX,IAAI,EAAE,GAAG;gBACT,KAAK,EAAE,GAAG;gBACV,OAAO,EAAE,GAAG;gBACZ,UAAU,EAAE,MAAM;gBAClB,eAAe,EAAE,aAAa;gBAC9B,MAAM,EAAE,MAAM;gBACd,UAAU,EAAE,aAAW,2BAA2B,OAAI;aACvD;YACD,YAAY,IAAI;gBACd,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,gBAAgB,EAAE,4BAAkB;KACrC,CAAC;AACJ,CAAC;AAjGD,8BAiGC","sourcesContent":["import {\n keyframes,\n getGlobalClassNames,\n hiddenContentStyle,\n HighContrastSelector,\n getHighContrastNoAdjustStyle,\n} from '../../Styling';\nimport { getRTL, memoizeFunction } from '../../Utilities';\nimport type { IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';\n\nconst GlobalClassNames = {\n root: 'ms-Shimmer-container',\n shimmerWrapper: 'ms-Shimmer-shimmerWrapper',\n shimmerGradient: 'ms-Shimmer-shimmerGradient',\n dataWrapper: 'ms-Shimmer-dataWrapper',\n};\n\nconst BACKGROUND_OFF_SCREEN_POSITION = '100%';\n\nconst shimmerAnimation = memoizeFunction(() =>\n keyframes({\n '0%': {\n transform: `translateX(-${BACKGROUND_OFF_SCREEN_POSITION})`,\n },\n '100%': {\n transform: `translateX(${BACKGROUND_OFF_SCREEN_POSITION})`,\n },\n }),\n);\n\nconst shimmerAnimationRTL = memoizeFunction(() =>\n keyframes({\n '100%': {\n transform: `translateX(-${BACKGROUND_OFF_SCREEN_POSITION})`,\n },\n '0%': {\n transform: `translateX(${BACKGROUND_OFF_SCREEN_POSITION})`,\n },\n }),\n);\n\nexport function getStyles(props: IShimmerStyleProps): IShimmerStyles {\n const { isDataLoaded, className, theme, transitionAnimationInterval, shimmerColor, shimmerWaveColor } = props;\n\n const { semanticColors } = theme;\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const isRTL = getRTL(theme);\n\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n position: 'relative',\n height: 'auto',\n },\n className,\n ],\n shimmerWrapper: [\n classNames.shimmerWrapper,\n {\n position: 'relative',\n overflow: 'hidden',\n transform: 'translateZ(0)',\n backgroundColor: shimmerColor || semanticColors.disabledBackground,\n transition: `opacity ${transitionAnimationInterval}ms`,\n selectors: {\n '> *': {\n transform: 'translateZ(0)',\n },\n [HighContrastSelector]: {\n background: `WindowText\n linear-gradient(\n to right,\n transparent 0%,\n Window 50%,\n transparent 100%)\n 0 0 / 90% 100%\n no-repeat`,\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n isDataLoaded && {\n opacity: '0',\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: '0',\n right: '0',\n },\n ],\n shimmerGradient: [\n classNames.shimmerGradient,\n {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n background: `${shimmerColor || semanticColors.disabledBackground}\n linear-gradient(\n to right,\n ${shimmerColor || semanticColors.disabledBackground} 0%,\n ${shimmerWaveColor || semanticColors.bodyDivider} 50%,\n ${shimmerColor || semanticColors.disabledBackground} 100%)\n 0 0 / 90% 100%\n no-repeat`,\n transform: `translateX(-${BACKGROUND_OFF_SCREEN_POSITION})`,\n animationDuration: '2s',\n animationTimingFunction: 'ease-in-out',\n animationDirection: 'normal',\n animationIterationCount: 'infinite',\n animationName: isRTL ? shimmerAnimationRTL() : shimmerAnimation(),\n },\n ],\n dataWrapper: [\n classNames.dataWrapper,\n {\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: '0',\n right: '0',\n opacity: '0',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n transition: `opacity ${transitionAnimationInterval}ms`,\n },\n isDataLoaded && {\n opacity: '1',\n position: 'static',\n },\n ],\n screenReaderText: hiddenContentStyle,\n };\n}\n"]} |