@salutejs/plasma-new-hope 0.263.0-canary.1762.13280637086.0 → 0.263.0-canary.1767.13281662079.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +4 -4
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/Combobox.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -4
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -4
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +4 -4
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +4 -4
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +4 -4
- package/cjs/components/Dropdown/Dropdown.css +4 -4
- package/cjs/components/Dropdown/ui/DropdownOld/DropdownOld.css +4 -4
- package/cjs/components/Pagination/Pagination.css +4 -4
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +4 -4
- package/cjs/components/Popover/Popover.css +4 -4
- package/cjs/components/Popover/Popover.styles.js +1 -1
- package/cjs/components/Popover/Popover.styles.js.map +1 -1
- package/cjs/components/Popover/Popover.styles_ji8em4.css +4 -0
- package/cjs/components/Popover/Popover.tokens.js +1 -0
- package/cjs/components/Popover/Popover.tokens.js.map +1 -1
- package/cjs/components/Range/Range.css +4 -4
- package/cjs/components/Select/Select.css +4 -4
- package/cjs/components/Select/ui/Target/Target.css +4 -4
- package/cjs/components/Select/ui/Target/ui/Textfield/Textfield.css +4 -4
- package/cjs/components/Slider/Slider.css +4 -4
- package/cjs/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +4 -4
- package/cjs/components/TextArea/ui/Hint/Hint.css +4 -4
- package/cjs/components/TextField/ui/Hint/Hint.css +4 -4
- package/cjs/index.css +4 -4
- package/emotion/cjs/components/Checkbox/Checkbox.template-doc.mdx +0 -6
- package/emotion/cjs/components/Popover/Popover.styles.js +4 -4
- package/emotion/cjs/components/Popover/Popover.tokens.js +1 -0
- package/emotion/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +12 -19
- package/emotion/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +5 -15
- package/emotion/cjs/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx +3 -1
- package/emotion/cjs/examples/plasma_b2c/components/Popover/style.css +4 -0
- package/emotion/cjs/examples/plasma_web/components/Checkbox/Checkbox.config.js +12 -19
- package/emotion/cjs/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +5 -15
- package/emotion/cjs/examples/plasma_web/components/Popover/Popover.config.js +1 -1
- package/emotion/cjs/examples/plasma_web/components/Popover/Popover.stories.tsx +3 -1
- package/emotion/cjs/examples/plasma_web/components/Popover/style.css +4 -0
- package/emotion/es/components/Checkbox/Checkbox.template-doc.mdx +0 -6
- package/emotion/es/components/Popover/Popover.styles.js +4 -4
- package/emotion/es/components/Popover/Popover.tokens.js +1 -0
- package/emotion/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +12 -19
- package/emotion/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +5 -15
- package/emotion/es/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx +3 -1
- package/emotion/es/examples/plasma_b2c/components/Popover/style.css +4 -0
- package/emotion/es/examples/plasma_web/components/Checkbox/Checkbox.config.js +12 -19
- package/emotion/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +5 -15
- package/emotion/es/examples/plasma_web/components/Popover/Popover.config.js +1 -1
- package/emotion/es/examples/plasma_web/components/Popover/Popover.stories.tsx +3 -1
- package/emotion/es/examples/plasma_web/components/Popover/style.css +4 -0
- package/es/components/Autocomplete/Autocomplete.css +4 -4
- package/es/components/Combobox/ComboboxNew/Combobox.css +4 -4
- package/es/components/Combobox/ComboboxOld/Combobox.css +4 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -4
- package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -4
- package/es/components/DatePicker/RangeDate/RangeDate.css +4 -4
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +4 -4
- package/es/components/DatePicker/SingleDate/SingleDate.css +4 -4
- package/es/components/Dropdown/Dropdown.css +4 -4
- package/es/components/Dropdown/ui/DropdownOld/DropdownOld.css +4 -4
- package/es/components/Pagination/Pagination.css +4 -4
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +4 -4
- package/es/components/Popover/Popover.css +4 -4
- package/es/components/Popover/Popover.styles.js +1 -1
- package/es/components/Popover/Popover.styles.js.map +1 -1
- package/es/components/Popover/Popover.styles_ji8em4.css +4 -0
- package/es/components/Popover/Popover.tokens.js +1 -0
- package/es/components/Popover/Popover.tokens.js.map +1 -1
- package/es/components/Range/Range.css +4 -4
- package/es/components/Select/Select.css +4 -4
- package/es/components/Select/ui/Target/Target.css +4 -4
- package/es/components/Select/ui/Target/ui/Textfield/Textfield.css +4 -4
- package/es/components/Slider/Slider.css +4 -4
- package/es/components/Slider/components/DoubleUncontrolled/DoubleUncontrolled.css +4 -4
- package/es/components/TextArea/ui/Hint/Hint.css +4 -4
- package/es/components/TextField/ui/Hint/Hint.css +4 -4
- package/es/index.css +4 -4
- package/package.json +2 -2
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +0 -6
- package/styled-components/cjs/components/Popover/Popover.styles.js +3 -3
- package/styled-components/cjs/components/Popover/Popover.tokens.js +1 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +1 -8
- package/styled-components/cjs/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +5 -15
- package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Popover/Popover.stories.tsx +3 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Popover/style.css +4 -0
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.config.js +1 -8
- package/styled-components/cjs/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +5 -15
- package/styled-components/cjs/examples/plasma_web/components/Popover/Popover.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Popover/Popover.stories.tsx +3 -1
- package/styled-components/cjs/examples/plasma_web/components/Popover/style.css +4 -0
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +0 -6
- package/styled-components/es/components/Popover/Popover.styles.js +3 -3
- package/styled-components/es/components/Popover/Popover.tokens.js +1 -0
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js +1 -8
- package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx +5 -15
- package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.config.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Popover/Popover.stories.tsx +3 -1
- package/styled-components/es/examples/plasma_b2c/components/Popover/style.css +4 -0
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.config.js +1 -8
- package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx +5 -15
- package/styled-components/es/examples/plasma_web/components/Popover/Popover.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Popover/Popover.stories.tsx +3 -1
- package/styled-components/es/examples/plasma_web/components/Popover/style.css +4 -0
- package/types/components/Popover/Popover.styles.d.ts.map +1 -1
- package/types/components/Popover/Popover.tokens.d.ts +1 -0
- package/types/components/Popover/Popover.tokens.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.config.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Checkbox/Checkbox.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Popover/Popover.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.config.d.ts +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Checkbox/Checkbox.d.ts +1 -1
- package/types/examples/plasma_web/components/Popover/Popover.config.d.ts.map +1 -1
- package/cjs/components/Popover/Popover.styles_15l7isk.css +0 -4
- package/es/components/Popover/Popover.styles_15l7isk.css +0 -4
@@ -3,9 +3,12 @@ import type { ComponentProps } from 'react';
|
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
4
|
import { action } from '@storybook/addon-actions';
|
5
5
|
|
6
|
-
import {
|
6
|
+
import { checkboxConfig } from '../../../../components/Checkbox';
|
7
|
+
import { mergeConfig } from '../../../../engines';
|
8
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
7
9
|
import { Link } from '../Link/Link';
|
8
10
|
|
11
|
+
import { config } from './Checkbox.config';
|
9
12
|
import { Checkbox } from './Checkbox';
|
10
13
|
|
11
14
|
const onChange = action('onChange');
|
@@ -16,20 +19,7 @@ const meta: Meta<typeof Checkbox> = {
|
|
16
19
|
title: 'b2c/Data Entry/Checkbox',
|
17
20
|
decorators: [WithTheme],
|
18
21
|
component: Checkbox,
|
19
|
-
argTypes:
|
20
|
-
view: {
|
21
|
-
options: ['accent'],
|
22
|
-
control: {
|
23
|
-
type: 'radio',
|
24
|
-
},
|
25
|
-
},
|
26
|
-
size: {
|
27
|
-
options: ['m', 's'],
|
28
|
-
control: {
|
29
|
-
type: 'radio',
|
30
|
-
},
|
31
|
-
},
|
32
|
-
},
|
22
|
+
argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
|
33
23
|
args: {
|
34
24
|
view: 'accent',
|
35
25
|
size: 'm',
|
@@ -12,7 +12,7 @@ var config = exports.config = {
|
|
12
12
|
},
|
13
13
|
variations: {
|
14
14
|
view: {
|
15
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], _Popover.popoverTokens.arrowMaskWidth, _Popover.popoverTokens.arrowMaskHeight, _Popover.popoverTokens.arrowMaskImage, _Popover.popoverTokens.arrowHeight, _Popover.popoverTokens.arrowEdgeMargin, _Popover.popoverTokens.arrowBackground)
|
15
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--shadow-down-hard-m);", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], _Popover.popoverTokens.boxShadow, _Popover.popoverTokens.arrowMaskWidth, _Popover.popoverTokens.arrowMaskHeight, _Popover.popoverTokens.arrowMaskImage, _Popover.popoverTokens.arrowHeight, _Popover.popoverTokens.arrowEdgeMargin, _Popover.popoverTokens.arrowBackground)
|
16
16
|
}
|
17
17
|
}
|
18
18
|
};
|
@@ -8,6 +8,8 @@ import { WithTheme } from '../../../_helpers';
|
|
8
8
|
|
9
9
|
import { Popover } from './Popover';
|
10
10
|
|
11
|
+
import './style.css';
|
12
|
+
|
11
13
|
const meta: Meta<typeof Popover> = {
|
12
14
|
title: 'b2c/Overlay/Popover',
|
13
15
|
decorators: [WithTheme],
|
@@ -81,7 +83,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
|
|
81
83
|
const StyledContent = styled.div`
|
82
84
|
background: var(--surface-solid-tertiary);
|
83
85
|
padding: 1rem;
|
84
|
-
border-radius:
|
86
|
+
border-radius: var(--popover-border-radius);
|
85
87
|
|
86
88
|
display: flex;
|
87
89
|
flex-direction: column;
|
@@ -22,20 +22,13 @@ var config = exports.config = {
|
|
22
22
|
* Вид контрола.
|
23
23
|
*/
|
24
24
|
view: {
|
25
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
26
|
-
// deprecated
|
27
25
|
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
28
|
-
// deprecated
|
29
26
|
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
30
|
-
// deprecated
|
31
27
|
tertiary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
32
|
-
// deprecated
|
33
28
|
paragraph: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
34
|
-
|
29
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
35
30
|
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
36
|
-
// deprecated
|
37
31
|
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor),
|
38
|
-
// deprecated
|
39
32
|
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Checkbox.checkboxTokens.fillColor, _Checkbox.checkboxTokens.iconColor, _Checkbox.checkboxTokens.descriptionColor, _Checkbox.checkboxTokens.triggerBackgroundColor, _Checkbox.checkboxTokens.triggerBorderColor)
|
40
33
|
},
|
41
34
|
disabled: {
|
@@ -3,9 +3,12 @@ import type { ComponentProps } from 'react';
|
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
4
|
import { action } from '@storybook/addon-actions';
|
5
5
|
|
6
|
-
import {
|
6
|
+
import { checkboxConfig } from '../../../../components/Checkbox';
|
7
|
+
import { mergeConfig } from '../../../../engines';
|
8
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
7
9
|
import { Link } from '../Link/Link';
|
8
10
|
|
11
|
+
import { config } from './Checkbox.config';
|
9
12
|
import { Checkbox } from './Checkbox';
|
10
13
|
|
11
14
|
const onChange = action('onChange');
|
@@ -16,20 +19,7 @@ const meta: Meta<typeof Checkbox> = {
|
|
16
19
|
title: 'web/Data Entry/Checkbox',
|
17
20
|
decorators: [WithTheme],
|
18
21
|
component: Checkbox,
|
19
|
-
argTypes:
|
20
|
-
view: {
|
21
|
-
options: ['accent'],
|
22
|
-
control: {
|
23
|
-
type: 'radio',
|
24
|
-
},
|
25
|
-
},
|
26
|
-
size: {
|
27
|
-
options: ['m', 's'],
|
28
|
-
control: {
|
29
|
-
type: 'radio',
|
30
|
-
},
|
31
|
-
},
|
32
|
-
},
|
22
|
+
argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
|
33
23
|
args: {
|
34
24
|
view: 'accent',
|
35
25
|
size: 'm',
|
@@ -12,7 +12,7 @@ var config = exports.config = {
|
|
12
12
|
},
|
13
13
|
variations: {
|
14
14
|
view: {
|
15
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], _Popover.popoverTokens.arrowMaskWidth, _Popover.popoverTokens.arrowMaskHeight, _Popover.popoverTokens.arrowMaskImage, _Popover.popoverTokens.arrowHeight, _Popover.popoverTokens.arrowEdgeMargin, _Popover.popoverTokens.arrowBackground)
|
15
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--shadow-down-hard-m);", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], _Popover.popoverTokens.boxShadow, _Popover.popoverTokens.arrowMaskWidth, _Popover.popoverTokens.arrowMaskHeight, _Popover.popoverTokens.arrowMaskImage, _Popover.popoverTokens.arrowHeight, _Popover.popoverTokens.arrowEdgeMargin, _Popover.popoverTokens.arrowBackground)
|
16
16
|
}
|
17
17
|
}
|
18
18
|
};
|
@@ -8,6 +8,8 @@ import { WithTheme } from '../../../_helpers';
|
|
8
8
|
|
9
9
|
import { Popover } from './Popover';
|
10
10
|
|
11
|
+
import './style.css';
|
12
|
+
|
11
13
|
const meta: Meta<typeof Popover> = {
|
12
14
|
title: 'web/Overlay/Popover',
|
13
15
|
decorators: [WithTheme],
|
@@ -80,7 +82,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
|
|
80
82
|
const StyledContent = styled.div`
|
81
83
|
background: var(--surface-solid-tertiary);
|
82
84
|
padding: 1rem;
|
83
|
-
border-radius:
|
85
|
+
border-radius: var(--popover-border-radius);
|
84
86
|
|
85
87
|
display: flex;
|
86
88
|
flex-direction: column;
|
@@ -9,12 +9,6 @@ import { PropsTable, Description } from '@site/src/components';
|
|
9
9
|
<Description name="Checkbox" />
|
10
10
|
<PropsTable name="Checkbox" exclude={['css', 'focused']} />
|
11
11
|
|
12
|
-
:::caution Устаревшие значения для свойства view
|
13
|
-
Актуальным значением для свойства `view` - является `accent`.
|
14
|
-
|
15
|
-
Все остальные значения `deprecated` и будут удалены в ближайшее время!
|
16
|
-
:::
|
17
|
-
|
18
12
|
## Использование
|
19
13
|
Компонент `Checkbox` может содержать лейбл и описание.
|
20
14
|
|
@@ -9,10 +9,10 @@ export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
9
9
|
})(["display:inline-block;&.", "{position:absolute;top:0;left:0;width:100%;height:100%;", "{width:100%;height:100%;display:block;}}"], classes.targetAsRef, StyledRoot);
|
10
10
|
export var StyledArrow = /*#__PURE__*/styled.div.withConfig({
|
11
11
|
componentId: "plasma-new-hope__sc-tnpyex-2"
|
12
|
-
})(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"],
|
12
|
+
})(["width:var(", ");height:var(", ");&::before{position:absolute;width:var(", ");height:var(", ");mask-image:var(", ");background:var(", ");content:'';transform:rotate(0deg);}"], tokens.arrowMaskWidth, tokens.arrowMaskHeight, tokens.arrowMaskWidth, tokens.arrowMaskHeight, tokens.arrowMaskImage, tokens.arrowBackground);
|
13
13
|
export var StyledPopover = /*#__PURE__*/styled.div.withConfig({
|
14
14
|
componentId: "plasma-new-hope__sc-tnpyex-3"
|
15
|
-
})(["position:absolute;z-index:", ";opacity:0;visibility:hidden;&.", "{transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}&.", "{opacity:1;visibility:visible;}&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
|
15
|
+
})(["position:absolute;z-index:", ";opacity:0;visibility:hidden;box-shadow:var(", ");&.", "{transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}&.", "{opacity:1;visibility:visible;}&:before{content:'';display:block;position:absolute;background:transparent;}&[data-popper-placement^='top'] > .", "{bottom:calc(0px - var(", "));}&[data-popper-placement^='bottom'] > .", "{top:calc(0px - var(", "));&::before{transform:rotate(180deg);}}&[data-popper-placement^='left'] > .", "{right:calc(0px - var(", "));&::before{transform:rotate(-90deg);}}&[data-popper-placement^='right'] > .", "{left:calc(0px - var(", "));&::before{transform:rotate(90deg);}}&[data-popper-placement^='top-start'] > .", "{bottom:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top-end'] > .", "{bottom:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;}&[data-popper-placement^='bottom-start'] > .", "{top:calc(0px - var(", "));left:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='bottom-end'] > .", "{top:calc(0px - var(", "));left:unset !important;right:var(", ") !important;transform:unset !important;&::before{transform:rotate(180deg);}}&[data-popper-placement^='left-start'] > .", ",&[data-popper-placement^='right-start'] > .", "{top:var(", ") !important;transform:unset !important;}&[data-popper-placement^='left-end'] > .", ",&[data-popper-placement^='right-end'] > .", "{top:unset !important;bottom:var(", ") !important;transform:unset !important;}&[data-popper-placement^='top'],&[data-popper-placement^='top-start'],&[data-popper-placement^='top-end']{&:before{top:unset;left:0;right:0;height:var(", ");bottom:calc(-1 * var(", "));}}&[data-popper-placement^='bottom'],&[data-popper-placement^='bottom-start'],&[data-popper-placement^='bottom-end']{&:before{top:calc(-1 * var(", "));left:0;right:0;bottom:var(", ");height:var(", ");}}&[data-popper-placement^='left'],&[data-popper-placement^='left-start'],&[data-popper-placement^='left-end']{&:before{width:var(", ");height:100%;top:0;right:calc(-1 * var(", "));bottom:0;}}&[data-popper-placement^='right'],&[data-popper-placement^='right-start'],&[data-popper-placement^='right-end']{&:before{width:var(", ");height:100%;top:0;left:calc(-1 * var(", "));bottom:0;}}"], function (_ref) {
|
16
16
|
var zIndex = _ref.zIndex;
|
17
17
|
return zIndex || DEFAULT_Z_INDEX;
|
18
|
-
}, classes.animate, classes.open, classes.arrow,
|
18
|
+
}, tokens.boxShadow, classes.animate, classes.open, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, tokens.arrowHeight, tokens.arrowEdgeMargin, classes.arrow, classes.arrow, tokens.arrowEdgeMargin, classes.arrow, classes.arrow, tokens.arrowEdgeMargin, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight, tokens.arrowHeight);
|
@@ -8,6 +8,7 @@ export var classes = {
|
|
8
8
|
animate: 'popover-animate'
|
9
9
|
};
|
10
10
|
export var tokens = {
|
11
|
+
boxShadow: '--plasma-popover-box-shadow',
|
11
12
|
arrowMaskWidth: '--plasma-popover-arrow-mask-width',
|
12
13
|
arrowMaskHeight: '--plasma-popover-arrow-mask-height',
|
13
14
|
arrowMaskImage: '--plasma-popover-arrow-mask-image',
|
@@ -16,20 +16,13 @@ export var config = {
|
|
16
16
|
* Вид контрола.
|
17
17
|
*/
|
18
18
|
view: {
|
19
|
-
accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
20
|
-
// deprecated
|
21
19
|
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
22
|
-
// deprecated
|
23
20
|
secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
24
|
-
// deprecated
|
25
21
|
tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
26
|
-
// deprecated
|
27
22
|
paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
28
|
-
|
23
|
+
accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
29
24
|
positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
30
|
-
// deprecated
|
31
25
|
warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
32
|
-
// deprecated
|
33
26
|
negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor)
|
34
27
|
},
|
35
28
|
disabled: {
|
@@ -3,9 +3,12 @@ import type { ComponentProps } from 'react';
|
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
4
|
import { action } from '@storybook/addon-actions';
|
5
5
|
|
6
|
-
import {
|
6
|
+
import { checkboxConfig } from '../../../../components/Checkbox';
|
7
|
+
import { mergeConfig } from '../../../../engines';
|
8
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
7
9
|
import { Link } from '../Link/Link';
|
8
10
|
|
11
|
+
import { config } from './Checkbox.config';
|
9
12
|
import { Checkbox } from './Checkbox';
|
10
13
|
|
11
14
|
const onChange = action('onChange');
|
@@ -16,20 +19,7 @@ const meta: Meta<typeof Checkbox> = {
|
|
16
19
|
title: 'b2c/Data Entry/Checkbox',
|
17
20
|
decorators: [WithTheme],
|
18
21
|
component: Checkbox,
|
19
|
-
argTypes:
|
20
|
-
view: {
|
21
|
-
options: ['accent'],
|
22
|
-
control: {
|
23
|
-
type: 'radio',
|
24
|
-
},
|
25
|
-
},
|
26
|
-
size: {
|
27
|
-
options: ['m', 's'],
|
28
|
-
control: {
|
29
|
-
type: 'radio',
|
30
|
-
},
|
31
|
-
},
|
32
|
-
},
|
22
|
+
argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
|
33
23
|
args: {
|
34
24
|
view: 'accent',
|
35
25
|
size: 'm',
|
@@ -6,7 +6,7 @@ export var config = {
|
|
6
6
|
},
|
7
7
|
variations: {
|
8
8
|
view: {
|
9
|
-
"default": /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], popoverTokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, popoverTokens.arrowMaskImage, popoverTokens.arrowHeight, popoverTokens.arrowEdgeMargin, popoverTokens.arrowBackground)
|
9
|
+
"default": /*#__PURE__*/css(["", ":var(--shadow-down-hard-m);", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], popoverTokens.boxShadow, popoverTokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, popoverTokens.arrowMaskImage, popoverTokens.arrowHeight, popoverTokens.arrowEdgeMargin, popoverTokens.arrowBackground)
|
10
10
|
}
|
11
11
|
}
|
12
12
|
};
|
@@ -8,6 +8,8 @@ import { WithTheme } from '../../../_helpers';
|
|
8
8
|
|
9
9
|
import { Popover } from './Popover';
|
10
10
|
|
11
|
+
import './style.css';
|
12
|
+
|
11
13
|
const meta: Meta<typeof Popover> = {
|
12
14
|
title: 'b2c/Overlay/Popover',
|
13
15
|
decorators: [WithTheme],
|
@@ -81,7 +83,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
|
|
81
83
|
const StyledContent = styled.div`
|
82
84
|
background: var(--surface-solid-tertiary);
|
83
85
|
padding: 1rem;
|
84
|
-
border-radius:
|
86
|
+
border-radius: var(--popover-border-radius);
|
85
87
|
|
86
88
|
display: flex;
|
87
89
|
flex-direction: column;
|
@@ -16,20 +16,13 @@ export var config = {
|
|
16
16
|
* Вид контрола.
|
17
17
|
*/
|
18
18
|
view: {
|
19
|
-
accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
20
|
-
// deprecated
|
21
19
|
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
22
|
-
// deprecated
|
23
20
|
secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
24
|
-
// deprecated
|
25
21
|
tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
26
|
-
// deprecated
|
27
22
|
paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
28
|
-
|
23
|
+
accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
29
24
|
positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
30
|
-
// deprecated
|
31
25
|
warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor),
|
32
|
-
// deprecated
|
33
26
|
negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBackgroundColor, checkboxTokens.triggerBorderColor)
|
34
27
|
},
|
35
28
|
disabled: {
|
@@ -3,9 +3,12 @@ import type { ComponentProps } from 'react';
|
|
3
3
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
4
|
import { action } from '@storybook/addon-actions';
|
5
5
|
|
6
|
-
import {
|
6
|
+
import { checkboxConfig } from '../../../../components/Checkbox';
|
7
|
+
import { mergeConfig } from '../../../../engines';
|
8
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
7
9
|
import { Link } from '../Link/Link';
|
8
10
|
|
11
|
+
import { config } from './Checkbox.config';
|
9
12
|
import { Checkbox } from './Checkbox';
|
10
13
|
|
11
14
|
const onChange = action('onChange');
|
@@ -16,20 +19,7 @@ const meta: Meta<typeof Checkbox> = {
|
|
16
19
|
title: 'web/Data Entry/Checkbox',
|
17
20
|
decorators: [WithTheme],
|
18
21
|
component: Checkbox,
|
19
|
-
argTypes:
|
20
|
-
view: {
|
21
|
-
options: ['accent'],
|
22
|
-
control: {
|
23
|
-
type: 'radio',
|
24
|
-
},
|
25
|
-
},
|
26
|
-
size: {
|
27
|
-
options: ['m', 's'],
|
28
|
-
control: {
|
29
|
-
type: 'radio',
|
30
|
-
},
|
31
|
-
},
|
32
|
-
},
|
22
|
+
argTypes: argTypesFromConfig(mergeConfig(checkboxConfig, config)),
|
33
23
|
args: {
|
34
24
|
view: 'accent',
|
35
25
|
size: 'm',
|
@@ -6,7 +6,7 @@ export var config = {
|
|
6
6
|
},
|
7
7
|
variations: {
|
8
8
|
view: {
|
9
|
-
"default": /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], popoverTokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, popoverTokens.arrowMaskImage, popoverTokens.arrowHeight, popoverTokens.arrowEdgeMargin, popoverTokens.arrowBackground)
|
9
|
+
"default": /*#__PURE__*/css(["", ":var(--shadow-down-hard-m);", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+\");", ":0.375rem;", ":0.5625rem;", ":var(--surface-solid-tertiary);"], popoverTokens.boxShadow, popoverTokens.arrowMaskWidth, popoverTokens.arrowMaskHeight, popoverTokens.arrowMaskImage, popoverTokens.arrowHeight, popoverTokens.arrowEdgeMargin, popoverTokens.arrowBackground)
|
10
10
|
}
|
11
11
|
}
|
12
12
|
};
|
@@ -8,6 +8,8 @@ import { WithTheme } from '../../../_helpers';
|
|
8
8
|
|
9
9
|
import { Popover } from './Popover';
|
10
10
|
|
11
|
+
import './style.css';
|
12
|
+
|
11
13
|
const meta: Meta<typeof Popover> = {
|
12
14
|
title: 'web/Overlay/Popover',
|
13
15
|
decorators: [WithTheme],
|
@@ -80,7 +82,7 @@ type StoryPopoverProps = ComponentProps<typeof Popover> & {
|
|
80
82
|
const StyledContent = styled.div`
|
81
83
|
background: var(--surface-solid-tertiary);
|
82
84
|
padding: 1rem;
|
83
|
-
border-radius:
|
85
|
+
border-radius: var(--popover-border-radius);
|
84
86
|
|
85
87
|
display: flex;
|
86
88
|
flex-direction: column;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,eAAO,MAAM,UAAU,qKAItB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAgBzB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAcvB,CAAC;AAEF,eAAO,MAAM,aAAa,
|
1
|
+
{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,eAAO,MAAM,UAAU,qKAItB,CAAC;AAEF,eAAO,MAAM,aAAa,qKAgBzB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAcvB,CAAC;AAEF,eAAO,MAAM,aAAa,2KAqJzB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popover.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AAEF,eAAO,MAAM,MAAM
|
1
|
+
{"version":3,"file":"Popover.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;CAQnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;CASlB,CAAC"}
|
@@ -14,11 +14,11 @@ export declare const config: {
|
|
14
14
|
* Вид контрола.
|
15
15
|
*/
|
16
16
|
view: {
|
17
|
-
accent: import("@linaria/core").LinariaClassName;
|
18
17
|
default: import("@linaria/core").LinariaClassName;
|
19
18
|
secondary: import("@linaria/core").LinariaClassName;
|
20
19
|
tertiary: import("@linaria/core").LinariaClassName;
|
21
20
|
paragraph: import("@linaria/core").LinariaClassName;
|
21
|
+
accent: import("@linaria/core").LinariaClassName;
|
22
22
|
positive: import("@linaria/core").LinariaClassName;
|
23
23
|
warning: import("@linaria/core").LinariaClassName;
|
24
24
|
negative: import("@linaria/core").LinariaClassName;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Checkbox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Checkbox/Checkbox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;QAKX;;WAEG;;;;;QA6CH;;WAEG;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Checkbox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Checkbox/Checkbox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;QAKX;;WAEG;;;;;QA6CH;;WAEG;;;;;;;;;;;;;;;;;;CAsEV,CAAC"}
|
@@ -5,11 +5,11 @@ export declare const Checkbox: import("react").FunctionComponent<import("../../.
|
|
5
5
|
m: import("@linaria/core").LinariaClassName;
|
6
6
|
};
|
7
7
|
view: {
|
8
|
-
accent: import("@linaria/core").LinariaClassName;
|
9
8
|
default: import("@linaria/core").LinariaClassName;
|
10
9
|
secondary: import("@linaria/core").LinariaClassName;
|
11
10
|
tertiary: import("@linaria/core").LinariaClassName;
|
12
11
|
paragraph: import("@linaria/core").LinariaClassName;
|
12
|
+
accent: import("@linaria/core").LinariaClassName;
|
13
13
|
positive: import("@linaria/core").LinariaClassName;
|
14
14
|
warning: import("@linaria/core").LinariaClassName;
|
15
15
|
negative: import("@linaria/core").LinariaClassName;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popover.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Popover/Popover.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;
|
1
|
+
{"version":3,"file":"Popover.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Popover/Popover.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;CAkBlB,CAAC"}
|
@@ -14,11 +14,11 @@ export declare const config: {
|
|
14
14
|
* Вид контрола.
|
15
15
|
*/
|
16
16
|
view: {
|
17
|
-
accent: import("@linaria/core").LinariaClassName;
|
18
17
|
default: import("@linaria/core").LinariaClassName;
|
19
18
|
secondary: import("@linaria/core").LinariaClassName;
|
20
19
|
tertiary: import("@linaria/core").LinariaClassName;
|
21
20
|
paragraph: import("@linaria/core").LinariaClassName;
|
21
|
+
accent: import("@linaria/core").LinariaClassName;
|
22
22
|
positive: import("@linaria/core").LinariaClassName;
|
23
23
|
warning: import("@linaria/core").LinariaClassName;
|
24
24
|
negative: import("@linaria/core").LinariaClassName;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Checkbox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Checkbox/Checkbox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;QAKX;;WAEG;;;;;QA6CH;;WAEG;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"Checkbox.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Checkbox/Checkbox.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;QAKX;;WAEG;;;;;QA6CH;;WAEG;;;;;;;;;;;;;;;;;;CAsEV,CAAC"}
|
@@ -5,11 +5,11 @@ export declare const Checkbox: import("react").FunctionComponent<import("../../.
|
|
5
5
|
m: import("@linaria/core").LinariaClassName;
|
6
6
|
};
|
7
7
|
view: {
|
8
|
-
accent: import("@linaria/core").LinariaClassName;
|
9
8
|
default: import("@linaria/core").LinariaClassName;
|
10
9
|
secondary: import("@linaria/core").LinariaClassName;
|
11
10
|
tertiary: import("@linaria/core").LinariaClassName;
|
12
11
|
paragraph: import("@linaria/core").LinariaClassName;
|
12
|
+
accent: import("@linaria/core").LinariaClassName;
|
13
13
|
positive: import("@linaria/core").LinariaClassName;
|
14
14
|
warning: import("@linaria/core").LinariaClassName;
|
15
15
|
negative: import("@linaria/core").LinariaClassName;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popover.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Popover/Popover.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;
|
1
|
+
{"version":3,"file":"Popover.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Popover/Popover.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;CAkBlB,CAAC"}
|
@@ -1,4 +0,0 @@
|
|
1
|
-
.s1g1xbt5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;position:relative;}
|
2
|
-
.s12xwbyh{display:inline-block;}.s12xwbyh.popover-target-as-ref{position:absolute;top:0;left:0;width:100%;height:100%;}.s12xwbyh.popover-target-as-ref .s1g1xbt5{width:100%;height:100%;display:block;}
|
3
|
-
.s1pd4d8a{width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);}.s1pd4d8a::before{position:absolute;width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);-webkit-mask-image:var(--plasma-popover-arrow-mask-image);mask-image:var(--plasma-popover-arrow-mask-image);background:var(--plasma-popover-arrow-background);content:'';-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
|
4
|
-
.s16xlixz{position:absolute;z-index:var(--s16xlixz-0);opacity:0;visibility:hidden;}.s16xlixz.popover-animate{-webkit-transition:opacity 0.2s ease-in-out,-webkit-transform 0s ease-in-out,visibility 0.2s;-webkit-transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}.s16xlixz.popover-open{opacity:1;visibility:visible;}.s16xlixz:before{content:'';display:block;position:absolute;background:transparent;}.s16xlixz[data-popper-placement^='top'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='left'] > .popover-arrow{right:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='left'] > .popover-arrow::before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.s16xlixz[data-popper-placement^='right'] > .popover-arrow{left:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='right'] > .popover-arrow::before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.s16xlixz[data-popper-placement^='top-start'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='top-end'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-start'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-start'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='bottom-end'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-end'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='left-start'] > .popover-arrow,.s16xlixz[data-popper-placement^='right-start'] > .popover-arrow{top:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='left-end'] > .popover-arrow,.s16xlixz[data-popper-placement^='right-end'] > .popover-arrow{top:unset !important;bottom:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='top']:before,.s16xlixz[data-popper-placement^='top-start']:before,.s16xlixz[data-popper-placement^='top-end']:before{top:unset;left:0;right:0;height:var(--plasma-popover-arrow-height);bottom:calc(-1 * var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom']:before,.s16xlixz[data-popper-placement^='bottom-start']:before,.s16xlixz[data-popper-placement^='bottom-end']:before{top:calc(-1 * var(--plasma-popover-arrow-height));left:0;right:0;bottom:var(--plasma-popover-arrow-height);height:var(--plasma-popover-arrow-height);}.s16xlixz[data-popper-placement^='left']:before,.s16xlixz[data-popper-placement^='left-start']:before,.s16xlixz[data-popper-placement^='left-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;right:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}.s16xlixz[data-popper-placement^='right']:before,.s16xlixz[data-popper-placement^='right-start']:before,.s16xlixz[data-popper-placement^='right-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;left:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}
|
@@ -1,4 +0,0 @@
|
|
1
|
-
.s1g1xbt5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;position:relative;}
|
2
|
-
.s12xwbyh{display:inline-block;}.s12xwbyh.popover-target-as-ref{position:absolute;top:0;left:0;width:100%;height:100%;}.s12xwbyh.popover-target-as-ref .s1g1xbt5{width:100%;height:100%;display:block;}
|
3
|
-
.s1pd4d8a{width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);}.s1pd4d8a::before{position:absolute;width:var(--plasma-popover-arrow-mask-width);height:var(--plasma-popover-arrow-mask-height);-webkit-mask-image:var(--plasma-popover-arrow-mask-image);mask-image:var(--plasma-popover-arrow-mask-image);background:var(--plasma-popover-arrow-background);content:'';-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
|
4
|
-
.s16xlixz{position:absolute;z-index:var(--s16xlixz-0);opacity:0;visibility:hidden;}.s16xlixz.popover-animate{-webkit-transition:opacity 0.2s ease-in-out,-webkit-transform 0s ease-in-out,visibility 0.2s;-webkit-transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}.s16xlixz.popover-open{opacity:1;visibility:visible;}.s16xlixz:before{content:'';display:block;position:absolute;background:transparent;}.s16xlixz[data-popper-placement^='top'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='left'] > .popover-arrow{right:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='left'] > .popover-arrow::before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.s16xlixz[data-popper-placement^='right'] > .popover-arrow{left:calc(0px - var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='right'] > .popover-arrow::before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.s16xlixz[data-popper-placement^='top-start'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='top-end'] > .popover-arrow{bottom:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-start'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-start'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='bottom-end'] > .popover-arrow{top:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='bottom-end'] > .popover-arrow::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.s16xlixz[data-popper-placement^='left-start'] > .popover-arrow,.s16xlixz[data-popper-placement^='right-start'] > .popover-arrow{top:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='left-end'] > .popover-arrow,.s16xlixz[data-popper-placement^='right-end'] > .popover-arrow{top:unset !important;bottom:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.s16xlixz[data-popper-placement^='top']:before,.s16xlixz[data-popper-placement^='top-start']:before,.s16xlixz[data-popper-placement^='top-end']:before{top:unset;left:0;right:0;height:var(--plasma-popover-arrow-height);bottom:calc(-1 * var(--plasma-popover-arrow-height));}.s16xlixz[data-popper-placement^='bottom']:before,.s16xlixz[data-popper-placement^='bottom-start']:before,.s16xlixz[data-popper-placement^='bottom-end']:before{top:calc(-1 * var(--plasma-popover-arrow-height));left:0;right:0;bottom:var(--plasma-popover-arrow-height);height:var(--plasma-popover-arrow-height);}.s16xlixz[data-popper-placement^='left']:before,.s16xlixz[data-popper-placement^='left-start']:before,.s16xlixz[data-popper-placement^='left-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;right:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}.s16xlixz[data-popper-placement^='right']:before,.s16xlixz[data-popper-placement^='right-start']:before,.s16xlixz[data-popper-placement^='right-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;left:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}
|