@zohodesk/react-cli 0.0.1-beta.174 → 0.0.1-beta.176

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 (119) hide show
  1. package/.eslintignore +7 -7
  2. package/.eslintrc.js +180 -180
  3. package/.prettierrc +6 -6
  4. package/README.md +1018 -1003
  5. package/bin/cli.js +482 -482
  6. package/cert/Tsicsezwild-22-23.crt +37 -37
  7. package/cert/Tsicsezwild-22-23.key +27 -27
  8. package/docs/CustomChunks.md +26 -26
  9. package/docs/DevStart.md +18 -18
  10. package/docs/HoverActive.md +12 -12
  11. package/docs/InstallNode.md +28 -28
  12. package/docs/SelectorWeight.md +6 -0
  13. package/docs/TODOS.md +10 -10
  14. package/docs/ValueReplacer.md +60 -60
  15. package/docs/VariableConversion.md +710 -678
  16. package/docs/warnings_while_install.txt +35 -35
  17. package/files/eslintrc.js +62 -62
  18. package/files/prettierrc.js +3 -3
  19. package/lib/configs/webpack.css.umd.config.js +4 -4
  20. package/lib/configs/webpack.dev.config.js +23 -2
  21. package/lib/configs/webpack.docs.config.js +13 -1
  22. package/lib/configs/webpack.impact.config.js +13 -1
  23. package/lib/configs/webpack.prod.config.js +23 -2
  24. package/lib/loaderUtils/configsAssetsLoaders.js +33 -33
  25. package/lib/loaderUtils/getCSSLoaders.js +24 -21
  26. package/lib/loaderUtils/windowsModification.js +11 -0
  27. package/lib/loaders/workerLoader.js +9 -9
  28. package/lib/pluginUtils/configHtmlWebpackPlugins.js +59 -0
  29. package/lib/pluginUtils/getDevPlugins.js +54 -52
  30. package/lib/pluginUtils/getProdPlugins.js +66 -63
  31. package/lib/plugins/EFCPlugin.md +6 -6
  32. package/lib/plugins/I18NInjectIntoIndexPlugin.js +4 -4
  33. package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js +38 -38
  34. package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js +30 -30
  35. package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js +8 -8
  36. package/lib/plugins/I18nSplitPlugin/I18nSplit.md +95 -95
  37. package/lib/plugins/I18nSplitPlugin/README.md +25 -25
  38. package/lib/plugins/I18nSplitPlugin/index.js +57 -57
  39. package/lib/plugins/ResourceHintsPlugin.js +17 -17
  40. package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js +6 -6
  41. package/lib/plugins/RtlSplitPlugin/RtrSplit.md +30 -30
  42. package/lib/plugins/SelectorPlugin.js +97 -0
  43. package/lib/plugins/ServiceWorkerPlugin.js +9 -9
  44. package/lib/plugins/TPHashMappingPlugin.js +4 -4
  45. package/lib/plugins/VariableConversionCollector.js +252 -0
  46. package/lib/plugins/composeCommonPlugin.js +30 -0
  47. package/lib/postcss-plugins/RTLSplitPlugin.js +10 -10
  48. package/lib/postcss-plugins/__test__/test1Input.css +38 -38
  49. package/lib/postcss-plugins/__test__/test1Output.css +38 -38
  50. package/lib/postcss-plugins/hoverActivePlugin.js +13 -9
  51. package/lib/postcss-plugins/variableModificationPlugin/ErrorHandler.js +35 -14
  52. package/lib/postcss-plugins/variableModificationPlugin/index.js +202 -143
  53. package/lib/schemas/index.js +20 -8
  54. package/lib/sh/pre-commit.sh +34 -34
  55. package/lib/sh/reportPublish.sh +45 -45
  56. package/lib/utils/buildstats.html +148 -148
  57. package/lib/utils/resultSchema.json +73 -73
  58. package/npm8.md +9 -9
  59. package/package.json +146 -146
  60. package/postpublish.js +6 -6
  61. package/templates/app/.eslintrc.js +140 -140
  62. package/templates/app/README.md +12 -12
  63. package/templates/app/app/index.html +24 -24
  64. package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
  65. package/templates/app/app/properties/i18nkeys.json +3 -3
  66. package/templates/app/docs/all.html +69 -69
  67. package/templates/app/mockapi/index.js +18 -18
  68. package/templates/app/package.json +37 -37
  69. package/templates/app/src/actions/SampleActions/index.js +37 -37
  70. package/templates/app/src/actions/index.js +65 -65
  71. package/templates/app/src/appUrls.js +19 -19
  72. package/templates/app/src/components/Alert/Alert.js +134 -134
  73. package/templates/app/src/components/Alert/Alert.module.css +79 -79
  74. package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -37
  75. package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -84
  76. package/templates/app/src/components/Sample/Sample.module.css +11 -11
  77. package/templates/app/src/components/Sample/SampleList.js +61 -61
  78. package/templates/app/src/components/Slider/Slider.css +41 -41
  79. package/templates/app/src/components/Slider/Slider.js +55 -55
  80. package/templates/app/src/containers/AlertContainer/index.js +15 -15
  81. package/templates/app/src/containers/AppContainer/index.js +96 -96
  82. package/templates/app/src/containers/AppContainer/index.module.css +27 -27
  83. package/templates/app/src/containers/CustomMatch/index.js +65 -65
  84. package/templates/app/src/containers/DevTools/index.js +10 -10
  85. package/templates/app/src/containers/Header/index.js +67 -67
  86. package/templates/app/src/containers/Header/index.module.css +43 -43
  87. package/templates/app/src/containers/Redirect/index.js +63 -63
  88. package/templates/app/src/containers/Redirector/index.js +47 -47
  89. package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -42
  90. package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -3
  91. package/templates/app/src/historyChange.js +5 -5
  92. package/templates/app/src/index.html +10 -10
  93. package/templates/app/src/index.js +24 -24
  94. package/templates/app/src/middleware/PromiseMiddleware.js +59 -59
  95. package/templates/app/src/reducers/alertData.js +11 -11
  96. package/templates/app/src/reducers/index.js +6 -6
  97. package/templates/app/src/reducers/samples.js +19 -19
  98. package/templates/app/src/store/configureStore.dev.js +51 -51
  99. package/templates/app/src/store/configureStore.js +5 -5
  100. package/templates/app/src/store/configureStore.prod.js +26 -26
  101. package/templates/app/src/util/Common.js +5 -5
  102. package/templates/app/src/util/RequestAPI.js +132 -132
  103. package/templates/docs/all.html +249 -249
  104. package/templates/docs/component.html +178 -178
  105. package/templates/docs/components.html +221 -221
  106. package/templates/docs/css/b.min.css +6 -6
  107. package/templates/docs/css/component.css +42 -42
  108. package/templates/docs/css/componentTest.css +6 -6
  109. package/templates/docs/css/hopscotch.css +585 -585
  110. package/templates/docs/css/style.css +1022 -1022
  111. package/templates/docs/impactReportTemplate.html +154 -154
  112. package/templates/docs/index.html +1501 -1501
  113. package/templates/docs/js/active-line.js +72 -72
  114. package/templates/docs/js/b.min.js +7 -7
  115. package/templates/docs/js/codemirror.js +9680 -9680
  116. package/templates/docs/js/designTokens.js +334 -334
  117. package/templates/docs/js/j.min.js +4 -4
  118. package/templates/docs/js/javascript.js +874 -874
  119. package/templates/docs/js/matchbrackets.js +145 -145
@@ -1,11 +1,11 @@
1
- .addButtonContainer {
2
- text-align: right;
3
- padding: 10px;
4
- }
5
- .listContainer {
6
- margin-top: 20px;
7
- padding: 5px 0 10px 10px;
8
- }
9
- .listItem {
10
- padding: 10px 0;
11
- }
1
+ .addButtonContainer {
2
+ text-align: right;
3
+ padding: 10px;
4
+ }
5
+ .listContainer {
6
+ margin-top: 20px;
7
+ padding: 5px 0 10px 10px;
8
+ }
9
+ .listItem {
10
+ padding: 10px 0;
11
+ }
@@ -1,61 +1,61 @@
1
- import React, { Component } from "react";
2
- import PropTypes from "prop-types";
3
- import { URL_PREFIX } from "../../util/Common";
4
- import { Button, Container, Box, Switch } from "@zohodesk/components";
5
- import Card, {
6
- CardHeader,
7
- CardContent
8
- } from "@zohodesk/components/lib/Card/Card";
9
- import style from "./Sample.module.css";
10
-
11
- /**
12
- * BlockList
13
- */
14
- class SampleList extends Component {
15
- constructor(props) {
16
- super(props);
17
- }
18
- render() {
19
- let { samples = {} } = this.props;
20
-
21
- samples = samples.map((sample, index) => {
22
- const { id, name, status } = sample;
23
- const url = `${URL_PREFIX}/block/${id}`;
24
- const editUrl = `${URL_PREFIX}/block/${id}/edit`;
25
-
26
- return (
27
- <div key={id} className={style.listItem}>
28
- {id}-{name}
29
- </div>
30
- );
31
- });
32
-
33
- if (samples.length === 0) {
34
- samples = <div>There is no samples</div>;
35
- }
36
- return (
37
- <Card isScrollAttribute={true}>
38
- <CardHeader>
39
- <div className={style.addButtonContainer}>
40
- <Button
41
- palette="primaryFilled"
42
- size="medium"
43
- text="Add Sample"
44
- onClick={this.goAddForm}
45
- />
46
- </div>
47
- </CardHeader>
48
- <CardContent isScrollAttribute={true} scroll="vertical">
49
- <div className={style.listContainer}>{samples}</div>
50
- </CardContent>
51
- </Card>
52
- );
53
- }
54
- }
55
-
56
- SampleList.propTypes = {
57
- push: PropTypes.func,
58
- samples: PropTypes.object
59
- };
60
-
61
- export default SampleList;
1
+ import React, { Component } from "react";
2
+ import PropTypes from "prop-types";
3
+ import { URL_PREFIX } from "../../util/Common";
4
+ import { Button, Container, Box, Switch } from "@zohodesk/components";
5
+ import Card, {
6
+ CardHeader,
7
+ CardContent
8
+ } from "@zohodesk/components/lib/Card/Card";
9
+ import style from "./Sample.module.css";
10
+
11
+ /**
12
+ * BlockList
13
+ */
14
+ class SampleList extends Component {
15
+ constructor(props) {
16
+ super(props);
17
+ }
18
+ render() {
19
+ let { samples = {} } = this.props;
20
+
21
+ samples = samples.map((sample, index) => {
22
+ const { id, name, status } = sample;
23
+ const url = `${URL_PREFIX}/block/${id}`;
24
+ const editUrl = `${URL_PREFIX}/block/${id}/edit`;
25
+
26
+ return (
27
+ <div key={id} className={style.listItem}>
28
+ {id}-{name}
29
+ </div>
30
+ );
31
+ });
32
+
33
+ if (samples.length === 0) {
34
+ samples = <div>There is no samples</div>;
35
+ }
36
+ return (
37
+ <Card isScrollAttribute={true}>
38
+ <CardHeader>
39
+ <div className={style.addButtonContainer}>
40
+ <Button
41
+ palette="primaryFilled"
42
+ size="medium"
43
+ text="Add Sample"
44
+ onClick={this.goAddForm}
45
+ />
46
+ </div>
47
+ </CardHeader>
48
+ <CardContent isScrollAttribute={true} scroll="vertical">
49
+ <div className={style.listContainer}>{samples}</div>
50
+ </CardContent>
51
+ </Card>
52
+ );
53
+ }
54
+ }
55
+
56
+ SampleList.propTypes = {
57
+ push: PropTypes.func,
58
+ samples: PropTypes.object
59
+ };
60
+
61
+ export default SampleList;
@@ -1,41 +1,41 @@
1
- .container {
2
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
3
- background-color: var(--zd_bg_pure);
4
- right: 0;
5
- top: 0;
6
- bottom: 0;
7
- position: absolute;
8
- z-index: 5;
9
- overflow: auto;
10
- }
11
- .xsmall {
12
- width: 360px;
13
- }
14
- .small {
15
- width: 410px;
16
- }
17
- .medium {
18
- width: 660px;
19
- }
20
- .large {
21
- width: 936px;
22
- }
23
-
24
- .close a,
25
- .close input,
26
- .close textarea,
27
- .close button,
28
- .close iframe {
29
- display: none;
30
- }
31
-
32
- @media only screen and (max-width: 22.5em) {
33
- .container {
34
- width: 100%;
35
- }
36
- }
37
-
38
- html[dir="rtl"] .container {
39
- left: 0;
40
- right: initial;
41
- }
1
+ .container {
2
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
3
+ background-color: var(--zd_bg_pure);
4
+ right: 0;
5
+ top: 0;
6
+ bottom: 0;
7
+ position: absolute;
8
+ z-index: 5;
9
+ overflow: auto;
10
+ }
11
+ .xsmall {
12
+ width: 360px;
13
+ }
14
+ .small {
15
+ width: 410px;
16
+ }
17
+ .medium {
18
+ width: 660px;
19
+ }
20
+ .large {
21
+ width: 936px;
22
+ }
23
+
24
+ .close a,
25
+ .close input,
26
+ .close textarea,
27
+ .close button,
28
+ .close iframe {
29
+ display: none;
30
+ }
31
+
32
+ @media only screen and (max-width: 22.5em) {
33
+ .container {
34
+ width: 100%;
35
+ }
36
+ }
37
+
38
+ html[dir="rtl"] .container {
39
+ left: 0;
40
+ right: initial;
41
+ }
@@ -1,55 +1,55 @@
1
- import React from "react";
2
- import PropTypes from "prop-types";
3
- import style from "./Slider.css";
4
- import FreezeLayer from "../FreezeLayer/FreezeLayer";
5
-
6
- import { Animation } from "@zohodesk/components";
7
- export default class Slider extends React.Component {
8
- render() {
9
- let { children, needFreeze, isActive, onClick, palette, size } = this.props;
10
- return needFreeze ? (
11
- <FreezeLayer
12
- onClick={onClick}
13
- isActive={isActive}
14
- animationName="fadeIn"
15
- childAnimationName="slideLeft"
16
- palette={palette}
17
- >
18
- <div
19
- className={`${style.container} ${isActive ? "" : style.close} ${
20
- style[size]
21
- }`}
22
- onClick={e => {
23
- e.stopPropagation();
24
- }}
25
- >
26
- {children}
27
- </div>
28
- </FreezeLayer>
29
- ) : (
30
- <Animation isActive={isActive} name="slideLeft">
31
- <div
32
- className={`${style.container} ${style[size]}`}
33
- onClick={e => {
34
- e.stopPropagation();
35
- }}
36
- >
37
- {children}
38
- </div>
39
- </Animation>
40
- );
41
- }
42
- }
43
- Slider.propTypes = {
44
- children: PropTypes.node,
45
- isActive: PropTypes.bool,
46
- needFreeze: PropTypes.bool,
47
- onClick: PropTypes.func,
48
- palette: PropTypes.oneOf(["dark", "default", "darkLight", "plain"]),
49
- size: PropTypes.oneOf(["small", "xsmall", "medium", "large"])
50
- };
51
- Slider.defaultProps = {
52
- isActive: false,
53
- palette: "default",
54
- size: "xsmall"
55
- };
1
+ import React from "react";
2
+ import PropTypes from "prop-types";
3
+ import style from "./Slider.css";
4
+ import FreezeLayer from "../FreezeLayer/FreezeLayer";
5
+
6
+ import { Animation } from "@zohodesk/components";
7
+ export default class Slider extends React.Component {
8
+ render() {
9
+ let { children, needFreeze, isActive, onClick, palette, size } = this.props;
10
+ return needFreeze ? (
11
+ <FreezeLayer
12
+ onClick={onClick}
13
+ isActive={isActive}
14
+ animationName="fadeIn"
15
+ childAnimationName="slideLeft"
16
+ palette={palette}
17
+ >
18
+ <div
19
+ className={`${style.container} ${isActive ? "" : style.close} ${
20
+ style[size]
21
+ }`}
22
+ onClick={e => {
23
+ e.stopPropagation();
24
+ }}
25
+ >
26
+ {children}
27
+ </div>
28
+ </FreezeLayer>
29
+ ) : (
30
+ <Animation isActive={isActive} name="slideLeft">
31
+ <div
32
+ className={`${style.container} ${style[size]}`}
33
+ onClick={e => {
34
+ e.stopPropagation();
35
+ }}
36
+ >
37
+ {children}
38
+ </div>
39
+ </Animation>
40
+ );
41
+ }
42
+ }
43
+ Slider.propTypes = {
44
+ children: PropTypes.node,
45
+ isActive: PropTypes.bool,
46
+ needFreeze: PropTypes.bool,
47
+ onClick: PropTypes.func,
48
+ palette: PropTypes.oneOf(["dark", "default", "darkLight", "plain"]),
49
+ size: PropTypes.oneOf(["small", "xsmall", "medium", "large"])
50
+ };
51
+ Slider.defaultProps = {
52
+ isActive: false,
53
+ palette: "default",
54
+ size: "xsmall"
55
+ };
@@ -1,15 +1,15 @@
1
- import { connect } from "react-redux";
2
- import Alert from "../../components/Alert/Alert";
3
- import { alertAction } from "../../actions/index.js";
4
-
5
- function mapStateToProps() {
6
- return {
7
- onSubmitClick: alertAction.ob.resolve,
8
- onCancelClick: alertAction.ob.reject
9
- };
10
- }
11
-
12
- export default connect(
13
- mapStateToProps,
14
- {}
15
- )(Alert);
1
+ import { connect } from "react-redux";
2
+ import Alert from "../../components/Alert/Alert";
3
+ import { alertAction } from "../../actions/index.js";
4
+
5
+ function mapStateToProps() {
6
+ return {
7
+ onSubmitClick: alertAction.ob.resolve,
8
+ onCancelClick: alertAction.ob.reject
9
+ };
10
+ }
11
+
12
+ export default connect(
13
+ mapStateToProps,
14
+ {}
15
+ )(Alert);
@@ -1,96 +1,96 @@
1
- import React from "react";
2
- import { PropTypes } from "prop-types";
3
- import { connect } from "react-redux";
4
- import CustomMatch from "../CustomMatch";
5
- import Redirector from "../Redirector";
6
- import { Container, Box } from "@zohodesk/components";
7
- import style from "./index.module.css";
8
- import Header from "../Header";
9
- import SampleListContainer from "../SampleListContainer/ListContainer";
10
-
11
- import { push, alertAction } from "../../actions";
12
-
13
- class AppContainer extends React.Component {
14
- constructor(props) {
15
- super(props);
16
- this.state = {};
17
- }
18
- componentDidMount() {
19
- /*const { showConfirmBox } = this.props;
20
-
21
- showConfirmBox({
22
- type: "confirmation",
23
- submitText: "Yes",
24
- cancelText: "Cancel",
25
- title: "Alert",
26
- iconName: "notifiExclamation",
27
- message: "Are you sure?",
28
- isActive: true,
29
- palette: "danger"
30
- })
31
- .then(() => {
32
- logger.log("Suceess");
33
- })
34
- .catch(() => {
35
- logger.log("Cancel");
36
- });*/
37
- }
38
- render() {
39
- const { alertData, paramMap = {} } = this.props;
40
-
41
- return (
42
- <Container
43
- className={style.deskContainer}
44
- onMouseOver={this.handleOver}
45
- scroll="none"
46
- tagName="div"
47
- >
48
- <Redirector />
49
-
50
- <Box tagName="header">
51
- <Header />
52
- </Box>
53
-
54
- <Box className={style.posrel} flexible tagName="section">
55
- <Container
56
- alignBox="row"
57
- className={`${style.container}`}
58
- tagName="section"
59
- >
60
- <Box className={""} flexible tagName="article" scroll="vertical">
61
- <CustomMatch name="sampleList" isExactly>
62
- <SampleListContainer />
63
- </CustomMatch>
64
- </Box>
65
- </Container>
66
-
67
- {alertData.isActive && (
68
- <AlertContainer
69
- alertData={alertData}
70
- isActive={alertData.isActive}
71
- palette={alertData.palette}
72
- type={alertData.type}
73
- />
74
- )}
75
- </Box>
76
- </Container>
77
- );
78
- }
79
- }
80
-
81
- AppContainer.propTypes = {
82
- push: PropTypes.func,
83
- alertData: PropTypes.object,
84
- paramMap: PropTypes.object,
85
- showConfirmBox: PropTypes.func
86
- };
87
-
88
- const mapStateToProps = (state, ownProps) => {
89
- const { alertData, routing } = state;
90
- const { paramMap } = routing;
91
- return { alertData, paramMap };
92
- };
93
- export default connect(
94
- mapStateToProps,
95
- { push, showConfirmBox: alertAction.showConfirmBox }
96
- )(AppContainer);
1
+ import React from "react";
2
+ import { PropTypes } from "prop-types";
3
+ import { connect } from "react-redux";
4
+ import CustomMatch from "../CustomMatch";
5
+ import Redirector from "../Redirector";
6
+ import { Container, Box } from "@zohodesk/components";
7
+ import style from "./index.module.css";
8
+ import Header from "../Header";
9
+ import SampleListContainer from "../SampleListContainer/ListContainer";
10
+
11
+ import { push, alertAction } from "../../actions";
12
+
13
+ class AppContainer extends React.Component {
14
+ constructor(props) {
15
+ super(props);
16
+ this.state = {};
17
+ }
18
+ componentDidMount() {
19
+ /*const { showConfirmBox } = this.props;
20
+
21
+ showConfirmBox({
22
+ type: "confirmation",
23
+ submitText: "Yes",
24
+ cancelText: "Cancel",
25
+ title: "Alert",
26
+ iconName: "notifiExclamation",
27
+ message: "Are you sure?",
28
+ isActive: true,
29
+ palette: "danger"
30
+ })
31
+ .then(() => {
32
+ logger.log("Suceess");
33
+ })
34
+ .catch(() => {
35
+ logger.log("Cancel");
36
+ });*/
37
+ }
38
+ render() {
39
+ const { alertData, paramMap = {} } = this.props;
40
+
41
+ return (
42
+ <Container
43
+ className={style.deskContainer}
44
+ onMouseOver={this.handleOver}
45
+ scroll="none"
46
+ tagName="div"
47
+ >
48
+ <Redirector />
49
+
50
+ <Box tagName="header">
51
+ <Header />
52
+ </Box>
53
+
54
+ <Box className={style.posrel} flexible tagName="section">
55
+ <Container
56
+ alignBox="row"
57
+ className={`${style.container}`}
58
+ tagName="section"
59
+ >
60
+ <Box className={""} flexible tagName="article" scroll="vertical">
61
+ <CustomMatch name="sampleList" isExactly>
62
+ <SampleListContainer />
63
+ </CustomMatch>
64
+ </Box>
65
+ </Container>
66
+
67
+ {alertData.isActive && (
68
+ <AlertContainer
69
+ alertData={alertData}
70
+ isActive={alertData.isActive}
71
+ palette={alertData.palette}
72
+ type={alertData.type}
73
+ />
74
+ )}
75
+ </Box>
76
+ </Container>
77
+ );
78
+ }
79
+ }
80
+
81
+ AppContainer.propTypes = {
82
+ push: PropTypes.func,
83
+ alertData: PropTypes.object,
84
+ paramMap: PropTypes.object,
85
+ showConfirmBox: PropTypes.func
86
+ };
87
+
88
+ const mapStateToProps = (state, ownProps) => {
89
+ const { alertData, routing } = state;
90
+ const { paramMap } = routing;
91
+ return { alertData, paramMap };
92
+ };
93
+ export default connect(
94
+ mapStateToProps,
95
+ { push, showConfirmBox: alertAction.showConfirmBox }
96
+ )(AppContainer);
@@ -1,27 +1,27 @@
1
- .container,
2
- .rightPanel {
3
- position: relative;
4
- }
5
- .leftPanel {
6
- position: relative;
7
- transition: width 0.3s ease, transform 0.3s ease;
8
- will-change: width, transform;
9
- background-color: #f4f6f9;
10
- }
11
- .open {
12
- width: 13.75rem;
13
- }
14
- .leftPanelContainer {
15
- width: 100%;
16
- height: 100%;
17
- display: flex;
18
- -webkit-box-orient: vertical;
19
- -webkit-box-direction: normal;
20
- -webkit-flex-direction: column;
21
- -ms-flex-direction: column;
22
- flex-direction: column;
23
- }
24
-
25
- .deskContainer {
26
- height: 100vh;
27
- }
1
+ .container,
2
+ .rightPanel {
3
+ position: relative;
4
+ }
5
+ .leftPanel {
6
+ position: relative;
7
+ transition: width 0.3s ease, transform 0.3s ease;
8
+ will-change: width, transform;
9
+ background-color: #f4f6f9;
10
+ }
11
+ .open {
12
+ width: 13.75rem;
13
+ }
14
+ .leftPanelContainer {
15
+ width: 100%;
16
+ height: 100%;
17
+ display: flex;
18
+ -webkit-box-orient: vertical;
19
+ -webkit-box-direction: normal;
20
+ -webkit-flex-direction: column;
21
+ -ms-flex-direction: column;
22
+ flex-direction: column;
23
+ }
24
+
25
+ .deskContainer {
26
+ height: 100vh;
27
+ }