@alfalab/core-components-drawer 6.0.0 → 6.1.0-snapshot-92b8690

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.
Files changed (22) hide show
  1. package/cssm/index.module.css +24 -13
  2. package/dynamic-mixins/Component.d.ts +37 -0
  3. package/dynamic-mixins/Component.js +81 -0
  4. package/dynamic-mixins/Component.js.map +1 -0
  5. package/dynamic-mixins/index.css +119 -0
  6. package/dynamic-mixins/index.d.ts +1 -0
  7. package/dynamic-mixins/index.js +12 -0
  8. package/dynamic-mixins/index.js.map +1 -0
  9. package/dynamic-mixins/index.module.css.js +8 -0
  10. package/dynamic-mixins/index.module.css.js.map +1 -0
  11. package/esm/index.css +45 -34
  12. package/esm/index.module.css.js +1 -1
  13. package/esm/index.module.css.js.map +1 -1
  14. package/index.css +45 -34
  15. package/index.module.css.js +1 -1
  16. package/index.module.css.js.map +1 -1
  17. package/modern/index.css +45 -34
  18. package/modern/index.module.css.js +1 -1
  19. package/modern/index.module.css.js.map +1 -1
  20. package/moderncssm/index.module.css +36 -13
  21. package/package.json +4 -4
  22. package/src/index.module.css +1 -1
package/cssm/index.module.css CHANGED
@@ -24,40 +24,51 @@
24
24
  } .customScrollbar {
25
25
  overflow: auto;
26
26
  cursor: auto;
27
- } .customScrollbar::-webkit-scrollbar {
27
+ &::-webkit-scrollbar {
28
28
  width: 12px;
29
29
  height: 12px;
30
- } .customScrollbar::-webkit-scrollbar-track {
30
+ }
31
+ &::-webkit-scrollbar-track {
31
32
  background-color: transparent;
32
- } .customScrollbar::-webkit-scrollbar-track-piece {
33
+ }
34
+ &::-webkit-scrollbar-track-piece {
33
35
  background-color: transparent;
34
- } .customScrollbar::-webkit-scrollbar-thumb {
36
+ }
37
+ &::-webkit-scrollbar-thumb {
35
38
  background-color: var(--color-light-neutral-translucent-500);
36
39
  border-color: transparent;
37
40
  border-style: solid;
38
41
  border-width: 4px;
39
42
  background-clip: padding-box;
40
- } .customScrollbar::-webkit-scrollbar-thumb:vertical {
43
+ }
44
+ &::-webkit-scrollbar-thumb:vertical {
41
45
  border-radius: var(--border-radius-circle) / var(--border-radius-6);
42
46
  min-height: 40px;
43
- } .customScrollbar::-webkit-scrollbar-thumb:vertical:hover {
47
+ }
48
+ &::-webkit-scrollbar-thumb:vertical:hover {
44
49
  border-radius: var(--border-radius-circle) / 7px;
45
50
  border-width: 4px 3px;
46
- } .customScrollbar::-webkit-scrollbar-thumb:horizontal {
51
+ }
52
+ &::-webkit-scrollbar-thumb:horizontal {
47
53
  border-radius: var(--border-radius-6) / var(--border-radius-circle);
48
54
  min-width: 40px;
49
- } .customScrollbar::-webkit-scrollbar-thumb:horizontal:hover {
55
+ }
56
+ &::-webkit-scrollbar-thumb:horizontal:hover {
50
57
  border-radius: 7px / var(--border-radius-circle);
51
58
  border-width: 3px 4px;
52
- } .customScrollbar::-webkit-scrollbar-thumb:active {
59
+ }
60
+ &::-webkit-scrollbar-thumb:active {
53
61
  background-color: var(--color-light-text-secondary);
54
- } .customScrollbar::-webkit-resizer {
62
+ }
63
+ &::-webkit-resizer {
55
64
  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>')
56
65
  no-repeat right bottom;
57
- } .customScrollbar::-webkit-scrollbar-button,
58
- .customScrollbar::-webkit-scrollbar-corner {
66
+ }
67
+ &::-webkit-scrollbar-button,
68
+ &::-webkit-scrollbar-corner {
59
69
  display: none;
60
- } .rightPlacement {
70
+ }
71
+ } .rightPlacement {
61
72
  right: var(--gap-0);
62
73
  align-self: flex-end;
63
74
  } .leftPlacement {
package/dynamic-mixins/Component.d.ts ADDED
@@ -0,0 +1,37 @@
1
+ import React from 'react';
2
+ import { TransitionProps } from 'react-transition-group/Transition';
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'> & {
6
+ /**
7
+ * Край экрана, с которого может появиться Drawer.
8
+ * @default "right"
9
+ */
10
+ placement?: 'left' | 'right';
11
+ /**
12
+ * Нужно ли использовать нативный скроллбар
13
+ * @default true
14
+ */
15
+ nativeScrollbar?: boolean;
16
+ /**
17
+ * Пропсы для анимации контента (CSSTransition)
18
+ */
19
+ contentTransitionProps?: Partial<TransitionProps>;
20
+ };
21
+ export declare const DrawerContext: React.Context<BaseModalContext>;
22
+ export declare const Drawer: React.ForwardRefExoticComponent<Omit<BaseModalProps, "container"> & {
23
+ /**
24
+ * Край экрана, с которого может появиться Drawer.
25
+ * @default "right"
26
+ */
27
+ placement?: "left" | "right" | undefined;
28
+ /**
29
+ * Нужно ли использовать нативный скроллбар
30
+ * @default true
31
+ */
32
+ nativeScrollbar?: boolean | undefined;
33
+ /**
34
+ * Пропсы для анимации контента (CSSTransition)
35
+ */
36
+ contentTransitionProps?: Partial<TransitionProps<undefined>> | undefined;
37
+ } & React.RefAttributes<HTMLDivElement>>;
package/dynamic-mixins/Component.js ADDED
@@ -0,0 +1,81 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib = require('tslib');
6
+ var React = require('react');
7
+ var reactTransitionGroup = require('react-transition-group');
8
+ var cn = require('classnames');
9
+ var dynamicMixins = require('@alfalab/core-components-base-modal/dynamic-mixins');
10
+ var index_module = require('./index.module.css.js');
11
+
12
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
13
+
14
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
+ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
+
17
+ var ANIMATION_DURATION = 600;
18
+ var DrawerContext = dynamicMixins.BaseModalContext;
19
+ var backdropProps = {
20
+ transitionClassNames: {
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,
30
+ },
31
+ timeout: ANIMATION_DURATION,
32
+ };
33
+ var contentProps = {
34
+ classNames: {
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,
41
+ },
42
+ timeout: ANIMATION_DURATION,
43
+ };
44
+ var Drawer = React.forwardRef(function (_a, ref) {
45
+ var _b;
46
+ var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, restProps = tslib.__rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement"]);
47
+ var isRightPlacement = placement === 'right';
48
+ var isLeftPlacement = placement === 'left';
49
+ var transitionProps = React.useMemo(function () {
50
+ var _a, _b;
51
+ var enterClassName = cn__default.default((_a = {},
52
+ _a[index_module.enterRight] = isRightPlacement,
53
+ _a[index_module.enterLeft] = isLeftPlacement,
54
+ _a));
55
+ var exitClassName = cn__default.default((_b = {},
56
+ _b[index_module.exitActiveRight] = isRightPlacement,
57
+ _b[index_module.exitActiveLeft] = isLeftPlacement,
58
+ _b));
59
+ return tslib.__assign({ classNames: {
60
+ enter: enterClassName,
61
+ appear: enterClassName,
62
+ enterActive: index_module.enterActive,
63
+ appearActive: index_module.enterActive,
64
+ exit: index_module.exit,
65
+ exitActive: exitClassName,
66
+ }, timeout: ANIMATION_DURATION }, restProps.transitionProps);
67
+ }, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
68
+ return (React__default.default.createElement(dynamicMixins.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,
72
+ _b)), transitionProps: transitionProps, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), restProps.backdropProps) }),
73
+ React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({}, tslib.__assign(tslib.__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }),
74
+ React__default.default.createElement("div", { className: index_module.content }, children))));
75
+ });
76
+ Drawer.displayName = 'Drawer';
77
+
78
+ exports.ANIMATION_DURATION = ANIMATION_DURATION;
79
+ exports.Drawer = Drawer;
80
+ exports.DrawerContext = DrawerContext;
81
+ //# sourceMappingURL=Component.js.map
package/dynamic-mixins/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":";;;;;;;;;;;;;;;;AASO,IAAM,kBAAkB,GAAG;AAqB3B,IAAM,aAAa,GAAGA;AAE7B,IAAM,aAAa,GAAG;AAClB,IAAA,oBAAoB,EAAE;QAClB,KAAK,EAAEC,YAAM,CAAC,aAAa;QAC3B,MAAM,EAAEA,YAAM,CAAC,aAAa;QAC5B,WAAW,EAAEA,YAAM,CAAC,mBAAmB;QACvC,YAAY,EAAEA,YAAM,CAAC,mBAAmB;QACxC,SAAS,EAAEA,YAAM,CAAC,iBAAiB;QACnC,UAAU,EAAEA,YAAM,CAAC,iBAAiB;QACpC,IAAI,EAAEA,YAAM,CAAC,YAAY;QACzB,UAAU,EAAEA,YAAM,CAAC,kBAAkB;QACrC,QAAQ,EAAEA,YAAM,CAAC,gBAAgB;AACpC,KAAA;AACD,IAAA,OAAO,EAAE,kBAAkB;CAC9B;AAED,IAAM,YAAY,GAAG;AACjB,IAAA,UAAU,EAAE;QACR,KAAK,EAAEA,YAAM,CAAC,YAAY;QAC1B,MAAM,EAAEA,YAAM,CAAC,YAAY;QAC3B,WAAW,EAAEA,YAAM,CAAC,kBAAkB;QACtC,YAAY,EAAEA,YAAM,CAAC,kBAAkB;QACvC,IAAI,EAAEA,YAAM,CAAC,WAAW;QACxB,UAAU,EAAEA,YAAM,CAAC,iBAAiB;AACvC,KAAA;AACD,IAAA,OAAO,EAAE,kBAAkB;CAC9B;IAEY,MAAM,GAAGC,gBAAU,CAC5B,UACI,EAQC,EACD,GAAG,EAAA;;AARC,IAAA,IAAA,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,sBAAsB,GAAA,EAAA,CAAA,sBAAA,EACtB,EAAsB,GAAA,EAAA,CAAA,eAAA,EAAtB,eAAe,GAAA,EAAA,KAAA,MAAA,GAAG,IAAI,GAAA,EAAA,EACtB,EAAA,GAAA,EAAA,CAAA,SAAmB,EAAnB,SAAS,GAAG,EAAA,KAAA,MAAA,GAAA,OAAO,GAAA,EAAA,EAChB,SAAS,GAAAC,YAAA,CAAA,EAAA,EAPhB,2FAQC,CADe;AAIhB,IAAA,IAAM,gBAAgB,GAAG,SAAS,KAAK,OAAO;AAC9C,IAAA,IAAM,eAAe,GAAG,SAAS,KAAK,MAAM;IAE5C,IAAM,eAAe,GAAGC,aAAO,CAAC,YAAA;;QAC5B,IAAM,cAAc,GAAGC,mBAAE,EAAA,EAAA,GAAA,EAAA;AACrB,YAAA,EAAA,CAACJ,YAAM,CAAC,UAAU,CAAA,GAAG,gBAAgB;AACrC,YAAA,EAAA,CAACA,YAAM,CAAC,SAAS,CAAA,GAAG,eAAe;gBACrC;QAEF,IAAM,aAAa,GAAGI,mBAAE,EAAA,EAAA,GAAA,EAAA;AACpB,YAAA,EAAA,CAACJ,YAAM,CAAC,eAAe,CAAA,GAAG,gBAAgB;AAC1C,YAAA,EAAA,CAACA,YAAM,CAAC,cAAc,CAAA,GAAG,eAAe;gBAC1C;AAEF,QAAA,OAAAK,cAAA,CAAA,EACI,UAAU,EAAE;AACR,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,MAAM,EAAE,cAAc;gBACtB,WAAW,EAAEL,YAAM,CAAC,WAAW;gBAC/B,YAAY,EAAEA,YAAM,CAAC,WAAW;gBAChC,IAAI,EAAEA,YAAM,CAAC,IAAI;AACjB,gBAAA,UAAU,EAAE,aAAa;AAC5B,aAAA,EACD,OAAO,EAAE,kBAAkB,IACxB,SAAS,CAAC,eAAe,CAC9B;KACL,EAAE,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,EAAE,gBAAgB,CAAC,CAAC;IAElE,QACIM,sBAAC,CAAA,aAAA,CAAAC,uBAAS,EACFF,cAAA,CAAA,EAAA,EAAA,SAAS,EACb,EAAA,aAAa,EAAC,SAAS,EACvB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAED,mBAAE,CAACJ,YAAM,CAAC,SAAS,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AACrC,YAAA,EAAA,CAACA,YAAM,CAAC,cAAc,CAAA,GAAG,gBAAgB;AACzC,YAAA,EAAA,CAACA,YAAM,CAAC,aAAa,CAAA,GAAG,eAAe;AACvC,YAAA,EAAA,CAACA,YAAM,CAAC,eAAe,CAAA,GAAG,CAAC,eAAe;gBAC5C,EACF,eAAe,EAAE,eAAe,EAChC,aAAa,oCAAO,aAAa,CAAA,EAAK,SAAS,CAAC,aAAa,CAAA,EAAA,CAAA;AAE7D,QAAAM,sBAAA,CAAA,aAAA,CAACE,kCAAa,EAAAH,cAAA,CAAA,EAAA,EAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACD,YAAY,CAAA,EAAK,sBAAsB,CAAA,EAAA,EAChD,MAAM,EAAE,IAAI,EACZ,EAAE,EAAE,IAAI,EAAA,CAAA;YAERC,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEN,YAAM,CAAC,OAAO,EAAG,EAAA,QAAQ,CAAO,CACpC,CACR;AAEpB,CAAC;AAGL,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;;;"}
package/dynamic-mixins/index.css ADDED
@@ -0,0 +1,119 @@
1
+ :root {
2
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
3
+ --color-light-overlay-default: rgba(0, 0, 0, 0.6);
4
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55);
5
+ } :root {
6
+ --border-radius-circle: 50%;
7
+ --border-radius-6: 6px;
8
+ } :root {
9
+ --gap-0: 0px;
10
+ } :root {
11
+ --backdrop-visible-background: var(--color-light-overlay-default);
12
+ --backdrop-hidden-background: transparent;
13
+ } :root {
14
+ --drawer-width: 500px;
15
+ } .drawer__component_1wcfi {
16
+ top: var(--gap-0);
17
+ height: 100%;
18
+ width: var(--drawer-width);
19
+ flex: 1;
20
+ overflow: auto;
21
+ will-change: transform;
22
+ } .drawer__component_1wcfi.drawer__component_1wcfi {
23
+ position: fixed;
24
+ } .drawer__customScrollbar_1wcfi {
25
+ overflow: auto;
26
+ cursor: auto;
27
+ &::-webkit-scrollbar {
28
+ width: 12px;
29
+ height: 12px;
30
+ }
31
+ &::-webkit-scrollbar-track {
32
+ background-color: transparent;
33
+ }
34
+ &::-webkit-scrollbar-track-piece {
35
+ background-color: transparent;
36
+ }
37
+ &::-webkit-scrollbar-thumb {
38
+ background-color: var(--color-light-neutral-translucent-500);
39
+ border-color: transparent;
40
+ border-style: solid;
41
+ border-width: 4px;
42
+ background-clip: padding-box;
43
+ }
44
+ &::-webkit-scrollbar-thumb:vertical {
45
+ border-radius: var(--border-radius-circle) / var(--border-radius-6);
46
+ min-height: 40px;
47
+ }
48
+ &::-webkit-scrollbar-thumb:vertical:hover {
49
+ border-radius: var(--border-radius-circle) / 7px;
50
+ border-width: 4px 3px;
51
+ }
52
+ &::-webkit-scrollbar-thumb:horizontal {
53
+ border-radius: var(--border-radius-6) / var(--border-radius-circle);
54
+ min-width: 40px;
55
+ }
56
+ &::-webkit-scrollbar-thumb:horizontal:hover {
57
+ border-radius: 7px / var(--border-radius-circle);
58
+ border-width: 3px 4px;
59
+ }
60
+ &::-webkit-scrollbar-thumb:active {
61
+ background-color: var(--color-light-text-secondary);
62
+ }
63
+ &::-webkit-resizer {
64
+ 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>')
65
+ no-repeat right bottom;
66
+ }
67
+ &::-webkit-scrollbar-button,
68
+ &::-webkit-scrollbar-corner {
69
+ display: none;
70
+ }
71
+ } .drawer__rightPlacement_1wcfi {
72
+ right: var(--gap-0);
73
+ align-self: flex-end;
74
+ } .drawer__leftPlacement_1wcfi {
75
+ left: var(--gap-0);
76
+ align-self: flex-start;
77
+ } .drawer__content_1wcfi {
78
+ width: 100%;
79
+ display: flex;
80
+ flex-direction: column;
81
+ flex: 1;
82
+ } .drawer__enterRight_1wcfi {
83
+ transform: translateX(100%);
84
+ } .drawer__enterLeft_1wcfi {
85
+ transform: translateX(-100%);
86
+ } .drawer__contentEnter_1wcfi {
87
+ opacity: 0;
88
+ } .drawer__backdropEnter_1wcfi {
89
+ background-color: var(--backdrop-hidden-background);
90
+ } .drawer__enterActive_1wcfi {
91
+ transition: transform 0.3s ease-in-out;
92
+ transform: translateX(0);
93
+ } .drawer__backdropEnterActive_1wcfi,
94
+ .drawer__backdropEnterDone_1wcfi {
95
+ transition: background 0.3s ease-in-out;
96
+ background-color: var(--backdrop-visible-background);
97
+ } .drawer__contentEnterActive_1wcfi {
98
+ transition: opacity 0.2s ease-in-out 0.3s;
99
+ opacity: 1;
100
+ } .drawer__exit_1wcfi {
101
+ transform: translateX(0);
102
+ } .drawer__backdropExit_1wcfi {
103
+ background-color: var(--backdrop-visible-background);
104
+ } .drawer__contentExit_1wcfi {
105
+ opacity: 1;
106
+ } .drawer__exitActiveRight_1wcfi {
107
+ transition: transform 0.25s ease-in-out 0.1s;
108
+ transform: translateX(100%);
109
+ } .drawer__exitActiveLeft_1wcfi {
110
+ transition: transform 0.25s ease-in-out 0.1s;
111
+ transform: translateX(-100%);
112
+ } .drawer__backdropExitActive_1wcfi,
113
+ .drawer__backdropExitDone_1wcfi {
114
+ transition: background 0.25s ease-in-out 0.1s;
115
+ background-color: var(--backdrop-hidden-background);
116
+ } .drawer__contentExitActive_1wcfi {
117
+ opacity: 0;
118
+ transition: opacity 0.12s ease-in-out;
119
+ }
package/dynamic-mixins/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';
package/dynamic-mixins/index.js ADDED
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var Component = require('./Component.js');
6
+
7
+
8
+
9
+ exports.ANIMATION_DURATION = Component.ANIMATION_DURATION;
10
+ exports.Drawer = Component.Drawer;
11
+ exports.DrawerContext = Component.DrawerContext;
12
+ //# sourceMappingURL=index.js.map
package/dynamic-mixins/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
package/dynamic-mixins/index.module.css.js ADDED
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ require('./index.css');
4
+
5
+ var styles = {"component":"drawer__component_1wcfi","customScrollbar":"drawer__customScrollbar_1wcfi","rightPlacement":"drawer__rightPlacement_1wcfi","leftPlacement":"drawer__leftPlacement_1wcfi","content":"drawer__content_1wcfi","enterRight":"drawer__enterRight_1wcfi","enterLeft":"drawer__enterLeft_1wcfi","contentEnter":"drawer__contentEnter_1wcfi","backdropEnter":"drawer__backdropEnter_1wcfi","enterActive":"drawer__enterActive_1wcfi","backdropEnterActive":"drawer__backdropEnterActive_1wcfi","backdropEnterDone":"drawer__backdropEnterDone_1wcfi","contentEnterActive":"drawer__contentEnterActive_1wcfi","exit":"drawer__exit_1wcfi","backdropExit":"drawer__backdropExit_1wcfi","contentExit":"drawer__contentExit_1wcfi","exitActiveRight":"drawer__exitActiveRight_1wcfi","exitActiveLeft":"drawer__exitActiveLeft_1wcfi","backdropExitActive":"drawer__backdropExitActive_1wcfi","backdropExitDone":"drawer__backdropExitDone_1wcfi","contentExitActive":"drawer__contentExitActive_1wcfi"};
6
+
7
+ module.exports = styles;
8
+ //# sourceMappingURL=index.module.css.js.map
package/dynamic-mixins/index.module.css.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n --drawer-width: 500px;\n}\n\n.component {\n top: var(--gap-0);\n height: 100%;\n width: var(--drawer-width);\n flex: 1;\n overflow: auto;\n will-change: transform;\n}\n\n.component.component {\n position: fixed;\n}\n\n.customScrollbar {\n @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n right: var(--gap-0);\n align-self: flex-end;\n}\n\n.leftPlacement {\n left: var(--gap-0);\n align-self: flex-start;\n}\n\n.content {\n width: 100%;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n transform: translateX(100%);\n}\n\n.enterLeft {\n transform: translateX(-100%);\n}\n\n.contentEnter {\n opacity: 0;\n}\n\n.backdropEnter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n transition: background 0.3s ease-in-out;\n background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n transition: opacity 0.2s ease-in-out 0.3s;\n opacity: 1;\n}\n\n/* exit */\n\n.exit {\n transform: translateX(0);\n}\n\n.backdropExit {\n background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n opacity: 1;\n}\n\n.exitActiveRight {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(100%);\n}\n\n.exitActiveLeft {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n transition: background 0.25s ease-in-out 0.1s;\n background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n opacity: 0;\n transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
package/esm/index.css CHANGED
@@ -12,97 +12,108 @@
12
12
  --backdrop-hidden-background: transparent;
13
13
  } :root {
14
14
  --drawer-width: 500px;
15
- } .drawer__component_1shfy {
15
+ } .drawer__component_1wcfi {
16
16
  top: var(--gap-0);
17
17
  height: 100%;
18
18
  width: var(--drawer-width);
19
19
  flex: 1;
20
20
  overflow: auto;
21
21
  will-change: transform;
22
- } .drawer__component_1shfy.drawer__component_1shfy {
22
+ } .drawer__component_1wcfi.drawer__component_1wcfi {
23
23
  position: fixed;
24
- } .drawer__customScrollbar_1shfy {
24
+ } .drawer__customScrollbar_1wcfi {
25
25
  overflow: auto;
26
26
  cursor: auto;
27
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar {
27
+ &::-webkit-scrollbar {
28
28
  width: 12px;
29
29
  height: 12px;
30
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-track {
30
+ }
31
+ &::-webkit-scrollbar-track {
31
32
  background-color: transparent;
32
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-track-piece {
33
+ }
34
+ &::-webkit-scrollbar-track-piece {
33
35
  background-color: transparent;
34
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb {
36
+ }
37
+ &::-webkit-scrollbar-thumb {
35
38
  background-color: var(--color-light-neutral-translucent-500);
36
39
  border-color: transparent;
37
40
  border-style: solid;
38
41
  border-width: 4px;
39
42
  background-clip: padding-box;
40
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:vertical {
43
+ }
44
+ &::-webkit-scrollbar-thumb:vertical {
41
45
  border-radius: var(--border-radius-circle) / var(--border-radius-6);
42
46
  min-height: 40px;
43
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:vertical:hover {
47
+ }
48
+ &::-webkit-scrollbar-thumb:vertical:hover {
44
49
  border-radius: var(--border-radius-circle) / 7px;
45
50
  border-width: 4px 3px;
46
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:horizontal {
51
+ }
52
+ &::-webkit-scrollbar-thumb:horizontal {
47
53
  border-radius: var(--border-radius-6) / var(--border-radius-circle);
48
54
  min-width: 40px;
49
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:horizontal:hover {
55
+ }
56
+ &::-webkit-scrollbar-thumb:horizontal:hover {
50
57
  border-radius: 7px / var(--border-radius-circle);
51
58
  border-width: 3px 4px;
52
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:active {
59
+ }
60
+ &::-webkit-scrollbar-thumb:active {
53
61
  background-color: var(--color-light-text-secondary);
54
- } .drawer__customScrollbar_1shfy::-webkit-resizer {
62
+ }
63
+ &::-webkit-resizer {
55
64
  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>')
56
65
  no-repeat right bottom;
57
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-button,
58
- .drawer__customScrollbar_1shfy::-webkit-scrollbar-corner {
66
+ }
67
+ &::-webkit-scrollbar-button,
68
+ &::-webkit-scrollbar-corner {
59
69
  display: none;
60
- } .drawer__rightPlacement_1shfy {
70
+ }
71
+ } .drawer__rightPlacement_1wcfi {
61
72
  right: var(--gap-0);
62
73
  align-self: flex-end;
63
- } .drawer__leftPlacement_1shfy {
74
+ } .drawer__leftPlacement_1wcfi {
64
75
  left: var(--gap-0);
65
76
  align-self: flex-start;
66
- } .drawer__content_1shfy {
77
+ } .drawer__content_1wcfi {
67
78
  width: 100%;
68
79
  display: flex;
69
80
  flex-direction: column;
70
81
  flex: 1;
71
- } .drawer__enterRight_1shfy {
82
+ } .drawer__enterRight_1wcfi {
72
83
  transform: translateX(100%);
73
- } .drawer__enterLeft_1shfy {
84
+ } .drawer__enterLeft_1wcfi {
74
85
  transform: translateX(-100%);
75
- } .drawer__contentEnter_1shfy {
86
+ } .drawer__contentEnter_1wcfi {
76
87
  opacity: 0;
77
- } .drawer__backdropEnter_1shfy {
88
+ } .drawer__backdropEnter_1wcfi {
78
89
  background-color: var(--backdrop-hidden-background);
79
- } .drawer__enterActive_1shfy {
90
+ } .drawer__enterActive_1wcfi {
80
91
  transition: transform 0.3s ease-in-out;
81
92
  transform: translateX(0);
82
- } .drawer__backdropEnterActive_1shfy,
83
- .drawer__backdropEnterDone_1shfy {
93
+ } .drawer__backdropEnterActive_1wcfi,
94
+ .drawer__backdropEnterDone_1wcfi {
84
95
  transition: background 0.3s ease-in-out;
85
96
  background-color: var(--backdrop-visible-background);
86
- } .drawer__contentEnterActive_1shfy {
97
+ } .drawer__contentEnterActive_1wcfi {
87
98
  transition: opacity 0.2s ease-in-out 0.3s;
88
99
  opacity: 1;
89
- } .drawer__exit_1shfy {
100
+ } .drawer__exit_1wcfi {
90
101
  transform: translateX(0);
91
- } .drawer__backdropExit_1shfy {
102
+ } .drawer__backdropExit_1wcfi {
92
103
  background-color: var(--backdrop-visible-background);
93
- } .drawer__contentExit_1shfy {
104
+ } .drawer__contentExit_1wcfi {
94
105
  opacity: 1;
95
- } .drawer__exitActiveRight_1shfy {
106
+ } .drawer__exitActiveRight_1wcfi {
96
107
  transition: transform 0.25s ease-in-out 0.1s;
97
108
  transform: translateX(100%);
98
- } .drawer__exitActiveLeft_1shfy {
109
+ } .drawer__exitActiveLeft_1wcfi {
99
110
  transition: transform 0.25s ease-in-out 0.1s;
100
111
  transform: translateX(-100%);
101
- } .drawer__backdropExitActive_1shfy,
102
- .drawer__backdropExitDone_1shfy {
112
+ } .drawer__backdropExitActive_1wcfi,
113
+ .drawer__backdropExitDone_1wcfi {
103
114
  transition: background 0.25s ease-in-out 0.1s;
104
115
  background-color: var(--backdrop-hidden-background);
105
- } .drawer__contentExitActive_1shfy {
116
+ } .drawer__contentExitActive_1wcfi {
106
117
  opacity: 0;
107
118
  transition: opacity 0.12s ease-in-out;
108
119
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"drawer__component_1shfy","customScrollbar":"drawer__customScrollbar_1shfy","rightPlacement":"drawer__rightPlacement_1shfy","leftPlacement":"drawer__leftPlacement_1shfy","content":"drawer__content_1shfy","enterRight":"drawer__enterRight_1shfy","enterLeft":"drawer__enterLeft_1shfy","contentEnter":"drawer__contentEnter_1shfy","backdropEnter":"drawer__backdropEnter_1shfy","enterActive":"drawer__enterActive_1shfy","backdropEnterActive":"drawer__backdropEnterActive_1shfy","backdropEnterDone":"drawer__backdropEnterDone_1shfy","contentEnterActive":"drawer__contentEnterActive_1shfy","exit":"drawer__exit_1shfy","backdropExit":"drawer__backdropExit_1shfy","contentExit":"drawer__contentExit_1shfy","exitActiveRight":"drawer__exitActiveRight_1shfy","exitActiveLeft":"drawer__exitActiveLeft_1shfy","backdropExitActive":"drawer__backdropExitActive_1shfy","backdropExitDone":"drawer__backdropExitDone_1shfy","contentExitActive":"drawer__contentExitActive_1shfy"};
3
+ var styles = {"component":"drawer__component_1wcfi","customScrollbar":"drawer__customScrollbar_1wcfi","rightPlacement":"drawer__rightPlacement_1wcfi","leftPlacement":"drawer__leftPlacement_1wcfi","content":"drawer__content_1wcfi","enterRight":"drawer__enterRight_1wcfi","enterLeft":"drawer__enterLeft_1wcfi","contentEnter":"drawer__contentEnter_1wcfi","backdropEnter":"drawer__backdropEnter_1wcfi","enterActive":"drawer__enterActive_1wcfi","backdropEnterActive":"drawer__backdropEnterActive_1wcfi","backdropEnterDone":"drawer__backdropEnterDone_1wcfi","contentEnterActive":"drawer__contentEnterActive_1wcfi","exit":"drawer__exit_1wcfi","backdropExit":"drawer__backdropExit_1wcfi","contentExit":"drawer__contentExit_1wcfi","exitActiveRight":"drawer__exitActiveRight_1wcfi","exitActiveLeft":"drawer__exitActiveLeft_1wcfi","backdropExitActive":"drawer__backdropExitActive_1wcfi","backdropExitDone":"drawer__backdropExitDone_1wcfi","contentExitActive":"drawer__contentExitActive_1wcfi"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n --drawer-width: 500px;\n}\n\n.component {\n top: var(--gap-0);\n height: 100%;\n width: var(--drawer-width);\n flex: 1;\n overflow: auto;\n will-change: transform;\n}\n\n.component.component {\n position: fixed;\n}\n\n.customScrollbar {\n @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n right: var(--gap-0);\n align-self: flex-end;\n}\n\n.leftPlacement {\n left: var(--gap-0);\n align-self: flex-start;\n}\n\n.content {\n width: 100%;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n transform: translateX(100%);\n}\n\n.enterLeft {\n transform: translateX(-100%);\n}\n\n.contentEnter {\n opacity: 0;\n}\n\n.backdropEnter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n transition: background 0.3s ease-in-out;\n background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n transition: opacity 0.2s ease-in-out 0.3s;\n opacity: 1;\n}\n\n/* exit */\n\n.exit {\n transform: translateX(0);\n}\n\n.backdropExit {\n background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n opacity: 1;\n}\n\n.exitActiveRight {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(100%);\n}\n\n.exitActiveLeft {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n transition: background 0.25s ease-in-out 0.1s;\n background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n opacity: 0;\n transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n --drawer-width: 500px;\n}\n\n.component {\n top: var(--gap-0);\n height: 100%;\n width: var(--drawer-width);\n flex: 1;\n overflow: auto;\n will-change: transform;\n}\n\n.component.component {\n position: fixed;\n}\n\n.customScrollbar {\n @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n right: var(--gap-0);\n align-self: flex-end;\n}\n\n.leftPlacement {\n left: var(--gap-0);\n align-self: flex-start;\n}\n\n.content {\n width: 100%;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n transform: translateX(100%);\n}\n\n.enterLeft {\n transform: translateX(-100%);\n}\n\n.contentEnter {\n opacity: 0;\n}\n\n.backdropEnter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n transition: background 0.3s ease-in-out;\n background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n transition: opacity 0.2s ease-in-out 0.3s;\n opacity: 1;\n}\n\n/* exit */\n\n.exit {\n transform: translateX(0);\n}\n\n.backdropExit {\n background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n opacity: 1;\n}\n\n.exitActiveRight {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(100%);\n}\n\n.exitActiveLeft {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n transition: background 0.25s ease-in-out 0.1s;\n background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n opacity: 0;\n transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
package/index.css CHANGED
@@ -12,97 +12,108 @@
12
12
  --backdrop-hidden-background: transparent;
13
13
  } :root {
14
14
  --drawer-width: 500px;
15
- } .drawer__component_1shfy {
15
+ } .drawer__component_1wcfi {
16
16
  top: var(--gap-0);
17
17
  height: 100%;
18
18
  width: var(--drawer-width);
19
19
  flex: 1;
20
20
  overflow: auto;
21
21
  will-change: transform;
22
- } .drawer__component_1shfy.drawer__component_1shfy {
22
+ } .drawer__component_1wcfi.drawer__component_1wcfi {
23
23
  position: fixed;
24
- } .drawer__customScrollbar_1shfy {
24
+ } .drawer__customScrollbar_1wcfi {
25
25
  overflow: auto;
26
26
  cursor: auto;
27
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar {
27
+ &::-webkit-scrollbar {
28
28
  width: 12px;
29
29
  height: 12px;
30
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-track {
30
+ }
31
+ &::-webkit-scrollbar-track {
31
32
  background-color: transparent;
32
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-track-piece {
33
+ }
34
+ &::-webkit-scrollbar-track-piece {
33
35
  background-color: transparent;
34
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb {
36
+ }
37
+ &::-webkit-scrollbar-thumb {
35
38
  background-color: var(--color-light-neutral-translucent-500);
36
39
  border-color: transparent;
37
40
  border-style: solid;
38
41
  border-width: 4px;
39
42
  background-clip: padding-box;
40
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:vertical {
43
+ }
44
+ &::-webkit-scrollbar-thumb:vertical {
41
45
  border-radius: var(--border-radius-circle) / var(--border-radius-6);
42
46
  min-height: 40px;
43
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:vertical:hover {
47
+ }
48
+ &::-webkit-scrollbar-thumb:vertical:hover {
44
49
  border-radius: var(--border-radius-circle) / 7px;
45
50
  border-width: 4px 3px;
46
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:horizontal {
51
+ }
52
+ &::-webkit-scrollbar-thumb:horizontal {
47
53
  border-radius: var(--border-radius-6) / var(--border-radius-circle);
48
54
  min-width: 40px;
49
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:horizontal:hover {
55
+ }
56
+ &::-webkit-scrollbar-thumb:horizontal:hover {
50
57
  border-radius: 7px / var(--border-radius-circle);
51
58
  border-width: 3px 4px;
52
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:active {
59
+ }
60
+ &::-webkit-scrollbar-thumb:active {
53
61
  background-color: var(--color-light-text-secondary);
54
- } .drawer__customScrollbar_1shfy::-webkit-resizer {
62
+ }
63
+ &::-webkit-resizer {
55
64
  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>')
56
65
  no-repeat right bottom;
57
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-button,
58
- .drawer__customScrollbar_1shfy::-webkit-scrollbar-corner {
66
+ }
67
+ &::-webkit-scrollbar-button,
68
+ &::-webkit-scrollbar-corner {
59
69
  display: none;
60
- } .drawer__rightPlacement_1shfy {
70
+ }
71
+ } .drawer__rightPlacement_1wcfi {
61
72
  right: var(--gap-0);
62
73
  align-self: flex-end;
63
- } .drawer__leftPlacement_1shfy {
74
+ } .drawer__leftPlacement_1wcfi {
64
75
  left: var(--gap-0);
65
76
  align-self: flex-start;
66
- } .drawer__content_1shfy {
77
+ } .drawer__content_1wcfi {
67
78
  width: 100%;
68
79
  display: flex;
69
80
  flex-direction: column;
70
81
  flex: 1;
71
- } .drawer__enterRight_1shfy {
82
+ } .drawer__enterRight_1wcfi {
72
83
  transform: translateX(100%);
73
- } .drawer__enterLeft_1shfy {
84
+ } .drawer__enterLeft_1wcfi {
74
85
  transform: translateX(-100%);
75
- } .drawer__contentEnter_1shfy {
86
+ } .drawer__contentEnter_1wcfi {
76
87
  opacity: 0;
77
- } .drawer__backdropEnter_1shfy {
88
+ } .drawer__backdropEnter_1wcfi {
78
89
  background-color: var(--backdrop-hidden-background);
79
- } .drawer__enterActive_1shfy {
90
+ } .drawer__enterActive_1wcfi {
80
91
  transition: transform 0.3s ease-in-out;
81
92
  transform: translateX(0);
82
- } .drawer__backdropEnterActive_1shfy,
83
- .drawer__backdropEnterDone_1shfy {
93
+ } .drawer__backdropEnterActive_1wcfi,
94
+ .drawer__backdropEnterDone_1wcfi {
84
95
  transition: background 0.3s ease-in-out;
85
96
  background-color: var(--backdrop-visible-background);
86
- } .drawer__contentEnterActive_1shfy {
97
+ } .drawer__contentEnterActive_1wcfi {
87
98
  transition: opacity 0.2s ease-in-out 0.3s;
88
99
  opacity: 1;
89
- } .drawer__exit_1shfy {
100
+ } .drawer__exit_1wcfi {
90
101
  transform: translateX(0);
91
- } .drawer__backdropExit_1shfy {
102
+ } .drawer__backdropExit_1wcfi {
92
103
  background-color: var(--backdrop-visible-background);
93
- } .drawer__contentExit_1shfy {
104
+ } .drawer__contentExit_1wcfi {
94
105
  opacity: 1;
95
- } .drawer__exitActiveRight_1shfy {
106
+ } .drawer__exitActiveRight_1wcfi {
96
107
  transition: transform 0.25s ease-in-out 0.1s;
97
108
  transform: translateX(100%);
98
- } .drawer__exitActiveLeft_1shfy {
109
+ } .drawer__exitActiveLeft_1wcfi {
99
110
  transition: transform 0.25s ease-in-out 0.1s;
100
111
  transform: translateX(-100%);
101
- } .drawer__backdropExitActive_1shfy,
102
- .drawer__backdropExitDone_1shfy {
112
+ } .drawer__backdropExitActive_1wcfi,
113
+ .drawer__backdropExitDone_1wcfi {
103
114
  transition: background 0.25s ease-in-out 0.1s;
104
115
  background-color: var(--backdrop-hidden-background);
105
- } .drawer__contentExitActive_1shfy {
116
+ } .drawer__contentExitActive_1wcfi {
106
117
  opacity: 0;
107
118
  transition: opacity 0.12s ease-in-out;
108
119
  }
package/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"drawer__component_1shfy","customScrollbar":"drawer__customScrollbar_1shfy","rightPlacement":"drawer__rightPlacement_1shfy","leftPlacement":"drawer__leftPlacement_1shfy","content":"drawer__content_1shfy","enterRight":"drawer__enterRight_1shfy","enterLeft":"drawer__enterLeft_1shfy","contentEnter":"drawer__contentEnter_1shfy","backdropEnter":"drawer__backdropEnter_1shfy","enterActive":"drawer__enterActive_1shfy","backdropEnterActive":"drawer__backdropEnterActive_1shfy","backdropEnterDone":"drawer__backdropEnterDone_1shfy","contentEnterActive":"drawer__contentEnterActive_1shfy","exit":"drawer__exit_1shfy","backdropExit":"drawer__backdropExit_1shfy","contentExit":"drawer__contentExit_1shfy","exitActiveRight":"drawer__exitActiveRight_1shfy","exitActiveLeft":"drawer__exitActiveLeft_1shfy","backdropExitActive":"drawer__backdropExitActive_1shfy","backdropExitDone":"drawer__backdropExitDone_1shfy","contentExitActive":"drawer__contentExitActive_1shfy"};
5
+ var styles = {"component":"drawer__component_1wcfi","customScrollbar":"drawer__customScrollbar_1wcfi","rightPlacement":"drawer__rightPlacement_1wcfi","leftPlacement":"drawer__leftPlacement_1wcfi","content":"drawer__content_1wcfi","enterRight":"drawer__enterRight_1wcfi","enterLeft":"drawer__enterLeft_1wcfi","contentEnter":"drawer__contentEnter_1wcfi","backdropEnter":"drawer__backdropEnter_1wcfi","enterActive":"drawer__enterActive_1wcfi","backdropEnterActive":"drawer__backdropEnterActive_1wcfi","backdropEnterDone":"drawer__backdropEnterDone_1wcfi","contentEnterActive":"drawer__contentEnterActive_1wcfi","exit":"drawer__exit_1wcfi","backdropExit":"drawer__backdropExit_1wcfi","contentExit":"drawer__contentExit_1wcfi","exitActiveRight":"drawer__exitActiveRight_1wcfi","exitActiveLeft":"drawer__exitActiveLeft_1wcfi","backdropExitActive":"drawer__backdropExitActive_1wcfi","backdropExitDone":"drawer__backdropExitDone_1wcfi","contentExitActive":"drawer__contentExitActive_1wcfi"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n --drawer-width: 500px;\n}\n\n.component {\n top: var(--gap-0);\n height: 100%;\n width: var(--drawer-width);\n flex: 1;\n overflow: auto;\n will-change: transform;\n}\n\n.component.component {\n position: fixed;\n}\n\n.customScrollbar {\n @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n right: var(--gap-0);\n align-self: flex-end;\n}\n\n.leftPlacement {\n left: var(--gap-0);\n align-self: flex-start;\n}\n\n.content {\n width: 100%;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n transform: translateX(100%);\n}\n\n.enterLeft {\n transform: translateX(-100%);\n}\n\n.contentEnter {\n opacity: 0;\n}\n\n.backdropEnter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n transition: background 0.3s ease-in-out;\n background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n transition: opacity 0.2s ease-in-out 0.3s;\n opacity: 1;\n}\n\n/* exit */\n\n.exit {\n transform: translateX(0);\n}\n\n.backdropExit {\n background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n opacity: 1;\n}\n\n.exitActiveRight {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(100%);\n}\n\n.exitActiveLeft {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n transition: background 0.25s ease-in-out 0.1s;\n background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n opacity: 0;\n transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n --drawer-width: 500px;\n}\n\n.component {\n top: var(--gap-0);\n height: 100%;\n width: var(--drawer-width);\n flex: 1;\n overflow: auto;\n will-change: transform;\n}\n\n.component.component {\n position: fixed;\n}\n\n.customScrollbar {\n @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n right: var(--gap-0);\n align-self: flex-end;\n}\n\n.leftPlacement {\n left: var(--gap-0);\n align-self: flex-start;\n}\n\n.content {\n width: 100%;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n transform: translateX(100%);\n}\n\n.enterLeft {\n transform: translateX(-100%);\n}\n\n.contentEnter {\n opacity: 0;\n}\n\n.backdropEnter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n transition: background 0.3s ease-in-out;\n background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n transition: opacity 0.2s ease-in-out 0.3s;\n opacity: 1;\n}\n\n/* exit */\n\n.exit {\n transform: translateX(0);\n}\n\n.backdropExit {\n background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n opacity: 1;\n}\n\n.exitActiveRight {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(100%);\n}\n\n.exitActiveLeft {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n transition: background 0.25s ease-in-out 0.1s;\n background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n opacity: 0;\n transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
package/modern/index.css CHANGED
@@ -12,97 +12,108 @@
12
12
  --backdrop-hidden-background: transparent;
13
13
  } :root {
14
14
  --drawer-width: 500px;
15
- } .drawer__component_1shfy {
15
+ } .drawer__component_1wcfi {
16
16
  top: var(--gap-0);
17
17
  height: 100%;
18
18
  width: var(--drawer-width);
19
19
  flex: 1;
20
20
  overflow: auto;
21
21
  will-change: transform;
22
- } .drawer__component_1shfy.drawer__component_1shfy {
22
+ } .drawer__component_1wcfi.drawer__component_1wcfi {
23
23
  position: fixed;
24
- } .drawer__customScrollbar_1shfy {
24
+ } .drawer__customScrollbar_1wcfi {
25
25
  overflow: auto;
26
26
  cursor: auto;
27
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar {
27
+ &::-webkit-scrollbar {
28
28
  width: 12px;
29
29
  height: 12px;
30
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-track {
30
+ }
31
+ &::-webkit-scrollbar-track {
31
32
  background-color: transparent;
32
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-track-piece {
33
+ }
34
+ &::-webkit-scrollbar-track-piece {
33
35
  background-color: transparent;
34
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb {
36
+ }
37
+ &::-webkit-scrollbar-thumb {
35
38
  background-color: var(--color-light-neutral-translucent-500);
36
39
  border-color: transparent;
37
40
  border-style: solid;
38
41
  border-width: 4px;
39
42
  background-clip: padding-box;
40
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:vertical {
43
+ }
44
+ &::-webkit-scrollbar-thumb:vertical {
41
45
  border-radius: var(--border-radius-circle) / var(--border-radius-6);
42
46
  min-height: 40px;
43
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:vertical:hover {
47
+ }
48
+ &::-webkit-scrollbar-thumb:vertical:hover {
44
49
  border-radius: var(--border-radius-circle) / 7px;
45
50
  border-width: 4px 3px;
46
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:horizontal {
51
+ }
52
+ &::-webkit-scrollbar-thumb:horizontal {
47
53
  border-radius: var(--border-radius-6) / var(--border-radius-circle);
48
54
  min-width: 40px;
49
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:horizontal:hover {
55
+ }
56
+ &::-webkit-scrollbar-thumb:horizontal:hover {
50
57
  border-radius: 7px / var(--border-radius-circle);
51
58
  border-width: 3px 4px;
52
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-thumb:active {
59
+ }
60
+ &::-webkit-scrollbar-thumb:active {
53
61
  background-color: var(--color-light-text-secondary);
54
- } .drawer__customScrollbar_1shfy::-webkit-resizer {
62
+ }
63
+ &::-webkit-resizer {
55
64
  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>')
56
65
  no-repeat right bottom;
57
- } .drawer__customScrollbar_1shfy::-webkit-scrollbar-button,
58
- .drawer__customScrollbar_1shfy::-webkit-scrollbar-corner {
66
+ }
67
+ &::-webkit-scrollbar-button,
68
+ &::-webkit-scrollbar-corner {
59
69
  display: none;
60
- } .drawer__rightPlacement_1shfy {
70
+ }
71
+ } .drawer__rightPlacement_1wcfi {
61
72
  right: var(--gap-0);
62
73
  align-self: flex-end;
63
- } .drawer__leftPlacement_1shfy {
74
+ } .drawer__leftPlacement_1wcfi {
64
75
  left: var(--gap-0);
65
76
  align-self: flex-start;
66
- } .drawer__content_1shfy {
77
+ } .drawer__content_1wcfi {
67
78
  width: 100%;
68
79
  display: flex;
69
80
  flex-direction: column;
70
81
  flex: 1;
71
- } .drawer__enterRight_1shfy {
82
+ } .drawer__enterRight_1wcfi {
72
83
  transform: translateX(100%);
73
- } .drawer__enterLeft_1shfy {
84
+ } .drawer__enterLeft_1wcfi {
74
85
  transform: translateX(-100%);
75
- } .drawer__contentEnter_1shfy {
86
+ } .drawer__contentEnter_1wcfi {
76
87
  opacity: 0;
77
- } .drawer__backdropEnter_1shfy {
88
+ } .drawer__backdropEnter_1wcfi {
78
89
  background-color: var(--backdrop-hidden-background);
79
- } .drawer__enterActive_1shfy {
90
+ } .drawer__enterActive_1wcfi {
80
91
  transition: transform 0.3s ease-in-out;
81
92
  transform: translateX(0);
82
- } .drawer__backdropEnterActive_1shfy,
83
- .drawer__backdropEnterDone_1shfy {
93
+ } .drawer__backdropEnterActive_1wcfi,
94
+ .drawer__backdropEnterDone_1wcfi {
84
95
  transition: background 0.3s ease-in-out;
85
96
  background-color: var(--backdrop-visible-background);
86
- } .drawer__contentEnterActive_1shfy {
97
+ } .drawer__contentEnterActive_1wcfi {
87
98
  transition: opacity 0.2s ease-in-out 0.3s;
88
99
  opacity: 1;
89
- } .drawer__exit_1shfy {
100
+ } .drawer__exit_1wcfi {
90
101
  transform: translateX(0);
91
- } .drawer__backdropExit_1shfy {
102
+ } .drawer__backdropExit_1wcfi {
92
103
  background-color: var(--backdrop-visible-background);
93
- } .drawer__contentExit_1shfy {
104
+ } .drawer__contentExit_1wcfi {
94
105
  opacity: 1;
95
- } .drawer__exitActiveRight_1shfy {
106
+ } .drawer__exitActiveRight_1wcfi {
96
107
  transition: transform 0.25s ease-in-out 0.1s;
97
108
  transform: translateX(100%);
98
- } .drawer__exitActiveLeft_1shfy {
109
+ } .drawer__exitActiveLeft_1wcfi {
99
110
  transition: transform 0.25s ease-in-out 0.1s;
100
111
  transform: translateX(-100%);
101
- } .drawer__backdropExitActive_1shfy,
102
- .drawer__backdropExitDone_1shfy {
112
+ } .drawer__backdropExitActive_1wcfi,
113
+ .drawer__backdropExitDone_1wcfi {
103
114
  transition: background 0.25s ease-in-out 0.1s;
104
115
  background-color: var(--backdrop-hidden-background);
105
- } .drawer__contentExitActive_1shfy {
116
+ } .drawer__contentExitActive_1wcfi {
106
117
  opacity: 0;
107
118
  transition: opacity 0.12s ease-in-out;
108
119
  }
package/modern/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"drawer__component_1shfy","customScrollbar":"drawer__customScrollbar_1shfy","rightPlacement":"drawer__rightPlacement_1shfy","leftPlacement":"drawer__leftPlacement_1shfy","content":"drawer__content_1shfy","enterRight":"drawer__enterRight_1shfy","enterLeft":"drawer__enterLeft_1shfy","contentEnter":"drawer__contentEnter_1shfy","backdropEnter":"drawer__backdropEnter_1shfy","enterActive":"drawer__enterActive_1shfy","backdropEnterActive":"drawer__backdropEnterActive_1shfy","backdropEnterDone":"drawer__backdropEnterDone_1shfy","contentEnterActive":"drawer__contentEnterActive_1shfy","exit":"drawer__exit_1shfy","backdropExit":"drawer__backdropExit_1shfy","contentExit":"drawer__contentExit_1shfy","exitActiveRight":"drawer__exitActiveRight_1shfy","exitActiveLeft":"drawer__exitActiveLeft_1shfy","backdropExitActive":"drawer__backdropExitActive_1shfy","backdropExitDone":"drawer__backdropExitDone_1shfy","contentExitActive":"drawer__contentExitActive_1shfy"};
3
+ const styles = {"component":"drawer__component_1wcfi","customScrollbar":"drawer__customScrollbar_1wcfi","rightPlacement":"drawer__rightPlacement_1wcfi","leftPlacement":"drawer__leftPlacement_1wcfi","content":"drawer__content_1wcfi","enterRight":"drawer__enterRight_1wcfi","enterLeft":"drawer__enterLeft_1wcfi","contentEnter":"drawer__contentEnter_1wcfi","backdropEnter":"drawer__backdropEnter_1wcfi","enterActive":"drawer__enterActive_1wcfi","backdropEnterActive":"drawer__backdropEnterActive_1wcfi","backdropEnterDone":"drawer__backdropEnterDone_1wcfi","contentEnterActive":"drawer__contentEnterActive_1wcfi","exit":"drawer__exit_1wcfi","backdropExit":"drawer__backdropExit_1wcfi","contentExit":"drawer__contentExit_1wcfi","exitActiveRight":"drawer__exitActiveRight_1wcfi","exitActiveLeft":"drawer__exitActiveLeft_1wcfi","backdropExitActive":"drawer__backdropExitActive_1wcfi","backdropExitDone":"drawer__backdropExitDone_1wcfi","contentExitActive":"drawer__contentExitActive_1wcfi"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n --drawer-width: 500px;\n}\n\n.component {\n top: var(--gap-0);\n height: 100%;\n width: var(--drawer-width);\n flex: 1;\n overflow: auto;\n will-change: transform;\n}\n\n.component.component {\n position: fixed;\n}\n\n.customScrollbar {\n @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n right: var(--gap-0);\n align-self: flex-end;\n}\n\n.leftPlacement {\n left: var(--gap-0);\n align-self: flex-start;\n}\n\n.content {\n width: 100%;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n transform: translateX(100%);\n}\n\n.enterLeft {\n transform: translateX(-100%);\n}\n\n.contentEnter {\n opacity: 0;\n}\n\n.backdropEnter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n transition: background 0.3s ease-in-out;\n background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n transition: opacity 0.2s ease-in-out 0.3s;\n opacity: 1;\n}\n\n/* exit */\n\n.exit {\n transform: translateX(0);\n}\n\n.backdropExit {\n background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n opacity: 1;\n}\n\n.exitActiveRight {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(100%);\n}\n\n.exitActiveLeft {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n transition: background 0.25s ease-in-out 0.1s;\n background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n opacity: 0;\n transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import '../../backdrop/src/vars.css';\n\n:root {\n --drawer-width: 500px;\n}\n\n.component {\n top: var(--gap-0);\n height: 100%;\n width: var(--drawer-width);\n flex: 1;\n overflow: auto;\n will-change: transform;\n}\n\n.component.component {\n position: fixed;\n}\n\n.customScrollbar {\n @mixin custom-scrollbar;\n}\n\n.rightPlacement {\n right: var(--gap-0);\n align-self: flex-end;\n}\n\n.leftPlacement {\n left: var(--gap-0);\n align-self: flex-start;\n}\n\n.content {\n width: 100%;\n display: flex;\n flex-direction: column;\n flex: 1;\n}\n\n/* enter */\n\n.enterRight {\n transform: translateX(100%);\n}\n\n.enterLeft {\n transform: translateX(-100%);\n}\n\n.contentEnter {\n opacity: 0;\n}\n\n.backdropEnter {\n background-color: var(--backdrop-hidden-background);\n}\n\n.enterActive {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0);\n}\n\n.backdropEnterActive,\n.backdropEnterDone {\n transition: background 0.3s ease-in-out;\n background-color: var(--backdrop-visible-background);\n}\n\n.contentEnterActive {\n transition: opacity 0.2s ease-in-out 0.3s;\n opacity: 1;\n}\n\n/* exit */\n\n.exit {\n transform: translateX(0);\n}\n\n.backdropExit {\n background-color: var(--backdrop-visible-background);\n}\n\n.contentExit {\n opacity: 1;\n}\n\n.exitActiveRight {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(100%);\n}\n\n.exitActiveLeft {\n transition: transform 0.25s ease-in-out 0.1s;\n transform: translateX(-100%);\n}\n\n.backdropExitActive,\n.backdropExitDone {\n transition: background 0.25s ease-in-out 0.1s;\n background-color: var(--backdrop-hidden-background);\n}\n\n.contentExitActive {\n opacity: 0;\n transition: opacity 0.12s ease-in-out;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,eAAe,CAAC,6BAA6B,CAAC,SAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,0BAA0B,CAAC,WAAW,CAAC,yBAAyB,CAAC,cAAc,CAAC,4BAA4B,CAAC,eAAe,CAAC,6BAA6B,CAAC,aAAa,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,mCAAmC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,MAAM,CAAC,oBAAoB,CAAC,cAAc,CAAC,4BAA4B,CAAC,aAAa,CAAC,2BAA2B,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,oBAAoB,CAAC,kCAAkC,CAAC,kBAAkB,CAAC,gCAAgC,CAAC,mBAAmB,CAAC,iCAAiC,CAAC;;;;"}
package/moderncssm/index.module.css CHANGED
@@ -1,10 +1,14 @@
1
+
2
+
1
3
  :root {
2
4
  --backdrop-visible-background: var(--color-light-overlay-default);
3
5
  --backdrop-hidden-background: transparent;
4
6
  }
7
+
5
8
  :root {
6
9
  --drawer-width: 500px;
7
10
  }
11
+
8
12
  .component {
9
13
  top: var(--gap-0);
10
14
  height: 100%;
@@ -13,118 +17,137 @@
13
17
  overflow: auto;
14
18
  will-change: transform;
15
19
  }
20
+
16
21
  .component.component {
17
22
  position: fixed;
18
23
  }
24
+
19
25
  .customScrollbar {
20
26
  overflow: auto;
21
27
  cursor: auto;
22
- }
23
- .customScrollbar::-webkit-scrollbar {
28
+ &::-webkit-scrollbar {
24
29
  width: 12px;
25
30
  height: 12px;
26
31
  }
27
- .customScrollbar::-webkit-scrollbar-track {
32
+ &::-webkit-scrollbar-track {
28
33
  background-color: transparent;
29
34
  }
30
- .customScrollbar::-webkit-scrollbar-track-piece {
35
+ &::-webkit-scrollbar-track-piece {
31
36
  background-color: transparent;
32
37
  }
33
- .customScrollbar::-webkit-scrollbar-thumb {
38
+ &::-webkit-scrollbar-thumb {
34
39
  background-color: var(--color-light-neutral-translucent-500);
35
40
  border-color: transparent;
36
41
  border-style: solid;
37
42
  border-width: 4px;
38
43
  background-clip: padding-box;
39
44
  }
40
- .customScrollbar::-webkit-scrollbar-thumb:vertical {
45
+ &::-webkit-scrollbar-thumb:vertical {
41
46
  border-radius: var(--border-radius-circle) / var(--border-radius-6);
42
47
  min-height: 40px;
43
48
  }
44
- .customScrollbar::-webkit-scrollbar-thumb:vertical:hover {
49
+ &::-webkit-scrollbar-thumb:vertical:hover {
45
50
  border-radius: var(--border-radius-circle) / 7px;
46
51
  border-width: 4px 3px;
47
52
  }
48
- .customScrollbar::-webkit-scrollbar-thumb:horizontal {
53
+ &::-webkit-scrollbar-thumb:horizontal {
49
54
  border-radius: var(--border-radius-6) / var(--border-radius-circle);
50
55
  min-width: 40px;
51
56
  }
52
- .customScrollbar::-webkit-scrollbar-thumb:horizontal:hover {
57
+ &::-webkit-scrollbar-thumb:horizontal:hover {
53
58
  border-radius: 7px / var(--border-radius-circle);
54
59
  border-width: 3px 4px;
55
60
  }
56
- .customScrollbar::-webkit-scrollbar-thumb:active {
61
+ &::-webkit-scrollbar-thumb:active {
57
62
  background-color: var(--color-light-text-secondary);
58
63
  }
59
- .customScrollbar::-webkit-resizer {
64
+ &::-webkit-resizer {
60
65
  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>')
61
66
  no-repeat right bottom;
62
67
  }
63
- .customScrollbar::-webkit-scrollbar-button,
64
- .customScrollbar::-webkit-scrollbar-corner {
68
+ &::-webkit-scrollbar-button,
69
+ &::-webkit-scrollbar-corner {
65
70
  display: none;
66
71
  }
72
+ }
73
+
67
74
  .rightPlacement {
68
75
  right: var(--gap-0);
69
76
  align-self: flex-end;
70
77
  }
78
+
71
79
  .leftPlacement {
72
80
  left: var(--gap-0);
73
81
  align-self: flex-start;
74
82
  }
83
+
75
84
  .content {
76
85
  width: 100%;
77
86
  display: flex;
78
87
  flex-direction: column;
79
88
  flex: 1;
80
89
  }
90
+
81
91
  .enterRight {
82
92
  transform: translateX(100%);
83
93
  }
94
+
84
95
  .enterLeft {
85
96
  transform: translateX(-100%);
86
97
  }
98
+
87
99
  .contentEnter {
88
100
  opacity: 0;
89
101
  }
102
+
90
103
  .backdropEnter {
91
104
  background-color: var(--backdrop-hidden-background);
92
105
  }
106
+
93
107
  .enterActive {
94
108
  transition: transform 0.3s ease-in-out;
95
109
  transform: translateX(0);
96
110
  }
111
+
97
112
  .backdropEnterActive,
98
113
  .backdropEnterDone {
99
114
  transition: background 0.3s ease-in-out;
100
115
  background-color: var(--backdrop-visible-background);
101
116
  }
117
+
102
118
  .contentEnterActive {
103
119
  transition: opacity 0.2s ease-in-out 0.3s;
104
120
  opacity: 1;
105
121
  }
122
+
106
123
  .exit {
107
124
  transform: translateX(0);
108
125
  }
126
+
109
127
  .backdropExit {
110
128
  background-color: var(--backdrop-visible-background);
111
129
  }
130
+
112
131
  .contentExit {
113
132
  opacity: 1;
114
133
  }
134
+
115
135
  .exitActiveRight {
116
136
  transition: transform 0.25s ease-in-out 0.1s;
117
137
  transform: translateX(100%);
118
138
  }
139
+
119
140
  .exitActiveLeft {
120
141
  transition: transform 0.25s ease-in-out 0.1s;
121
142
  transform: translateX(-100%);
122
143
  }
144
+
123
145
  .backdropExitActive,
124
146
  .backdropExitDone {
125
147
  transition: background 0.25s ease-in-out 0.1s;
126
148
  background-color: var(--backdrop-hidden-background);
127
149
  }
150
+
128
151
  .contentExitActive {
129
152
  opacity: 0;
130
153
  transition: opacity 0.12s ease-in-out;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-drawer",
3
- "version": "6.0.0",
3
+ "version": "6.1.0-snapshot-92b8690",
4
4
  "description": "Drawer component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,7 +10,7 @@
10
10
  "main": "index.js",
11
11
  "module": "./esm/index.js",
12
12
  "dependencies": {
13
- "@alfalab/core-components-base-modal": "^6.0.0",
13
+ "@alfalab/core-components-base-modal": "6.1.0-snapshot-92b8690",
14
14
  "classnames": "^2.5.1",
15
15
  "react-transition-group": "^4.4.5",
16
16
  "tslib": "^2.4.0"
@@ -23,6 +23,6 @@
23
23
  "access": "public",
24
24
  "directory": "dist"
25
25
  },
26
- "themesVersion": "14.0.0",
27
- "varsVersion": "10.0.0"
26
+ "themesVersion": "14.1.0-snapshot-92b8690",
27
+ "varsVersion": "10.1.0-snapshot-92b8690"
28
28
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-vars/src/index.css';
1
+ @import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';
2
2
  @import '../../backdrop/src/vars.css';
3
3
 
4
4
  :root {