@zohodesk/react-cli 0.0.1-beta.175 → 0.0.1-beta.177

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 (121) hide show
  1. package/.eslintignore +7 -7
  2. package/.eslintrc.js +180 -180
  3. package/.prettierrc +6 -6
  4. package/README.md +1100 -1010
  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 +724 -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 +24 -3
  24. package/lib/loaderUtils/configsAssetsLoaders.js +34 -34
  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 +0 -3
  29. package/lib/pluginUtils/getDevPlugins.js +42 -20
  30. package/lib/pluginUtils/getProdPlugins.js +45 -24
  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 +352 -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 +3 -3
  51. package/lib/postcss-plugins/variableModificationPlugin/ErrorHandler.js +37 -14
  52. package/lib/postcss-plugins/variableModificationPlugin/index.js +203 -143
  53. package/lib/schemas/index.js +18 -4
  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/cssURLReplacer.js +30 -43
  58. package/lib/utils/getFileType.js +49 -0
  59. package/lib/utils/resultSchema.json +73 -73
  60. package/npm8.md +9 -9
  61. package/package.json +147 -146
  62. package/postpublish.js +6 -6
  63. package/templates/app/.eslintrc.js +140 -140
  64. package/templates/app/README.md +12 -12
  65. package/templates/app/app/index.html +24 -24
  66. package/templates/app/app/properties/ApplicationResources_en_US.properties +1 -1
  67. package/templates/app/app/properties/i18nkeys.json +3 -3
  68. package/templates/app/docs/all.html +69 -69
  69. package/templates/app/mockapi/index.js +18 -18
  70. package/templates/app/package.json +37 -37
  71. package/templates/app/src/actions/SampleActions/index.js +37 -37
  72. package/templates/app/src/actions/index.js +65 -65
  73. package/templates/app/src/appUrls.js +19 -19
  74. package/templates/app/src/components/Alert/Alert.js +134 -134
  75. package/templates/app/src/components/Alert/Alert.module.css +79 -79
  76. package/templates/app/src/components/FreezeLayer/FreezeLayer.css +37 -37
  77. package/templates/app/src/components/FreezeLayer/FreezeLayer.js +84 -84
  78. package/templates/app/src/components/Sample/Sample.module.css +11 -11
  79. package/templates/app/src/components/Sample/SampleList.js +61 -61
  80. package/templates/app/src/components/Slider/Slider.css +41 -41
  81. package/templates/app/src/components/Slider/Slider.js +55 -55
  82. package/templates/app/src/containers/AlertContainer/index.js +15 -15
  83. package/templates/app/src/containers/AppContainer/index.js +96 -96
  84. package/templates/app/src/containers/AppContainer/index.module.css +27 -27
  85. package/templates/app/src/containers/CustomMatch/index.js +65 -65
  86. package/templates/app/src/containers/DevTools/index.js +10 -10
  87. package/templates/app/src/containers/Header/index.js +67 -67
  88. package/templates/app/src/containers/Header/index.module.css +43 -43
  89. package/templates/app/src/containers/Redirect/index.js +63 -63
  90. package/templates/app/src/containers/Redirector/index.js +47 -47
  91. package/templates/app/src/containers/SampleListContainer/ListContainer.js +42 -42
  92. package/templates/app/src/containers/SampleListContainer/ListContainer.module.css +3 -3
  93. package/templates/app/src/historyChange.js +5 -5
  94. package/templates/app/src/index.html +10 -10
  95. package/templates/app/src/index.js +24 -24
  96. package/templates/app/src/middleware/PromiseMiddleware.js +59 -59
  97. package/templates/app/src/reducers/alertData.js +11 -11
  98. package/templates/app/src/reducers/index.js +6 -6
  99. package/templates/app/src/reducers/samples.js +19 -19
  100. package/templates/app/src/store/configureStore.dev.js +51 -51
  101. package/templates/app/src/store/configureStore.js +5 -5
  102. package/templates/app/src/store/configureStore.prod.js +26 -26
  103. package/templates/app/src/util/Common.js +5 -5
  104. package/templates/app/src/util/RequestAPI.js +132 -132
  105. package/templates/docs/all.html +249 -249
  106. package/templates/docs/component.html +178 -178
  107. package/templates/docs/components.html +221 -221
  108. package/templates/docs/css/b.min.css +6 -6
  109. package/templates/docs/css/component.css +42 -42
  110. package/templates/docs/css/componentTest.css +6 -6
  111. package/templates/docs/css/hopscotch.css +585 -585
  112. package/templates/docs/css/style.css +1022 -1022
  113. package/templates/docs/impactReportTemplate.html +154 -154
  114. package/templates/docs/index.html +1501 -1501
  115. package/templates/docs/js/active-line.js +72 -72
  116. package/templates/docs/js/b.min.js +7 -7
  117. package/templates/docs/js/codemirror.js +9680 -9680
  118. package/templates/docs/js/designTokens.js +334 -334
  119. package/templates/docs/js/j.min.js +4 -4
  120. package/templates/docs/js/javascript.js +874 -874
  121. 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
+ }