@hh.ru/magritte-ui-avatar 5.0.18 → 5.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Avatar.js +3 -3
- package/Avatar.js.map +1 -1
- package/Skeleton-CJIkCUza.js +18 -0
- package/{Skeleton-D7TuOmCZ.js.map → Skeleton-CJIkCUza.js.map} +1 -1
- package/Skeleton.js +1 -1
- package/index.css +131 -109
- package/index.js +1 -1
- package/package.json +5 -5
- package/types.d.ts +3 -0
- package/Skeleton-D7TuOmCZ.js +0 -18
package/Avatar.js
CHANGED
|
@@ -7,12 +7,12 @@ import { Female } from './Placeholder/Female.js';
|
|
|
7
7
|
import { Male } from './Placeholder/Male.js';
|
|
8
8
|
import { City } from './Placeholder/City.js';
|
|
9
9
|
import { Undefined } from './Placeholder/Undefined.js';
|
|
10
|
-
import { A as AvatarSkeleton, s as styles } from './Skeleton-
|
|
10
|
+
import { A as AvatarSkeleton, s as styles } from './Skeleton-CJIkCUza.js';
|
|
11
11
|
import { AVATAR_TYPOGRAPHY_MAP, formatLetters } from './utils.js';
|
|
12
12
|
import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
|
|
13
13
|
import { BaseText } from '@hh.ru/magritte-ui-typography/BaseText';
|
|
14
14
|
|
|
15
|
-
const AvatarForwardRefRenderFunc = ({ mode, size, 'aria-label': ariaLabel, shapeCircle = false, online = false, disabled = false, letters, style, icon, image, fallbackMode, placeholder = 'undefined', Element = 'div', containerDataQa = '', ...avatarProps }, ref) => {
|
|
15
|
+
const AvatarForwardRefRenderFunc = ({ mode, size, 'aria-label': ariaLabel, shapeCircle = false, online = false, styleOnline = 'positive', disabled = false, letters, style, icon, image, fallbackMode, placeholder = 'undefined', Element = 'div', containerDataQa = '', ...avatarProps }, ref) => {
|
|
16
16
|
const [isImageLoaded, setLoaded] = useState(false);
|
|
17
17
|
const imgRef = useRef(null);
|
|
18
18
|
const forceDisabled = useDisabled();
|
|
@@ -69,7 +69,7 @@ const AvatarForwardRefRenderFunc = ({ mode, size, 'aria-label': ariaLabel, shape
|
|
|
69
69
|
[styles[`avatar-container_size-${size}`]]: online,
|
|
70
70
|
}),
|
|
71
71
|
}
|
|
72
|
-
: {}), ...(containerDataQa ? { 'data-qa': containerDataQa } : {}), children: [jsxs(Element, { ...additionalAttributes, ...avatarProps, className: classnames(classNames), disabled: Element === 'button' ? isComponentDisabled : false, "aria-label": ariaLabel, children: [isModeLetters && (jsx(BaseText, { style: "primary", Element: "span", typography: AVATAR_TYPOGRAPHY_MAP[size], children: formatLetters(letters || '') })), isModeIcon && icon, isModePlaceholder && (jsxs(Fragment, { children: [placeholder === 'female' && jsx(Female, { role: "img", width: size, height: size }), placeholder === 'male' && jsx(Male, { role: "img", width: size, height: size }), placeholder === 'city' && jsx(City, { role: "img", width: size, height: size }), placeholder === 'undefined' && jsx(Undefined, { role: "img", width: size, height: size })] })), isModeImage && (jsx("img", { ref: imgRef, alt: ariaLabel, className: classnames(styles.avatarImage, { [styles.avatarImageHidden]: !isImageLoaded }) }))] }), online && (jsxs(Fragment, { children: [jsx("div", { className: styles[`avatar-focus-border-${size}`] }), jsx("div", { className: styles[`avatar-online-badge-${size}`] })] }))] }));
|
|
72
|
+
: {}), ...(containerDataQa ? { 'data-qa': containerDataQa } : {}), children: [jsxs(Element, { ...additionalAttributes, ...avatarProps, className: classnames(classNames), disabled: Element === 'button' ? isComponentDisabled : false, "aria-label": ariaLabel, children: [isModeLetters && (jsx(BaseText, { style: "primary", Element: "span", typography: AVATAR_TYPOGRAPHY_MAP[size], children: formatLetters(letters || '') })), isModeIcon && icon, isModePlaceholder && (jsxs(Fragment, { children: [placeholder === 'female' && jsx(Female, { role: "img", width: size, height: size }), placeholder === 'male' && jsx(Male, { role: "img", width: size, height: size }), placeholder === 'city' && jsx(City, { role: "img", width: size, height: size }), placeholder === 'undefined' && jsx(Undefined, { role: "img", width: size, height: size })] })), isModeImage && (jsx("img", { ref: imgRef, alt: ariaLabel, className: classnames(styles.avatarImage, { [styles.avatarImageHidden]: !isImageLoaded }) }))] }), online && (jsxs(Fragment, { children: [jsx("div", { className: styles[`avatar-focus-border-${size}`] }), jsx("div", { className: classnames(styles[`avatar-online-badge-${size}`], styles[`avatar-online-badge_style_${styleOnline}`]) })] }))] }));
|
|
73
73
|
};
|
|
74
74
|
const AvatarComponent = forwardRef(AvatarForwardRefRenderFunc);
|
|
75
75
|
const Avatar = enrichWithSkeleton(AvatarComponent, AvatarSkeleton);
|
package/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/Avatar.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport { City, Female, Male, Undefined } from '@hh.ru/magritte-ui-avatar/Placeholder';\nimport { AvatarSkeleton } from '@hh.ru/magritte-ui-avatar/Skeleton';\nimport type { AvatarProps } from '@hh.ru/magritte-ui-avatar/types';\nimport { AVATAR_TYPOGRAPHY_MAP, formatLetters } from '@hh.ru/magritte-ui-avatar/utils';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\nimport { BaseText } from '@hh.ru/magritte-ui-typography/BaseText';\n\nimport styles from './avatar.less';\n\nconst AvatarForwardRefRenderFunc: PolymorphicForwardRefRenderFunc<AvatarProps, 'div'> = (\n {\n mode,\n size,\n 'aria-label': ariaLabel,\n shapeCircle = false,\n online = false,\n disabled = false,\n letters,\n style,\n icon,\n image,\n fallbackMode,\n placeholder = 'undefined',\n Element = 'div',\n containerDataQa = '',\n ...avatarProps\n },\n ref\n) => {\n const [isImageLoaded, setLoaded] = useState(false);\n const imgRef = useRef<HTMLImageElement>(null);\n\n const forceDisabled = useDisabled();\n\n const isComponentDisabled = disabled || forceDisabled;\n\n const isModeLetters = mode === 'letters' || (mode === 'image' && fallbackMode === 'letters' && !isImageLoaded);\n const isModeIcon = mode === 'icon';\n const isModePlaceholder =\n mode === 'placeholder' || (mode === 'image' && fallbackMode === 'placeholder' && !isImageLoaded);\n const isModeImage = mode === 'image';\n\n const additionalAttributes: Record<string, unknown> = {};\n\n if (Element === 'button') {\n additionalAttributes.type = 'button';\n }\n\n if (isComponentDisabled && Element === 'a') {\n additionalAttributes['aria-disabled'] = true;\n additionalAttributes.tabIndex = -1;\n }\n\n if (ref) {\n additionalAttributes.ref = ref;\n }\n\n const classNames = {\n [styles.avatar]: true,\n [styles.avatarShapeCircle]: shapeCircle,\n [styles.avatarModeImage]: mode === 'image' && isImageLoaded,\n [styles.avatarModeLetters]: isModeLetters,\n [styles.avatarModeIcon]: isModeIcon,\n [styles.avatarModePlaceholder]: isModePlaceholder,\n [styles[`avatar_size-${size}`]]: !!size,\n [styles[`avatar_with-online-badge-${size}`]]: online,\n };\n\n if ((isModeLetters || isModeIcon) && style) {\n classNames[styles[`avatar_style-${style}`]] = !!style;\n }\n\n useLayoutEffect(() => {\n const handleOnLoad = () => setLoaded(true);\n const handleOnError = () => setLoaded(false);\n\n const listenOn = imgRef.current;\n if (imgRef.current && image) {\n imgRef.current.addEventListener('load', handleOnLoad);\n imgRef.current.addEventListener('error', handleOnError);\n imgRef.current.src = image;\n }\n\n return () => {\n if (listenOn) {\n listenOn.removeEventListener('load', handleOnLoad);\n listenOn.removeEventListener('error', handleOnError);\n }\n };\n }, [image]);\n\n return (\n <div\n {...(online || isComponentDisabled\n ? {\n className: classnames({\n [styles.avatarContainer]: online,\n [styles.avatarContainerDisabled]: isComponentDisabled,\n [styles[`avatar-container_size-${size}`]]: online,\n }),\n }\n : {})}\n {...(containerDataQa ? { 'data-qa': containerDataQa } : {})}\n >\n <Element\n {...additionalAttributes}\n {...avatarProps}\n className={classnames(classNames)}\n disabled={Element === 'button' ? isComponentDisabled : false}\n aria-label={ariaLabel}\n >\n {isModeLetters && (\n <BaseText style=\"primary\" Element=\"span\" typography={AVATAR_TYPOGRAPHY_MAP[size]}>\n {formatLetters(letters || '')}\n </BaseText>\n )}\n {isModeIcon && icon}\n {isModePlaceholder && (\n <>\n {placeholder === 'female' && <Female role=\"img\" width={size} height={size} />}\n {placeholder === 'male' && <Male role=\"img\" width={size} height={size} />}\n {placeholder === 'city' && <City role=\"img\" width={size} height={size} />}\n {placeholder === 'undefined' && <Undefined role=\"img\" width={size} height={size} />}\n </>\n )}\n {isModeImage && (\n <img\n ref={imgRef}\n alt={ariaLabel}\n className={classnames(styles.avatarImage, { [styles.avatarImageHidden]: !isImageLoaded })}\n />\n )}\n </Element>\n {online && (\n <>\n <div className={styles[`avatar-focus-border-${size}`]} />\n <div className={styles[`avatar-online-badge-${size}`]} />\n </>\n )}\n </div>\n );\n};\n\nconst AvatarComponent: PolymorphicComponentWithRef<AvatarProps, 'div'> = forwardRef(AvatarForwardRefRenderFunc);\n\nexport const Avatar = enrichWithSkeleton(AvatarComponent, AvatarSkeleton);\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../src/Avatar.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport { City, Female, Male, Undefined } from '@hh.ru/magritte-ui-avatar/Placeholder';\nimport { AvatarSkeleton } from '@hh.ru/magritte-ui-avatar/Skeleton';\nimport type { AvatarProps } from '@hh.ru/magritte-ui-avatar/types';\nimport { AVATAR_TYPOGRAPHY_MAP, formatLetters } from '@hh.ru/magritte-ui-avatar/utils';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\nimport { BaseText } from '@hh.ru/magritte-ui-typography/BaseText';\n\nimport styles from './avatar.less';\n\nconst AvatarForwardRefRenderFunc: PolymorphicForwardRefRenderFunc<AvatarProps, 'div'> = (\n {\n mode,\n size,\n 'aria-label': ariaLabel,\n shapeCircle = false,\n online = false,\n styleOnline = 'positive',\n disabled = false,\n letters,\n style,\n icon,\n image,\n fallbackMode,\n placeholder = 'undefined',\n Element = 'div',\n containerDataQa = '',\n ...avatarProps\n },\n ref\n) => {\n const [isImageLoaded, setLoaded] = useState(false);\n const imgRef = useRef<HTMLImageElement>(null);\n\n const forceDisabled = useDisabled();\n\n const isComponentDisabled = disabled || forceDisabled;\n\n const isModeLetters = mode === 'letters' || (mode === 'image' && fallbackMode === 'letters' && !isImageLoaded);\n const isModeIcon = mode === 'icon';\n const isModePlaceholder =\n mode === 'placeholder' || (mode === 'image' && fallbackMode === 'placeholder' && !isImageLoaded);\n const isModeImage = mode === 'image';\n\n const additionalAttributes: Record<string, unknown> = {};\n\n if (Element === 'button') {\n additionalAttributes.type = 'button';\n }\n\n if (isComponentDisabled && Element === 'a') {\n additionalAttributes['aria-disabled'] = true;\n additionalAttributes.tabIndex = -1;\n }\n\n if (ref) {\n additionalAttributes.ref = ref;\n }\n\n const classNames = {\n [styles.avatar]: true,\n [styles.avatarShapeCircle]: shapeCircle,\n [styles.avatarModeImage]: mode === 'image' && isImageLoaded,\n [styles.avatarModeLetters]: isModeLetters,\n [styles.avatarModeIcon]: isModeIcon,\n [styles.avatarModePlaceholder]: isModePlaceholder,\n [styles[`avatar_size-${size}`]]: !!size,\n [styles[`avatar_with-online-badge-${size}`]]: online,\n };\n\n if ((isModeLetters || isModeIcon) && style) {\n classNames[styles[`avatar_style-${style}`]] = !!style;\n }\n\n useLayoutEffect(() => {\n const handleOnLoad = () => setLoaded(true);\n const handleOnError = () => setLoaded(false);\n\n const listenOn = imgRef.current;\n if (imgRef.current && image) {\n imgRef.current.addEventListener('load', handleOnLoad);\n imgRef.current.addEventListener('error', handleOnError);\n imgRef.current.src = image;\n }\n\n return () => {\n if (listenOn) {\n listenOn.removeEventListener('load', handleOnLoad);\n listenOn.removeEventListener('error', handleOnError);\n }\n };\n }, [image]);\n\n return (\n <div\n {...(online || isComponentDisabled\n ? {\n className: classnames({\n [styles.avatarContainer]: online,\n [styles.avatarContainerDisabled]: isComponentDisabled,\n [styles[`avatar-container_size-${size}`]]: online,\n }),\n }\n : {})}\n {...(containerDataQa ? { 'data-qa': containerDataQa } : {})}\n >\n <Element\n {...additionalAttributes}\n {...avatarProps}\n className={classnames(classNames)}\n disabled={Element === 'button' ? isComponentDisabled : false}\n aria-label={ariaLabel}\n >\n {isModeLetters && (\n <BaseText style=\"primary\" Element=\"span\" typography={AVATAR_TYPOGRAPHY_MAP[size]}>\n {formatLetters(letters || '')}\n </BaseText>\n )}\n {isModeIcon && icon}\n {isModePlaceholder && (\n <>\n {placeholder === 'female' && <Female role=\"img\" width={size} height={size} />}\n {placeholder === 'male' && <Male role=\"img\" width={size} height={size} />}\n {placeholder === 'city' && <City role=\"img\" width={size} height={size} />}\n {placeholder === 'undefined' && <Undefined role=\"img\" width={size} height={size} />}\n </>\n )}\n {isModeImage && (\n <img\n ref={imgRef}\n alt={ariaLabel}\n className={classnames(styles.avatarImage, { [styles.avatarImageHidden]: !isImageLoaded })}\n />\n )}\n </Element>\n {online && (\n <>\n <div className={styles[`avatar-focus-border-${size}`]} />\n <div\n className={classnames(\n styles[`avatar-online-badge-${size}`],\n styles[`avatar-online-badge_style_${styleOnline}`]\n )}\n />\n </>\n )}\n </div>\n );\n};\n\nconst AvatarComponent: PolymorphicComponentWithRef<AvatarProps, 'div'> = forwardRef(AvatarForwardRefRenderFunc);\n\nexport const Avatar = enrichWithSkeleton(AvatarComponent, AvatarSkeleton);\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import classnames from 'classnames';
|
|
4
|
+
import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
|
|
5
|
+
|
|
6
|
+
var styles = {"avatar-container":"magritte-avatar-container___jBkeI_5-1-0","avatarContainer":"magritte-avatar-container___jBkeI_5-1-0","avatar-container_disabled":"magritte-avatar-container_disabled___EkG4l_5-1-0","avatarContainerDisabled":"magritte-avatar-container_disabled___EkG4l_5-1-0","avatar":"magritte-avatar___x--BK_5-1-0","avatar-container_size-24":"magritte-avatar-container_size-24___f6DH2_5-1-0","avatarContainerSize24":"magritte-avatar-container_size-24___f6DH2_5-1-0","avatar-skeleton-24":"magritte-avatar-skeleton-24___9hUuj_5-1-0","avatarSkeleton24":"magritte-avatar-skeleton-24___9hUuj_5-1-0","avatar_size-24":"magritte-avatar_size-24___0dAId_5-1-0","avatarSize24":"magritte-avatar_size-24___0dAId_5-1-0","avatar-container_size-40":"magritte-avatar-container_size-40___mVeBD_5-1-0","avatarContainerSize40":"magritte-avatar-container_size-40___mVeBD_5-1-0","avatar-skeleton-40":"magritte-avatar-skeleton-40___ZN6a7_5-1-0","avatarSkeleton40":"magritte-avatar-skeleton-40___ZN6a7_5-1-0","avatar_size-40":"magritte-avatar_size-40___zj3fM_5-1-0","avatarSize40":"magritte-avatar_size-40___zj3fM_5-1-0","avatar-container_size-48":"magritte-avatar-container_size-48___pflud_5-1-0","avatarContainerSize48":"magritte-avatar-container_size-48___pflud_5-1-0","avatar-skeleton-48":"magritte-avatar-skeleton-48___CC-af_5-1-0","avatarSkeleton48":"magritte-avatar-skeleton-48___CC-af_5-1-0","avatar_size-48":"magritte-avatar_size-48___JzITc_5-1-0","avatarSize48":"magritte-avatar_size-48___JzITc_5-1-0","avatar-container_size-96":"magritte-avatar-container_size-96___Up8Hn_5-1-0","avatarContainerSize96":"magritte-avatar-container_size-96___Up8Hn_5-1-0","avatar-skeleton-96":"magritte-avatar-skeleton-96___qYG-Z_5-1-0","avatarSkeleton96":"magritte-avatar-skeleton-96___qYG-Z_5-1-0","avatar_size-96":"magritte-avatar_size-96___5SeO2_5-1-0","avatarSize96":"magritte-avatar_size-96___5SeO2_5-1-0","avatar-container_size-208":"magritte-avatar-container_size-208___k7SkJ_5-1-0","avatarContainerSize208":"magritte-avatar-container_size-208___k7SkJ_5-1-0","avatar-skeleton-208":"magritte-avatar-skeleton-208___ybqJw_5-1-0","avatarSkeleton208":"magritte-avatar-skeleton-208___ybqJw_5-1-0","avatar_size-208":"magritte-avatar_size-208___rzfu3_5-1-0","avatarSize208":"magritte-avatar_size-208___rzfu3_5-1-0","avatar_shape-circle":"magritte-avatar_shape-circle___kEbru_5-1-0","avatarShapeCircle":"magritte-avatar_shape-circle___kEbru_5-1-0","avatar-skeleton-circle":"magritte-avatar-skeleton-circle___rD1E0_5-1-0","avatarSkeletonCircle":"magritte-avatar-skeleton-circle___rD1E0_5-1-0","avatar_style-color-1":"magritte-avatar_style-color-1___xXtkh_5-1-0","avatarStyleColor1":"magritte-avatar_style-color-1___xXtkh_5-1-0","avatar_style-color-2":"magritte-avatar_style-color-2___JraJd_5-1-0","avatarStyleColor2":"magritte-avatar_style-color-2___JraJd_5-1-0","avatar_style-color-3":"magritte-avatar_style-color-3___g29U3_5-1-0","avatarStyleColor3":"magritte-avatar_style-color-3___g29U3_5-1-0","avatar_style-color-4":"magritte-avatar_style-color-4___pHhmj_5-1-0","avatarStyleColor4":"magritte-avatar_style-color-4___pHhmj_5-1-0","avatar_style-color-5":"magritte-avatar_style-color-5___H9Ie3_5-1-0","avatarStyleColor5":"magritte-avatar_style-color-5___H9Ie3_5-1-0","avatar_style-color-6":"magritte-avatar_style-color-6___oODXO_5-1-0","avatarStyleColor6":"magritte-avatar_style-color-6___oODXO_5-1-0","avatar_style-color-7":"magritte-avatar_style-color-7___SfUBl_5-1-0","avatarStyleColor7":"magritte-avatar_style-color-7___SfUBl_5-1-0","avatar_style-color-8":"magritte-avatar_style-color-8___rlI6h_5-1-0","avatarStyleColor8":"magritte-avatar_style-color-8___rlI6h_5-1-0","avatar_style-color-9":"magritte-avatar_style-color-9___XQO4B_5-1-0","avatarStyleColor9":"magritte-avatar_style-color-9___XQO4B_5-1-0","avatar_style-primary":"magritte-avatar_style-primary___SvqU1_5-1-0","avatarStylePrimary":"magritte-avatar_style-primary___SvqU1_5-1-0","avatar_style-secondary":"magritte-avatar_style-secondary___C6MTH_5-1-0","avatarStyleSecondary":"magritte-avatar_style-secondary___C6MTH_5-1-0","avatar_style-tertiary":"magritte-avatar_style-tertiary___3o-90_5-1-0","avatarStyleTertiary":"magritte-avatar_style-tertiary___3o-90_5-1-0","avatar_style-accent":"magritte-avatar_style-accent___LgPSo_5-1-0","avatarStyleAccent":"magritte-avatar_style-accent___LgPSo_5-1-0","avatar_style-positive":"magritte-avatar_style-positive___bDzbE_5-1-0","avatarStylePositive":"magritte-avatar_style-positive___bDzbE_5-1-0","avatar_style-negative":"magritte-avatar_style-negative___xHHQb_5-1-0","avatarStyleNegative":"magritte-avatar_style-negative___xHHQb_5-1-0","avatar_style-warning":"magritte-avatar_style-warning___7kKRS_5-1-0","avatarStyleWarning":"magritte-avatar_style-warning___7kKRS_5-1-0","avatar_style-special":"magritte-avatar_style-special___gLmS0_5-1-0","avatarStyleSpecial":"magritte-avatar_style-special___gLmS0_5-1-0","avatar_style-contrast":"magritte-avatar_style-contrast___zHyp-_5-1-0","avatarStyleContrast":"magritte-avatar_style-contrast___zHyp-_5-1-0","avatar_mode-image":"magritte-avatar_mode-image___02zr1_5-1-0","avatarModeImage":"magritte-avatar_mode-image___02zr1_5-1-0","avatar_mode-letters":"magritte-avatar_mode-letters___ot4qB_5-1-0","avatarModeLetters":"magritte-avatar_mode-letters___ot4qB_5-1-0","avatar_mode-icon":"magritte-avatar_mode-icon___MYrlv_5-1-0","avatarModeIcon":"magritte-avatar_mode-icon___MYrlv_5-1-0","avatar_mode-placeholder":"magritte-avatar_mode-placeholder___6hOu7_5-1-0","avatarModePlaceholder":"magritte-avatar_mode-placeholder___6hOu7_5-1-0","avatar-image":"magritte-avatar-image___05p9Z_5-1-0","avatarImage":"magritte-avatar-image___05p9Z_5-1-0","avatar-image_hidden":"magritte-avatar-image_hidden___DPQBK_5-1-0","avatarImageHidden":"magritte-avatar-image_hidden___DPQBK_5-1-0","avatar_with-online-badge-24":"magritte-avatar_with-online-badge-24___helkM_5-1-0","avatarWithOnlineBadge24":"magritte-avatar_with-online-badge-24___helkM_5-1-0","avatar-online-badge-24":"magritte-avatar-online-badge-24___mjPKB_5-1-0","avatarOnlineBadge24":"magritte-avatar-online-badge-24___mjPKB_5-1-0","avatar-online-badge_style_positive":"magritte-avatar-online-badge_style_positive___jHyv3_5-1-0","avatarOnlineBadgeStylePositive":"magritte-avatar-online-badge_style_positive___jHyv3_5-1-0","avatar-online-badge_style_contrast":"magritte-avatar-online-badge_style_contrast___GZFCO_5-1-0","avatarOnlineBadgeStyleContrast":"magritte-avatar-online-badge_style_contrast___GZFCO_5-1-0","avatar-focus-border-24":"magritte-avatar-focus-border-24___wnJnb_5-1-0","avatarFocusBorder24":"magritte-avatar-focus-border-24___wnJnb_5-1-0","avatar_with-online-badge-40":"magritte-avatar_with-online-badge-40___Tckho_5-1-0","avatarWithOnlineBadge40":"magritte-avatar_with-online-badge-40___Tckho_5-1-0","avatar-online-badge-40":"magritte-avatar-online-badge-40___HRNTS_5-1-0","avatarOnlineBadge40":"magritte-avatar-online-badge-40___HRNTS_5-1-0","avatar-focus-border-40":"magritte-avatar-focus-border-40___Qn9NL_5-1-0","avatarFocusBorder40":"magritte-avatar-focus-border-40___Qn9NL_5-1-0","avatar_with-online-badge-48":"magritte-avatar_with-online-badge-48___BmWaC_5-1-0","avatarWithOnlineBadge48":"magritte-avatar_with-online-badge-48___BmWaC_5-1-0","avatar-online-badge-48":"magritte-avatar-online-badge-48___qPmD8_5-1-0","avatarOnlineBadge48":"magritte-avatar-online-badge-48___qPmD8_5-1-0","avatar-focus-border-48":"magritte-avatar-focus-border-48___Bc-lN_5-1-0","avatarFocusBorder48":"magritte-avatar-focus-border-48___Bc-lN_5-1-0","avatar_with-online-badge-96":"magritte-avatar_with-online-badge-96___r4E42_5-1-0","avatarWithOnlineBadge96":"magritte-avatar_with-online-badge-96___r4E42_5-1-0","avatar-online-badge-96":"magritte-avatar-online-badge-96___d6bm-_5-1-0","avatarOnlineBadge96":"magritte-avatar-online-badge-96___d6bm-_5-1-0","avatar-focus-border-96":"magritte-avatar-focus-border-96___TVpd0_5-1-0","avatarFocusBorder96":"magritte-avatar-focus-border-96___TVpd0_5-1-0","avatar_with-online-badge-208":"magritte-avatar_with-online-badge-208___AS6Lk_5-1-0","avatarWithOnlineBadge208":"magritte-avatar_with-online-badge-208___AS6Lk_5-1-0","avatar-online-badge-208":"magritte-avatar-online-badge-208___m4hXQ_5-1-0","avatarOnlineBadge208":"magritte-avatar-online-badge-208___m4hXQ_5-1-0","avatar-focus-border-208":"magritte-avatar-focus-border-208___V6We2_5-1-0","avatarFocusBorder208":"magritte-avatar-focus-border-208___V6We2_5-1-0"};
|
|
7
|
+
|
|
8
|
+
const AvatarSkeleton = ({ Component: Avatar,
|
|
9
|
+
// skeleton props
|
|
10
|
+
width, height, borderRadius, inline, additionalClass, loading, ...avatarProps }) => {
|
|
11
|
+
return (jsx(Skeleton, { loading: loading, additionalClass: classnames({
|
|
12
|
+
[styles[`avatar-skeleton-${avatarProps.size}`]]: avatarProps.size,
|
|
13
|
+
[styles.avatarSkeletonCircle]: avatarProps.shapeCircle,
|
|
14
|
+
}), children: jsx(Avatar, { ...avatarProps }) }));
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export { AvatarSkeleton as A, styles as s };
|
|
18
|
+
//# sourceMappingURL=Skeleton-CJIkCUza.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton-
|
|
1
|
+
{"version":3,"file":"Skeleton-CJIkCUza.js","sources":["../src/Skeleton.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { AvatarProps } from '@hh.ru/magritte-ui-avatar/types';\nimport { IncompleteSkeletonComponent, Skeleton } from '@hh.ru/magritte-ui-skeleton';\n\nimport styles from './avatar.less';\n\nexport const AvatarSkeleton: IncompleteSkeletonComponent<AvatarProps> = ({\n Component: Avatar,\n\n // skeleton props\n width,\n height,\n borderRadius,\n inline,\n additionalClass,\n loading,\n\n ...avatarProps\n}) => {\n return (\n <Skeleton\n loading={loading}\n additionalClass={classnames({\n [styles[`avatar-skeleton-${avatarProps.size}`]]: avatarProps.size,\n [styles.avatarSkeletonCircle]: avatarProps.shapeCircle,\n })}\n >\n <Avatar {...avatarProps} />\n </Skeleton>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAOa,cAAc,GAA6C,CAAC,EACrE,SAAS,EAAE,MAAM;AAEjB;AACA,KAAK,EACL,MAAM,EACN,YAAY,EACZ,MAAM,EACN,eAAe,EACf,OAAO,EAEP,GAAG,WAAW,EACjB,KAAI;IACD,QACIA,GAAC,CAAA,QAAQ,EACL,EAAA,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,UAAU,CAAC;AACxB,YAAA,CAAC,MAAM,CAAC,CAAmB,gBAAA,EAAA,WAAW,CAAC,IAAI,CAAE,CAAA,CAAC,GAAG,WAAW,CAAC,IAAI;AACjE,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,WAAW,CAAC,WAAW;SACzD,CAAC,EAAA,QAAA,EAEFA,IAAC,MAAM,EAAA,EAAA,GAAK,WAAW,EAAI,CAAA,EAAA,CACpB,EACb;AACN;;;;"}
|
package/Skeleton.js
CHANGED
|
@@ -2,5 +2,5 @@ import './index.css';
|
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'classnames';
|
|
4
4
|
import '@hh.ru/magritte-ui-skeleton';
|
|
5
|
-
export { A as AvatarSkeleton } from './Skeleton-
|
|
5
|
+
export { A as AvatarSkeleton } from './Skeleton-CJIkCUza.js';
|
|
6
6
|
//# sourceMappingURL=Skeleton.js.map
|
package/index.css
CHANGED
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
--magritte-color-background-warning-secondary-v20-1-0:#FFF3E6;
|
|
9
9
|
--magritte-color-background-special-secondary-v20-1-0:#F7F4FF;
|
|
10
10
|
--magritte-color-background-constant-v20-1-0:#000000;
|
|
11
|
-
--magritte-color-component-avatar-online-
|
|
11
|
+
--magritte-color-component-avatar-online-positive-v20-1-0:#0ea658;
|
|
12
|
+
--magritte-color-component-avatar-online-contrast-v20-1-0:#ffffff;
|
|
12
13
|
--magritte-color-component-avatar-background-color-01-v20-1-0:#96aabb;
|
|
13
14
|
--magritte-color-component-avatar-background-color-02-v20-1-0:#ff859f;
|
|
14
15
|
--magritte-color-component-avatar-background-color-03-v20-1-0:#ff8a77;
|
|
@@ -318,7 +319,8 @@
|
|
|
318
319
|
--magritte-color-background-warning-secondary-v20-1-0:#3D270E;
|
|
319
320
|
--magritte-color-background-special-secondary-v20-1-0:#2F293C;
|
|
320
321
|
--magritte-color-background-constant-v20-1-0:#000000;
|
|
321
|
-
--magritte-color-component-avatar-online-
|
|
322
|
+
--magritte-color-component-avatar-online-positive-v20-1-0:#0ea658;
|
|
323
|
+
--magritte-color-component-avatar-online-contrast-v20-1-0:#ffffff;
|
|
322
324
|
--magritte-color-component-avatar-background-color-01-v20-1-0:#96aabb;
|
|
323
325
|
--magritte-color-component-avatar-background-color-02-v20-1-0:#ff859f;
|
|
324
326
|
--magritte-color-component-avatar-background-color-03-v20-1-0:#ff8a77;
|
|
@@ -601,14 +603,14 @@
|
|
|
601
603
|
--magritte-typography-_custom-5-italic-text-transform-v20-1-0:none;
|
|
602
604
|
--magritte-typography-_custom-5-italic-text-decoration-v20-1-0:none;
|
|
603
605
|
}
|
|
604
|
-
.magritte-avatar-container___jBkeI_5-0
|
|
606
|
+
.magritte-avatar-container___jBkeI_5-1-0{
|
|
605
607
|
position:relative;
|
|
606
608
|
}
|
|
607
|
-
.magritte-avatar-container_disabled___EkG4l_5-0
|
|
609
|
+
.magritte-avatar-container_disabled___EkG4l_5-1-0{
|
|
608
610
|
pointer-events:none;
|
|
609
611
|
opacity:var(--magritte-semantic-opacity-disabled-v20-1-0);
|
|
610
612
|
}
|
|
611
|
-
.magritte-avatar___x--BK_5-0
|
|
613
|
+
.magritte-avatar___x--BK_5-1-0{
|
|
612
614
|
display:flex;
|
|
613
615
|
align-items:center;
|
|
614
616
|
justify-content:center;
|
|
@@ -624,21 +626,21 @@
|
|
|
624
626
|
--magritte-ui-avatar-placeholder-city:var(--magritte-color-base-white-v20-1-0);
|
|
625
627
|
--magritte-ui-avatar-placeholder-shadow-city:var(--magritte-color-base-graphite-90-v20-1-0);
|
|
626
628
|
}
|
|
627
|
-
.magritte-avatar___x--BK_5-0
|
|
629
|
+
.magritte-avatar___x--BK_5-1-0:not(div){
|
|
628
630
|
cursor:pointer;
|
|
629
631
|
}
|
|
630
|
-
.magritte-avatar___x--BK_5-0
|
|
632
|
+
.magritte-avatar___x--BK_5-1-0:focus{
|
|
631
633
|
outline:none;
|
|
632
634
|
}
|
|
633
|
-
.magritte-avatar___x--BK_5-0
|
|
635
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible{
|
|
634
636
|
outline:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
635
637
|
}
|
|
636
|
-
.magritte-avatar___x--BK_5-0
|
|
638
|
+
.magritte-avatar___x--BK_5-1-0:not(div):active{
|
|
637
639
|
transform:scale(var(--magritte-semantic-scale-pressed-v20-1-0));
|
|
638
640
|
transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v20-1-0);
|
|
639
641
|
transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v20-1-0);
|
|
640
642
|
}
|
|
641
|
-
.magritte-avatar___x--BK_5-0
|
|
643
|
+
.magritte-avatar___x--BK_5-1-0::after{
|
|
642
644
|
content:'';
|
|
643
645
|
top:0;
|
|
644
646
|
left:0;
|
|
@@ -646,7 +648,7 @@
|
|
|
646
648
|
width:100%;
|
|
647
649
|
height:100%;
|
|
648
650
|
}
|
|
649
|
-
.magritte-night-theme .magritte-avatar___x--BK_5-0
|
|
651
|
+
.magritte-night-theme .magritte-avatar___x--BK_5-1-0{
|
|
650
652
|
--magritte-ui-avatar-placeholder-background:var(--magritte-color-base-gray-10-v20-1-0);
|
|
651
653
|
--magritte-ui-avatar-placeholder-body:var(--magritte-color-base-gray-50-v20-1-0);
|
|
652
654
|
--magritte-ui-avatar-placeholder-clothes:var(--magritte-color-base-gray-40-v20-1-0);
|
|
@@ -656,177 +658,181 @@
|
|
|
656
658
|
--magritte-ui-avatar-placeholder-city:var(--magritte-color-base-gray-50-v20-1-0);
|
|
657
659
|
--magritte-ui-avatar-placeholder-shadow-city:var(--magritte-color-base-gray-30-v20-1-0);
|
|
658
660
|
}
|
|
659
|
-
.magritte-avatar-container_size-24___f6DH2_5-0
|
|
660
|
-
.magritte-avatar-skeleton-24___9hUuj_5-0
|
|
661
|
-
.magritte-avatar_size-24___0dAId_5-0
|
|
661
|
+
.magritte-avatar-container_size-24___f6DH2_5-1-0,
|
|
662
|
+
.magritte-avatar-skeleton-24___9hUuj_5-1-0,
|
|
663
|
+
.magritte-avatar_size-24___0dAId_5-1-0{
|
|
662
664
|
width:24px;
|
|
663
665
|
height:24px;
|
|
664
666
|
border-radius:var(--magritte-static-border-radius-200-v20-1-0);
|
|
665
667
|
}
|
|
666
|
-
.magritte-avatar-container_size-24___f6DH2_5-0
|
|
667
|
-
.magritte-avatar-skeleton-24___9hUuj_5-0
|
|
668
|
-
.magritte-avatar_size-24___0dAId_5-0
|
|
668
|
+
.magritte-avatar-container_size-24___f6DH2_5-1-0:after,
|
|
669
|
+
.magritte-avatar-skeleton-24___9hUuj_5-1-0:after,
|
|
670
|
+
.magritte-avatar_size-24___0dAId_5-1-0:after{
|
|
669
671
|
border-radius:var(--magritte-static-border-radius-200-v20-1-0);
|
|
670
672
|
}
|
|
671
|
-
.magritte-avatar-container_size-40___mVeBD_5-0
|
|
672
|
-
.magritte-avatar-skeleton-40___ZN6a7_5-0
|
|
673
|
-
.magritte-avatar_size-40___zj3fM_5-0
|
|
673
|
+
.magritte-avatar-container_size-40___mVeBD_5-1-0,
|
|
674
|
+
.magritte-avatar-skeleton-40___ZN6a7_5-1-0,
|
|
675
|
+
.magritte-avatar_size-40___zj3fM_5-1-0{
|
|
674
676
|
width:40px;
|
|
675
677
|
height:40px;
|
|
676
678
|
border-radius:var(--magritte-static-border-radius-300-v20-1-0);
|
|
677
679
|
}
|
|
678
|
-
.magritte-avatar-container_size-40___mVeBD_5-0
|
|
679
|
-
.magritte-avatar-skeleton-40___ZN6a7_5-0
|
|
680
|
-
.magritte-avatar_size-40___zj3fM_5-0
|
|
680
|
+
.magritte-avatar-container_size-40___mVeBD_5-1-0:after,
|
|
681
|
+
.magritte-avatar-skeleton-40___ZN6a7_5-1-0:after,
|
|
682
|
+
.magritte-avatar_size-40___zj3fM_5-1-0:after{
|
|
681
683
|
border-radius:var(--magritte-static-border-radius-300-v20-1-0);
|
|
682
684
|
}
|
|
683
|
-
.magritte-avatar-container_size-48___pflud_5-0
|
|
684
|
-
.magritte-avatar-skeleton-48___CC-af_5-0
|
|
685
|
-
.magritte-avatar_size-48___JzITc_5-0
|
|
685
|
+
.magritte-avatar-container_size-48___pflud_5-1-0,
|
|
686
|
+
.magritte-avatar-skeleton-48___CC-af_5-1-0,
|
|
687
|
+
.magritte-avatar_size-48___JzITc_5-1-0{
|
|
686
688
|
width:48px;
|
|
687
689
|
height:48px;
|
|
688
690
|
border-radius:var(--magritte-static-border-radius-300-v20-1-0);
|
|
689
691
|
}
|
|
690
|
-
.magritte-avatar-container_size-48___pflud_5-0
|
|
691
|
-
.magritte-avatar-skeleton-48___CC-af_5-0
|
|
692
|
-
.magritte-avatar_size-48___JzITc_5-0
|
|
692
|
+
.magritte-avatar-container_size-48___pflud_5-1-0:after,
|
|
693
|
+
.magritte-avatar-skeleton-48___CC-af_5-1-0:after,
|
|
694
|
+
.magritte-avatar_size-48___JzITc_5-1-0:after{
|
|
693
695
|
border-radius:var(--magritte-static-border-radius-300-v20-1-0);
|
|
694
696
|
}
|
|
695
|
-
.magritte-avatar-container_size-96___Up8Hn_5-0
|
|
696
|
-
.magritte-avatar-skeleton-96___qYG-Z_5-0
|
|
697
|
-
.magritte-avatar_size-96___5SeO2_5-0
|
|
697
|
+
.magritte-avatar-container_size-96___Up8Hn_5-1-0,
|
|
698
|
+
.magritte-avatar-skeleton-96___qYG-Z_5-1-0,
|
|
699
|
+
.magritte-avatar_size-96___5SeO2_5-1-0{
|
|
698
700
|
width:96px;
|
|
699
701
|
height:96px;
|
|
700
702
|
border-radius:var(--magritte-static-border-radius-600-v20-1-0);
|
|
701
703
|
}
|
|
702
|
-
.magritte-avatar-container_size-96___Up8Hn_5-0
|
|
703
|
-
.magritte-avatar-skeleton-96___qYG-Z_5-0
|
|
704
|
-
.magritte-avatar_size-96___5SeO2_5-0
|
|
704
|
+
.magritte-avatar-container_size-96___Up8Hn_5-1-0:after,
|
|
705
|
+
.magritte-avatar-skeleton-96___qYG-Z_5-1-0:after,
|
|
706
|
+
.magritte-avatar_size-96___5SeO2_5-1-0:after{
|
|
705
707
|
border-radius:var(--magritte-static-border-radius-600-v20-1-0);
|
|
706
708
|
}
|
|
707
|
-
.magritte-avatar-container_size-208___k7SkJ_5-0
|
|
708
|
-
.magritte-avatar-skeleton-208___ybqJw_5-0
|
|
709
|
-
.magritte-avatar_size-208___rzfu3_5-0
|
|
709
|
+
.magritte-avatar-container_size-208___k7SkJ_5-1-0,
|
|
710
|
+
.magritte-avatar-skeleton-208___ybqJw_5-1-0,
|
|
711
|
+
.magritte-avatar_size-208___rzfu3_5-1-0{
|
|
710
712
|
width:208px;
|
|
711
713
|
height:208px;
|
|
712
714
|
border-radius:var(--magritte-static-border-radius-200-v20-1-0);
|
|
713
715
|
}
|
|
714
|
-
.magritte-avatar-container_size-208___k7SkJ_5-0
|
|
715
|
-
.magritte-avatar-skeleton-208___ybqJw_5-0
|
|
716
|
-
.magritte-avatar_size-208___rzfu3_5-0
|
|
716
|
+
.magritte-avatar-container_size-208___k7SkJ_5-1-0:after,
|
|
717
|
+
.magritte-avatar-skeleton-208___ybqJw_5-1-0:after,
|
|
718
|
+
.magritte-avatar_size-208___rzfu3_5-1-0:after{
|
|
717
719
|
border-radius:var(--magritte-static-border-radius-200-v20-1-0);
|
|
718
720
|
}
|
|
719
|
-
.magritte-avatar_shape-circle___kEbru_5-0
|
|
720
|
-
.magritte-avatar-skeleton-circle___rD1E0_5-0
|
|
721
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0,
|
|
722
|
+
.magritte-avatar-skeleton-circle___rD1E0_5-1-0{
|
|
721
723
|
border-radius:50%;
|
|
722
724
|
}
|
|
723
|
-
.magritte-avatar_shape-circle___kEbru_5-0
|
|
724
|
-
.magritte-avatar-skeleton-circle___rD1E0_5-0
|
|
725
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0::after,
|
|
726
|
+
.magritte-avatar-skeleton-circle___rD1E0_5-1-0::after{
|
|
725
727
|
border-radius:50%;
|
|
726
728
|
}
|
|
727
|
-
.magritte-avatar_style-color-1___xXtkh_5-0
|
|
729
|
+
.magritte-avatar_style-color-1___xXtkh_5-1-0{
|
|
728
730
|
background-color:var(--magritte-color-component-avatar-background-color-01-v20-1-0);
|
|
729
731
|
}
|
|
730
|
-
.magritte-avatar_style-color-2___JraJd_5-0
|
|
732
|
+
.magritte-avatar_style-color-2___JraJd_5-1-0{
|
|
731
733
|
background-color:var(--magritte-color-component-avatar-background-color-02-v20-1-0);
|
|
732
734
|
}
|
|
733
|
-
.magritte-avatar_style-color-3___g29U3_5-0
|
|
735
|
+
.magritte-avatar_style-color-3___g29U3_5-1-0{
|
|
734
736
|
background-color:var(--magritte-color-component-avatar-background-color-03-v20-1-0);
|
|
735
737
|
}
|
|
736
|
-
.magritte-avatar_style-color-4___pHhmj_5-0
|
|
738
|
+
.magritte-avatar_style-color-4___pHhmj_5-1-0{
|
|
737
739
|
background-color:var(--magritte-color-component-avatar-background-color-04-v20-1-0);
|
|
738
740
|
}
|
|
739
|
-
.magritte-avatar_style-color-5___H9Ie3_5-0
|
|
741
|
+
.magritte-avatar_style-color-5___H9Ie3_5-1-0{
|
|
740
742
|
background-color:var(--magritte-color-component-avatar-background-color-05-v20-1-0);
|
|
741
743
|
}
|
|
742
|
-
.magritte-avatar_style-color-6___oODXO_5-0
|
|
744
|
+
.magritte-avatar_style-color-6___oODXO_5-1-0{
|
|
743
745
|
background-color:var(--magritte-color-component-avatar-background-color-06-v20-1-0);
|
|
744
746
|
}
|
|
745
|
-
.magritte-avatar_style-color-7___SfUBl_5-0
|
|
747
|
+
.magritte-avatar_style-color-7___SfUBl_5-1-0{
|
|
746
748
|
background-color:var(--magritte-color-component-avatar-background-color-07-v20-1-0);
|
|
747
749
|
}
|
|
748
|
-
.magritte-avatar_style-color-8___rlI6h_5-0
|
|
750
|
+
.magritte-avatar_style-color-8___rlI6h_5-1-0{
|
|
749
751
|
background-color:var(--magritte-color-component-avatar-background-color-08-v20-1-0);
|
|
750
752
|
}
|
|
751
|
-
.magritte-avatar_style-color-9___XQO4B_5-0
|
|
753
|
+
.magritte-avatar_style-color-9___XQO4B_5-1-0{
|
|
752
754
|
background-color:var(--magritte-color-component-avatar-background-color-09-v20-1-0);
|
|
753
755
|
}
|
|
754
|
-
.magritte-avatar_style-primary___SvqU1_5-0
|
|
756
|
+
.magritte-avatar_style-primary___SvqU1_5-1-0{
|
|
755
757
|
background-color:var(--magritte-color-background-primary-v20-1-0);
|
|
756
758
|
}
|
|
757
|
-
.magritte-avatar_style-secondary___C6MTH_5-0
|
|
759
|
+
.magritte-avatar_style-secondary___C6MTH_5-1-0{
|
|
758
760
|
background-color:var(--magritte-color-background-secondary-v20-1-0);
|
|
759
761
|
}
|
|
760
|
-
.magritte-avatar_style-tertiary___3o-90_5-0
|
|
762
|
+
.magritte-avatar_style-tertiary___3o-90_5-1-0{
|
|
761
763
|
background-color:var(--magritte-color-background-tertiary-v20-1-0);
|
|
762
764
|
}
|
|
763
|
-
.magritte-avatar_style-accent___LgPSo_5-0
|
|
765
|
+
.magritte-avatar_style-accent___LgPSo_5-1-0{
|
|
764
766
|
background-color:var(--magritte-color-background-accent-secondary-v20-1-0);
|
|
765
767
|
}
|
|
766
|
-
.magritte-avatar_style-positive___bDzbE_5-0
|
|
768
|
+
.magritte-avatar_style-positive___bDzbE_5-1-0{
|
|
767
769
|
background-color:var(--magritte-color-background-positive-secondary-v20-1-0);
|
|
768
770
|
}
|
|
769
|
-
.magritte-avatar_style-negative___xHHQb_5-0
|
|
771
|
+
.magritte-avatar_style-negative___xHHQb_5-1-0{
|
|
770
772
|
background-color:var(--magritte-color-background-negative-secondary-v20-1-0);
|
|
771
773
|
}
|
|
772
|
-
.magritte-avatar_style-warning___7kKRS_5-0
|
|
774
|
+
.magritte-avatar_style-warning___7kKRS_5-1-0{
|
|
773
775
|
background-color:var(--magritte-color-background-warning-secondary-v20-1-0);
|
|
774
776
|
}
|
|
775
|
-
.magritte-avatar_style-special___gLmS0_5-0
|
|
777
|
+
.magritte-avatar_style-special___gLmS0_5-1-0{
|
|
776
778
|
background-color:var(--magritte-color-background-special-secondary-v20-1-0);
|
|
777
779
|
}
|
|
778
|
-
.magritte-avatar_style-contrast___zHyp-_5-0
|
|
780
|
+
.magritte-avatar_style-contrast___zHyp-_5-1-0{
|
|
779
781
|
background-color:var(--magritte-color-background-constant-v20-1-0);
|
|
780
782
|
}
|
|
781
|
-
.magritte-avatar_mode-image___02zr1_5-0
|
|
783
|
+
.magritte-avatar_mode-image___02zr1_5-1-0::after{
|
|
782
784
|
box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v20-1-0) var(--magritte-color-component-avatar-stroke-image-v20-1-0);
|
|
783
785
|
}
|
|
784
|
-
.magritte-avatar_mode-letters___ot4qB_5-0
|
|
786
|
+
.magritte-avatar_mode-letters___ot4qB_5-1-0::after{
|
|
785
787
|
box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v20-1-0) var(--magritte-color-component-avatar-stroke-letters-v20-1-0);
|
|
786
788
|
}
|
|
787
|
-
.magritte-avatar_mode-icon___MYrlv_5-0
|
|
789
|
+
.magritte-avatar_mode-icon___MYrlv_5-1-0::after{
|
|
788
790
|
box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v20-1-0) var(--magritte-color-component-avatar-stroke-icon-v20-1-0);
|
|
789
791
|
}
|
|
790
|
-
.magritte-avatar_mode-placeholder___6hOu7_5-0
|
|
792
|
+
.magritte-avatar_mode-placeholder___6hOu7_5-1-0::after{
|
|
791
793
|
box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v20-1-0) var(--magritte-color-component-avatar-stroke-placeholder-v20-1-0);
|
|
792
794
|
}
|
|
793
|
-
.magritte-avatar-image___05p9Z_5-0
|
|
795
|
+
.magritte-avatar-image___05p9Z_5-1-0{
|
|
794
796
|
object-fit:cover;
|
|
795
797
|
width:100%;
|
|
796
798
|
height:100%;
|
|
797
799
|
}
|
|
798
|
-
.magritte-avatar-image_hidden___DPQBK_5-0
|
|
800
|
+
.magritte-avatar-image_hidden___DPQBK_5-1-0{
|
|
799
801
|
display:none;
|
|
800
802
|
}
|
|
801
|
-
.magritte-avatar_with-online-badge-24___helkM_5-0
|
|
803
|
+
.magritte-avatar_with-online-badge-24___helkM_5-1-0{
|
|
802
804
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(6px / 2)) calc(100% - calc(6px / 2)), transparent calc(6px / 2 + 1px), #000 0);
|
|
803
805
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
804
806
|
mask-image:var(--transparent-area-mask);
|
|
805
807
|
}
|
|
806
|
-
.magritte-avatar_shape-circle___kEbru_5-0
|
|
808
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0.magritte-avatar_with-online-badge-24___helkM_5-1-0{
|
|
807
809
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(6px / 2) + 0px)) calc(100% - calc(calc(6px / 2) + 0px)), transparent calc(6px / 2 + 1px), #000 0);
|
|
808
810
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
809
811
|
mask-image:var(--transparent-area-mask);
|
|
810
812
|
}
|
|
811
|
-
.magritte-avatar-online-badge-24___mjPKB_5-0
|
|
813
|
+
.magritte-avatar-online-badge-24___mjPKB_5-1-0{
|
|
812
814
|
position:absolute;
|
|
813
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
814
815
|
border-radius:50%;
|
|
815
816
|
width:6px;
|
|
816
817
|
height:6px;
|
|
817
818
|
right:0px;
|
|
818
819
|
bottom:0px;
|
|
819
820
|
}
|
|
820
|
-
.magritte-
|
|
821
|
+
.magritte-avatar-online-badge_style_positive___jHyv3_5-1-0{
|
|
822
|
+
background-color:var(--magritte-color-component-avatar-online-positive-v20-1-0);
|
|
823
|
+
}
|
|
824
|
+
.magritte-avatar-online-badge_style_contrast___GZFCO_5-1-0{
|
|
825
|
+
background-color:var(--magritte-color-component-avatar-online-contrast-v20-1-0);
|
|
826
|
+
}
|
|
827
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0 ~ .magritte-avatar-online-badge-24___mjPKB_5-1-0{
|
|
821
828
|
position:absolute;
|
|
822
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
823
829
|
border-radius:50%;
|
|
824
830
|
width:6px;
|
|
825
831
|
height:6px;
|
|
826
832
|
right:0px;
|
|
827
833
|
bottom:0px;
|
|
828
834
|
}
|
|
829
|
-
.magritte-avatar___x--BK_5-0
|
|
835
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible + .magritte-avatar-focus-border-24___wnJnb_5-1-0{
|
|
830
836
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(6px / 2) + 4px)) calc(100% - calc(calc(6px / 2) + 4px)), transparent calc(6px / 2 + 1px), #000 0);
|
|
831
837
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
832
838
|
mask-image:var(--transparent-area-mask);
|
|
@@ -838,7 +844,7 @@
|
|
|
838
844
|
border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
839
845
|
border-radius:calc(var(--magritte-static-border-radius-200-v20-1-0) + 4px);
|
|
840
846
|
}
|
|
841
|
-
.magritte-avatar___x--BK_5-0
|
|
847
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible.magritte-avatar_shape-circle___kEbru_5-1-0 + .magritte-avatar-focus-border-24___wnJnb_5-1-0{
|
|
842
848
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(6px / 2) + 0px) + 4px)) calc(100% - calc(calc(calc(6px / 2) + 0px) + 4px)), transparent calc(6px / 2 + 1px), #000 0);
|
|
843
849
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
844
850
|
mask-image:var(--transparent-area-mask);
|
|
@@ -850,35 +856,39 @@
|
|
|
850
856
|
border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
851
857
|
border-radius:50%;
|
|
852
858
|
}
|
|
853
|
-
.magritte-avatar_with-online-badge-40___Tckho_5-0
|
|
859
|
+
.magritte-avatar_with-online-badge-40___Tckho_5-1-0{
|
|
854
860
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(8px / 2)) calc(100% - calc(8px / 2)), transparent calc(8px / 2 + 2px), #000 0);
|
|
855
861
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
856
862
|
mask-image:var(--transparent-area-mask);
|
|
857
863
|
}
|
|
858
|
-
.magritte-avatar_shape-circle___kEbru_5-0
|
|
864
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0.magritte-avatar_with-online-badge-40___Tckho_5-1-0{
|
|
859
865
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(8px / 2) + 2px)) calc(100% - calc(calc(8px / 2) + 2px)), transparent calc(8px / 2 + 2px), #000 0);
|
|
860
866
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
861
867
|
mask-image:var(--transparent-area-mask);
|
|
862
868
|
}
|
|
863
|
-
.magritte-avatar-online-badge-40___HRNTS_5-0
|
|
869
|
+
.magritte-avatar-online-badge-40___HRNTS_5-1-0{
|
|
864
870
|
position:absolute;
|
|
865
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
866
871
|
border-radius:50%;
|
|
867
872
|
width:8px;
|
|
868
873
|
height:8px;
|
|
869
874
|
right:0px;
|
|
870
875
|
bottom:0px;
|
|
871
876
|
}
|
|
872
|
-
.magritte-
|
|
877
|
+
.magritte-avatar-online-badge_style_positive___jHyv3_5-1-0{
|
|
878
|
+
background-color:var(--magritte-color-component-avatar-online-positive-v20-1-0);
|
|
879
|
+
}
|
|
880
|
+
.magritte-avatar-online-badge_style_contrast___GZFCO_5-1-0{
|
|
881
|
+
background-color:var(--magritte-color-component-avatar-online-contrast-v20-1-0);
|
|
882
|
+
}
|
|
883
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0 ~ .magritte-avatar-online-badge-40___HRNTS_5-1-0{
|
|
873
884
|
position:absolute;
|
|
874
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
875
885
|
border-radius:50%;
|
|
876
886
|
width:8px;
|
|
877
887
|
height:8px;
|
|
878
888
|
right:2px;
|
|
879
889
|
bottom:2px;
|
|
880
890
|
}
|
|
881
|
-
.magritte-avatar___x--BK_5-0
|
|
891
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible + .magritte-avatar-focus-border-40___Qn9NL_5-1-0{
|
|
882
892
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(8px / 2) + 4px)) calc(100% - calc(calc(8px / 2) + 4px)), transparent calc(8px / 2 + 2px), #000 0);
|
|
883
893
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
884
894
|
mask-image:var(--transparent-area-mask);
|
|
@@ -890,7 +900,7 @@
|
|
|
890
900
|
border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
891
901
|
border-radius:calc(var(--magritte-static-border-radius-300-v20-1-0) + 4px);
|
|
892
902
|
}
|
|
893
|
-
.magritte-avatar___x--BK_5-0
|
|
903
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible.magritte-avatar_shape-circle___kEbru_5-1-0 + .magritte-avatar-focus-border-40___Qn9NL_5-1-0{
|
|
894
904
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(8px / 2) + 2px) + 4px)) calc(100% - calc(calc(calc(8px / 2) + 2px) + 4px)), transparent calc(8px / 2 + 2px), #000 0);
|
|
895
905
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
896
906
|
mask-image:var(--transparent-area-mask);
|
|
@@ -902,35 +912,39 @@
|
|
|
902
912
|
border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
903
913
|
border-radius:50%;
|
|
904
914
|
}
|
|
905
|
-
.magritte-avatar_with-online-badge-48___BmWaC_5-0
|
|
915
|
+
.magritte-avatar_with-online-badge-48___BmWaC_5-1-0{
|
|
906
916
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(8px / 2)) calc(100% - calc(8px / 2)), transparent calc(8px / 2 + 2px), #000 0);
|
|
907
917
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
908
918
|
mask-image:var(--transparent-area-mask);
|
|
909
919
|
}
|
|
910
|
-
.magritte-avatar_shape-circle___kEbru_5-0
|
|
920
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0.magritte-avatar_with-online-badge-48___BmWaC_5-1-0{
|
|
911
921
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(8px / 2) + 3px)) calc(100% - calc(calc(8px / 2) + 3px)), transparent calc(8px / 2 + 2px), #000 0);
|
|
912
922
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
913
923
|
mask-image:var(--transparent-area-mask);
|
|
914
924
|
}
|
|
915
|
-
.magritte-avatar-online-badge-48___qPmD8_5-0
|
|
925
|
+
.magritte-avatar-online-badge-48___qPmD8_5-1-0{
|
|
916
926
|
position:absolute;
|
|
917
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
918
927
|
border-radius:50%;
|
|
919
928
|
width:8px;
|
|
920
929
|
height:8px;
|
|
921
930
|
right:0px;
|
|
922
931
|
bottom:0px;
|
|
923
932
|
}
|
|
924
|
-
.magritte-
|
|
933
|
+
.magritte-avatar-online-badge_style_positive___jHyv3_5-1-0{
|
|
934
|
+
background-color:var(--magritte-color-component-avatar-online-positive-v20-1-0);
|
|
935
|
+
}
|
|
936
|
+
.magritte-avatar-online-badge_style_contrast___GZFCO_5-1-0{
|
|
937
|
+
background-color:var(--magritte-color-component-avatar-online-contrast-v20-1-0);
|
|
938
|
+
}
|
|
939
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0 ~ .magritte-avatar-online-badge-48___qPmD8_5-1-0{
|
|
925
940
|
position:absolute;
|
|
926
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
927
941
|
border-radius:50%;
|
|
928
942
|
width:8px;
|
|
929
943
|
height:8px;
|
|
930
944
|
right:3px;
|
|
931
945
|
bottom:3px;
|
|
932
946
|
}
|
|
933
|
-
.magritte-avatar___x--BK_5-0
|
|
947
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible + .magritte-avatar-focus-border-48___Bc-lN_5-1-0{
|
|
934
948
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(8px / 2) + 4px)) calc(100% - calc(calc(8px / 2) + 4px)), transparent calc(8px / 2 + 2px), #000 0);
|
|
935
949
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
936
950
|
mask-image:var(--transparent-area-mask);
|
|
@@ -942,7 +956,7 @@
|
|
|
942
956
|
border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
943
957
|
border-radius:calc(var(--magritte-static-border-radius-300-v20-1-0) + 4px);
|
|
944
958
|
}
|
|
945
|
-
.magritte-avatar___x--BK_5-0
|
|
959
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible.magritte-avatar_shape-circle___kEbru_5-1-0 + .magritte-avatar-focus-border-48___Bc-lN_5-1-0{
|
|
946
960
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(8px / 2) + 3px) + 4px)) calc(100% - calc(calc(calc(8px / 2) + 3px) + 4px)), transparent calc(8px / 2 + 2px), #000 0);
|
|
947
961
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
948
962
|
mask-image:var(--transparent-area-mask);
|
|
@@ -954,35 +968,39 @@
|
|
|
954
968
|
border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
955
969
|
border-radius:50%;
|
|
956
970
|
}
|
|
957
|
-
.magritte-avatar_with-online-badge-96___r4E42_5-0
|
|
971
|
+
.magritte-avatar_with-online-badge-96___r4E42_5-1-0{
|
|
958
972
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(12px / 2)) calc(100% - calc(12px / 2)), transparent calc(12px / 2 + 2px), #000 0);
|
|
959
973
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
960
974
|
mask-image:var(--transparent-area-mask);
|
|
961
975
|
}
|
|
962
|
-
.magritte-avatar_shape-circle___kEbru_5-0
|
|
976
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0.magritte-avatar_with-online-badge-96___r4E42_5-1-0{
|
|
963
977
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 8px)) calc(100% - calc(calc(12px / 2) + 8px)), transparent calc(12px / 2 + 2px), #000 0);
|
|
964
978
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
965
979
|
mask-image:var(--transparent-area-mask);
|
|
966
980
|
}
|
|
967
|
-
.magritte-avatar-online-badge-96___d6bm-_5-0
|
|
981
|
+
.magritte-avatar-online-badge-96___d6bm-_5-1-0{
|
|
968
982
|
position:absolute;
|
|
969
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
970
983
|
border-radius:50%;
|
|
971
984
|
width:12px;
|
|
972
985
|
height:12px;
|
|
973
986
|
right:0px;
|
|
974
987
|
bottom:0px;
|
|
975
988
|
}
|
|
976
|
-
.magritte-
|
|
989
|
+
.magritte-avatar-online-badge_style_positive___jHyv3_5-1-0{
|
|
990
|
+
background-color:var(--magritte-color-component-avatar-online-positive-v20-1-0);
|
|
991
|
+
}
|
|
992
|
+
.magritte-avatar-online-badge_style_contrast___GZFCO_5-1-0{
|
|
993
|
+
background-color:var(--magritte-color-component-avatar-online-contrast-v20-1-0);
|
|
994
|
+
}
|
|
995
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0 ~ .magritte-avatar-online-badge-96___d6bm-_5-1-0{
|
|
977
996
|
position:absolute;
|
|
978
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
979
997
|
border-radius:50%;
|
|
980
998
|
width:12px;
|
|
981
999
|
height:12px;
|
|
982
1000
|
right:8px;
|
|
983
1001
|
bottom:8px;
|
|
984
1002
|
}
|
|
985
|
-
.magritte-avatar___x--BK_5-0
|
|
1003
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible + .magritte-avatar-focus-border-96___TVpd0_5-1-0{
|
|
986
1004
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 4px)) calc(100% - calc(calc(12px / 2) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
|
|
987
1005
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
988
1006
|
mask-image:var(--transparent-area-mask);
|
|
@@ -994,7 +1012,7 @@
|
|
|
994
1012
|
border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
995
1013
|
border-radius:calc(var(--magritte-static-border-radius-600-v20-1-0) + 4px);
|
|
996
1014
|
}
|
|
997
|
-
.magritte-avatar___x--BK_5-0
|
|
1015
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible.magritte-avatar_shape-circle___kEbru_5-1-0 + .magritte-avatar-focus-border-96___TVpd0_5-1-0{
|
|
998
1016
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(12px / 2) + 8px) + 4px)) calc(100% - calc(calc(calc(12px / 2) + 8px) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
|
|
999
1017
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
1000
1018
|
mask-image:var(--transparent-area-mask);
|
|
@@ -1006,35 +1024,39 @@
|
|
|
1006
1024
|
border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
1007
1025
|
border-radius:50%;
|
|
1008
1026
|
}
|
|
1009
|
-
.magritte-avatar_with-online-badge-208___AS6Lk_5-0
|
|
1027
|
+
.magritte-avatar_with-online-badge-208___AS6Lk_5-1-0{
|
|
1010
1028
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(12px / 2)) calc(100% - calc(12px / 2)), transparent calc(12px / 2 + 2px), #000 0);
|
|
1011
1029
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
1012
1030
|
mask-image:var(--transparent-area-mask);
|
|
1013
1031
|
}
|
|
1014
|
-
.magritte-avatar_shape-circle___kEbru_5-0
|
|
1032
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0.magritte-avatar_with-online-badge-208___AS6Lk_5-1-0{
|
|
1015
1033
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 25px)) calc(100% - calc(calc(12px / 2) + 25px)), transparent calc(12px / 2 + 2px), #000 0);
|
|
1016
1034
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
1017
1035
|
mask-image:var(--transparent-area-mask);
|
|
1018
1036
|
}
|
|
1019
|
-
.magritte-avatar-online-badge-208___m4hXQ_5-0
|
|
1037
|
+
.magritte-avatar-online-badge-208___m4hXQ_5-1-0{
|
|
1020
1038
|
position:absolute;
|
|
1021
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
1022
1039
|
border-radius:50%;
|
|
1023
1040
|
width:12px;
|
|
1024
1041
|
height:12px;
|
|
1025
1042
|
right:0px;
|
|
1026
1043
|
bottom:0px;
|
|
1027
1044
|
}
|
|
1028
|
-
.magritte-
|
|
1045
|
+
.magritte-avatar-online-badge_style_positive___jHyv3_5-1-0{
|
|
1046
|
+
background-color:var(--magritte-color-component-avatar-online-positive-v20-1-0);
|
|
1047
|
+
}
|
|
1048
|
+
.magritte-avatar-online-badge_style_contrast___GZFCO_5-1-0{
|
|
1049
|
+
background-color:var(--magritte-color-component-avatar-online-contrast-v20-1-0);
|
|
1050
|
+
}
|
|
1051
|
+
.magritte-avatar_shape-circle___kEbru_5-1-0 ~ .magritte-avatar-online-badge-208___m4hXQ_5-1-0{
|
|
1029
1052
|
position:absolute;
|
|
1030
|
-
background-color:var(--magritte-color-component-avatar-online-content-v20-1-0);
|
|
1031
1053
|
border-radius:50%;
|
|
1032
1054
|
width:12px;
|
|
1033
1055
|
height:12px;
|
|
1034
1056
|
right:25px;
|
|
1035
1057
|
bottom:25px;
|
|
1036
1058
|
}
|
|
1037
|
-
.magritte-avatar___x--BK_5-0
|
|
1059
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible + .magritte-avatar-focus-border-208___V6We2_5-1-0{
|
|
1038
1060
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 4px)) calc(100% - calc(calc(12px / 2) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
|
|
1039
1061
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
1040
1062
|
mask-image:var(--transparent-area-mask);
|
|
@@ -1046,7 +1068,7 @@
|
|
|
1046
1068
|
border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v20-1-0);
|
|
1047
1069
|
border-radius:calc(var(--magritte-static-border-radius-200-v20-1-0) + 4px);
|
|
1048
1070
|
}
|
|
1049
|
-
.magritte-avatar___x--BK_5-0
|
|
1071
|
+
.magritte-avatar___x--BK_5-1-0.focus-visible.magritte-avatar_shape-circle___kEbru_5-1-0 + .magritte-avatar-focus-border-208___V6We2_5-1-0{
|
|
1050
1072
|
--transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(12px / 2) + 25px) + 4px)) calc(100% - calc(calc(calc(12px / 2) + 25px) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
|
|
1051
1073
|
-webkit-mask-image:var(--transparent-area-mask);
|
|
1052
1074
|
mask-image:var(--transparent-area-mask);
|
package/index.js
CHANGED
|
@@ -9,7 +9,7 @@ import './Placeholder/Female.js';
|
|
|
9
9
|
import './Placeholder/Male.js';
|
|
10
10
|
import './Placeholder/City.js';
|
|
11
11
|
import './Placeholder/Undefined.js';
|
|
12
|
-
import './Skeleton-
|
|
12
|
+
import './Skeleton-CJIkCUza.js';
|
|
13
13
|
import '@hh.ru/magritte-ui-skeleton';
|
|
14
14
|
import './utils.js';
|
|
15
15
|
import '@hh.ru/magritte-ui-typography/BaseText';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-avatar",
|
|
3
|
-
"version": "5.0
|
|
3
|
+
"version": "5.1.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@hh.ru/magritte-common-use-disabled": "1.0.10",
|
|
24
24
|
"@hh.ru/magritte-design-tokens": "20.1.0",
|
|
25
|
-
"@hh.ru/magritte-types": "5.0.
|
|
25
|
+
"@hh.ru/magritte-types": "5.0.1",
|
|
26
26
|
"@hh.ru/magritte-ui-mock-component": "1.0.12",
|
|
27
|
-
"@hh.ru/magritte-ui-skeleton": "2.1.
|
|
27
|
+
"@hh.ru/magritte-ui-skeleton": "2.1.20",
|
|
28
28
|
"@hh.ru/magritte-ui-theme-provider": "1.1.35",
|
|
29
|
-
"@hh.ru/magritte-ui-typography": "3.0.
|
|
29
|
+
"@hh.ru/magritte-ui-typography": "3.0.25"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"classnames": ">=2.3.2",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"publishConfig": {
|
|
36
36
|
"access": "public"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "346881f05e7fdd6b3f25a00a6bd004198be44f87"
|
|
39
39
|
}
|
package/types.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export type AvatarMode = 'letters' | 'icon' | 'placeholder' | 'image';
|
|
|
4
4
|
export type AvatarLettersStyle = 'color-1' | 'color-2' | 'color-3' | 'color-4' | 'color-5' | 'color-6' | 'color-7' | 'color-8' | 'color-9';
|
|
5
5
|
export type AvatarIconStyle = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'positive' | 'negative' | 'warning' | 'special' | 'contrast';
|
|
6
6
|
export type AvatarPlaceholder = 'female' | 'male' | 'city' | 'undefined';
|
|
7
|
+
export type AvatarOnlineStyle = 'positive' | 'contrast';
|
|
7
8
|
interface AvatarBaseProps {
|
|
8
9
|
/** Режим отображения компонента */
|
|
9
10
|
mode: AvatarMode;
|
|
@@ -19,6 +20,8 @@ interface AvatarBaseProps {
|
|
|
19
20
|
disabled?: boolean;
|
|
20
21
|
/** Отображать ли индикатор онлайн */
|
|
21
22
|
online?: boolean;
|
|
23
|
+
/** Стиль индикатора онлайн */
|
|
24
|
+
styleOnline?: AvatarOnlineStyle;
|
|
22
25
|
/** data-qa для контейнера аватара */
|
|
23
26
|
containerDataQa?: string;
|
|
24
27
|
}
|
package/Skeleton-D7TuOmCZ.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import classnames from 'classnames';
|
|
4
|
-
import { Skeleton } from '@hh.ru/magritte-ui-skeleton';
|
|
5
|
-
|
|
6
|
-
var styles = {"avatar-container":"magritte-avatar-container___jBkeI_5-0-18","avatarContainer":"magritte-avatar-container___jBkeI_5-0-18","avatar-container_disabled":"magritte-avatar-container_disabled___EkG4l_5-0-18","avatarContainerDisabled":"magritte-avatar-container_disabled___EkG4l_5-0-18","avatar":"magritte-avatar___x--BK_5-0-18","avatar-container_size-24":"magritte-avatar-container_size-24___f6DH2_5-0-18","avatarContainerSize24":"magritte-avatar-container_size-24___f6DH2_5-0-18","avatar-skeleton-24":"magritte-avatar-skeleton-24___9hUuj_5-0-18","avatarSkeleton24":"magritte-avatar-skeleton-24___9hUuj_5-0-18","avatar_size-24":"magritte-avatar_size-24___0dAId_5-0-18","avatarSize24":"magritte-avatar_size-24___0dAId_5-0-18","avatar-container_size-40":"magritte-avatar-container_size-40___mVeBD_5-0-18","avatarContainerSize40":"magritte-avatar-container_size-40___mVeBD_5-0-18","avatar-skeleton-40":"magritte-avatar-skeleton-40___ZN6a7_5-0-18","avatarSkeleton40":"magritte-avatar-skeleton-40___ZN6a7_5-0-18","avatar_size-40":"magritte-avatar_size-40___zj3fM_5-0-18","avatarSize40":"magritte-avatar_size-40___zj3fM_5-0-18","avatar-container_size-48":"magritte-avatar-container_size-48___pflud_5-0-18","avatarContainerSize48":"magritte-avatar-container_size-48___pflud_5-0-18","avatar-skeleton-48":"magritte-avatar-skeleton-48___CC-af_5-0-18","avatarSkeleton48":"magritte-avatar-skeleton-48___CC-af_5-0-18","avatar_size-48":"magritte-avatar_size-48___JzITc_5-0-18","avatarSize48":"magritte-avatar_size-48___JzITc_5-0-18","avatar-container_size-96":"magritte-avatar-container_size-96___Up8Hn_5-0-18","avatarContainerSize96":"magritte-avatar-container_size-96___Up8Hn_5-0-18","avatar-skeleton-96":"magritte-avatar-skeleton-96___qYG-Z_5-0-18","avatarSkeleton96":"magritte-avatar-skeleton-96___qYG-Z_5-0-18","avatar_size-96":"magritte-avatar_size-96___5SeO2_5-0-18","avatarSize96":"magritte-avatar_size-96___5SeO2_5-0-18","avatar-container_size-208":"magritte-avatar-container_size-208___k7SkJ_5-0-18","avatarContainerSize208":"magritte-avatar-container_size-208___k7SkJ_5-0-18","avatar-skeleton-208":"magritte-avatar-skeleton-208___ybqJw_5-0-18","avatarSkeleton208":"magritte-avatar-skeleton-208___ybqJw_5-0-18","avatar_size-208":"magritte-avatar_size-208___rzfu3_5-0-18","avatarSize208":"magritte-avatar_size-208___rzfu3_5-0-18","avatar_shape-circle":"magritte-avatar_shape-circle___kEbru_5-0-18","avatarShapeCircle":"magritte-avatar_shape-circle___kEbru_5-0-18","avatar-skeleton-circle":"magritte-avatar-skeleton-circle___rD1E0_5-0-18","avatarSkeletonCircle":"magritte-avatar-skeleton-circle___rD1E0_5-0-18","avatar_style-color-1":"magritte-avatar_style-color-1___xXtkh_5-0-18","avatarStyleColor1":"magritte-avatar_style-color-1___xXtkh_5-0-18","avatar_style-color-2":"magritte-avatar_style-color-2___JraJd_5-0-18","avatarStyleColor2":"magritte-avatar_style-color-2___JraJd_5-0-18","avatar_style-color-3":"magritte-avatar_style-color-3___g29U3_5-0-18","avatarStyleColor3":"magritte-avatar_style-color-3___g29U3_5-0-18","avatar_style-color-4":"magritte-avatar_style-color-4___pHhmj_5-0-18","avatarStyleColor4":"magritte-avatar_style-color-4___pHhmj_5-0-18","avatar_style-color-5":"magritte-avatar_style-color-5___H9Ie3_5-0-18","avatarStyleColor5":"magritte-avatar_style-color-5___H9Ie3_5-0-18","avatar_style-color-6":"magritte-avatar_style-color-6___oODXO_5-0-18","avatarStyleColor6":"magritte-avatar_style-color-6___oODXO_5-0-18","avatar_style-color-7":"magritte-avatar_style-color-7___SfUBl_5-0-18","avatarStyleColor7":"magritte-avatar_style-color-7___SfUBl_5-0-18","avatar_style-color-8":"magritte-avatar_style-color-8___rlI6h_5-0-18","avatarStyleColor8":"magritte-avatar_style-color-8___rlI6h_5-0-18","avatar_style-color-9":"magritte-avatar_style-color-9___XQO4B_5-0-18","avatarStyleColor9":"magritte-avatar_style-color-9___XQO4B_5-0-18","avatar_style-primary":"magritte-avatar_style-primary___SvqU1_5-0-18","avatarStylePrimary":"magritte-avatar_style-primary___SvqU1_5-0-18","avatar_style-secondary":"magritte-avatar_style-secondary___C6MTH_5-0-18","avatarStyleSecondary":"magritte-avatar_style-secondary___C6MTH_5-0-18","avatar_style-tertiary":"magritte-avatar_style-tertiary___3o-90_5-0-18","avatarStyleTertiary":"magritte-avatar_style-tertiary___3o-90_5-0-18","avatar_style-accent":"magritte-avatar_style-accent___LgPSo_5-0-18","avatarStyleAccent":"magritte-avatar_style-accent___LgPSo_5-0-18","avatar_style-positive":"magritte-avatar_style-positive___bDzbE_5-0-18","avatarStylePositive":"magritte-avatar_style-positive___bDzbE_5-0-18","avatar_style-negative":"magritte-avatar_style-negative___xHHQb_5-0-18","avatarStyleNegative":"magritte-avatar_style-negative___xHHQb_5-0-18","avatar_style-warning":"magritte-avatar_style-warning___7kKRS_5-0-18","avatarStyleWarning":"magritte-avatar_style-warning___7kKRS_5-0-18","avatar_style-special":"magritte-avatar_style-special___gLmS0_5-0-18","avatarStyleSpecial":"magritte-avatar_style-special___gLmS0_5-0-18","avatar_style-contrast":"magritte-avatar_style-contrast___zHyp-_5-0-18","avatarStyleContrast":"magritte-avatar_style-contrast___zHyp-_5-0-18","avatar_mode-image":"magritte-avatar_mode-image___02zr1_5-0-18","avatarModeImage":"magritte-avatar_mode-image___02zr1_5-0-18","avatar_mode-letters":"magritte-avatar_mode-letters___ot4qB_5-0-18","avatarModeLetters":"magritte-avatar_mode-letters___ot4qB_5-0-18","avatar_mode-icon":"magritte-avatar_mode-icon___MYrlv_5-0-18","avatarModeIcon":"magritte-avatar_mode-icon___MYrlv_5-0-18","avatar_mode-placeholder":"magritte-avatar_mode-placeholder___6hOu7_5-0-18","avatarModePlaceholder":"magritte-avatar_mode-placeholder___6hOu7_5-0-18","avatar-image":"magritte-avatar-image___05p9Z_5-0-18","avatarImage":"magritte-avatar-image___05p9Z_5-0-18","avatar-image_hidden":"magritte-avatar-image_hidden___DPQBK_5-0-18","avatarImageHidden":"magritte-avatar-image_hidden___DPQBK_5-0-18","avatar_with-online-badge-24":"magritte-avatar_with-online-badge-24___helkM_5-0-18","avatarWithOnlineBadge24":"magritte-avatar_with-online-badge-24___helkM_5-0-18","avatar-online-badge-24":"magritte-avatar-online-badge-24___mjPKB_5-0-18","avatarOnlineBadge24":"magritte-avatar-online-badge-24___mjPKB_5-0-18","avatar-focus-border-24":"magritte-avatar-focus-border-24___wnJnb_5-0-18","avatarFocusBorder24":"magritte-avatar-focus-border-24___wnJnb_5-0-18","avatar_with-online-badge-40":"magritte-avatar_with-online-badge-40___Tckho_5-0-18","avatarWithOnlineBadge40":"magritte-avatar_with-online-badge-40___Tckho_5-0-18","avatar-online-badge-40":"magritte-avatar-online-badge-40___HRNTS_5-0-18","avatarOnlineBadge40":"magritte-avatar-online-badge-40___HRNTS_5-0-18","avatar-focus-border-40":"magritte-avatar-focus-border-40___Qn9NL_5-0-18","avatarFocusBorder40":"magritte-avatar-focus-border-40___Qn9NL_5-0-18","avatar_with-online-badge-48":"magritte-avatar_with-online-badge-48___BmWaC_5-0-18","avatarWithOnlineBadge48":"magritte-avatar_with-online-badge-48___BmWaC_5-0-18","avatar-online-badge-48":"magritte-avatar-online-badge-48___qPmD8_5-0-18","avatarOnlineBadge48":"magritte-avatar-online-badge-48___qPmD8_5-0-18","avatar-focus-border-48":"magritte-avatar-focus-border-48___Bc-lN_5-0-18","avatarFocusBorder48":"magritte-avatar-focus-border-48___Bc-lN_5-0-18","avatar_with-online-badge-96":"magritte-avatar_with-online-badge-96___r4E42_5-0-18","avatarWithOnlineBadge96":"magritte-avatar_with-online-badge-96___r4E42_5-0-18","avatar-online-badge-96":"magritte-avatar-online-badge-96___d6bm-_5-0-18","avatarOnlineBadge96":"magritte-avatar-online-badge-96___d6bm-_5-0-18","avatar-focus-border-96":"magritte-avatar-focus-border-96___TVpd0_5-0-18","avatarFocusBorder96":"magritte-avatar-focus-border-96___TVpd0_5-0-18","avatar_with-online-badge-208":"magritte-avatar_with-online-badge-208___AS6Lk_5-0-18","avatarWithOnlineBadge208":"magritte-avatar_with-online-badge-208___AS6Lk_5-0-18","avatar-online-badge-208":"magritte-avatar-online-badge-208___m4hXQ_5-0-18","avatarOnlineBadge208":"magritte-avatar-online-badge-208___m4hXQ_5-0-18","avatar-focus-border-208":"magritte-avatar-focus-border-208___V6We2_5-0-18","avatarFocusBorder208":"magritte-avatar-focus-border-208___V6We2_5-0-18"};
|
|
7
|
-
|
|
8
|
-
const AvatarSkeleton = ({ Component: Avatar,
|
|
9
|
-
// skeleton props
|
|
10
|
-
width, height, borderRadius, inline, additionalClass, loading, ...avatarProps }) => {
|
|
11
|
-
return (jsx(Skeleton, { loading: loading, additionalClass: classnames({
|
|
12
|
-
[styles[`avatar-skeleton-${avatarProps.size}`]]: avatarProps.size,
|
|
13
|
-
[styles.avatarSkeletonCircle]: avatarProps.shapeCircle,
|
|
14
|
-
}), children: jsx(Avatar, { ...avatarProps }) }));
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export { AvatarSkeleton as A, styles as s };
|
|
18
|
-
//# sourceMappingURL=Skeleton-D7TuOmCZ.js.map
|