@alfalab/core-components-drawer 5.1.14 → 6.0.0-snapshot-133b390
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/Component.d.ts +5 -8
- package/Component.js +29 -30
- package/Component.js.map +1 -0
- package/cssm/Component.d.ts +5 -8
- package/cssm/Component.js +4 -3
- package/cssm/Component.js.map +1 -0
- package/cssm/index.d.ts +1 -1
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +5 -24
- package/esm/Component.d.ts +5 -8
- package/esm/Component.js +2 -3
- package/esm/Component.js.map +1 -0
- package/esm/index.css +37 -57
- package/esm/index.d.ts +1 -1
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -0
- package/esm/index.module.css.js +6 -0
- package/esm/index.module.css.js.map +1 -0
- package/index.css +37 -57
- package/index.d.ts +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.module.css.js +8 -0
- package/index.module.css.js.map +1 -0
- package/modern/Component.d.ts +5 -8
- package/modern/Component.js +2 -3
- package/modern/Component.js.map +1 -0
- package/modern/index.css +37 -57
- package/modern/index.d.ts +1 -1
- package/modern/index.js +1 -0
- package/modern/index.js.map +1 -0
- package/modern/index.module.css.js +6 -0
- package/modern/index.module.css.js.map +1 -0
- package/moderncssm/Component.d.ts +5 -8
- package/moderncssm/Component.js +1 -0
- package/moderncssm/Component.js.map +1 -0
- package/moderncssm/index.d.ts +1 -1
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +0 -3
- package/package.json +4 -4
- package/src/index.module.css +1 -1
package/Component.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
/// <reference types="react-transition-group" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
1
|
import React from 'react';
|
|
4
2
|
import { TransitionProps } from 'react-transition-group/Transition';
|
|
5
|
-
import { BaseModalContext, BaseModalProps } from
|
|
6
|
-
declare const ANIMATION_DURATION = 600;
|
|
7
|
-
type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
3
|
+
import { BaseModalContext, BaseModalProps } from '@alfalab/core-components-base-modal';
|
|
4
|
+
export declare const ANIMATION_DURATION = 600;
|
|
5
|
+
export declare type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
8
6
|
/**
|
|
9
7
|
* Край экрана, с которого может появиться Drawer.
|
|
10
8
|
* @default "right"
|
|
@@ -20,8 +18,8 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
|
20
18
|
*/
|
|
21
19
|
contentTransitionProps?: Partial<TransitionProps>;
|
|
22
20
|
};
|
|
23
|
-
declare const DrawerContext: React.Context<BaseModalContext>;
|
|
24
|
-
declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
|
|
21
|
+
export declare const DrawerContext: React.Context<BaseModalContext>;
|
|
22
|
+
export declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
|
|
25
23
|
/**
|
|
26
24
|
* Край экрана, с которого может появиться Drawer.
|
|
27
25
|
* @default "right"
|
|
@@ -37,4 +35,3 @@ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "cont
|
|
|
37
35
|
*/
|
|
38
36
|
contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
|
|
39
37
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
-
export { ANIMATION_DURATION, DrawerProps, DrawerContext, Drawer };
|
package/Component.js
CHANGED
|
@@ -7,39 +7,37 @@ var React = require('react');
|
|
|
7
7
|
var reactTransitionGroup = require('react-transition-group');
|
|
8
8
|
var cn = require('classnames');
|
|
9
9
|
var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
|
|
10
|
+
var index_module = require('./index.module.css.js');
|
|
10
11
|
|
|
11
12
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
12
13
|
|
|
13
14
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
15
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
15
16
|
|
|
16
|
-
var styles = {"component":"drawer__component_7o6t4","customScrollbar":"drawer__customScrollbar_7o6t4","rightPlacement":"drawer__rightPlacement_7o6t4","leftPlacement":"drawer__leftPlacement_7o6t4","content":"drawer__content_7o6t4","enterRight":"drawer__enterRight_7o6t4","enterLeft":"drawer__enterLeft_7o6t4","contentEnter":"drawer__contentEnter_7o6t4","backdropEnter":"drawer__backdropEnter_7o6t4","enterActive":"drawer__enterActive_7o6t4","backdropEnterActive":"drawer__backdropEnterActive_7o6t4","backdropEnterDone":"drawer__backdropEnterDone_7o6t4","contentEnterActive":"drawer__contentEnterActive_7o6t4","exit":"drawer__exit_7o6t4","backdropExit":"drawer__backdropExit_7o6t4","contentExit":"drawer__contentExit_7o6t4","exitActiveRight":"drawer__exitActiveRight_7o6t4","exitActiveLeft":"drawer__exitActiveLeft_7o6t4","backdropExitActive":"drawer__backdropExitActive_7o6t4","backdropExitDone":"drawer__backdropExitDone_7o6t4","contentExitActive":"drawer__contentExitActive_7o6t4"};
|
|
17
|
-
require('./index.css')
|
|
18
|
-
|
|
19
17
|
var ANIMATION_DURATION = 600;
|
|
20
18
|
var DrawerContext = coreComponentsBaseModal.BaseModalContext;
|
|
21
19
|
var backdropProps = {
|
|
22
20
|
transitionClassNames: {
|
|
23
|
-
enter:
|
|
24
|
-
appear:
|
|
25
|
-
enterActive:
|
|
26
|
-
appearActive:
|
|
27
|
-
enterDone:
|
|
28
|
-
appearDone:
|
|
29
|
-
exit:
|
|
30
|
-
exitActive:
|
|
31
|
-
exitDone:
|
|
21
|
+
enter: index_module.backdropEnter,
|
|
22
|
+
appear: index_module.backdropEnter,
|
|
23
|
+
enterActive: index_module.backdropEnterActive,
|
|
24
|
+
appearActive: index_module.backdropEnterActive,
|
|
25
|
+
enterDone: index_module.backdropEnterDone,
|
|
26
|
+
appearDone: index_module.backdropEnterDone,
|
|
27
|
+
exit: index_module.backdropExit,
|
|
28
|
+
exitActive: index_module.backdropExitActive,
|
|
29
|
+
exitDone: index_module.backdropExitDone,
|
|
32
30
|
},
|
|
33
31
|
timeout: ANIMATION_DURATION,
|
|
34
32
|
};
|
|
35
33
|
var contentProps = {
|
|
36
34
|
classNames: {
|
|
37
|
-
enter:
|
|
38
|
-
appear:
|
|
39
|
-
enterActive:
|
|
40
|
-
appearActive:
|
|
41
|
-
exit:
|
|
42
|
-
exitActive:
|
|
35
|
+
enter: index_module.contentEnter,
|
|
36
|
+
appear: index_module.contentEnter,
|
|
37
|
+
enterActive: index_module.contentEnterActive,
|
|
38
|
+
appearActive: index_module.contentEnterActive,
|
|
39
|
+
exit: index_module.contentExit,
|
|
40
|
+
exitActive: index_module.contentExitActive,
|
|
43
41
|
},
|
|
44
42
|
timeout: ANIMATION_DURATION,
|
|
45
43
|
};
|
|
@@ -51,32 +49,33 @@ var Drawer = React.forwardRef(function (_a, ref) {
|
|
|
51
49
|
var transitionProps = React.useMemo(function () {
|
|
52
50
|
var _a, _b;
|
|
53
51
|
var enterClassName = cn__default.default((_a = {},
|
|
54
|
-
_a[
|
|
55
|
-
_a[
|
|
52
|
+
_a[index_module.enterRight] = isRightPlacement,
|
|
53
|
+
_a[index_module.enterLeft] = isLeftPlacement,
|
|
56
54
|
_a));
|
|
57
55
|
var exitClassName = cn__default.default((_b = {},
|
|
58
|
-
_b[
|
|
59
|
-
_b[
|
|
56
|
+
_b[index_module.exitActiveRight] = isRightPlacement,
|
|
57
|
+
_b[index_module.exitActiveLeft] = isLeftPlacement,
|
|
60
58
|
_b));
|
|
61
59
|
return tslib.__assign({ classNames: {
|
|
62
60
|
enter: enterClassName,
|
|
63
61
|
appear: enterClassName,
|
|
64
|
-
enterActive:
|
|
65
|
-
appearActive:
|
|
66
|
-
exit:
|
|
62
|
+
enterActive: index_module.enterActive,
|
|
63
|
+
appearActive: index_module.enterActive,
|
|
64
|
+
exit: index_module.exit,
|
|
67
65
|
exitActive: exitClassName,
|
|
68
66
|
}, timeout: ANIMATION_DURATION }, restProps.transitionProps);
|
|
69
67
|
}, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
|
|
70
|
-
return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default.default(
|
|
71
|
-
_b[
|
|
72
|
-
_b[
|
|
73
|
-
_b[
|
|
68
|
+
return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default.default(index_module.component, className, (_b = {},
|
|
69
|
+
_b[index_module.rightPlacement] = isRightPlacement,
|
|
70
|
+
_b[index_module.leftPlacement] = isLeftPlacement,
|
|
71
|
+
_b[index_module.customScrollbar] = !nativeScrollbar,
|
|
74
72
|
_b)), transitionProps: transitionProps, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), restProps.backdropProps) }),
|
|
75
73
|
React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({}, tslib.__assign(tslib.__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }),
|
|
76
|
-
React__default.default.createElement("div", { className:
|
|
74
|
+
React__default.default.createElement("div", { className: index_module.content }, children))));
|
|
77
75
|
});
|
|
78
76
|
Drawer.displayName = 'Drawer';
|
|
79
77
|
|
|
80
78
|
exports.ANIMATION_DURATION = ANIMATION_DURATION;
|
|
81
79
|
exports.Drawer = Drawer;
|
|
82
80
|
exports.DrawerContext = DrawerContext;
|
|
81
|
+
//# sourceMappingURL=Component.js.map
|
package/Component.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport { BaseModal, BaseModalContext, BaseModalProps } from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n /**\n * Край экрана, с которого может появиться Drawer.\n * @default \"right\"\n */\n placement?: 'left' | 'right';\n\n /**\n * Нужно ли использовать нативный скроллбар\n * @default true\n */\n nativeScrollbar?: boolean;\n\n /**\n * Пропсы для анимации контента (CSSTransition)\n */\n contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n transitionClassNames: {\n enter: styles.backdropEnter,\n appear: styles.backdropEnter,\n enterActive: styles.backdropEnterActive,\n appearActive: styles.backdropEnterActive,\n enterDone: styles.backdropEnterDone,\n appearDone: styles.backdropEnterDone,\n exit: styles.backdropExit,\n exitActive: styles.backdropExitActive,\n exitDone: styles.backdropExitDone,\n },\n timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n classNames: {\n enter: styles.contentEnter,\n appear: styles.contentEnter,\n enterActive: styles.contentEnterActive,\n appearActive: styles.contentEnterActive,\n exit: styles.contentExit,\n exitActive: styles.contentExitActive,\n },\n timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n open,\n className,\n children,\n contentTransitionProps,\n nativeScrollbar = true,\n placement = 'right',\n ...restProps\n },\n ref,\n ) => {\n const isRightPlacement = placement === 'right';\n const isLeftPlacement = placement === 'left';\n\n const transitionProps = useMemo(() => {\n const enterClassName = cn({\n [styles.enterRight]: isRightPlacement,\n [styles.enterLeft]: isLeftPlacement,\n });\n\n const exitClassName = cn({\n [styles.exitActiveRight]: isRightPlacement,\n [styles.exitActiveLeft]: isLeftPlacement,\n });\n\n return {\n classNames: {\n enter: enterClassName,\n appear: enterClassName,\n enterActive: styles.enterActive,\n appearActive: styles.enterActive,\n exit: styles.exit,\n exitActive: exitClassName,\n },\n timeout: ANIMATION_DURATION,\n ...restProps.transitionProps,\n };\n }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n return (\n <BaseModal\n {...restProps}\n scrollHandler='content'\n ref={ref}\n open={open}\n className={cn(styles.component, className, {\n [styles.rightPlacement]: isRightPlacement,\n [styles.leftPlacement]: isLeftPlacement,\n [styles.customScrollbar]: !nativeScrollbar,\n })}\n transitionProps={transitionProps}\n backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n >\n <CSSTransition\n {...{ ...contentProps, ...contentTransitionProps }}\n appear={true}\n in={open}\n >\n <div className={styles.content}>{children}</div>\n </CSSTransition>\n </BaseModal>\n );\n },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":["BaseModalContext","styles","forwardRef","__rest","useMemo","cn","__assign","React","BaseModal","CSSTransition"],"mappings":"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"}
|
package/cssm/Component.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
/// <reference types="react-transition-group" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
1
|
import React from 'react';
|
|
4
2
|
import { TransitionProps } from 'react-transition-group/Transition';
|
|
5
|
-
import { BaseModalContext, BaseModalProps } from
|
|
6
|
-
declare const ANIMATION_DURATION = 600;
|
|
7
|
-
type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
3
|
+
import { BaseModalContext, BaseModalProps } from '@alfalab/core-components-base-modal';
|
|
4
|
+
export declare const ANIMATION_DURATION = 600;
|
|
5
|
+
export declare type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
8
6
|
/**
|
|
9
7
|
* Край экрана, с которого может появиться Drawer.
|
|
10
8
|
* @default "right"
|
|
@@ -20,8 +18,8 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
|
20
18
|
*/
|
|
21
19
|
contentTransitionProps?: Partial<TransitionProps>;
|
|
22
20
|
};
|
|
23
|
-
declare const DrawerContext: React.Context<BaseModalContext>;
|
|
24
|
-
declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
|
|
21
|
+
export declare const DrawerContext: React.Context<BaseModalContext>;
|
|
22
|
+
export declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
|
|
25
23
|
/**
|
|
26
24
|
* Край экрана, с которого может появиться Drawer.
|
|
27
25
|
* @default "right"
|
|
@@ -37,4 +35,3 @@ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "cont
|
|
|
37
35
|
*/
|
|
38
36
|
contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
|
|
39
37
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
-
export { ANIMATION_DURATION, DrawerProps, DrawerContext, Drawer };
|
package/cssm/Component.js
CHANGED
|
@@ -6,7 +6,7 @@ var tslib = require('tslib');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var reactTransitionGroup = require('react-transition-group');
|
|
8
8
|
var cn = require('classnames');
|
|
9
|
-
var
|
|
9
|
+
var cssm = require('@alfalab/core-components-base-modal/cssm');
|
|
10
10
|
var styles = require('./index.module.css');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -16,7 +16,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
|
16
16
|
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
17
17
|
|
|
18
18
|
var ANIMATION_DURATION = 600;
|
|
19
|
-
var DrawerContext =
|
|
19
|
+
var DrawerContext = cssm.BaseModalContext;
|
|
20
20
|
var backdropProps = {
|
|
21
21
|
transitionClassNames: {
|
|
22
22
|
enter: styles__default.default.backdropEnter,
|
|
@@ -66,7 +66,7 @@ var Drawer = React.forwardRef(function (_a, ref) {
|
|
|
66
66
|
exitActive: exitClassName,
|
|
67
67
|
}, timeout: ANIMATION_DURATION }, restProps.transitionProps);
|
|
68
68
|
}, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
|
|
69
|
-
return (React__default.default.createElement(
|
|
69
|
+
return (React__default.default.createElement(cssm.BaseModal, tslib.__assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default.default(styles__default.default.component, className, (_b = {},
|
|
70
70
|
_b[styles__default.default.rightPlacement] = isRightPlacement,
|
|
71
71
|
_b[styles__default.default.leftPlacement] = isLeftPlacement,
|
|
72
72
|
_b[styles__default.default.customScrollbar] = !nativeScrollbar,
|
|
@@ -79,3 +79,4 @@ Drawer.displayName = 'Drawer';
|
|
|
79
79
|
exports.ANIMATION_DURATION = ANIMATION_DURATION;
|
|
80
80
|
exports.Drawer = Drawer;
|
|
81
81
|
exports.DrawerContext = DrawerContext;
|
|
82
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport { BaseModal, BaseModalContext, BaseModalProps } from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n /**\n * Край экрана, с которого может появиться Drawer.\n * @default \"right\"\n */\n placement?: 'left' | 'right';\n\n /**\n * Нужно ли использовать нативный скроллбар\n * @default true\n */\n nativeScrollbar?: boolean;\n\n /**\n * Пропсы для анимации контента (CSSTransition)\n */\n contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n transitionClassNames: {\n enter: styles.backdropEnter,\n appear: styles.backdropEnter,\n enterActive: styles.backdropEnterActive,\n appearActive: styles.backdropEnterActive,\n enterDone: styles.backdropEnterDone,\n appearDone: styles.backdropEnterDone,\n exit: styles.backdropExit,\n exitActive: styles.backdropExitActive,\n exitDone: styles.backdropExitDone,\n },\n timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n classNames: {\n enter: styles.contentEnter,\n appear: styles.contentEnter,\n enterActive: styles.contentEnterActive,\n appearActive: styles.contentEnterActive,\n exit: styles.contentExit,\n exitActive: styles.contentExitActive,\n },\n timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n open,\n className,\n children,\n contentTransitionProps,\n nativeScrollbar = true,\n placement = 'right',\n ...restProps\n },\n ref,\n ) => {\n const isRightPlacement = placement === 'right';\n const isLeftPlacement = placement === 'left';\n\n const transitionProps = useMemo(() => {\n const enterClassName = cn({\n [styles.enterRight]: isRightPlacement,\n [styles.enterLeft]: isLeftPlacement,\n });\n\n const exitClassName = cn({\n [styles.exitActiveRight]: isRightPlacement,\n [styles.exitActiveLeft]: isLeftPlacement,\n });\n\n return {\n classNames: {\n enter: enterClassName,\n appear: enterClassName,\n enterActive: styles.enterActive,\n appearActive: styles.enterActive,\n exit: styles.exit,\n exitActive: exitClassName,\n },\n timeout: ANIMATION_DURATION,\n ...restProps.transitionProps,\n };\n }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n return (\n <BaseModal\n {...restProps}\n scrollHandler='content'\n ref={ref}\n open={open}\n className={cn(styles.component, className, {\n [styles.rightPlacement]: isRightPlacement,\n [styles.leftPlacement]: isLeftPlacement,\n [styles.customScrollbar]: !nativeScrollbar,\n })}\n transitionProps={transitionProps}\n backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n >\n <CSSTransition\n {...{ ...contentProps, ...contentTransitionProps }}\n appear={true}\n in={open}\n >\n <div className={styles.content}>{children}</div>\n </CSSTransition>\n </BaseModal>\n );\n },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":["BaseModalContext","styles","forwardRef","__rest","useMemo","cn","__assign","React","BaseModal","CSSTransition"],"mappings":"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"}
|
package/cssm/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from
|
|
1
|
+
export * from './Component';
|
package/cssm/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
package/cssm/index.module.css
CHANGED
|
@@ -1,32 +1,13 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
3
2
|
--color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
|
|
4
3
|
--color-light-overlay-default: rgba(0, 0, 0, 0.6);
|
|
5
|
-
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
6
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
7
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
8
5
|
} :root {
|
|
9
|
-
|
|
10
|
-
/* Hard */
|
|
11
|
-
|
|
12
|
-
/* Up */
|
|
13
|
-
|
|
14
|
-
/* Hard up */
|
|
15
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
16
6
|
--border-radius-circle: 50%;
|
|
17
|
-
|
|
18
|
-
/* новые значения, используйте их */
|
|
19
7
|
--border-radius-6: 6px;
|
|
20
|
-
} :root {
|
|
21
|
-
|
|
22
|
-
/* новые значения, используйте их */
|
|
23
|
-
|
|
24
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
25
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
8
|
+
} :root {
|
|
26
9
|
--gap-0: 0px;
|
|
27
10
|
} :root {
|
|
28
|
-
} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
|
|
29
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
30
11
|
--backdrop-visible-background: var(--color-light-overlay-default);
|
|
31
12
|
--backdrop-hidden-background: transparent;
|
|
32
13
|
} :root {
|
|
@@ -87,7 +68,7 @@
|
|
|
87
68
|
display: flex;
|
|
88
69
|
flex-direction: column;
|
|
89
70
|
flex: 1;
|
|
90
|
-
}
|
|
71
|
+
} .enterRight {
|
|
91
72
|
transform: translateX(100%);
|
|
92
73
|
} .enterLeft {
|
|
93
74
|
transform: translateX(-100%);
|
|
@@ -105,7 +86,7 @@
|
|
|
105
86
|
} .contentEnterActive {
|
|
106
87
|
transition: opacity 0.2s ease-in-out 0.3s;
|
|
107
88
|
opacity: 1;
|
|
108
|
-
}
|
|
89
|
+
} .exit {
|
|
109
90
|
transform: translateX(0);
|
|
110
91
|
} .backdropExit {
|
|
111
92
|
background-color: var(--backdrop-visible-background);
|
package/esm/Component.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
/// <reference types="react-transition-group" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
1
|
import React from 'react';
|
|
4
2
|
import { TransitionProps } from 'react-transition-group/Transition';
|
|
5
|
-
import { BaseModalContext, BaseModalProps } from
|
|
6
|
-
declare const ANIMATION_DURATION = 600;
|
|
7
|
-
type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
3
|
+
import { BaseModalContext, BaseModalProps } from '@alfalab/core-components-base-modal';
|
|
4
|
+
export declare const ANIMATION_DURATION = 600;
|
|
5
|
+
export declare type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
8
6
|
/**
|
|
9
7
|
* Край экрана, с которого может появиться Drawer.
|
|
10
8
|
* @default "right"
|
|
@@ -20,8 +18,8 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
|
20
18
|
*/
|
|
21
19
|
contentTransitionProps?: Partial<TransitionProps>;
|
|
22
20
|
};
|
|
23
|
-
declare const DrawerContext: React.Context<BaseModalContext>;
|
|
24
|
-
declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
|
|
21
|
+
export declare const DrawerContext: React.Context<BaseModalContext>;
|
|
22
|
+
export declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
|
|
25
23
|
/**
|
|
26
24
|
* Край экрана, с которого может появиться Drawer.
|
|
27
25
|
* @default "right"
|
|
@@ -37,4 +35,3 @@ declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "cont
|
|
|
37
35
|
*/
|
|
38
36
|
contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
|
|
39
37
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
40
|
-
export { ANIMATION_DURATION, DrawerProps, DrawerContext, Drawer };
|
package/esm/Component.js
CHANGED
|
@@ -3,9 +3,7 @@ import React, { forwardRef, useMemo } from 'react';
|
|
|
3
3
|
import { CSSTransition } from 'react-transition-group';
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
import { BaseModal, BaseModalContext } from '@alfalab/core-components-base-modal/esm';
|
|
6
|
-
|
|
7
|
-
var styles = {"component":"drawer__component_7o6t4","customScrollbar":"drawer__customScrollbar_7o6t4","rightPlacement":"drawer__rightPlacement_7o6t4","leftPlacement":"drawer__leftPlacement_7o6t4","content":"drawer__content_7o6t4","enterRight":"drawer__enterRight_7o6t4","enterLeft":"drawer__enterLeft_7o6t4","contentEnter":"drawer__contentEnter_7o6t4","backdropEnter":"drawer__backdropEnter_7o6t4","enterActive":"drawer__enterActive_7o6t4","backdropEnterActive":"drawer__backdropEnterActive_7o6t4","backdropEnterDone":"drawer__backdropEnterDone_7o6t4","contentEnterActive":"drawer__contentEnterActive_7o6t4","exit":"drawer__exit_7o6t4","backdropExit":"drawer__backdropExit_7o6t4","contentExit":"drawer__contentExit_7o6t4","exitActiveRight":"drawer__exitActiveRight_7o6t4","exitActiveLeft":"drawer__exitActiveLeft_7o6t4","backdropExitActive":"drawer__backdropExitActive_7o6t4","backdropExitDone":"drawer__backdropExitDone_7o6t4","contentExitActive":"drawer__contentExitActive_7o6t4"};
|
|
8
|
-
require('./index.css')
|
|
6
|
+
import styles from './index.module.css.js';
|
|
9
7
|
|
|
10
8
|
var ANIMATION_DURATION = 600;
|
|
11
9
|
var DrawerContext = BaseModalContext;
|
|
@@ -69,3 +67,4 @@ var Drawer = forwardRef(function (_a, ref) {
|
|
|
69
67
|
Drawer.displayName = 'Drawer';
|
|
70
68
|
|
|
71
69
|
export { ANIMATION_DURATION, Drawer, DrawerContext };
|
|
70
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { TransitionProps } from 'react-transition-group/Transition';\nimport cn from 'classnames';\n\nimport { BaseModal, BaseModalContext, BaseModalProps } from '@alfalab/core-components-base-modal';\n\nimport styles from './index.module.css';\n\nexport const ANIMATION_DURATION = 600;\n\nexport type DrawerProps = Omit<BaseModalProps, 'container'> & {\n /**\n * Край экрана, с которого может появиться Drawer.\n * @default \"right\"\n */\n placement?: 'left' | 'right';\n\n /**\n * Нужно ли использовать нативный скроллбар\n * @default true\n */\n nativeScrollbar?: boolean;\n\n /**\n * Пропсы для анимации контента (CSSTransition)\n */\n contentTransitionProps?: Partial<TransitionProps>;\n};\n\nexport const DrawerContext = BaseModalContext;\n\nconst backdropProps = {\n transitionClassNames: {\n enter: styles.backdropEnter,\n appear: styles.backdropEnter,\n enterActive: styles.backdropEnterActive,\n appearActive: styles.backdropEnterActive,\n enterDone: styles.backdropEnterDone,\n appearDone: styles.backdropEnterDone,\n exit: styles.backdropExit,\n exitActive: styles.backdropExitActive,\n exitDone: styles.backdropExitDone,\n },\n timeout: ANIMATION_DURATION,\n};\n\nconst contentProps = {\n classNames: {\n enter: styles.contentEnter,\n appear: styles.contentEnter,\n enterActive: styles.contentEnterActive,\n appearActive: styles.contentEnterActive,\n exit: styles.contentExit,\n exitActive: styles.contentExitActive,\n },\n timeout: ANIMATION_DURATION,\n};\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n open,\n className,\n children,\n contentTransitionProps,\n nativeScrollbar = true,\n placement = 'right',\n ...restProps\n },\n ref,\n ) => {\n const isRightPlacement = placement === 'right';\n const isLeftPlacement = placement === 'left';\n\n const transitionProps = useMemo(() => {\n const enterClassName = cn({\n [styles.enterRight]: isRightPlacement,\n [styles.enterLeft]: isLeftPlacement,\n });\n\n const exitClassName = cn({\n [styles.exitActiveRight]: isRightPlacement,\n [styles.exitActiveLeft]: isLeftPlacement,\n });\n\n return {\n classNames: {\n enter: enterClassName,\n appear: enterClassName,\n enterActive: styles.enterActive,\n appearActive: styles.enterActive,\n exit: styles.exit,\n exitActive: exitClassName,\n },\n timeout: ANIMATION_DURATION,\n ...restProps.transitionProps,\n };\n }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);\n\n return (\n <BaseModal\n {...restProps}\n scrollHandler='content'\n ref={ref}\n open={open}\n className={cn(styles.component, className, {\n [styles.rightPlacement]: isRightPlacement,\n [styles.leftPlacement]: isLeftPlacement,\n [styles.customScrollbar]: !nativeScrollbar,\n })}\n transitionProps={transitionProps}\n backdropProps={{ ...backdropProps, ...restProps.backdropProps }}\n >\n <CSSTransition\n {...{ ...contentProps, ...contentTransitionProps }}\n appear={true}\n in={open}\n >\n <div className={styles.content}>{children}</div>\n </CSSTransition>\n </BaseModal>\n );\n },\n);\n\nDrawer.displayName = 'Drawer';\n"],"names":[],"mappings":"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"}
|
package/esm/index.css
CHANGED
|
@@ -1,128 +1,108 @@
|
|
|
1
|
-
|
|
2
|
-
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
4
2
|
--color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
|
|
5
3
|
--color-light-overlay-default: rgba(0, 0, 0, 0.6);
|
|
6
|
-
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
7
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
8
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
9
5
|
} :root {
|
|
10
|
-
|
|
11
|
-
/* Hard */
|
|
12
|
-
|
|
13
|
-
/* Up */
|
|
14
|
-
|
|
15
|
-
/* Hard up */
|
|
16
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
17
6
|
--border-radius-circle: 50%;
|
|
18
|
-
|
|
19
|
-
/* новые значения, используйте их */
|
|
20
7
|
--border-radius-6: 6px;
|
|
21
|
-
} :root {
|
|
22
|
-
|
|
23
|
-
/* новые значения, используйте их */
|
|
24
|
-
|
|
25
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
26
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
8
|
+
} :root {
|
|
27
9
|
--gap-0: 0px;
|
|
28
10
|
} :root {
|
|
29
|
-
} /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
|
|
30
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
31
11
|
--backdrop-visible-background: var(--color-light-overlay-default);
|
|
32
12
|
--backdrop-hidden-background: transparent;
|
|
33
13
|
} :root {
|
|
34
14
|
--drawer-width: 500px;
|
|
35
|
-
} .
|
|
15
|
+
} .drawer__component_1hc4v {
|
|
36
16
|
top: var(--gap-0);
|
|
37
17
|
height: 100%;
|
|
38
18
|
width: var(--drawer-width);
|
|
39
19
|
flex: 1;
|
|
40
20
|
overflow: auto;
|
|
41
21
|
will-change: transform;
|
|
42
|
-
} .
|
|
22
|
+
} .drawer__component_1hc4v.drawer__component_1hc4v {
|
|
43
23
|
position: fixed;
|
|
44
|
-
} .
|
|
24
|
+
} .drawer__customScrollbar_1hc4v {
|
|
45
25
|
overflow: auto;
|
|
46
26
|
cursor: auto;
|
|
47
|
-
} .
|
|
27
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar {
|
|
48
28
|
width: 12px;
|
|
49
29
|
height: 12px;
|
|
50
|
-
} .
|
|
30
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar-track {
|
|
51
31
|
background-color: transparent;
|
|
52
|
-
} .
|
|
32
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar-track-piece {
|
|
53
33
|
background-color: transparent;
|
|
54
|
-
} .
|
|
34
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar-thumb {
|
|
55
35
|
background-color: var(--color-light-neutral-translucent-500);
|
|
56
36
|
border-color: transparent;
|
|
57
37
|
border-style: solid;
|
|
58
38
|
border-width: 4px;
|
|
59
39
|
background-clip: padding-box;
|
|
60
|
-
} .
|
|
40
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar-thumb:vertical {
|
|
61
41
|
border-radius: var(--border-radius-circle) / var(--border-radius-6);
|
|
62
42
|
min-height: 40px;
|
|
63
|
-
} .
|
|
43
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar-thumb:vertical:hover {
|
|
64
44
|
border-radius: var(--border-radius-circle) / 7px;
|
|
65
45
|
border-width: 4px 3px;
|
|
66
|
-
} .
|
|
46
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar-thumb:horizontal {
|
|
67
47
|
border-radius: var(--border-radius-6) / var(--border-radius-circle);
|
|
68
48
|
min-width: 40px;
|
|
69
|
-
} .
|
|
49
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar-thumb:horizontal:hover {
|
|
70
50
|
border-radius: 7px / var(--border-radius-circle);
|
|
71
51
|
border-width: 3px 4px;
|
|
72
|
-
} .
|
|
52
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar-thumb:active {
|
|
73
53
|
background-color: var(--color-light-text-secondary);
|
|
74
|
-
} .
|
|
54
|
+
} .drawer__customScrollbar_1hc4v::-webkit-resizer {
|
|
75
55
|
background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
|
|
76
56
|
no-repeat right bottom;
|
|
77
|
-
} .
|
|
78
|
-
.
|
|
57
|
+
} .drawer__customScrollbar_1hc4v::-webkit-scrollbar-button,
|
|
58
|
+
.drawer__customScrollbar_1hc4v::-webkit-scrollbar-corner {
|
|
79
59
|
display: none;
|
|
80
|
-
} .
|
|
60
|
+
} .drawer__rightPlacement_1hc4v {
|
|
81
61
|
right: var(--gap-0);
|
|
82
62
|
align-self: flex-end;
|
|
83
|
-
} .
|
|
63
|
+
} .drawer__leftPlacement_1hc4v {
|
|
84
64
|
left: var(--gap-0);
|
|
85
65
|
align-self: flex-start;
|
|
86
|
-
} .
|
|
66
|
+
} .drawer__content_1hc4v {
|
|
87
67
|
width: 100%;
|
|
88
68
|
display: flex;
|
|
89
69
|
flex-direction: column;
|
|
90
70
|
flex: 1;
|
|
91
|
-
}
|
|
71
|
+
} .drawer__enterRight_1hc4v {
|
|
92
72
|
transform: translateX(100%);
|
|
93
|
-
} .
|
|
73
|
+
} .drawer__enterLeft_1hc4v {
|
|
94
74
|
transform: translateX(-100%);
|
|
95
|
-
} .
|
|
75
|
+
} .drawer__contentEnter_1hc4v {
|
|
96
76
|
opacity: 0;
|
|
97
|
-
} .
|
|
77
|
+
} .drawer__backdropEnter_1hc4v {
|
|
98
78
|
background-color: var(--backdrop-hidden-background);
|
|
99
|
-
} .
|
|
79
|
+
} .drawer__enterActive_1hc4v {
|
|
100
80
|
transition: transform 0.3s ease-in-out;
|
|
101
81
|
transform: translateX(0);
|
|
102
|
-
} .
|
|
103
|
-
.
|
|
82
|
+
} .drawer__backdropEnterActive_1hc4v,
|
|
83
|
+
.drawer__backdropEnterDone_1hc4v {
|
|
104
84
|
transition: background 0.3s ease-in-out;
|
|
105
85
|
background-color: var(--backdrop-visible-background);
|
|
106
|
-
} .
|
|
86
|
+
} .drawer__contentEnterActive_1hc4v {
|
|
107
87
|
transition: opacity 0.2s ease-in-out 0.3s;
|
|
108
88
|
opacity: 1;
|
|
109
|
-
}
|
|
89
|
+
} .drawer__exit_1hc4v {
|
|
110
90
|
transform: translateX(0);
|
|
111
|
-
} .
|
|
91
|
+
} .drawer__backdropExit_1hc4v {
|
|
112
92
|
background-color: var(--backdrop-visible-background);
|
|
113
|
-
} .
|
|
93
|
+
} .drawer__contentExit_1hc4v {
|
|
114
94
|
opacity: 1;
|
|
115
|
-
} .
|
|
95
|
+
} .drawer__exitActiveRight_1hc4v {
|
|
116
96
|
transition: transform 0.25s ease-in-out 0.1s;
|
|
117
97
|
transform: translateX(100%);
|
|
118
|
-
} .
|
|
98
|
+
} .drawer__exitActiveLeft_1hc4v {
|
|
119
99
|
transition: transform 0.25s ease-in-out 0.1s;
|
|
120
100
|
transform: translateX(-100%);
|
|
121
|
-
} .
|
|
122
|
-
.
|
|
101
|
+
} .drawer__backdropExitActive_1hc4v,
|
|
102
|
+
.drawer__backdropExitDone_1hc4v {
|
|
123
103
|
transition: background 0.25s ease-in-out 0.1s;
|
|
124
104
|
background-color: var(--backdrop-hidden-background);
|
|
125
|
-
} .
|
|
105
|
+
} .drawer__contentExitActive_1hc4v {
|
|
126
106
|
opacity: 0;
|
|
127
107
|
transition: opacity 0.12s ease-in-out;
|
|
128
108
|
}
|