@alfalab/core-components-product-cover 3.1.8-alfasans → 3.2.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/components/image-card/index.css +2 -2
- package/components/image-card/index.module.css.js +1 -1
- package/components/overlay/index.css +4 -4
- package/components/overlay/index.module.css.js +1 -1
- package/components/text/index.css +7 -7
- package/components/text/index.module.css.js +1 -1
- package/cssm/single/Component.js +5 -3
- package/cssm/single/Component.js.map +1 -1
- package/cssm/single/index.module.css +69 -0
- package/cssm/typings.d.ts +6 -0
- package/esm/components/image-card/index.css +2 -2
- package/esm/components/image-card/index.module.css.js +1 -1
- package/esm/components/overlay/index.css +4 -4
- package/esm/components/overlay/index.module.css.js +1 -1
- package/esm/components/text/index.css +7 -7
- package/esm/components/text/index.module.css.js +1 -1
- package/esm/single/Component.js +5 -3
- package/esm/single/Component.js.map +1 -1
- package/esm/single/index.css +80 -11
- package/esm/single/index.module.css.js +1 -1
- package/esm/single/index.module.css.js.map +1 -1
- package/esm/stack/index.css +16 -16
- package/esm/stack/index.module.css.js +1 -1
- package/esm/typings.d.ts +6 -0
- package/modern/components/image-card/index.css +2 -2
- package/modern/components/image-card/index.module.css.js +1 -1
- package/modern/components/overlay/index.css +4 -4
- package/modern/components/overlay/index.module.css.js +1 -1
- package/modern/components/text/index.css +7 -7
- package/modern/components/text/index.module.css.js +1 -1
- package/modern/single/Component.js +5 -3
- package/modern/single/Component.js.map +1 -1
- package/modern/single/index.css +80 -11
- package/modern/single/index.module.css.js +1 -1
- package/modern/single/index.module.css.js.map +1 -1
- package/modern/stack/index.css +16 -16
- package/modern/stack/index.module.css.js +1 -1
- package/modern/typings.d.ts +6 -0
- package/moderncssm/single/Component.js +5 -3
- package/moderncssm/single/Component.js.map +1 -1
- package/moderncssm/single/index.module.css +82 -0
- package/moderncssm/typings.d.ts +6 -0
- package/package.json +6 -6
- package/single/Component.js +5 -3
- package/single/Component.js.map +1 -1
- package/single/index.css +80 -11
- package/single/index.module.css.js +1 -1
- package/single/index.module.css.js.map +1 -1
- package/src/single/Component.tsx +9 -1
- package/src/single/index.module.css +36 -0
- package/src/typings.ts +7 -0
- package/stack/index.css +16 -16
- package/stack/index.module.css.js +1 -1
- package/typings.d.ts +6 -0
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
:root {
|
|
9
9
|
--gap-0: 0px;
|
|
10
10
|
}
|
|
11
|
-
.product-
|
|
11
|
+
.product-cover__cardMack_1ynsa {
|
|
12
12
|
background-color: var(--color-light-neutral-translucent-1300-inverted);
|
|
13
13
|
border-radius: var(--border-radius-2);
|
|
14
14
|
}
|
|
15
|
-
.product-
|
|
15
|
+
.product-cover__cardImage_1ynsa {
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: var(--gap-0);
|
|
18
18
|
left: var(--gap-0);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"cardMack":"product-
|
|
5
|
+
var styles = {"cardMack":"product-cover__cardMack_1ynsa","cardImage":"product-cover__cardImage_1ynsa"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
:root {
|
|
6
6
|
--gap-0: 0px;
|
|
7
7
|
}
|
|
8
|
-
.product-
|
|
8
|
+
.product-cover__overlay_17q9t {
|
|
9
9
|
position: absolute;
|
|
10
10
|
top: var(--gap-0);
|
|
11
11
|
bottom: var(--gap-0);
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
z-index: 3;
|
|
17
17
|
opacity: 0;
|
|
18
18
|
}
|
|
19
|
-
.product-
|
|
19
|
+
.product-cover__visible_17q9t {
|
|
20
20
|
opacity: 1;
|
|
21
21
|
}
|
|
22
|
-
.product-
|
|
22
|
+
.product-cover__default_17q9t {
|
|
23
23
|
background: var(--color-static-neutral-translucent-700-inverted);
|
|
24
24
|
}
|
|
25
|
-
.product-
|
|
25
|
+
.product-cover__inverted_17q9t {
|
|
26
26
|
background: var(--color-static-neutral-translucent-700);
|
|
27
27
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"overlay":"product-
|
|
5
|
+
var styles = {"overlay":"product-cover__overlay_17q9t","visible":"product-cover__visible_17q9t","default":"product-cover__default_17q9t","inverted":"product-cover__inverted_17q9t"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -5,37 +5,37 @@
|
|
|
5
5
|
--gap-3xs: 2px;
|
|
6
6
|
--gap-2: var(--gap-3xs);
|
|
7
7
|
}
|
|
8
|
-
.product-
|
|
8
|
+
.product-cover__component_1ufps {
|
|
9
9
|
display: flex;
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
z-index: 2;
|
|
12
12
|
gap: var(--gap-2);
|
|
13
13
|
}
|
|
14
|
-
.product-
|
|
14
|
+
.product-cover__cardholderName_1ufps {
|
|
15
15
|
-webkit-line-clamp: 1;
|
|
16
16
|
display: -webkit-box;
|
|
17
17
|
-webkit-box-orient: vertical;
|
|
18
18
|
overflow: hidden;
|
|
19
19
|
word-break: break-all;
|
|
20
20
|
}
|
|
21
|
-
.product-
|
|
21
|
+
.product-cover__cardNumber_1ufps {
|
|
22
22
|
display: flex;
|
|
23
23
|
align-items: center;
|
|
24
24
|
}
|
|
25
|
-
.product-
|
|
25
|
+
.product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps {
|
|
26
26
|
margin-left: 5px;
|
|
27
27
|
width: 24px;
|
|
28
28
|
height: 24px;
|
|
29
29
|
cursor: pointer;
|
|
30
30
|
color: var(--color-static-text-primary-light);
|
|
31
31
|
}
|
|
32
|
-
.product-
|
|
32
|
+
.product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps:hover {
|
|
33
33
|
color: var(--color-static-text-primary-light);
|
|
34
34
|
}
|
|
35
|
-
.product-
|
|
35
|
+
.product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps:active {
|
|
36
36
|
color: var(--color-static-text-primary-light);
|
|
37
37
|
}
|
|
38
|
-
.product-
|
|
38
|
+
.product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps > span {
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"product-
|
|
5
|
+
var styles = {"component":"product-cover__component_1ufps","cardholderName":"product-cover__cardholderName_1ufps","cardNumber":"product-cover__cardNumber_1ufps","buttonEye":"product-cover__buttonEye_1ufps"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
package/cssm/single/Component.js
CHANGED
|
@@ -19,10 +19,10 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
|
19
19
|
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
20
20
|
|
|
21
21
|
var Single = function (_a) {
|
|
22
|
-
var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, textColor = _a.textColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId;
|
|
22
|
+
var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, textColor = _a.textColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId, _e = _a.stateType, stateType = _e === void 0 ? false : _e;
|
|
23
23
|
var hasContent = Boolean(cardNumber || cardholderName || numberOfCards);
|
|
24
24
|
var showContent = hasContent && size !== 16 && !contentAddons;
|
|
25
|
-
return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default["size-".concat(size)], className), style: {
|
|
25
|
+
return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default["size-".concat(size)], stateType && styles__default.default[stateType], className), style: {
|
|
26
26
|
width: consts.WIDTH_TO_SIZE[size],
|
|
27
27
|
height: size,
|
|
28
28
|
boxShadow: shadow,
|
|
@@ -33,7 +33,9 @@ var Single = function (_a) {
|
|
|
33
33
|
borderColor && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.border), style: { boxShadow: "inset 0 0 0 1px ".concat(borderColor) } })),
|
|
34
34
|
React__default.default.createElement(Component$1.ImageCard, { width: consts.WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, numberOfCards: numberOfCards }),
|
|
35
35
|
showContent && (React__default.default.createElement(Component$2.Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, numberOfCards: numberOfCards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: cssm.getDataTestId(dataTestId, 'user-info'), textColor: textColor })),
|
|
36
|
-
contentAddons && (React__default.default.createElement("div", tslib.__assign({}, contentAddonsProps, { className: cn__default.default(styles__default.default.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons))
|
|
36
|
+
contentAddons && (React__default.default.createElement("div", tslib.__assign({}, contentAddonsProps, { className: cn__default.default(styles__default.default.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons)),
|
|
37
|
+
stateType && React__default.default.createElement("div", { className: cn__default.default(styles__default.default.state, styles__default.default.hover) }),
|
|
38
|
+
stateType && React__default.default.createElement("div", { className: cn__default.default(styles__default.default.state, styles__default.default.active) })));
|
|
37
39
|
};
|
|
38
40
|
|
|
39
41
|
exports.Single = Single;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/single/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ImageCard, Overlay, Text } from '../components';\nimport { WIDTH_TO_SIZE } from '../consts';\nimport { type SingleCommonProps } from '../typings';\n\nimport styles from './index.module.css';\n\nexport const Single: FC<SingleCommonProps> = ({\n size = 164,\n icon: Icon,\n cardId,\n layers,\n baseUrl,\n shadow,\n iconColor,\n backgroundColor,\n borderColor,\n textColor,\n overlayProps = { colors: 'default', visible: false },\n eyeButton,\n cardholderNameUppercase,\n cardholderName,\n numberOfСards,\n numberOfCards = numberOfСards,\n align,\n cardNumber,\n className,\n contentAddons,\n contentAddonsProps,\n onEyeIconClick,\n dataTestId,\n}) => {\n const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n const showContent = hasContent && size !== 16 && !contentAddons;\n\n return (\n <div\n className={cn(styles.component
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/single/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ImageCard, Overlay, Text } from '../components';\nimport { WIDTH_TO_SIZE } from '../consts';\nimport { type SingleCommonProps } from '../typings';\n\nimport styles from './index.module.css';\n\nexport const Single: FC<SingleCommonProps> = ({\n size = 164,\n icon: Icon,\n cardId,\n layers,\n baseUrl,\n shadow,\n iconColor,\n backgroundColor,\n borderColor,\n textColor,\n overlayProps = { colors: 'default', visible: false },\n eyeButton,\n cardholderNameUppercase,\n cardholderName,\n numberOfСards,\n numberOfCards = numberOfСards,\n align,\n cardNumber,\n className,\n contentAddons,\n contentAddonsProps,\n onEyeIconClick,\n dataTestId,\n stateType = false,\n}) => {\n const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n const showContent = hasContent && size !== 16 && !contentAddons;\n\n return (\n <div\n className={cn(\n styles.component,\n styles[`size-${size}`],\n stateType && styles[stateType],\n className,\n )}\n style={{\n width: WIDTH_TO_SIZE[size],\n height: size,\n boxShadow: shadow,\n backgroundColor,\n }}\n data-test-id={dataTestId}\n >\n {Icon && <Icon color={iconColor} className={styles.icon} />}\n <Overlay colors={overlayProps.colors} visible={overlayProps.visible} />\n\n {borderColor && (\n <div\n className={cn(styles.border)}\n style={{ boxShadow: `inset 0 0 0 1px ${borderColor}` }}\n />\n )}\n\n <ImageCard\n width={WIDTH_TO_SIZE[size]}\n height={size}\n cardId={cardId}\n layers={layers}\n baseUrl={baseUrl}\n numberOfCards={numberOfCards}\n />\n\n {showContent && (\n <Text\n cardNumber={cardNumber}\n eyeButton={eyeButton}\n cardholderNameUppercase={cardholderNameUppercase}\n cardholderName={cardholderName}\n numberOfCards={numberOfCards}\n align={align}\n size={size}\n onEyeIconClick={onEyeIconClick}\n dataTestId={getDataTestId(dataTestId, 'user-info')}\n textColor={textColor}\n />\n )}\n\n {contentAddons && (\n <div\n {...contentAddonsProps}\n className={cn(styles.contentAddons, contentAddonsProps?.className)}\n >\n {contentAddons}\n </div>\n )}\n {stateType && <div className={cn(styles.state, styles.hover)} />}\n {stateType && <div className={cn(styles.state, styles.active)} />}\n </div>\n );\n};\n"],"names":["React","cn","styles","WIDTH_TO_SIZE","Overlay","ImageCard","Text","getDataTestId","__assign"],"mappings":"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"}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--color-light-neutral-500: #babbc2;
|
|
3
|
+
--color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
|
|
4
|
+
--color-light-neutral-translucent-200-inverted: rgba(225, 225, 248, 0.09);
|
|
5
|
+
--color-light-neutral-translucent-400: rgba(5, 11, 44, 0.18);
|
|
6
|
+
--color-light-neutral-translucent-400-inverted: rgba(231, 231, 248, 0.18);
|
|
3
7
|
}
|
|
4
8
|
:root {
|
|
5
9
|
--border-radius-xs: 2px;
|
|
@@ -59,6 +63,71 @@
|
|
|
59
63
|
.component.size-16 {
|
|
60
64
|
border-radius: var(--border-radius-2);
|
|
61
65
|
}
|
|
66
|
+
.component .state {
|
|
67
|
+
position: absolute;
|
|
68
|
+
inset: var(--gap-0);
|
|
69
|
+
z-index: 2;
|
|
70
|
+
border-radius: inherit;
|
|
71
|
+
opacity: 0;
|
|
72
|
+
transition: opacity 0.2s;
|
|
73
|
+
will-change: opacity;
|
|
74
|
+
}
|
|
75
|
+
.component.darkening .hover {
|
|
76
|
+
background-color: var(--color-light-neutral-translucent-200);
|
|
77
|
+
}
|
|
78
|
+
.component.darkening .active {
|
|
79
|
+
background-color: var(--color-light-neutral-translucent-400);
|
|
80
|
+
}
|
|
81
|
+
@media (hover: hover) {
|
|
82
|
+
.component.darkening:hover:not(:active) .hover {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
.component.darkening:active .active {
|
|
87
|
+
opacity: 1;
|
|
88
|
+
}
|
|
89
|
+
.component.lightening .hover {
|
|
90
|
+
background-color: var(--color-light-neutral-translucent-200-inverted);
|
|
91
|
+
}
|
|
92
|
+
.component.lightening .active {
|
|
93
|
+
background-color: var(--color-light-neutral-translucent-400-inverted);
|
|
94
|
+
}
|
|
95
|
+
@media (hover: hover) {
|
|
96
|
+
.component.lightening:hover:not(:active) .hover {
|
|
97
|
+
opacity: 1;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
.component.lightening:active .active {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
}
|
|
103
|
+
.component.static-darkening .hover {
|
|
104
|
+
background-color: rgba(0, 0, 0, 0.07);
|
|
105
|
+
}
|
|
106
|
+
.component.static-darkening .active {
|
|
107
|
+
background-color: rgba(0, 0, 0, 0.15);
|
|
108
|
+
}
|
|
109
|
+
@media (hover: hover) {
|
|
110
|
+
.component.static-darkening:hover:not(:active) .hover {
|
|
111
|
+
opacity: 1;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
.component.static-darkening:active .active {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
}
|
|
117
|
+
.component.static-lightening .hover {
|
|
118
|
+
background-color: rgba(255, 255, 255, 0.07);
|
|
119
|
+
}
|
|
120
|
+
.component.static-lightening .active {
|
|
121
|
+
background-color: rgba(255, 255, 255, 0.15);
|
|
122
|
+
}
|
|
123
|
+
@media (hover: hover) {
|
|
124
|
+
.component.static-lightening:hover:not(:active) .hover {
|
|
125
|
+
opacity: 1;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
.component.static-lightening:active .active {
|
|
129
|
+
opacity: 1;
|
|
130
|
+
}
|
|
62
131
|
.icon {
|
|
63
132
|
position: absolute;
|
|
64
133
|
top: 50%;
|
package/cssm/typings.d.ts
CHANGED
|
@@ -107,6 +107,12 @@ export type SingleCommonProps = {
|
|
|
107
107
|
* Идентификатор для систем автоматизированного тестирования
|
|
108
108
|
*/
|
|
109
109
|
dataTestId?: string;
|
|
110
|
+
/**
|
|
111
|
+
* Задает различные эффекты при наведении на компонент (затемнение, осветление)
|
|
112
|
+
*
|
|
113
|
+
* @default false
|
|
114
|
+
*/
|
|
115
|
+
stateType?: 'darkening' | 'lightening' | 'static-darkening' | 'static-lightening' | false;
|
|
110
116
|
};
|
|
111
117
|
export type SingleProps = Omit<SingleCommonProps, 'numberOfСards' | 'numberOfCards' | 'align'>;
|
|
112
118
|
export type BankCardImageProps = Omit<SingleCommonProps, 'size' | 'numberOfСards' | 'numberOfCards' | 'className' | 'dataTestId' | 'align'>;
|
|
@@ -8,11 +8,11 @@
|
|
|
8
8
|
:root {
|
|
9
9
|
--gap-0: 0px;
|
|
10
10
|
}
|
|
11
|
-
.product-
|
|
11
|
+
.product-cover__cardMack_1ynsa {
|
|
12
12
|
background-color: var(--color-light-neutral-translucent-1300-inverted);
|
|
13
13
|
border-radius: var(--border-radius-2);
|
|
14
14
|
}
|
|
15
|
-
.product-
|
|
15
|
+
.product-cover__cardImage_1ynsa {
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: var(--gap-0);
|
|
18
18
|
left: var(--gap-0);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"cardMack":"product-
|
|
3
|
+
var styles = {"cardMack":"product-cover__cardMack_1ynsa","cardImage":"product-cover__cardImage_1ynsa"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
:root {
|
|
6
6
|
--gap-0: 0px;
|
|
7
7
|
}
|
|
8
|
-
.product-
|
|
8
|
+
.product-cover__overlay_17q9t {
|
|
9
9
|
position: absolute;
|
|
10
10
|
top: var(--gap-0);
|
|
11
11
|
bottom: var(--gap-0);
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
z-index: 3;
|
|
17
17
|
opacity: 0;
|
|
18
18
|
}
|
|
19
|
-
.product-
|
|
19
|
+
.product-cover__visible_17q9t {
|
|
20
20
|
opacity: 1;
|
|
21
21
|
}
|
|
22
|
-
.product-
|
|
22
|
+
.product-cover__default_17q9t {
|
|
23
23
|
background: var(--color-static-neutral-translucent-700-inverted);
|
|
24
24
|
}
|
|
25
|
-
.product-
|
|
25
|
+
.product-cover__inverted_17q9t {
|
|
26
26
|
background: var(--color-static-neutral-translucent-700);
|
|
27
27
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"overlay":"product-
|
|
3
|
+
var styles = {"overlay":"product-cover__overlay_17q9t","visible":"product-cover__visible_17q9t","default":"product-cover__default_17q9t","inverted":"product-cover__inverted_17q9t"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -5,37 +5,37 @@
|
|
|
5
5
|
--gap-3xs: 2px;
|
|
6
6
|
--gap-2: var(--gap-3xs);
|
|
7
7
|
}
|
|
8
|
-
.product-
|
|
8
|
+
.product-cover__component_1ufps {
|
|
9
9
|
display: flex;
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
z-index: 2;
|
|
12
12
|
gap: var(--gap-2);
|
|
13
13
|
}
|
|
14
|
-
.product-
|
|
14
|
+
.product-cover__cardholderName_1ufps {
|
|
15
15
|
-webkit-line-clamp: 1;
|
|
16
16
|
display: -webkit-box;
|
|
17
17
|
-webkit-box-orient: vertical;
|
|
18
18
|
overflow: hidden;
|
|
19
19
|
word-break: break-all;
|
|
20
20
|
}
|
|
21
|
-
.product-
|
|
21
|
+
.product-cover__cardNumber_1ufps {
|
|
22
22
|
display: flex;
|
|
23
23
|
align-items: center;
|
|
24
24
|
}
|
|
25
|
-
.product-
|
|
25
|
+
.product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps {
|
|
26
26
|
margin-left: 5px;
|
|
27
27
|
width: 24px;
|
|
28
28
|
height: 24px;
|
|
29
29
|
cursor: pointer;
|
|
30
30
|
color: var(--color-static-text-primary-light);
|
|
31
31
|
}
|
|
32
|
-
.product-
|
|
32
|
+
.product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps:hover {
|
|
33
33
|
color: var(--color-static-text-primary-light);
|
|
34
34
|
}
|
|
35
|
-
.product-
|
|
35
|
+
.product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps:active {
|
|
36
36
|
color: var(--color-static-text-primary-light);
|
|
37
37
|
}
|
|
38
|
-
.product-
|
|
38
|
+
.product-cover__buttonEye_1ufps.product-cover__buttonEye_1ufps > span {
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"product-
|
|
3
|
+
var styles = {"component":"product-cover__component_1ufps","cardholderName":"product-cover__cardholderName_1ufps","cardNumber":"product-cover__cardNumber_1ufps","buttonEye":"product-cover__buttonEye_1ufps"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
package/esm/single/Component.js
CHANGED
|
@@ -9,10 +9,10 @@ import { WIDTH_TO_SIZE } from '../consts.js';
|
|
|
9
9
|
import styles from './index.module.css.js';
|
|
10
10
|
|
|
11
11
|
var Single = function (_a) {
|
|
12
|
-
var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, textColor = _a.textColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId;
|
|
12
|
+
var _b = _a.size, size = _b === void 0 ? 164 : _b, Icon = _a.icon, cardId = _a.cardId, layers = _a.layers, baseUrl = _a.baseUrl, shadow = _a.shadow, iconColor = _a.iconColor, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, textColor = _a.textColor, _c = _a.overlayProps, overlayProps = _c === void 0 ? { colors: 'default', visible: false } : _c, eyeButton = _a.eyeButton, cardholderNameUppercase = _a.cardholderNameUppercase, cardholderName = _a.cardholderName, numberOfСards = _a.numberOfСards, _d = _a.numberOfCards, numberOfCards = _d === void 0 ? numberOfСards : _d, align = _a.align, cardNumber = _a.cardNumber, className = _a.className, contentAddons = _a.contentAddons, contentAddonsProps = _a.contentAddonsProps, onEyeIconClick = _a.onEyeIconClick, dataTestId = _a.dataTestId, _e = _a.stateType, stateType = _e === void 0 ? false : _e;
|
|
13
13
|
var hasContent = Boolean(cardNumber || cardholderName || numberOfCards);
|
|
14
14
|
var showContent = hasContent && size !== 16 && !contentAddons;
|
|
15
|
-
return (React.createElement("div", { className: cn(styles.component, styles["size-".concat(size)], className), style: {
|
|
15
|
+
return (React.createElement("div", { className: cn(styles.component, styles["size-".concat(size)], stateType && styles[stateType], className), style: {
|
|
16
16
|
width: WIDTH_TO_SIZE[size],
|
|
17
17
|
height: size,
|
|
18
18
|
boxShadow: shadow,
|
|
@@ -23,7 +23,9 @@ var Single = function (_a) {
|
|
|
23
23
|
borderColor && (React.createElement("div", { className: cn(styles.border), style: { boxShadow: "inset 0 0 0 1px ".concat(borderColor) } })),
|
|
24
24
|
React.createElement(ImageCard, { width: WIDTH_TO_SIZE[size], height: size, cardId: cardId, layers: layers, baseUrl: baseUrl, numberOfCards: numberOfCards }),
|
|
25
25
|
showContent && (React.createElement(Text, { cardNumber: cardNumber, eyeButton: eyeButton, cardholderNameUppercase: cardholderNameUppercase, cardholderName: cardholderName, numberOfCards: numberOfCards, align: align, size: size, onEyeIconClick: onEyeIconClick, dataTestId: getDataTestId(dataTestId, 'user-info'), textColor: textColor })),
|
|
26
|
-
contentAddons && (React.createElement("div", __assign({}, contentAddonsProps, { className: cn(styles.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons))
|
|
26
|
+
contentAddons && (React.createElement("div", __assign({}, contentAddonsProps, { className: cn(styles.contentAddons, contentAddonsProps === null || contentAddonsProps === void 0 ? void 0 : contentAddonsProps.className) }), contentAddons)),
|
|
27
|
+
stateType && React.createElement("div", { className: cn(styles.state, styles.hover) }),
|
|
28
|
+
stateType && React.createElement("div", { className: cn(styles.state, styles.active) })));
|
|
27
29
|
};
|
|
28
30
|
|
|
29
31
|
export { Single };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/single/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ImageCard, Overlay, Text } from '../components';\nimport { WIDTH_TO_SIZE } from '../consts';\nimport { type SingleCommonProps } from '../typings';\n\nimport styles from './index.module.css';\n\nexport const Single: FC<SingleCommonProps> = ({\n size = 164,\n icon: Icon,\n cardId,\n layers,\n baseUrl,\n shadow,\n iconColor,\n backgroundColor,\n borderColor,\n textColor,\n overlayProps = { colors: 'default', visible: false },\n eyeButton,\n cardholderNameUppercase,\n cardholderName,\n numberOfСards,\n numberOfCards = numberOfСards,\n align,\n cardNumber,\n className,\n contentAddons,\n contentAddonsProps,\n onEyeIconClick,\n dataTestId,\n}) => {\n const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n const showContent = hasContent && size !== 16 && !contentAddons;\n\n return (\n <div\n className={cn(styles.component
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/single/Component.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ImageCard, Overlay, Text } from '../components';\nimport { WIDTH_TO_SIZE } from '../consts';\nimport { type SingleCommonProps } from '../typings';\n\nimport styles from './index.module.css';\n\nexport const Single: FC<SingleCommonProps> = ({\n size = 164,\n icon: Icon,\n cardId,\n layers,\n baseUrl,\n shadow,\n iconColor,\n backgroundColor,\n borderColor,\n textColor,\n overlayProps = { colors: 'default', visible: false },\n eyeButton,\n cardholderNameUppercase,\n cardholderName,\n numberOfСards,\n numberOfCards = numberOfСards,\n align,\n cardNumber,\n className,\n contentAddons,\n contentAddonsProps,\n onEyeIconClick,\n dataTestId,\n stateType = false,\n}) => {\n const hasContent = Boolean(cardNumber || cardholderName || numberOfCards);\n const showContent = hasContent && size !== 16 && !contentAddons;\n\n return (\n <div\n className={cn(\n styles.component,\n styles[`size-${size}`],\n stateType && styles[stateType],\n className,\n )}\n style={{\n width: WIDTH_TO_SIZE[size],\n height: size,\n boxShadow: shadow,\n backgroundColor,\n }}\n data-test-id={dataTestId}\n >\n {Icon && <Icon color={iconColor} className={styles.icon} />}\n <Overlay colors={overlayProps.colors} visible={overlayProps.visible} />\n\n {borderColor && (\n <div\n className={cn(styles.border)}\n style={{ boxShadow: `inset 0 0 0 1px ${borderColor}` }}\n />\n )}\n\n <ImageCard\n width={WIDTH_TO_SIZE[size]}\n height={size}\n cardId={cardId}\n layers={layers}\n baseUrl={baseUrl}\n numberOfCards={numberOfCards}\n />\n\n {showContent && (\n <Text\n cardNumber={cardNumber}\n eyeButton={eyeButton}\n cardholderNameUppercase={cardholderNameUppercase}\n cardholderName={cardholderName}\n numberOfCards={numberOfCards}\n align={align}\n size={size}\n onEyeIconClick={onEyeIconClick}\n dataTestId={getDataTestId(dataTestId, 'user-info')}\n textColor={textColor}\n />\n )}\n\n {contentAddons && (\n <div\n {...contentAddonsProps}\n className={cn(styles.contentAddons, contentAddonsProps?.className)}\n >\n {contentAddons}\n </div>\n )}\n {stateType && <div className={cn(styles.state, styles.hover)} />}\n {stateType && <div className={cn(styles.state, styles.active)} />}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
package/esm/single/index.css
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--color-light-neutral-500: #babbc2;
|
|
3
|
+
--color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
|
|
4
|
+
--color-light-neutral-translucent-200-inverted: rgba(225, 225, 248, 0.09);
|
|
5
|
+
--color-light-neutral-translucent-400: rgba(5, 11, 44, 0.18);
|
|
6
|
+
--color-light-neutral-translucent-400-inverted: rgba(231, 231, 248, 0.18);
|
|
3
7
|
}
|
|
4
8
|
:root {
|
|
5
9
|
--border-radius-xs: 2px;
|
|
@@ -28,45 +32,110 @@
|
|
|
28
32
|
--gap-12: var(--gap-s);
|
|
29
33
|
--gap-16: var(--gap-m);
|
|
30
34
|
}
|
|
31
|
-
.product-
|
|
35
|
+
.product-cover__component_14a7f {
|
|
32
36
|
display: flex;
|
|
33
37
|
align-items: flex-end;
|
|
34
38
|
position: relative;
|
|
35
39
|
background-color: var(--color-light-neutral-500);
|
|
36
40
|
box-sizing: border-box;
|
|
37
41
|
}
|
|
38
|
-
.product-
|
|
42
|
+
.product-cover__component_14a7f.product-cover__size-164_14a7f {
|
|
39
43
|
border-radius: var(--border-radius-20);
|
|
40
44
|
padding: var(--gap-12) var(--gap-16);
|
|
41
45
|
}
|
|
42
|
-
.product-
|
|
46
|
+
.product-cover__component_14a7f.product-cover__size-128_14a7f {
|
|
43
47
|
border-radius: var(--border-radius-16);
|
|
44
48
|
padding: var(--gap-8) var(--gap-12);
|
|
45
49
|
}
|
|
46
|
-
.product-
|
|
50
|
+
.product-cover__component_14a7f.product-cover__size-96_14a7f {
|
|
47
51
|
border-radius: var(--border-radius-12);
|
|
48
52
|
padding: var(--gap-6) var(--gap-12);
|
|
49
53
|
}
|
|
50
|
-
.product-
|
|
51
|
-
.product-
|
|
54
|
+
.product-cover__component_14a7f.product-cover__size-48_14a7f,
|
|
55
|
+
.product-cover__component_14a7f.product-cover__size-40_14a7f {
|
|
52
56
|
border-radius: var(--border-radius-6);
|
|
53
57
|
padding: var(--gap-2) var(--gap-4);
|
|
54
58
|
}
|
|
55
|
-
.product-
|
|
59
|
+
.product-cover__component_14a7f.product-cover__size-32_14a7f {
|
|
56
60
|
border-radius: var(--border-radius-4);
|
|
57
61
|
padding: var(--gap-0) var(--gap-2);
|
|
58
62
|
}
|
|
59
|
-
.product-
|
|
63
|
+
.product-cover__component_14a7f.product-cover__size-16_14a7f {
|
|
60
64
|
border-radius: var(--border-radius-2);
|
|
61
65
|
}
|
|
62
|
-
.product-
|
|
66
|
+
.product-cover__component_14a7f .product-cover__state_14a7f {
|
|
67
|
+
position: absolute;
|
|
68
|
+
inset: var(--gap-0);
|
|
69
|
+
z-index: 2;
|
|
70
|
+
border-radius: inherit;
|
|
71
|
+
opacity: 0;
|
|
72
|
+
transition: opacity 0.2s;
|
|
73
|
+
will-change: opacity;
|
|
74
|
+
}
|
|
75
|
+
.product-cover__component_14a7f.product-cover__darkening_14a7f .product-cover__hover_14a7f {
|
|
76
|
+
background-color: var(--color-light-neutral-translucent-200);
|
|
77
|
+
}
|
|
78
|
+
.product-cover__component_14a7f.product-cover__darkening_14a7f .product-cover__active_14a7f {
|
|
79
|
+
background-color: var(--color-light-neutral-translucent-400);
|
|
80
|
+
}
|
|
81
|
+
@media (hover: hover) {
|
|
82
|
+
.product-cover__component_14a7f.product-cover__darkening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
.product-cover__component_14a7f.product-cover__darkening_14a7f:active .product-cover__active_14a7f {
|
|
87
|
+
opacity: 1;
|
|
88
|
+
}
|
|
89
|
+
.product-cover__component_14a7f.product-cover__lightening_14a7f .product-cover__hover_14a7f {
|
|
90
|
+
background-color: var(--color-light-neutral-translucent-200-inverted);
|
|
91
|
+
}
|
|
92
|
+
.product-cover__component_14a7f.product-cover__lightening_14a7f .product-cover__active_14a7f {
|
|
93
|
+
background-color: var(--color-light-neutral-translucent-400-inverted);
|
|
94
|
+
}
|
|
95
|
+
@media (hover: hover) {
|
|
96
|
+
.product-cover__component_14a7f.product-cover__lightening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
|
|
97
|
+
opacity: 1;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
.product-cover__component_14a7f.product-cover__lightening_14a7f:active .product-cover__active_14a7f {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
}
|
|
103
|
+
.product-cover__component_14a7f.product-cover__static-darkening_14a7f .product-cover__hover_14a7f {
|
|
104
|
+
background-color: rgba(0, 0, 0, 0.07);
|
|
105
|
+
}
|
|
106
|
+
.product-cover__component_14a7f.product-cover__static-darkening_14a7f .product-cover__active_14a7f {
|
|
107
|
+
background-color: rgba(0, 0, 0, 0.15);
|
|
108
|
+
}
|
|
109
|
+
@media (hover: hover) {
|
|
110
|
+
.product-cover__component_14a7f.product-cover__static-darkening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
|
|
111
|
+
opacity: 1;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
.product-cover__component_14a7f.product-cover__static-darkening_14a7f:active .product-cover__active_14a7f {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
}
|
|
117
|
+
.product-cover__component_14a7f.product-cover__static-lightening_14a7f .product-cover__hover_14a7f {
|
|
118
|
+
background-color: rgba(255, 255, 255, 0.07);
|
|
119
|
+
}
|
|
120
|
+
.product-cover__component_14a7f.product-cover__static-lightening_14a7f .product-cover__active_14a7f {
|
|
121
|
+
background-color: rgba(255, 255, 255, 0.15);
|
|
122
|
+
}
|
|
123
|
+
@media (hover: hover) {
|
|
124
|
+
.product-cover__component_14a7f.product-cover__static-lightening_14a7f:hover:not(:active) .product-cover__hover_14a7f {
|
|
125
|
+
opacity: 1;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
.product-cover__component_14a7f.product-cover__static-lightening_14a7f:active .product-cover__active_14a7f {
|
|
129
|
+
opacity: 1;
|
|
130
|
+
}
|
|
131
|
+
.product-cover__icon_14a7f {
|
|
63
132
|
position: absolute;
|
|
64
133
|
top: 50%;
|
|
65
134
|
left: 50%;
|
|
66
135
|
transform: translate(-50%, -50%);
|
|
67
136
|
z-index: 4;
|
|
68
137
|
}
|
|
69
|
-
.product-
|
|
138
|
+
.product-cover__border_14a7f {
|
|
70
139
|
position: absolute;
|
|
71
140
|
top: var(--gap-0);
|
|
72
141
|
bottom: var(--gap-0);
|
|
@@ -76,7 +145,7 @@
|
|
|
76
145
|
pointer-events: none;
|
|
77
146
|
z-index: 3;
|
|
78
147
|
}
|
|
79
|
-
.product-
|
|
148
|
+
.product-cover__contentAddons_14a7f {
|
|
80
149
|
width: 100%;
|
|
81
150
|
height: 100%;
|
|
82
151
|
z-index: 2;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"product-
|
|
3
|
+
var styles = {"component":"product-cover__component_14a7f","size-164":"product-cover__size-164_14a7f","size-128":"product-cover__size-128_14a7f","size-96":"product-cover__size-96_14a7f","size-48":"product-cover__size-48_14a7f","size-40":"product-cover__size-40_14a7f","size-32":"product-cover__size-32_14a7f","size-16":"product-cover__size-16_14a7f","state":"product-cover__state_14a7f","darkening":"product-cover__darkening_14a7f","hover":"product-cover__hover_14a7f","active":"product-cover__active_14a7f","lightening":"product-cover__lightening_14a7f","static-darkening":"product-cover__static-darkening_14a7f","static-lightening":"product-cover__static-lightening_14a7f","icon":"product-cover__icon_14a7f","border":"product-cover__border_14a7f","contentAddons":"product-cover__contentAddons_14a7f"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../src/single/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n display: flex;\n align-items: flex-end;\n position: relative;\n background-color: var(--color-light-neutral-500);\n box-sizing: border-box;\n\n &.size-164 {\n border-radius: var(--border-radius-20);\n padding: var(--gap-12) var(--gap-16);\n }\n &.size-128 {\n border-radius: var(--border-radius-16);\n padding: var(--gap-8) var(--gap-12);\n }\n &.size-96 {\n border-radius: var(--border-radius-12);\n padding: var(--gap-6) var(--gap-12);\n }\n &.size-48,\n &.size-40 {\n border-radius: var(--border-radius-6);\n padding: var(--gap-2) var(--gap-4);\n }\n &.size-32 {\n border-radius: var(--border-radius-4);\n padding: var(--gap-0) var(--gap-2);\n }\n &.size-16 {\n border-radius: var(--border-radius-2);\n }\n}\n\n.icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 4;\n}\n\n.border {\n position: absolute;\n top: var(--gap-0);\n bottom: var(--gap-0);\n left: var(--gap-0);\n right: var(--gap-0);\n border-radius: inherit;\n pointer-events: none;\n z-index: 3;\n}\n\n.contentAddons {\n width: 100%;\n height: 100%;\n z-index: 2;\n overflow: hidden;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,gCAAgC,CAAC,UAAU,CAAC,+BAA+B,CAAC,UAAU,CAAC,+BAA+B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,MAAM,CAAC,2BAA2B,CAAC,QAAQ,CAAC,6BAA6B,CAAC,eAAe,CAAC,oCAAoC,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../src/single/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n display: flex;\n align-items: flex-end;\n position: relative;\n background-color: var(--color-light-neutral-500);\n box-sizing: border-box;\n\n &.size-164 {\n border-radius: var(--border-radius-20);\n padding: var(--gap-12) var(--gap-16);\n }\n &.size-128 {\n border-radius: var(--border-radius-16);\n padding: var(--gap-8) var(--gap-12);\n }\n &.size-96 {\n border-radius: var(--border-radius-12);\n padding: var(--gap-6) var(--gap-12);\n }\n &.size-48,\n &.size-40 {\n border-radius: var(--border-radius-6);\n padding: var(--gap-2) var(--gap-4);\n }\n &.size-32 {\n border-radius: var(--border-radius-4);\n padding: var(--gap-0) var(--gap-2);\n }\n &.size-16 {\n border-radius: var(--border-radius-2);\n }\n\n & .state {\n position: absolute;\n inset: var(--gap-0);\n z-index: 2;\n border-radius: inherit;\n opacity: 0;\n transition: opacity 0.2s;\n will-change: opacity;\n }\n\n /* prettier-ignore */\n @each $state, $hover, $active in\n (darkening, var(--color-light-neutral-translucent-200), var(--color-light-neutral-translucent-400)),\n (lightening, var(--color-light-neutral-translucent-200-inverted), var(--color-light-neutral-translucent-400-inverted)),\n (static-darkening, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.15)),\n (static-lightening, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.15)) {\n &.$(state) {\n & .hover {\n background-color: $hover;\n }\n & .active {\n background-color: $active;\n }\n @mixin hover {\n &:not(:active) .hover {\n opacity: 1;\n }\n }\n &:active {\n & .active {\n opacity: 1;\n }\n }\n }\n }\n}\n\n.icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 4;\n}\n\n.border {\n position: absolute;\n top: var(--gap-0);\n bottom: var(--gap-0);\n left: var(--gap-0);\n right: var(--gap-0);\n border-radius: inherit;\n pointer-events: none;\n z-index: 3;\n}\n\n.contentAddons {\n width: 100%;\n height: 100%;\n z-index: 2;\n overflow: hidden;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,gCAAgC,CAAC,UAAU,CAAC,+BAA+B,CAAC,UAAU,CAAC,+BAA+B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,SAAS,CAAC,8BAA8B,CAAC,OAAO,CAAC,4BAA4B,CAAC,WAAW,CAAC,gCAAgC,CAAC,OAAO,CAAC,4BAA4B,CAAC,QAAQ,CAAC,6BAA6B,CAAC,YAAY,CAAC,iCAAiC,CAAC,kBAAkB,CAAC,uCAAuC,CAAC,mBAAmB,CAAC,wCAAwC,CAAC,MAAM,CAAC,2BAA2B,CAAC,QAAQ,CAAC,6BAA6B,CAAC,eAAe,CAAC,oCAAoC,CAAC;;;;"}
|