@salutejs/plasma-new-hope 0.245.0-dev.0 → 0.245.1-canary.1668.12889767790.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/cjs/components/Attach/Attach.css +10 -10
- package/cjs/components/Attach/components/AttachButton/AttachButton.css +10 -10
- package/cjs/components/Attach/ui/IconButton/IconButton.styles.js +3 -3
- package/cjs/components/Attach/ui/IconButton/IconButton.styles.js.map +1 -1
- package/cjs/components/Attach/ui/IconButton/IconButton.styles_7clf9d.css +2 -0
- package/cjs/components/Button/Button.css +8 -8
- package/cjs/components/Button/Button.js +8 -2
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +22 -3
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Button/{Button.styles_1sopr3d.css → Button.styles_8cvmld.css} +2 -2
- package/cjs/components/Calendar/CalendarBase/CalendarBase.css +8 -8
- package/cjs/components/Calendar/CalendarDouble/CalendarDouble.css +8 -8
- package/cjs/components/Calendar/ui/CalendarHeader/CalendarHeader.css +8 -8
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +8 -8
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +8 -8
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +8 -8
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +8 -8
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +8 -8
- package/cjs/components/Drawer/Drawer.css +8 -8
- package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +8 -8
- package/cjs/components/EmptyState/EmptyState.css +8 -8
- package/cjs/components/IconButton/IconButton.css +8 -8
- package/cjs/components/Notification/Notification.css +8 -8
- package/cjs/components/Notification/NotificationsProvider.css +8 -8
- package/cjs/components/NumberInput/NumberInput.css +8 -8
- package/cjs/components/Pagination/Pagination.css +8 -8
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +8 -8
- package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +8 -8
- package/cjs/components/Select/Select.css +8 -8
- package/cjs/components/Select/ui/Target/Target.css +8 -8
- package/cjs/components/Select/ui/Target/ui/Button/Button.css +8 -8
- package/cjs/components/Toast/Toast.css +8 -8
- package/cjs/components/Toast/ToastController.css +8 -8
- package/cjs/index.css +10 -10
- package/emotion/cjs/components/Attach/ui/IconButton/IconButton.styles.js +4 -4
- package/emotion/cjs/components/Button/Button.js +8 -2
- package/emotion/cjs/components/Button/Button.styles.js +14 -8
- package/emotion/cjs/components/Button/Button.template-doc.mdx +19 -41
- package/emotion/cjs/components/IconButton/IconButton.template-doc.mdx +13 -6
- package/emotion/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
- package/emotion/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +1 -0
- package/emotion/cjs/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +1 -0
- package/emotion/es/components/Attach/ui/IconButton/IconButton.styles.js +4 -4
- package/emotion/es/components/Button/Button.js +8 -2
- package/emotion/es/components/Button/Button.styles.js +14 -8
- package/emotion/es/components/Button/Button.template-doc.mdx +19 -41
- package/emotion/es/components/IconButton/IconButton.template-doc.mdx +13 -6
- package/emotion/es/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
- package/emotion/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +1 -0
- package/emotion/es/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
- package/emotion/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +1 -0
- package/es/components/Attach/Attach.css +10 -10
- package/es/components/Attach/components/AttachButton/AttachButton.css +10 -10
- package/es/components/Attach/ui/IconButton/IconButton.styles.js +3 -3
- package/es/components/Attach/ui/IconButton/IconButton.styles.js.map +1 -1
- package/es/components/Attach/ui/IconButton/IconButton.styles_7clf9d.css +2 -0
- package/es/components/Button/Button.css +8 -8
- package/es/components/Button/Button.js +8 -2
- package/es/components/Button/Button.js.map +1 -1
- package/es/components/Button/Button.styles.js +22 -3
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Button/{Button.styles_1sopr3d.css → Button.styles_8cvmld.css} +2 -2
- package/es/components/Calendar/CalendarBase/CalendarBase.css +8 -8
- package/es/components/Calendar/CalendarDouble/CalendarDouble.css +8 -8
- package/es/components/Calendar/ui/CalendarHeader/CalendarHeader.css +8 -8
- package/es/components/Combobox/ComboboxNew/Combobox.css +8 -8
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +8 -8
- package/es/components/DatePicker/RangeDate/RangeDate.css +8 -8
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +8 -8
- package/es/components/DatePicker/SingleDate/SingleDate.css +8 -8
- package/es/components/Drawer/Drawer.css +8 -8
- package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +8 -8
- package/es/components/EmptyState/EmptyState.css +8 -8
- package/es/components/IconButton/IconButton.css +8 -8
- package/es/components/Notification/Notification.css +8 -8
- package/es/components/Notification/NotificationsProvider.css +8 -8
- package/es/components/NumberInput/NumberInput.css +8 -8
- package/es/components/Pagination/Pagination.css +8 -8
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +8 -8
- package/es/components/Panel/ui/PanelHeader/PanelHeader.css +8 -8
- package/es/components/Select/Select.css +8 -8
- package/es/components/Select/ui/Target/Target.css +8 -8
- package/es/components/Select/ui/Target/ui/Button/Button.css +8 -8
- package/es/components/Toast/Toast.css +8 -8
- package/es/components/Toast/ToastController.css +8 -8
- package/es/index.css +10 -10
- package/package.json +3 -3
- package/styled-components/cjs/components/Attach/ui/IconButton/IconButton.styles.js +2 -2
- package/styled-components/cjs/components/Button/Button.js +8 -2
- package/styled-components/cjs/components/Button/Button.styles.js +8 -2
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +19 -41
- package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +13 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
- package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +1 -0
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +1 -0
- package/styled-components/es/components/Attach/ui/IconButton/IconButton.styles.js +2 -2
- package/styled-components/es/components/Button/Button.js +8 -2
- package/styled-components/es/components/Button/Button.styles.js +8 -2
- package/styled-components/es/components/Button/Button.template-doc.mdx +19 -41
- package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +13 -6
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +5 -4
- package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +1 -0
- package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +1 -0
- package/types/components/Attach/ui/IconButton/IconButton.styles.d.ts.map +1 -1
- package/types/components/Button/Button.d.ts.map +1 -1
- package/types/components/Button/Button.styles.d.ts +6 -2
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/Button/Button.types.d.ts +5 -9
- package/types/components/Button/Button.types.d.ts.map +1 -1
- package/cjs/components/Attach/ui/IconButton/IconButton.styles_1q2jfs2.css +0 -2
- package/es/components/Attach/ui/IconButton/IconButton.styles_1q2jfs2.css +0 -2
@@ -1,15 +1,16 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import type { ComponentProps } from 'react';
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
|
-
import { disableProps } from '@salutejs/plasma-sb-utils';
|
4
|
+
import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
|
5
5
|
|
6
6
|
import { IconMic } from '../../../../components/_Icon';
|
7
7
|
import { WithTheme } from '../../../_helpers';
|
8
8
|
|
9
9
|
import { Button } from './Button';
|
10
|
+
import { config } from './Button.config';
|
11
|
+
|
12
|
+
const { views, sizes } = getConfigVariations(config);
|
10
13
|
|
11
|
-
const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
12
|
-
const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
|
13
14
|
const stretchingValues = ['auto', 'filled', 'fixed'];
|
14
15
|
const pinValues = [
|
15
16
|
'',
|
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
|
|
79
80
|
},
|
80
81
|
table: { defaultValue: { summary: 'bottom' } },
|
81
82
|
},
|
82
|
-
...disableProps(['value']),
|
83
|
+
...disableProps(['value', 'focused', 'pin']),
|
83
84
|
},
|
84
85
|
};
|
85
86
|
|
@@ -5,8 +5,8 @@ import { tokens as attachTokens } from '../../Attach.tokens';
|
|
5
5
|
var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig);
|
6
6
|
var IconButton = /*#__PURE__*/component(mergedConfig);
|
7
7
|
export var StyledIconButton = /*#__PURE__*/styled(IconButton).withConfig({
|
8
|
-
componentId: "plasma-new-hope__sc-
|
8
|
+
componentId: "plasma-new-hope__sc-5koxke-0"
|
9
9
|
})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");flex-shrink:0;"], iconButtonTokens.iconButtonColor, attachTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, attachTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonLoadingBackgroundColor, iconButtonTokens.iconButtonColorHover, attachTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, attachTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonBackgroundColorActive, iconButtonTokens.iconButtonScaleHover, attachTokens.iconButtonScaleHover, iconButtonTokens.iconButtonScaleActive, attachTokens.iconButtonScaleActive, iconButtonTokens.iconButtonHeight, attachTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, attachTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, attachTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, attachTokens.iconButtonRadius, iconButtonTokens.iconButtonRadiusCircle, attachTokens.iconButtonRadiusCircle, iconButtonTokens.iconButtonFontFamily, attachTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, attachTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, attachTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, attachTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, attachTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, attachTokens.iconButtonLineHeight, iconButtonTokens.iconButtonDisabledOpacity, attachTokens.iconButtonDisabledOpacity, iconButtonTokens.iconButtonFocusColor, attachTokens.iconButtonFocusColor, iconButtonTokens.iconButtonSpinnerColor, attachTokens.iconButtonSpinnerColor, iconButtonTokens.iconButtonSpinnerSize, attachTokens.iconButtonSpinnerSize);
|
10
10
|
export var StyledIconButtonCancel = /*#__PURE__*/styled(IconButton).withConfig({
|
11
|
-
componentId: "plasma-new-hope__sc-
|
11
|
+
componentId: "plasma-new-hope__sc-5koxke-1"
|
12
12
|
})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], iconButtonTokens.iconButtonColor, attachTokens.iconButtonCancelColor, iconButtonTokens.iconButtonBackgroundColor, attachTokens.iconButtonCancelBackgroundColor, iconButtonTokens.iconButtonLoadingBackgroundColor, attachTokens.iconButtonCancelLoadingBackgroundColor, iconButtonTokens.iconButtonColorHover, attachTokens.iconButtonCancelColorHover, iconButtonTokens.iconButtonBackgroundColorHover, attachTokens.iconButtonCancelBackgroundColorHover, iconButtonTokens.iconButtonColorActive, attachTokens.iconButtonCancelColorActive, iconButtonTokens.iconButtonBackgroundColorActive, attachTokens.iconButtonCancelBackgroundColorActive, iconButtonTokens.iconButtonScaleHover, attachTokens.iconButtonCancelScaleHover, iconButtonTokens.iconButtonScaleActive, attachTokens.iconButtonCancelScaleActive, iconButtonTokens.iconButtonHeight, attachTokens.iconButtonCancelHeight, iconButtonTokens.iconButtonWidth, attachTokens.iconButtonCancelWidth, iconButtonTokens.iconButtonPadding, attachTokens.iconButtonCancelPadding, iconButtonTokens.iconButtonRadius, attachTokens.iconButtonCancelRadius, iconButtonTokens.iconButtonRadiusCircle, attachTokens.iconButtonCancelRadiusCircle, iconButtonTokens.iconButtonFontFamily, attachTokens.iconButtonCancelFontFamily, iconButtonTokens.iconButtonFontSize, attachTokens.iconButtonCancelFontSize, iconButtonTokens.iconButtonFontStyle, attachTokens.iconButtonCancelFontStyle, iconButtonTokens.iconButtonFontWeight, attachTokens.iconButtonCancelFontWeight, iconButtonTokens.iconButtonLetterSpacing, attachTokens.iconButtonCancelLetterSpacing, iconButtonTokens.iconButtonLineHeight, attachTokens.iconButtonCancelLineHeight, iconButtonTokens.iconButtonDisabledOpacity, attachTokens.iconButtonCancelDisabledOpacity, iconButtonTokens.iconButtonFocusColor, attachTokens.iconButtonCancelFocusColor, iconButtonTokens.iconButtonSpinnerColor, attachTokens.iconButtonCancelSpinnerColor, iconButtonTokens.iconButtonSpinnerSize, attachTokens.iconButtonCancelSpinnerSize);
|
@@ -46,6 +46,8 @@ export var buttonRoot = function buttonRoot(Root) {
|
|
46
46
|
stretching = _props$stretching === void 0 ? 'auto' : _props$stretching,
|
47
47
|
rest = _objectWithoutProperties(props, _excluded);
|
48
48
|
var txt = typeof children === 'string' ? children : text;
|
49
|
+
var hasRightContentMargin = Boolean(txt || value || contentRight);
|
50
|
+
var hasLeftContentMargin = Boolean(contentLeft ? contentLeft && (txt || value) : txt || value);
|
49
51
|
var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
|
50
52
|
var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
|
51
53
|
var squareClass = square ? classes.buttonSquare : undefined;
|
@@ -73,9 +75,13 @@ export var buttonRoot = function buttonRoot(Root) {
|
|
73
75
|
}, rest), /*#__PURE__*/React.createElement(LoadWrap, {
|
74
76
|
contentPlacing: contentPlacementValue,
|
75
77
|
isLoading: isLoading
|
76
|
-
}, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft,
|
78
|
+
}, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, {
|
79
|
+
hasContentMargin: hasRightContentMargin
|
80
|
+
}, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
|
77
81
|
className: contentRelaxedClass
|
78
|
-
}, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight,
|
82
|
+
}, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, {
|
83
|
+
hasContentMargin: hasLeftContentMargin
|
84
|
+
}, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
|
79
85
|
});
|
80
86
|
};
|
81
87
|
export var buttonConfig = {
|
@@ -35,10 +35,16 @@ export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
|
|
35
35
|
})(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
|
36
36
|
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
37
37
|
componentId: "plasma-new-hope__sc-9d9bqj-5"
|
38
|
-
})(["display:flex;
|
38
|
+
})(["display:flex;align-self:var(", ");margin:", ";"], tokens.buttonLeftContentAlignSelf, function (_ref3) {
|
39
|
+
var hasContentMargin = _ref3.hasContentMargin;
|
40
|
+
return hasContentMargin ? "var(".concat(tokens.buttonLeftContentMargin, ")") : 0;
|
41
|
+
});
|
39
42
|
export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
|
40
43
|
componentId: "plasma-new-hope__sc-9d9bqj-6"
|
41
|
-
})(["display:flex;
|
44
|
+
})(["display:flex;align-self:var(", ");margin:", ";"], tokens.buttonRightContentAlignSelf, function (_ref4) {
|
45
|
+
var hasContentMargin = _ref4.hasContentMargin;
|
46
|
+
return hasContentMargin ? "var(".concat(tokens.buttonRightContentMargin, ")") : 0;
|
47
|
+
});
|
42
48
|
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE:\n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
|
43
49
|
|
44
50
|
// INFO: Для возможности переиспользования стилей в других компонентах
|
@@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components';
|
|
8
8
|
# Button
|
9
9
|
Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.
|
10
10
|
|
11
|
-
## Button
|
12
11
|
<Description name="Button" />
|
13
12
|
<PropsTable name="Button" />
|
14
13
|
|
@@ -34,20 +33,13 @@ export function App() {
|
|
34
33
|
<div>
|
35
34
|
<Button text="Текст" />
|
36
35
|
|
37
|
-
<Button text="Текст" contentLeft={<IconDownload />} />
|
36
|
+
<Button text="Текст" contentLeft={<IconDownload color="inherit" />} />
|
38
37
|
|
39
|
-
<Button text="Текст" contentRight={<IconDownload />} />
|
40
|
-
|
41
|
-
<Button contentLeft={<IconDownload />} />
|
38
|
+
<Button text="Текст" contentRight={<IconDownload color="inherit" />} />
|
42
39
|
|
43
40
|
<Button text="Текст" isLoading />
|
44
41
|
|
45
42
|
<Button text="Текст" isLoading loader={<div>Loader...</div>} />
|
46
|
-
|
47
|
-
<Button>
|
48
|
-
<IconDownload />
|
49
|
-
<span>Текст</span>
|
50
|
-
</Button>
|
51
43
|
</div>
|
52
44
|
);
|
53
45
|
}
|
@@ -56,7 +48,7 @@ export function App() {
|
|
56
48
|
## Примеры
|
57
49
|
|
58
50
|
### Размер кнопки
|
59
|
-
Размер кнопки задается с помощью свойства `size
|
51
|
+
Размер кнопки задается с помощью свойства `size`:
|
60
52
|
|
61
53
|
```tsx live
|
62
54
|
import React from 'react';
|
@@ -64,11 +56,13 @@ import { Button } from '@salutejs/{{ package }}';
|
|
64
56
|
|
65
57
|
export function App() {
|
66
58
|
return (
|
67
|
-
|
59
|
+
<div>
|
68
60
|
<Button text="Button" size="xl" />
|
69
61
|
<Button text="Button" size="l" />
|
70
62
|
<Button text="Button" size="m" />
|
71
63
|
<Button text="Button" size="s" />
|
64
|
+
<Button text="Button" size="xs" />
|
65
|
+
<Button text="Button" size="xxs" />
|
72
66
|
</div>
|
73
67
|
);
|
74
68
|
}
|
@@ -118,13 +112,17 @@ export function App() {
|
|
118
112
|
|
119
113
|
### Вид кнопки
|
120
114
|
Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
|
115
|
+
+ `"default"` – по умолчанию;
|
116
|
+
+ `"accent"` – акцентная;
|
121
117
|
+ `"primary"` – основная;
|
122
118
|
+ `"secondary"` – вторичная;
|
119
|
+
+ `"clear"` – без цветового сопровождения.
|
123
120
|
+ `"success"` – успешное завершение;
|
124
121
|
+ `"warning"` – предупреждение;
|
125
122
|
+ `"critical"` – ошибка;
|
126
|
-
+ `"
|
127
|
-
+ `"
|
123
|
+
+ `"dark"` – темная;
|
124
|
+
+ `"black"` – черная;
|
125
|
+
+ `"white"` – белая.
|
128
126
|
|
129
127
|
```tsx live
|
130
128
|
import React from 'react';
|
@@ -132,15 +130,18 @@ import { Button } from '@salutejs/{{ package }}';
|
|
132
130
|
|
133
131
|
export function App() {
|
134
132
|
return (
|
135
|
-
<div>
|
133
|
+
<div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
|
134
|
+
<Button text="Кнопка" size="s" view="default" />
|
136
135
|
<Button text="Кнопка" size="s" view="primary" />
|
136
|
+
<Button text="Кнопка" size="s" view="accent" />
|
137
137
|
<Button text="Кнопка" size="s" view="secondary" />
|
138
|
+
<Button text="Кнопка" size="s" view="clear" />
|
138
139
|
<Button text="Кнопка" size="s" view="success" />
|
139
140
|
<Button text="Кнопка" size="s" view="warning" />
|
140
141
|
<Button text="Кнопка" size="s" view="critical" />
|
141
|
-
<Button text="Кнопка" size="s" view="
|
142
|
-
<Button text="Кнопка" size="s" view="
|
143
|
-
<Button text="Кнопка" size="s" view="
|
142
|
+
<Button text="Кнопка" size="s" view="dark" />
|
143
|
+
<Button text="Кнопка" size="s" view="black" />
|
144
|
+
<Button text="Кнопка" size="s" view="white" />
|
144
145
|
</div>
|
145
146
|
);
|
146
147
|
}
|
@@ -171,29 +172,6 @@ export function App() {
|
|
171
172
|
}
|
172
173
|
```
|
173
174
|
|
174
|
-
### Квадратные и круглые кнопки
|
175
|
-
Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**,
|
176
|
-
используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение.
|
177
|
-
|
178
|
-
По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`.
|
179
|
-
**Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`.
|
180
|
-
|
181
|
-
```tsx live
|
182
|
-
import React from 'react';
|
183
|
-
import { Button } from '@salutejs/{{ package }}';
|
184
|
-
import { IconDownload } from '@salutejs/plasma-icons';
|
185
|
-
|
186
|
-
export function App() {
|
187
|
-
return (
|
188
|
-
<div>
|
189
|
-
<Button contentLeft={<IconDownload color="inherit" />} />
|
190
|
-
|
191
|
-
<Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
|
192
|
-
</div>
|
193
|
-
);
|
194
|
-
}
|
195
|
-
```
|
196
|
-
|
197
175
|
### Гиперссылка
|
198
176
|
Компонент поддерживает вывод в виде тега `<a>`, для этого необходимо указать свойство `as`:
|
199
177
|
|
@@ -44,6 +44,9 @@ import { IconClose } from '@salutejs/plasma-icons';
|
|
44
44
|
export function App() {
|
45
45
|
return (
|
46
46
|
<div>
|
47
|
+
<IconButton size="xl">
|
48
|
+
<IconClose color="inherit" />
|
49
|
+
</IconButton>
|
47
50
|
<IconButton size="l">
|
48
51
|
<IconClose color="inherit" />
|
49
52
|
</IconButton>
|
@@ -66,11 +69,12 @@ export function App() {
|
|
66
69
|
|
67
70
|
Возможные значения свойства `view`:
|
68
71
|
+ `"default"` – по умолчанию;
|
72
|
+
+ `"accent"` – акцентная;
|
69
73
|
+ `"secondary"` – вторичная;
|
74
|
+
+ `"clear"` – без цветового сопровождения.
|
70
75
|
+ `"success"` – успешное завершение;
|
71
76
|
+ `"warning"` – предупреждение;
|
72
77
|
+ `"critical"` – ошибка;
|
73
|
-
+ `"clear"` – без цветового сопровождения;
|
74
78
|
+ `"dark"` – темная;
|
75
79
|
+ `"black"` – черная;
|
76
80
|
+ `"white"` – белая.
|
@@ -82,13 +86,19 @@ import { IconClose } from '@salutejs/plasma-icons';
|
|
82
86
|
|
83
87
|
export function App() {
|
84
88
|
return (
|
85
|
-
<div>
|
89
|
+
<div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
|
86
90
|
<IconButton size="s" view="default">
|
87
91
|
<IconClose color="inherit" />
|
88
92
|
</IconButton>
|
93
|
+
<IconButton size="s" view="accent">
|
94
|
+
<IconClose color="inherit" />
|
95
|
+
</IconButton>
|
89
96
|
<IconButton size="s" view="secondary">
|
90
97
|
<IconClose color="inherit" />
|
91
98
|
</IconButton>
|
99
|
+
<IconButton size="s" view="clear">
|
100
|
+
<IconClose color="inherit" />
|
101
|
+
</IconButton>
|
92
102
|
<IconButton size="s" view="success">
|
93
103
|
<IconClose color="inherit" />
|
94
104
|
</IconButton>
|
@@ -98,9 +108,6 @@ export function App() {
|
|
98
108
|
<IconButton size="s" view="critical">
|
99
109
|
<IconClose color="inherit" />
|
100
110
|
</IconButton>
|
101
|
-
<IconButton size="s" view="clear">
|
102
|
-
<IconClose color="inherit" />
|
103
|
-
</IconButton>
|
104
111
|
<IconButton size="s" view="dark">
|
105
112
|
<IconClose color="inherit" />
|
106
113
|
</IconButton>
|
@@ -128,7 +135,7 @@ import { IconClose } from '@salutejs/plasma-icons';
|
|
128
135
|
|
129
136
|
export function App() {
|
130
137
|
return (
|
131
|
-
<div>
|
138
|
+
<div style=\{{ display: 'flex', flexWrap: 'wrap' }}>
|
132
139
|
<IconButton pin="square-square">
|
133
140
|
<IconClose color="inherit" />
|
134
141
|
</IconButton>
|
@@ -1,15 +1,16 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import type { ComponentProps } from 'react';
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
|
-
import { disableProps } from '@salutejs/plasma-sb-utils';
|
4
|
+
import { disableProps, getConfigVariations } from '@salutejs/plasma-sb-utils';
|
5
5
|
|
6
6
|
import { IconMic } from '../../../../components/_Icon';
|
7
7
|
import { WithTheme } from '../../../_helpers';
|
8
8
|
|
9
9
|
import { Button } from './Button';
|
10
|
+
import { config } from './Button.config';
|
11
|
+
|
12
|
+
const { views, sizes } = getConfigVariations(config);
|
10
13
|
|
11
|
-
const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
12
|
-
const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
|
13
14
|
const stretchingValues = ['auto', 'filled', 'fixed'];
|
14
15
|
const pinValues = [
|
15
16
|
'',
|
@@ -79,7 +80,7 @@ const meta: Meta<typeof Button> = {
|
|
79
80
|
},
|
80
81
|
table: { defaultValue: { summary: 'bottom' } },
|
81
82
|
},
|
82
|
-
...disableProps(['value']),
|
83
|
+
...disableProps(['value', 'focused', 'pin']),
|
83
84
|
},
|
84
85
|
};
|
85
86
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/IconButton/IconButton.styles.
|
1
|
+
{"version":3,"file":"IconButton.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Attach/ui/IconButton/IconButton.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA8B5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA4BlC,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU/C,OAAO,KAAK,EAAE,WAAW,EAA0B,MAAM,gBAAgB,CAAC;AAa1E,eAAO,MAAM,UAAU,SAAU,UAAU,iBAAiB,EAAE,WAAW,CAAC,
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU/C,OAAO,KAAK,EAAE,WAAW,EAA0B,MAAM,gBAAgB,CAAC;AAa1E,eAAO,MAAM,UAAU,SAAU,UAAU,iBAAiB,EAAE,WAAW,CAAC,uGAgFpE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBAlFQ,UAAU,iBAAiB,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHzE,CAAC"}
|
@@ -22,8 +22,12 @@ export declare const StyledSpinner: import("@linaria/react").StyledMeta & import
|
|
22
22
|
size?: undefined;
|
23
23
|
view?: string | undefined;
|
24
24
|
} & import("react").RefAttributes<HTMLDivElement>))>;
|
25
|
-
export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> &
|
26
|
-
|
25
|
+
export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
26
|
+
hasContentMargin?: boolean | undefined;
|
27
|
+
}>;
|
28
|
+
export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
29
|
+
hasContentMargin?: boolean | undefined;
|
30
|
+
}>;
|
27
31
|
export declare const base: import("@linaria/core").LinariaClassName;
|
28
32
|
export declare const baseContent: string;
|
29
33
|
//# sourceMappingURL=Button.styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,UAAU,uKAWtB,CAAC;AAEF,eAAO,MAAM,WAAW,uKAQvB,CAAC;AAGF,eAAO,MAAM,QAAQ;oBAAgC,MAAM;;EAO1D,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,
|
1
|
+
{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,UAAU,uKAWtB,CAAC;AAEF,eAAO,MAAM,WAAW,uKAQvB,CAAC;AAGF,eAAO,MAAM,QAAQ;oBAAgC,MAAM;;EAO1D,CAAC;AAEF,eAAO,MAAM,MAAM,qKAElB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;oDAGzB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;EAK7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;EAK9B,CAAC;AAEF,eAAO,MAAM,IAAI,0CA0BhB,CAAC;AAGF,eAAO,MAAM,WAAW,QA6FvB,CAAC"}
|
@@ -51,8 +51,7 @@ declare type CustomButtonProps = {
|
|
51
51
|
loader?: ReactNode;
|
52
52
|
/**
|
53
53
|
* Кнопка растягивается на всю доступную ширину
|
54
|
-
* @deprecated
|
55
|
-
* Использовать stretching
|
54
|
+
* @deprecated Использовать stretching
|
56
55
|
*/
|
57
56
|
stretch?: boolean;
|
58
57
|
/**
|
@@ -66,8 +65,7 @@ declare type CustomButtonProps = {
|
|
66
65
|
stretching?: Stretching;
|
67
66
|
/**
|
68
67
|
* Кнопка принимает соотношение сторон 1:1
|
69
|
-
* @deprecated
|
70
|
-
* Использовать для этого случая IconButton
|
68
|
+
* @deprecated Использовать для этого случая IconButton
|
71
69
|
*/
|
72
70
|
square?: boolean;
|
73
71
|
/**
|
@@ -75,7 +73,7 @@ declare type CustomButtonProps = {
|
|
75
73
|
*/
|
76
74
|
focused?: boolean;
|
77
75
|
/**
|
78
|
-
*
|
76
|
+
* Кнопка неактивна
|
79
77
|
*/
|
80
78
|
disabled?: boolean;
|
81
79
|
/**
|
@@ -92,8 +90,7 @@ declare type CustomButtonProps = {
|
|
92
90
|
size?: string;
|
93
91
|
/**
|
94
92
|
* Добавить рамку при фокусе
|
95
|
-
* @deprecated
|
96
|
-
* использовать focused
|
93
|
+
* @deprecated использовать focused
|
97
94
|
*/
|
98
95
|
outlined?: boolean;
|
99
96
|
/**
|
@@ -108,8 +105,7 @@ declare type CustomButtonProps = {
|
|
108
105
|
shiftRight?: boolean;
|
109
106
|
/**
|
110
107
|
* Степень размытия фона
|
111
|
-
* @deprecated
|
112
|
-
* для кнопок без прозрачности не работает
|
108
|
+
* @deprecated для кнопок без прозрачности не работает
|
113
109
|
*/
|
114
110
|
blur?: Blur;
|
115
111
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,aAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5C,aAAK,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEtD,oBAAY,sBAAsB,GAAG;KAChC,CAAC,IAAI,cAAc,GAAG,mBAAmB;CAC7C,CAAC;AAEF,aAAK,YAAY,GACX;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,aAAK,iBAAiB,GAAG;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB
|
1
|
+
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,aAAK,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAC5C,aAAK,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEtD,oBAAY,sBAAsB,GAAG;KAChC,CAAC,IAAI,cAAc,GAAG,mBAAmB;CAC7C,CAAC;AAEF,aAAK,YAAY,GACX;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,aAAK,iBAAiB,GAAG;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,oBAAY,WAAW,CAAC,CAAC,GAAG,WAAW,IAAI,EAAE,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAClF,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GACrC,OAAO,GACP,iBAAiB,GACjB,YAAY,CAAC"}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
.s15ptif0{--plasma-icon-button-color:var(--plasma-attach-icon-button-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-spinner-size);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
|
2
|
-
.shuaj1a{--plasma-icon-button-color:var(--plasma-attach-icon-button-cancel-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-cancel-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-cancel-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-cancel-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-cancel-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-cancel-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-cancel-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-cancel-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-cancel-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-cancel-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-cancel-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-cancel-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-cancel-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-cancel-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-cancel-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-cancel-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-cancel-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-cancel-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-cancel-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-cancel-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-cancel-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-cancel-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-cancel-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-cancel-spinner-size);}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
.s15ptif0{--plasma-icon-button-color:var(--plasma-attach-icon-button-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-spinner-size);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
|
2
|
-
.shuaj1a{--plasma-icon-button-color:var(--plasma-attach-icon-button-cancel-color);--plasma-icon-button-background-color:var(--plasma-attach-icon-button-cancel-background-color);--plasma-icon-button-loading-background-color:var(--plasma-attach-icon-button-cancel-loading-background-color);--plasma-icon-button-color-hover:var(--plasma-attach-icon-button-cancel-color-hover);--plasma-icon-button-background-color-hover:var(--plasma-attach-icon-button-cancel-background-color-hover);--plasma-icon-button-color-active:var(--plasma-attach-icon-button-cancel-color-active);--plasma-icon-button-background-color-active:var(--plasma-attach-icon-button-cancel-background-color-active);--plasma-icon-button-scale-hover:var(--plasma-attach-icon-button-cancel-scale-hover);---plasma-icon-button-scale-active:var(---plasma-attach-icon-button-cancel-scale-active);--plasma-icon-button-height:var(--plasma-attach-icon-button-cancel-height);--plasma-icon-button-width:var(--plasma-attach-icon-button-cancel-width);--plasma-icon-button-padding:var(--plasma-attach-icon-button-cancel-padding);--plasma-icon-button-radius:var(--plasma-attach-icon-button-cancel-radius);--plasma-icon-button-radius-circle:var(--plasma-attach-icon-button-cancel-radius-circle);--plasma-icon-button-font-family:var(--plasma-attach-icon-button-cancel-font-family);--plasma-icon-button-font-size:var(--plasma-attach-icon-button-cancel-font-size);--plasma-icon-button-font-style:var(--plasma-attach-icon-button-cancel-font-style);--plasma-icon-button-font-weight:var(--plasma-attach-icon-button-cancel-font-weight);--plasma-icon-button-letter-spacing:var(--plasma-attach-icon-button-cancel-letter-spacing);--plasma-icon-button-line-height:var(--plasma-attach-icon-button-cancel-line-height);--plasma-icon-button-disabled-opacity:var(--plasma-attach-icon-button-cancel-disabled-opacity);--plasma-icon-button-focus-color:var(--plasma-attach-icon-button-cancel-focus-color);--plasma-icon-button-spinner-color:var(--plasma-attach-icon-button-cancel-spinner-color);--plasma-icon-button-spinner-size:var(--plasma-attach-icon-button-cancel-spinner-size);}
|