@alfalab/core-components-drawer 5.0.1 → 5.0.3

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 (9) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +2 -2
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +33 -33
  5. package/index.css +33 -33
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +33 -33
  8. package/package.json +2 -2
  9. package/src/index.module.css +4 -1
package/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"component":"drawer__component_uuoho","customScrollbar":"drawer__customScrollbar_uuoho","rightPlacement":"drawer__rightPlacement_uuoho","leftPlacement":"drawer__leftPlacement_uuoho","content":"drawer__content_uuoho","enterRight":"drawer__enterRight_uuoho","enterLeft":"drawer__enterLeft_uuoho","contentEnter":"drawer__contentEnter_uuoho","backdropEnter":"drawer__backdropEnter_uuoho","enterActive":"drawer__enterActive_uuoho","backdropEnterActive":"drawer__backdropEnterActive_uuoho","backdropEnterDone":"drawer__backdropEnterDone_uuoho","contentEnterActive":"drawer__contentEnterActive_uuoho","exit":"drawer__exit_uuoho","backdropExit":"drawer__backdropExit_uuoho","contentExit":"drawer__contentExit_uuoho","exitActiveRight":"drawer__exitActiveRight_uuoho","exitActiveLeft":"drawer__exitActiveLeft_uuoho","backdropExitActive":"drawer__backdropExitActive_uuoho","backdropExitDone":"drawer__backdropExitDone_uuoho","contentExitActive":"drawer__contentExitActive_uuoho"};
16
+ var styles = {"component":"drawer__component_1kbwp","customScrollbar":"drawer__customScrollbar_1kbwp","rightPlacement":"drawer__rightPlacement_1kbwp","leftPlacement":"drawer__leftPlacement_1kbwp","content":"drawer__content_1kbwp","enterRight":"drawer__enterRight_1kbwp","enterLeft":"drawer__enterLeft_1kbwp","contentEnter":"drawer__contentEnter_1kbwp","backdropEnter":"drawer__backdropEnter_1kbwp","enterActive":"drawer__enterActive_1kbwp","backdropEnterActive":"drawer__backdropEnterActive_1kbwp","backdropEnterDone":"drawer__backdropEnterDone_1kbwp","contentEnterActive":"drawer__contentEnterActive_1kbwp","exit":"drawer__exit_1kbwp","backdropExit":"drawer__backdropExit_1kbwp","contentExit":"drawer__contentExit_1kbwp","exitActiveRight":"drawer__exitActiveRight_1kbwp","exitActiveLeft":"drawer__exitActiveLeft_1kbwp","backdropExitActive":"drawer__backdropExitActive_1kbwp","backdropExitDone":"drawer__backdropExitDone_1kbwp","contentExitActive":"drawer__contentExitActive_1kbwp"};
17
17
  require('./index.css')
18
18
 
19
19
  var ANIMATION_DURATION = 600;
package/cssm/index.module.css CHANGED
@@ -23,16 +23,16 @@
23
23
  } :root {
24
24
  --drawer-width: 500px;
25
25
  } .component {
26
- position: fixed;
27
26
  top: 0;
28
27
  height: 100%;
29
28
  width: var(--drawer-width);
30
29
  flex: 1;
31
30
  overflow: auto;
32
31
  will-change: transform;
32
+ } .component.component {
33
+ position: fixed;
33
34
  } .customScrollbar {
34
35
  overflow: auto;
35
- overflow: overlay;
36
36
  cursor: auto;
37
37
  } .customScrollbar::-webkit-scrollbar {
38
38
  width: 12px;
package/esm/Component.js CHANGED
@@ -4,7 +4,7 @@ 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
6
 
7
- var styles = {"component":"drawer__component_uuoho","customScrollbar":"drawer__customScrollbar_uuoho","rightPlacement":"drawer__rightPlacement_uuoho","leftPlacement":"drawer__leftPlacement_uuoho","content":"drawer__content_uuoho","enterRight":"drawer__enterRight_uuoho","enterLeft":"drawer__enterLeft_uuoho","contentEnter":"drawer__contentEnter_uuoho","backdropEnter":"drawer__backdropEnter_uuoho","enterActive":"drawer__enterActive_uuoho","backdropEnterActive":"drawer__backdropEnterActive_uuoho","backdropEnterDone":"drawer__backdropEnterDone_uuoho","contentEnterActive":"drawer__contentEnterActive_uuoho","exit":"drawer__exit_uuoho","backdropExit":"drawer__backdropExit_uuoho","contentExit":"drawer__contentExit_uuoho","exitActiveRight":"drawer__exitActiveRight_uuoho","exitActiveLeft":"drawer__exitActiveLeft_uuoho","backdropExitActive":"drawer__backdropExitActive_uuoho","backdropExitDone":"drawer__backdropExitDone_uuoho","contentExitActive":"drawer__contentExitActive_uuoho"};
7
+ var styles = {"component":"drawer__component_1kbwp","customScrollbar":"drawer__customScrollbar_1kbwp","rightPlacement":"drawer__rightPlacement_1kbwp","leftPlacement":"drawer__leftPlacement_1kbwp","content":"drawer__content_1kbwp","enterRight":"drawer__enterRight_1kbwp","enterLeft":"drawer__enterLeft_1kbwp","contentEnter":"drawer__contentEnter_1kbwp","backdropEnter":"drawer__backdropEnter_1kbwp","enterActive":"drawer__enterActive_1kbwp","backdropEnterActive":"drawer__backdropEnterActive_1kbwp","backdropEnterDone":"drawer__backdropEnterDone_1kbwp","contentEnterActive":"drawer__contentEnterActive_1kbwp","exit":"drawer__exit_1kbwp","backdropExit":"drawer__backdropExit_1kbwp","contentExit":"drawer__contentExit_1kbwp","exitActiveRight":"drawer__exitActiveRight_1kbwp","exitActiveLeft":"drawer__exitActiveLeft_1kbwp","backdropExitActive":"drawer__backdropExitActive_1kbwp","backdropExitDone":"drawer__backdropExitDone_1kbwp","contentExitActive":"drawer__contentExitActive_1kbwp"};
8
8
  require('./index.css')
9
9
 
10
10
  var ANIMATION_DURATION = 600;
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: wuytw */
1
+ /* hash: 1oblo */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* 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 */
@@ -23,25 +23,25 @@
23
23
  --backdrop-hidden-background: transparent;
24
24
  } :root {
25
25
  --drawer-width: 500px;
26
- } .drawer__component_uuoho {
27
- position: fixed;
26
+ } .drawer__component_1kbwp {
28
27
  top: 0;
29
28
  height: 100%;
30
29
  width: var(--drawer-width);
31
30
  flex: 1;
32
31
  overflow: auto;
33
32
  will-change: transform;
34
- } .drawer__customScrollbar_uuoho {
33
+ } .drawer__component_1kbwp.drawer__component_1kbwp {
34
+ position: fixed;
35
+ } .drawer__customScrollbar_1kbwp {
35
36
  overflow: auto;
36
- overflow: overlay;
37
37
  cursor: auto;
38
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar {
38
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar {
39
39
  width: 12px;
40
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-track {
40
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-track {
41
41
  background-color: transparent;
42
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-track-piece {
42
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-track-piece {
43
43
  background-color: transparent;
44
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-thumb {
44
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-thumb {
45
45
  background-color: var(--color-light-graphic-primary-alpha-30);
46
46
  border-radius: var(--border-radius-circle) / 6px;
47
47
  border-color: transparent;
@@ -49,63 +49,63 @@
49
49
  border-width: 4px;
50
50
  background-clip: padding-box;
51
51
  min-height: 40px;
52
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-thumb:hover {
52
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-thumb:hover {
53
53
  border-radius: var(--border-radius-circle) / 7px;
54
54
  border-width: 4px 3px;
55
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-thumb:active {
55
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-thumb:active {
56
56
  background-color: var(--color-light-graphic-primary-alpha-60);
57
- } .drawer__customScrollbar_uuoho::-webkit-resizer {
57
+ } .drawer__customScrollbar_1kbwp::-webkit-resizer {
58
58
  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>')
59
59
  no-repeat right bottom;
60
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-button,
61
- .drawer__customScrollbar_uuoho::-webkit-scrollbar-corner {
60
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-button,
61
+ .drawer__customScrollbar_1kbwp::-webkit-scrollbar-corner {
62
62
  display: none;
63
- } .drawer__rightPlacement_uuoho {
63
+ } .drawer__rightPlacement_1kbwp {
64
64
  right: 0;
65
65
  align-self: flex-end;
66
- } .drawer__leftPlacement_uuoho {
66
+ } .drawer__leftPlacement_1kbwp {
67
67
  left: 0;
68
68
  align-self: flex-start;
69
- } .drawer__content_uuoho {
69
+ } .drawer__content_1kbwp {
70
70
  width: 100%;
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  flex: 1;
74
- } /* enter */ .drawer__enterRight_uuoho {
74
+ } /* enter */ .drawer__enterRight_1kbwp {
75
75
  transform: translateX(100%);
76
- } .drawer__enterLeft_uuoho {
76
+ } .drawer__enterLeft_1kbwp {
77
77
  transform: translateX(-100%);
78
- } .drawer__contentEnter_uuoho {
78
+ } .drawer__contentEnter_1kbwp {
79
79
  opacity: 0;
80
- } .drawer__backdropEnter_uuoho {
80
+ } .drawer__backdropEnter_1kbwp {
81
81
  background-color: var(--backdrop-hidden-background);
82
- } .drawer__enterActive_uuoho {
82
+ } .drawer__enterActive_1kbwp {
83
83
  transition: transform 0.3s ease-in-out;
84
84
  transform: translateX(0);
85
- } .drawer__backdropEnterActive_uuoho,
86
- .drawer__backdropEnterDone_uuoho {
85
+ } .drawer__backdropEnterActive_1kbwp,
86
+ .drawer__backdropEnterDone_1kbwp {
87
87
  transition: background 0.3s ease-in-out;
88
88
  background-color: var(--backdrop-visible-background);
89
- } .drawer__contentEnterActive_uuoho {
89
+ } .drawer__contentEnterActive_1kbwp {
90
90
  transition: opacity 0.2s ease-in-out 0.3s;
91
91
  opacity: 1;
92
- } /* exit */ .drawer__exit_uuoho {
92
+ } /* exit */ .drawer__exit_1kbwp {
93
93
  transform: translateX(0);
94
- } .drawer__backdropExit_uuoho {
94
+ } .drawer__backdropExit_1kbwp {
95
95
  background-color: var(--backdrop-visible-background);
96
- } .drawer__contentExit_uuoho {
96
+ } .drawer__contentExit_1kbwp {
97
97
  opacity: 1;
98
- } .drawer__exitActiveRight_uuoho {
98
+ } .drawer__exitActiveRight_1kbwp {
99
99
  transition: transform 0.25s ease-in-out 0.1s;
100
100
  transform: translateX(100%);
101
- } .drawer__exitActiveLeft_uuoho {
101
+ } .drawer__exitActiveLeft_1kbwp {
102
102
  transition: transform 0.25s ease-in-out 0.1s;
103
103
  transform: translateX(-100%);
104
- } .drawer__backdropExitActive_uuoho,
105
- .drawer__backdropExitDone_uuoho {
104
+ } .drawer__backdropExitActive_1kbwp,
105
+ .drawer__backdropExitDone_1kbwp {
106
106
  transition: background 0.25s ease-in-out 0.1s;
107
107
  background-color: var(--backdrop-hidden-background);
108
- } .drawer__contentExitActive_uuoho {
108
+ } .drawer__contentExitActive_1kbwp {
109
109
  opacity: 0;
110
110
  transition: opacity 0.12s ease-in-out;
111
111
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: wuytw */
1
+ /* hash: 1oblo */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* 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 */
@@ -23,25 +23,25 @@
23
23
  --backdrop-hidden-background: transparent;
24
24
  } :root {
25
25
  --drawer-width: 500px;
26
- } .drawer__component_uuoho {
27
- position: fixed;
26
+ } .drawer__component_1kbwp {
28
27
  top: 0;
29
28
  height: 100%;
30
29
  width: var(--drawer-width);
31
30
  flex: 1;
32
31
  overflow: auto;
33
32
  will-change: transform;
34
- } .drawer__customScrollbar_uuoho {
33
+ } .drawer__component_1kbwp.drawer__component_1kbwp {
34
+ position: fixed;
35
+ } .drawer__customScrollbar_1kbwp {
35
36
  overflow: auto;
36
- overflow: overlay;
37
37
  cursor: auto;
38
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar {
38
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar {
39
39
  width: 12px;
40
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-track {
40
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-track {
41
41
  background-color: transparent;
42
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-track-piece {
42
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-track-piece {
43
43
  background-color: transparent;
44
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-thumb {
44
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-thumb {
45
45
  background-color: var(--color-light-graphic-primary-alpha-30);
46
46
  border-radius: var(--border-radius-circle) / 6px;
47
47
  border-color: transparent;
@@ -49,63 +49,63 @@
49
49
  border-width: 4px;
50
50
  background-clip: padding-box;
51
51
  min-height: 40px;
52
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-thumb:hover {
52
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-thumb:hover {
53
53
  border-radius: var(--border-radius-circle) / 7px;
54
54
  border-width: 4px 3px;
55
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-thumb:active {
55
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-thumb:active {
56
56
  background-color: var(--color-light-graphic-primary-alpha-60);
57
- } .drawer__customScrollbar_uuoho::-webkit-resizer {
57
+ } .drawer__customScrollbar_1kbwp::-webkit-resizer {
58
58
  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>')
59
59
  no-repeat right bottom;
60
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-button,
61
- .drawer__customScrollbar_uuoho::-webkit-scrollbar-corner {
60
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-button,
61
+ .drawer__customScrollbar_1kbwp::-webkit-scrollbar-corner {
62
62
  display: none;
63
- } .drawer__rightPlacement_uuoho {
63
+ } .drawer__rightPlacement_1kbwp {
64
64
  right: 0;
65
65
  align-self: flex-end;
66
- } .drawer__leftPlacement_uuoho {
66
+ } .drawer__leftPlacement_1kbwp {
67
67
  left: 0;
68
68
  align-self: flex-start;
69
- } .drawer__content_uuoho {
69
+ } .drawer__content_1kbwp {
70
70
  width: 100%;
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  flex: 1;
74
- } /* enter */ .drawer__enterRight_uuoho {
74
+ } /* enter */ .drawer__enterRight_1kbwp {
75
75
  transform: translateX(100%);
76
- } .drawer__enterLeft_uuoho {
76
+ } .drawer__enterLeft_1kbwp {
77
77
  transform: translateX(-100%);
78
- } .drawer__contentEnter_uuoho {
78
+ } .drawer__contentEnter_1kbwp {
79
79
  opacity: 0;
80
- } .drawer__backdropEnter_uuoho {
80
+ } .drawer__backdropEnter_1kbwp {
81
81
  background-color: var(--backdrop-hidden-background);
82
- } .drawer__enterActive_uuoho {
82
+ } .drawer__enterActive_1kbwp {
83
83
  transition: transform 0.3s ease-in-out;
84
84
  transform: translateX(0);
85
- } .drawer__backdropEnterActive_uuoho,
86
- .drawer__backdropEnterDone_uuoho {
85
+ } .drawer__backdropEnterActive_1kbwp,
86
+ .drawer__backdropEnterDone_1kbwp {
87
87
  transition: background 0.3s ease-in-out;
88
88
  background-color: var(--backdrop-visible-background);
89
- } .drawer__contentEnterActive_uuoho {
89
+ } .drawer__contentEnterActive_1kbwp {
90
90
  transition: opacity 0.2s ease-in-out 0.3s;
91
91
  opacity: 1;
92
- } /* exit */ .drawer__exit_uuoho {
92
+ } /* exit */ .drawer__exit_1kbwp {
93
93
  transform: translateX(0);
94
- } .drawer__backdropExit_uuoho {
94
+ } .drawer__backdropExit_1kbwp {
95
95
  background-color: var(--backdrop-visible-background);
96
- } .drawer__contentExit_uuoho {
96
+ } .drawer__contentExit_1kbwp {
97
97
  opacity: 1;
98
- } .drawer__exitActiveRight_uuoho {
98
+ } .drawer__exitActiveRight_1kbwp {
99
99
  transition: transform 0.25s ease-in-out 0.1s;
100
100
  transform: translateX(100%);
101
- } .drawer__exitActiveLeft_uuoho {
101
+ } .drawer__exitActiveLeft_1kbwp {
102
102
  transition: transform 0.25s ease-in-out 0.1s;
103
103
  transform: translateX(-100%);
104
- } .drawer__backdropExitActive_uuoho,
105
- .drawer__backdropExitDone_uuoho {
104
+ } .drawer__backdropExitActive_1kbwp,
105
+ .drawer__backdropExitDone_1kbwp {
106
106
  transition: background 0.25s ease-in-out 0.1s;
107
107
  background-color: var(--backdrop-hidden-background);
108
- } .drawer__contentExitActive_uuoho {
108
+ } .drawer__contentExitActive_1kbwp {
109
109
  opacity: 0;
110
110
  transition: opacity 0.12s ease-in-out;
111
111
  }
package/modern/Component.js CHANGED
@@ -3,7 +3,7 @@ import { CSSTransition } from 'react-transition-group';
3
3
  import cn from 'classnames';
4
4
  import { BaseModal, BaseModalContext } from '@alfalab/core-components-base-modal/modern';
5
5
 
6
- const styles = {"component":"drawer__component_uuoho","customScrollbar":"drawer__customScrollbar_uuoho","rightPlacement":"drawer__rightPlacement_uuoho","leftPlacement":"drawer__leftPlacement_uuoho","content":"drawer__content_uuoho","enterRight":"drawer__enterRight_uuoho","enterLeft":"drawer__enterLeft_uuoho","contentEnter":"drawer__contentEnter_uuoho","backdropEnter":"drawer__backdropEnter_uuoho","enterActive":"drawer__enterActive_uuoho","backdropEnterActive":"drawer__backdropEnterActive_uuoho","backdropEnterDone":"drawer__backdropEnterDone_uuoho","contentEnterActive":"drawer__contentEnterActive_uuoho","exit":"drawer__exit_uuoho","backdropExit":"drawer__backdropExit_uuoho","contentExit":"drawer__contentExit_uuoho","exitActiveRight":"drawer__exitActiveRight_uuoho","exitActiveLeft":"drawer__exitActiveLeft_uuoho","backdropExitActive":"drawer__backdropExitActive_uuoho","backdropExitDone":"drawer__backdropExitDone_uuoho","contentExitActive":"drawer__contentExitActive_uuoho"};
6
+ const styles = {"component":"drawer__component_1kbwp","customScrollbar":"drawer__customScrollbar_1kbwp","rightPlacement":"drawer__rightPlacement_1kbwp","leftPlacement":"drawer__leftPlacement_1kbwp","content":"drawer__content_1kbwp","enterRight":"drawer__enterRight_1kbwp","enterLeft":"drawer__enterLeft_1kbwp","contentEnter":"drawer__contentEnter_1kbwp","backdropEnter":"drawer__backdropEnter_1kbwp","enterActive":"drawer__enterActive_1kbwp","backdropEnterActive":"drawer__backdropEnterActive_1kbwp","backdropEnterDone":"drawer__backdropEnterDone_1kbwp","contentEnterActive":"drawer__contentEnterActive_1kbwp","exit":"drawer__exit_1kbwp","backdropExit":"drawer__backdropExit_1kbwp","contentExit":"drawer__contentExit_1kbwp","exitActiveRight":"drawer__exitActiveRight_1kbwp","exitActiveLeft":"drawer__exitActiveLeft_1kbwp","backdropExitActive":"drawer__backdropExitActive_1kbwp","backdropExitDone":"drawer__backdropExitDone_1kbwp","contentExitActive":"drawer__contentExitActive_1kbwp"};
7
7
  require('./index.css')
8
8
 
9
9
  const ANIMATION_DURATION = 600;
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: wuytw */
1
+ /* hash: 1oblo */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-overlay: rgba(0, 0, 0, 0.6); /* 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 */
@@ -23,25 +23,25 @@
23
23
  --backdrop-hidden-background: transparent;
24
24
  } :root {
25
25
  --drawer-width: 500px;
26
- } .drawer__component_uuoho {
27
- position: fixed;
26
+ } .drawer__component_1kbwp {
28
27
  top: 0;
29
28
  height: 100%;
30
29
  width: var(--drawer-width);
31
30
  flex: 1;
32
31
  overflow: auto;
33
32
  will-change: transform;
34
- } .drawer__customScrollbar_uuoho {
33
+ } .drawer__component_1kbwp.drawer__component_1kbwp {
34
+ position: fixed;
35
+ } .drawer__customScrollbar_1kbwp {
35
36
  overflow: auto;
36
- overflow: overlay;
37
37
  cursor: auto;
38
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar {
38
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar {
39
39
  width: 12px;
40
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-track {
40
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-track {
41
41
  background-color: transparent;
42
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-track-piece {
42
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-track-piece {
43
43
  background-color: transparent;
44
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-thumb {
44
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-thumb {
45
45
  background-color: var(--color-light-graphic-primary-alpha-30);
46
46
  border-radius: var(--border-radius-circle) / 6px;
47
47
  border-color: transparent;
@@ -49,63 +49,63 @@
49
49
  border-width: 4px;
50
50
  background-clip: padding-box;
51
51
  min-height: 40px;
52
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-thumb:hover {
52
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-thumb:hover {
53
53
  border-radius: var(--border-radius-circle) / 7px;
54
54
  border-width: 4px 3px;
55
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-thumb:active {
55
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-thumb:active {
56
56
  background-color: var(--color-light-graphic-primary-alpha-60);
57
- } .drawer__customScrollbar_uuoho::-webkit-resizer {
57
+ } .drawer__customScrollbar_1kbwp::-webkit-resizer {
58
58
  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>')
59
59
  no-repeat right bottom;
60
- } .drawer__customScrollbar_uuoho::-webkit-scrollbar-button,
61
- .drawer__customScrollbar_uuoho::-webkit-scrollbar-corner {
60
+ } .drawer__customScrollbar_1kbwp::-webkit-scrollbar-button,
61
+ .drawer__customScrollbar_1kbwp::-webkit-scrollbar-corner {
62
62
  display: none;
63
- } .drawer__rightPlacement_uuoho {
63
+ } .drawer__rightPlacement_1kbwp {
64
64
  right: 0;
65
65
  align-self: flex-end;
66
- } .drawer__leftPlacement_uuoho {
66
+ } .drawer__leftPlacement_1kbwp {
67
67
  left: 0;
68
68
  align-self: flex-start;
69
- } .drawer__content_uuoho {
69
+ } .drawer__content_1kbwp {
70
70
  width: 100%;
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  flex: 1;
74
- } /* enter */ .drawer__enterRight_uuoho {
74
+ } /* enter */ .drawer__enterRight_1kbwp {
75
75
  transform: translateX(100%);
76
- } .drawer__enterLeft_uuoho {
76
+ } .drawer__enterLeft_1kbwp {
77
77
  transform: translateX(-100%);
78
- } .drawer__contentEnter_uuoho {
78
+ } .drawer__contentEnter_1kbwp {
79
79
  opacity: 0;
80
- } .drawer__backdropEnter_uuoho {
80
+ } .drawer__backdropEnter_1kbwp {
81
81
  background-color: var(--backdrop-hidden-background);
82
- } .drawer__enterActive_uuoho {
82
+ } .drawer__enterActive_1kbwp {
83
83
  transition: transform 0.3s ease-in-out;
84
84
  transform: translateX(0);
85
- } .drawer__backdropEnterActive_uuoho,
86
- .drawer__backdropEnterDone_uuoho {
85
+ } .drawer__backdropEnterActive_1kbwp,
86
+ .drawer__backdropEnterDone_1kbwp {
87
87
  transition: background 0.3s ease-in-out;
88
88
  background-color: var(--backdrop-visible-background);
89
- } .drawer__contentEnterActive_uuoho {
89
+ } .drawer__contentEnterActive_1kbwp {
90
90
  transition: opacity 0.2s ease-in-out 0.3s;
91
91
  opacity: 1;
92
- } /* exit */ .drawer__exit_uuoho {
92
+ } /* exit */ .drawer__exit_1kbwp {
93
93
  transform: translateX(0);
94
- } .drawer__backdropExit_uuoho {
94
+ } .drawer__backdropExit_1kbwp {
95
95
  background-color: var(--backdrop-visible-background);
96
- } .drawer__contentExit_uuoho {
96
+ } .drawer__contentExit_1kbwp {
97
97
  opacity: 1;
98
- } .drawer__exitActiveRight_uuoho {
98
+ } .drawer__exitActiveRight_1kbwp {
99
99
  transition: transform 0.25s ease-in-out 0.1s;
100
100
  transform: translateX(100%);
101
- } .drawer__exitActiveLeft_uuoho {
101
+ } .drawer__exitActiveLeft_1kbwp {
102
102
  transition: transform 0.25s ease-in-out 0.1s;
103
103
  transform: translateX(-100%);
104
- } .drawer__backdropExitActive_uuoho,
105
- .drawer__backdropExitDone_uuoho {
104
+ } .drawer__backdropExitActive_1kbwp,
105
+ .drawer__backdropExitDone_1kbwp {
106
106
  transition: background 0.25s ease-in-out 0.1s;
107
107
  background-color: var(--backdrop-hidden-background);
108
- } .drawer__contentExitActive_uuoho {
108
+ } .drawer__contentExitActive_1kbwp {
109
109
  opacity: 0;
110
110
  transition: opacity 0.12s ease-in-out;
111
111
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-drawer",
3
- "version": "5.0.1",
3
+ "version": "5.0.3",
4
4
  "description": "Drawer component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,7 +15,7 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-base-modal": "^5.4.0",
18
+ "@alfalab/core-components-base-modal": "^5.4.1",
19
19
  "classnames": "^2.3.1",
20
20
  "react-transition-group": "^4.4.5",
21
21
  "tslib": "^2.4.0"
package/src/index.module.css CHANGED
@@ -6,7 +6,6 @@
6
6
  }
7
7
 
8
8
  .component {
9
- position: fixed;
10
9
  top: 0;
11
10
  height: 100%;
12
11
  width: var(--drawer-width);
@@ -15,6 +14,10 @@
15
14
  will-change: transform;
16
15
  }
17
16
 
17
+ .component.component {
18
+ position: fixed;
19
+ }
20
+
18
21
  .customScrollbar {
19
22
  @mixin custom-scrollbar;
20
23
  }