@terraware/web-components 1.0.58 → 1.0.59
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,eAAe,CAAC;AAIvB,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC9D;AAmBD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAiBxD"}
|
|
@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = Navbar;
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _styles = require("@mui/styles");
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
13
|
|
|
14
14
|
require("./styles.scss");
|
|
15
15
|
|
|
@@ -17,9 +17,7 @@ var _Icon = _interopRequireDefault(require("../Icon/Icon"));
|
|
|
17
17
|
|
|
18
18
|
var _utils = require("../../utils");
|
|
19
19
|
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
var useStyles = (0, _styles2.makeStyles)(function () {
|
|
20
|
+
var useStyles = (0, _styles.makeStyles)(function () {
|
|
23
21
|
return {
|
|
24
22
|
icon: {
|
|
25
23
|
fill: '#708284',
|
|
@@ -48,9 +46,7 @@ function Navbar(props) {
|
|
|
48
46
|
var classes = useStyles();
|
|
49
47
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
50
48
|
className: "navbar"
|
|
51
|
-
}, isDesktop
|
|
52
|
-
className: "logo"
|
|
53
|
-
}, /*#__PURE__*/_react.default.createElement(_svg.Logo, null)) : /*#__PURE__*/_react.default.createElement("div", {
|
|
49
|
+
}, !isDesktop && /*#__PURE__*/_react.default.createElement("div", {
|
|
54
50
|
className: classes.navBarTop
|
|
55
51
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
56
52
|
onClick: function onClick() {
|
|
@@ -7,26 +7,17 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.navbar {
|
|
10
|
-
background-color: $tw-clr-bg-hover;
|
|
11
10
|
height: 100%;
|
|
12
11
|
position: fixed;
|
|
13
12
|
z-index: 1100;
|
|
14
13
|
width: $tw-sz-nvgtn-side-nav-width;
|
|
15
14
|
display: flex;
|
|
16
15
|
flex-direction: column;
|
|
16
|
+
padding-left: $tw-sz-base-small;
|
|
17
|
+
padding-right: $tw-sz-base-small;
|
|
18
|
+
padding-top: $tw-sz-base-small;
|
|
17
19
|
|
|
18
|
-
.logo {
|
|
19
|
-
background-color: $tw-clr-bg-hover;
|
|
20
|
-
padding-bottom: $tw-spc-base-small 0;
|
|
21
|
-
margin-bottom: $tw-spc-base-small 0;
|
|
22
|
-
|
|
23
|
-
svg {
|
|
24
|
-
margin: $tw-spc-base-medium $tw-spc-base-small;
|
|
25
|
-
height: $tw-spc-base-small;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
20
|
.nav-section {
|
|
29
|
-
background-color: $tw-clr-bg-hover;
|
|
30
21
|
padding: $tw-spc-base-x-small $tw-spc-base-small;
|
|
31
22
|
.divider {
|
|
32
23
|
border-top: $tw-sz-dvdr-stroke solid $tw-clr-brdr-tertiary;
|
|
@@ -50,7 +41,7 @@
|
|
|
50
41
|
font-weight: $tw-fnt-nvgtn-side-nav-item-label-font-weight;
|
|
51
42
|
line-height: $tw-fnt-nvgtn-side-nav-item-label-line-height;
|
|
52
43
|
color: $tw-clr-txt;
|
|
53
|
-
|
|
44
|
+
border-radius: 32px;
|
|
54
45
|
|
|
55
46
|
.nav-item-content {
|
|
56
47
|
padding: $tw-sz-base-small;
|
|
@@ -63,7 +54,6 @@
|
|
|
63
54
|
text-align: left;
|
|
64
55
|
font-size: 14px;
|
|
65
56
|
font-weight: 500;
|
|
66
|
-
color: #3a4445;
|
|
67
57
|
}
|
|
68
58
|
|
|
69
59
|
&:hover {
|
|
@@ -101,32 +91,21 @@
|
|
|
101
91
|
}
|
|
102
92
|
|
|
103
93
|
.nav-item {
|
|
104
|
-
background-color: $tw-clr-bg-
|
|
94
|
+
background-color: $tw-clr-bg-ghost;
|
|
105
95
|
|
|
106
96
|
&:hover {
|
|
107
|
-
background-color: $tw-clr-bg-
|
|
97
|
+
background-color: $tw-clr-bg-ghost-hover;
|
|
108
98
|
}
|
|
109
99
|
}
|
|
110
100
|
}
|
|
111
101
|
|
|
112
102
|
&--selected {
|
|
113
|
-
background-color: $tw-clr-bg-
|
|
103
|
+
background-color: $tw-clr-bg-ghost-hover;
|
|
114
104
|
position: relative;
|
|
115
105
|
}
|
|
116
106
|
|
|
117
|
-
&--selected:before {
|
|
118
|
-
content: '';
|
|
119
|
-
border-bottom-right-radius: $tw-sz-nvgtn-side-nav-item-indicator;
|
|
120
|
-
border-top-right-radius: $tw-sz-nvgtn-side-nav-item-indicator;
|
|
121
|
-
position: absolute;
|
|
122
|
-
top: 0;
|
|
123
|
-
bottom: 0;
|
|
124
|
-
width: $tw-sz-nvgtn-side-nav-item-indicator;
|
|
125
|
-
background-color: $tw-clr-bg-selected;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
107
|
&--icon {
|
|
129
|
-
fill: $tw-clr-icn;
|
|
108
|
+
fill: $tw-clr-icn-secondary;
|
|
130
109
|
margin-right: $tw-spc-base-x-small;
|
|
131
110
|
line-height: $tw-sz-icon-small;
|
|
132
111
|
height: $tw-sz-icon-small;
|