groundfloor-react-ui 1.0.20 → 1.0.21
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.
- package/components/Accordion/Accordion.js +79 -35
- package/components/Accordion/AccordionSB.js +50 -54
- package/components/Accordion/AccordionSBfooter.js +51 -55
- package/components/ArrowBar/ArrowBar.js +6 -23
- package/components/Avatar/Avatar.js +49 -45
- package/components/Avatar/AvatarSB.js +121 -92
- package/components/Avatar/AvatarSBfooter.js +113 -92
- package/components/Banner/Banner.js +40 -35
- package/components/Breadcrumb/Breadcrumb.js +178 -163
- package/components/Cards/CardRef.js +41 -34
- package/components/Drawer/Drawer.js +46 -55
- package/components/Images/Image.js +16 -21
- package/components/Sidebar/Navbar.js +196 -170
- package/components/Typography/Typography.js +9 -10
- package/components/constants/defaultStyle.js +10 -3
- package/dist/index.es.js +414 -381
- package/dist/index.js +387 -354
- package/package.json +1 -1
|
@@ -1,126 +1,127 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { AvatarSB, AvatarSBfooter } from '../Avatar'
|
|
7
|
-
import { AccordionSB, AccordionSBfooter } from '../Accordion'
|
|
8
|
-
import { Icon } from '../Icon'
|
|
9
|
-
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import styled, { useTheme } from 'styled-components';
|
|
3
|
+
import { AccordionSB, AccordionSBfooter } from '../Accordion';
|
|
4
|
+
import { AvatarSB, AvatarSBfooter } from '../Avatar';
|
|
5
|
+
import defaultThemeColor from '../constants/defaultThemeColor';
|
|
10
6
|
|
|
11
7
|
const StyledHeader = styled.div`
|
|
12
|
-
min-height: 51px;
|
|
13
|
-
display: flex;
|
|
14
|
-
background-color:
|
|
15
|
-
align-items: center;
|
|
16
|
-
padding-left: 24.5px;
|
|
8
|
+
min-height: 51px;
|
|
9
|
+
display: flex;
|
|
10
|
+
background-color: ${({ theme }) => theme.primary['primary-1']};
|
|
11
|
+
align-items: center;
|
|
12
|
+
padding-left: 24.5px;
|
|
17
13
|
|
|
18
|
-
&::hover{
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
&::hover {
|
|
15
|
+
& > .chevron-navbar {
|
|
16
|
+
background-color: ${({ theme }) => theme.bgColor};
|
|
17
|
+
color: ${({ theme }) => theme.primary['primary-1']};
|
|
18
|
+
cursor: pointer;
|
|
23
19
|
}
|
|
24
|
-
}
|
|
25
|
-
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
${({ headerStyles }) => headerStyles}
|
|
23
|
+
`;
|
|
26
24
|
|
|
27
25
|
const StyledBody = styled.div`
|
|
28
|
-
display: flex;
|
|
29
|
-
background-color: transparent;
|
|
30
|
-
flex-direction: column;
|
|
31
|
-
align-items: center;
|
|
32
|
-
width: 100%;
|
|
33
|
-
|
|
26
|
+
display: flex;
|
|
27
|
+
background-color: transparent;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
align-items: center;
|
|
30
|
+
width: 100%;
|
|
31
|
+
`;
|
|
34
32
|
|
|
35
33
|
const ListElement = styled.div`
|
|
36
|
-
display: flex;
|
|
37
|
-
align-items: center;
|
|
38
|
-
cursor: pointer;
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
cursor: pointer;
|
|
39
37
|
|
|
40
|
-
&:hover{
|
|
41
|
-
p{
|
|
42
|
-
|
|
38
|
+
&:hover {
|
|
39
|
+
p {
|
|
40
|
+
${({ listElementStyle }) => listElementStyle}
|
|
43
41
|
}
|
|
44
|
-
}
|
|
42
|
+
}
|
|
45
43
|
|
|
46
|
-
span{
|
|
44
|
+
span {
|
|
47
45
|
width: 7px;
|
|
48
46
|
height: 7px;
|
|
49
47
|
border-radius: 50%;
|
|
50
|
-
background-color:
|
|
48
|
+
background-color: ${({ theme }) => theme.bgColor};
|
|
51
49
|
margin-right: 31px;
|
|
52
|
-
}
|
|
50
|
+
}
|
|
53
51
|
|
|
54
|
-
p{
|
|
52
|
+
p {
|
|
55
53
|
margin: 8.25px 0;
|
|
56
|
-
}
|
|
57
|
-
|
|
54
|
+
}
|
|
55
|
+
`;
|
|
58
56
|
|
|
59
57
|
const StyledFooter = styled.div`
|
|
60
|
-
display: flex;
|
|
61
|
-
background-color: transparent;
|
|
62
|
-
flex-direction: column;
|
|
63
|
-
align-items: center;
|
|
64
|
-
width: 100%;
|
|
65
|
-
margin-top: auto;
|
|
66
|
-
|
|
58
|
+
display: flex;
|
|
59
|
+
background-color: transparent;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
align-items: center;
|
|
62
|
+
width: 100%;
|
|
63
|
+
margin-top: auto;
|
|
64
|
+
`;
|
|
67
65
|
|
|
68
66
|
const ListElementFooter = styled.div`
|
|
69
|
-
display: flex;
|
|
70
|
-
align-items: center;
|
|
71
|
-
cursor: pointer;
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
cursor: pointer;
|
|
72
70
|
|
|
73
|
-
&:hover{
|
|
74
|
-
p{
|
|
75
|
-
|
|
71
|
+
&:hover {
|
|
72
|
+
p {
|
|
73
|
+
${({ listElementStyle }) => listElementStyle}
|
|
76
74
|
}
|
|
77
|
-
}
|
|
75
|
+
}
|
|
78
76
|
|
|
79
|
-
span{
|
|
77
|
+
span {
|
|
80
78
|
width: 7px;
|
|
81
79
|
height: 7px;
|
|
82
80
|
border-radius: 50%;
|
|
83
|
-
background-color:
|
|
81
|
+
background-color: ${({ theme }) => theme.bgColor};
|
|
84
82
|
margin-right: 31px;
|
|
85
|
-
}
|
|
83
|
+
}
|
|
86
84
|
|
|
87
|
-
p{
|
|
85
|
+
p {
|
|
88
86
|
margin: 8.25px 0;
|
|
89
|
-
}
|
|
90
|
-
|
|
87
|
+
}
|
|
88
|
+
`;
|
|
91
89
|
|
|
92
90
|
export const Navbar = ({
|
|
93
|
-
theme,
|
|
94
91
|
headerContent,
|
|
95
92
|
bodyContent,
|
|
96
93
|
footerContent,
|
|
97
94
|
selectedApp,
|
|
98
95
|
setApp,
|
|
99
96
|
toggleSideBarOpen,
|
|
97
|
+
headerStyles,
|
|
98
|
+
selectedStyle,
|
|
99
|
+
notSelectedStyle,
|
|
100
|
+
customStylesNameHover,
|
|
101
|
+
listElementStyle,
|
|
100
102
|
...props
|
|
101
103
|
}) => {
|
|
104
|
+
const activeTheme = useTheme() || defaultThemeColor;
|
|
102
105
|
|
|
103
106
|
const [accordionOpen, setAccordionOpen] = useState(null);
|
|
104
107
|
const [accordionFooterOpen, setAccordionFooterOpen] = useState(null);
|
|
105
108
|
|
|
106
109
|
function handleClick(index) {
|
|
107
|
-
setAccordionFooterOpen(null)
|
|
108
|
-
setAccordionOpen(index)
|
|
110
|
+
setAccordionFooterOpen(null);
|
|
111
|
+
setAccordionOpen(index);
|
|
109
112
|
}
|
|
110
113
|
|
|
111
114
|
function handleClickFooter(index) {
|
|
112
|
-
setAccordionOpen(null)
|
|
113
|
-
setAccordionFooterOpen(index)
|
|
115
|
+
setAccordionOpen(null);
|
|
116
|
+
setAccordionFooterOpen(index);
|
|
114
117
|
}
|
|
115
118
|
|
|
116
119
|
return (
|
|
117
120
|
<div
|
|
118
|
-
onMouseLeave={
|
|
119
|
-
()
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
}
|
|
121
|
+
onMouseLeave={() => {
|
|
122
|
+
setAccordionOpen(null);
|
|
123
|
+
setAccordionFooterOpen(null);
|
|
124
|
+
}}
|
|
124
125
|
style={{
|
|
125
126
|
display: 'flex',
|
|
126
127
|
flexDirection: 'column',
|
|
@@ -128,84 +129,105 @@ export const Navbar = ({
|
|
|
128
129
|
}}
|
|
129
130
|
className={'NavbarDiv'}
|
|
130
131
|
>
|
|
131
|
-
<StyledHeader>
|
|
132
|
+
<StyledHeader theme={activeTheme} headerStyles={headerStyles}>
|
|
132
133
|
{headerContent}
|
|
133
134
|
</StyledHeader>
|
|
134
135
|
<StyledBody>
|
|
135
136
|
{bodyContent?.map((app, i) => {
|
|
136
|
-
return (
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
)
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
137
|
+
return (
|
|
138
|
+
<AccordionSB
|
|
139
|
+
key={app.id}
|
|
140
|
+
index={i}
|
|
141
|
+
handleClick={(index) => {
|
|
142
|
+
handleClick(index);
|
|
143
|
+
}}
|
|
144
|
+
isAccordionOpen={i === accordionOpen}
|
|
145
|
+
isSelected={app.userName === selectedApp.lev1}
|
|
146
|
+
customStylesAccordionContainer={{
|
|
147
|
+
padding: '0',
|
|
148
|
+
'box-shadow': 'none',
|
|
149
|
+
'border-radius': '0px',
|
|
150
|
+
'background-color': 'transparent',
|
|
151
|
+
}}
|
|
152
|
+
customStylesAccordionTogggle={{
|
|
153
|
+
padding: '0',
|
|
154
|
+
'box-shadow': 'none',
|
|
155
|
+
'border-radius': '0px',
|
|
156
|
+
'background-color': 'transparent',
|
|
157
|
+
'padding-left': '16px',
|
|
158
|
+
'padding-top': '7.5px',
|
|
159
|
+
'padding-bottom': '7.5px',
|
|
160
|
+
cursor: 'pointer',
|
|
161
|
+
}}
|
|
162
|
+
customStylesAccordionContent={{
|
|
163
|
+
transition: 'height ease 0.2s', //transform ease 95ms',
|
|
164
|
+
overflow: 'hidden',
|
|
165
|
+
padding: '0',
|
|
166
|
+
'background-color': 'transparent',
|
|
167
|
+
color: 'white',
|
|
168
|
+
position: 'relative',
|
|
169
|
+
'box-shadow': 'none',
|
|
170
|
+
}}
|
|
171
|
+
contentToggle={
|
|
172
|
+
<AvatarSB
|
|
173
|
+
selectedStyle={selectedStyle}
|
|
174
|
+
notSelectedStyle={notSelectedStyle}
|
|
175
|
+
toggleName={toggleSideBarOpen} //isOpen} //true}
|
|
176
|
+
customStylesName={{
|
|
177
|
+
'white-space': 'nowrap',
|
|
178
|
+
overflow: 'hidden',
|
|
179
|
+
'text-overflow': 'ellipsis',
|
|
180
|
+
color: 'white',
|
|
181
|
+
'font-weight':
|
|
182
|
+
app.userName === selectedApp.lev1 ? '600' : '400',
|
|
183
|
+
}}
|
|
184
|
+
customStylesNameHover={customStylesNameHover}
|
|
185
|
+
size={'LG'}
|
|
186
|
+
user={app}
|
|
187
|
+
isSelected={app.userName === selectedApp.lev1}
|
|
188
|
+
/>
|
|
189
|
+
}
|
|
190
|
+
content={
|
|
191
|
+
<div
|
|
192
|
+
style={{
|
|
193
|
+
margin: '0',
|
|
194
|
+
padding: '0',
|
|
195
|
+
paddingLeft: '32px',
|
|
196
|
+
marginBottom: '18.25px',
|
|
197
|
+
}}
|
|
198
|
+
>
|
|
199
|
+
{app.subdirectory?.map((sub, i) => {
|
|
200
|
+
return (
|
|
201
|
+
<ListElement
|
|
202
|
+
listElementStyle={listElementStyle}
|
|
203
|
+
key={app.id + sub}
|
|
204
|
+
onClick={() => {
|
|
205
|
+
console.log('Click: ', app.fullName, sub);
|
|
206
|
+
setApp({ lev1: `${app.userName}`, lev2: `${sub}` });
|
|
207
|
+
}}
|
|
208
|
+
>
|
|
209
|
+
<span
|
|
210
|
+
style={{
|
|
211
|
+
visibility:
|
|
212
|
+
selectedApp.lev2 === sub ? 'visible' : 'hidden',
|
|
213
|
+
}}
|
|
214
|
+
></span>
|
|
215
|
+
<p style={{ marginTop: i === 0 && '0px' }}>{sub}</p>
|
|
216
|
+
</ListElement>
|
|
217
|
+
);
|
|
218
|
+
})}
|
|
219
|
+
</div>
|
|
220
|
+
}
|
|
221
|
+
/>
|
|
222
|
+
);
|
|
203
223
|
})}
|
|
204
224
|
</StyledBody>
|
|
205
225
|
<StyledFooter>
|
|
206
226
|
<AccordionSBfooter
|
|
207
227
|
index={0}
|
|
208
|
-
handleClick={(index) => {
|
|
228
|
+
handleClick={(index) => {
|
|
229
|
+
handleClickFooter(index);
|
|
230
|
+
}}
|
|
209
231
|
isAccordionOpen={0 === accordionFooterOpen}
|
|
210
232
|
customStylesAccordionContainer={{
|
|
211
233
|
padding: '0',
|
|
@@ -234,36 +256,41 @@ export const Navbar = ({
|
|
|
234
256
|
}}
|
|
235
257
|
contentToggle={
|
|
236
258
|
<AvatarSB
|
|
237
|
-
|
|
259
|
+
selectedStyle={selectedStyle}
|
|
260
|
+
notSelectedStyle={notSelectedStyle}
|
|
261
|
+
toggleName={toggleSideBarOpen} //isOpen}//} //true}
|
|
238
262
|
customStylesName={{
|
|
239
263
|
'white-space': 'nowrap',
|
|
240
|
-
|
|
264
|
+
overflow: 'hidden',
|
|
241
265
|
'text-overflow': 'ellipsis',
|
|
242
|
-
|
|
266
|
+
color: 'white',
|
|
243
267
|
'font-weight': '400',
|
|
244
268
|
}}
|
|
245
|
-
customStylesNameHover={
|
|
246
|
-
'text-decoration': 'underline',
|
|
247
|
-
}}
|
|
269
|
+
customStylesNameHover={customStylesNameHover}
|
|
248
270
|
size={'LG'}
|
|
249
|
-
user={
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
}
|
|
255
|
-
}
|
|
271
|
+
user={{
|
|
272
|
+
fullName: 'My Account',
|
|
273
|
+
userName: 'My Account',
|
|
274
|
+
url: 'https://picsum.photos/30',
|
|
275
|
+
}}
|
|
256
276
|
/>
|
|
257
277
|
}
|
|
258
278
|
content={
|
|
259
|
-
<div
|
|
279
|
+
<div
|
|
280
|
+
style={{
|
|
281
|
+
margin: '0',
|
|
282
|
+
padding: '0',
|
|
283
|
+
paddingLeft: '32px',
|
|
284
|
+
marginBottom: '18.25px',
|
|
285
|
+
}}
|
|
286
|
+
>
|
|
260
287
|
<ListElementFooter
|
|
261
|
-
|
|
262
|
-
}}
|
|
288
|
+
listElementStyle={listElementStyle}
|
|
289
|
+
onClick={() => { }}
|
|
290
|
+
>
|
|
263
291
|
<p>Change Password</p>
|
|
264
292
|
</ListElementFooter>
|
|
265
|
-
<ListElementFooter
|
|
266
|
-
onClick={() => { }}>
|
|
293
|
+
<ListElementFooter onClick={() => { }}>
|
|
267
294
|
<p>Sign Out</p>
|
|
268
295
|
</ListElementFooter>
|
|
269
296
|
</div>
|
|
@@ -298,24 +325,24 @@ export const Navbar = ({
|
|
|
298
325
|
}}
|
|
299
326
|
contentToggle={
|
|
300
327
|
<AvatarSBfooter
|
|
301
|
-
|
|
328
|
+
selectedStyle={selectedStyle}
|
|
329
|
+
notSelectedStyle={notSelectedStyle}
|
|
330
|
+
toggleName={toggleSideBarOpen} //isOpen} //true}
|
|
302
331
|
customStylesName={{
|
|
303
332
|
'white-space': 'nowrap',
|
|
304
|
-
|
|
333
|
+
overflow: 'hidden',
|
|
305
334
|
'text-overflow': 'ellipsis',
|
|
306
|
-
|
|
335
|
+
color: 'white',
|
|
307
336
|
'font-weight': '400',
|
|
308
337
|
}}
|
|
309
338
|
customStylesNameHover={{
|
|
310
339
|
'text-decoration': 'underline',
|
|
311
340
|
}}
|
|
312
341
|
size={'LG'}
|
|
313
|
-
user={
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
}
|
|
318
|
-
}
|
|
342
|
+
user={{
|
|
343
|
+
fullName: 'Users',
|
|
344
|
+
userName: 'Users',
|
|
345
|
+
}}
|
|
319
346
|
value={'+' + footerContent.length}
|
|
320
347
|
/>
|
|
321
348
|
}
|
|
@@ -323,6 +350,5 @@ export const Navbar = ({
|
|
|
323
350
|
/>
|
|
324
351
|
</StyledFooter>
|
|
325
352
|
</div>
|
|
326
|
-
)
|
|
327
|
-
}
|
|
328
|
-
|
|
353
|
+
);
|
|
354
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import PropTypes from 'prop-types';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import styled, { useTheme } from 'styled-components';
|
|
4
|
-
import FontStyles from '../global/FontStyle';
|
|
5
4
|
import defaultThemeColor from '../constants/defaultThemeColor';
|
|
5
|
+
import FontStyles from '../global/FontStyle';
|
|
6
6
|
|
|
7
7
|
const sizes = {
|
|
8
8
|
xs: {
|
|
@@ -25,20 +25,23 @@ const sizes = {
|
|
|
25
25
|
|
|
26
26
|
const Box = styled.div`
|
|
27
27
|
color: ${({ theme, text }) => text ? theme.variant[text] : theme.textColor};
|
|
28
|
-
background: ${({ theme, bg }) => bg ? theme.variant[bg] : theme.bgColor};
|
|
28
|
+
// background: ${({ theme, bg }) => bg ? theme.variant[bg] : theme.bgColor};
|
|
29
29
|
font-size: ${({ size }) => sizes[size].fontSize};
|
|
30
30
|
line-height: ${({ size }) => sizes[size].lineHeight};
|
|
31
31
|
`
|
|
32
32
|
|
|
33
33
|
export const Typography = ({ size, children, bg, text, ...props }) => {
|
|
34
|
+
const activeTheme = useTheme() || defaultThemeColor
|
|
35
|
+
|
|
34
36
|
return (
|
|
35
37
|
<Box
|
|
38
|
+
theme={activeTheme}
|
|
36
39
|
bg={bg}
|
|
37
40
|
text={text}
|
|
38
41
|
size={size}
|
|
39
42
|
{...props}
|
|
40
43
|
>
|
|
41
|
-
<FontStyles />
|
|
44
|
+
<FontStyles theme={activeTheme} />
|
|
42
45
|
{children}
|
|
43
46
|
</Box>
|
|
44
47
|
);
|
|
@@ -67,12 +70,8 @@ Typography.propTypes = {
|
|
|
67
70
|
theme: PropTypes.object,
|
|
68
71
|
};
|
|
69
72
|
|
|
70
|
-
|
|
71
|
-
theme: defaultThemeColor,
|
|
72
|
-
};
|
|
73
|
+
|
|
73
74
|
|
|
74
75
|
Typography.defaultProps = {
|
|
75
|
-
theme: defaultThemeColor,
|
|
76
76
|
size: 'md',
|
|
77
|
-
};
|
|
78
|
-
|
|
77
|
+
};
|
|
@@ -82,8 +82,7 @@ const defaultStyles = {
|
|
|
82
82
|
position: 'relative',
|
|
83
83
|
},
|
|
84
84
|
avatarCircle: {
|
|
85
|
-
|
|
86
|
-
color: '#FFFFFF',
|
|
85
|
+
|
|
87
86
|
'border-radius': '50%',
|
|
88
87
|
display: 'flex',
|
|
89
88
|
'align-items': 'center',
|
|
@@ -109,7 +108,6 @@ const defaultStyles = {
|
|
|
109
108
|
'min-height': '38px',
|
|
110
109
|
},
|
|
111
110
|
avatarName: {
|
|
112
|
-
color: `${defaultThemeColor.variant['primary-1']}`,
|
|
113
111
|
},
|
|
114
112
|
avatarNameSM: {
|
|
115
113
|
'margin-left': '8px',
|
|
@@ -190,14 +188,23 @@ const defaultStyles = {
|
|
|
190
188
|
position: 'absolute',
|
|
191
189
|
},
|
|
192
190
|
imageAvatarSM: {
|
|
191
|
+
'border-radius': '50%',
|
|
192
|
+
'box-sizing': 'border-box',
|
|
193
|
+
position: 'absolute',
|
|
193
194
|
width: '30px',
|
|
194
195
|
height: '30px',
|
|
195
196
|
},
|
|
196
197
|
imageAvatarMD: {
|
|
198
|
+
'border-radius': '50%',
|
|
199
|
+
'box-sizing': 'border-box',
|
|
200
|
+
position: 'absolute',
|
|
197
201
|
width: '32px',
|
|
198
202
|
height: '32px',
|
|
199
203
|
},
|
|
200
204
|
imageAvatarLG: {
|
|
205
|
+
'border-radius': '50%',
|
|
206
|
+
'box-sizing': 'border-box',
|
|
207
|
+
position: 'absolute',
|
|
201
208
|
width: '38px',
|
|
202
209
|
height: '38px',
|
|
203
210
|
},
|