Skip to content

Commit 1ee0a53

Browse files
fabiovincenzifabiovincenzi
committed
refactor(tsx): convert SideBar Style to ts
1 parent 966ec67 commit 1ee0a53

File tree

1 file changed

+297
-0
lines changed

1 file changed

+297
-0
lines changed

‎src/ui/assets/jss/material-dashboard-react/components/sidebarStyle.ts

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
import { Theme, createStyles } from '@material-ui/core/styles';
2+
import {
3+
drawerWidth,
4+
transition,
5+
boxShadow,
6+
defaultFont,
7+
primaryColor,
8+
primaryBoxShadow,
9+
infoColor,
10+
successColor,
11+
warningColor,
12+
dangerColor,
13+
whiteColor,
14+
grayColor,
15+
blackColor,
16+
hexToRgb,
17+
} from '../../material-dashboard-react';
18+
19+
interface SidebarStyle {
20+
drawerPaper: React.CSSProperties & {
21+
[key: string]: any;
22+
'&:after'?: React.CSSProperties;
23+
};
24+
drawerPaperRTL: {
25+
[key: string]: React.CSSProperties;
26+
};
27+
logo: React.CSSProperties & {
28+
'&:after': React.CSSProperties;
29+
};
30+
logoLink: React.CSSProperties & {
31+
'&,&:hover': React.CSSProperties;
32+
};
33+
logoLinkRTL: React.CSSProperties;
34+
logoImage: React.CSSProperties;
35+
img: React.CSSProperties;
36+
background: React.CSSProperties & {
37+
'&:after': React.CSSProperties;
38+
};
39+
list: React.CSSProperties;
40+
item: React.CSSProperties & {
41+
'&:hover,&:focus,&:visited,&': React.CSSProperties;
42+
};
43+
itemLink: React.CSSProperties;
44+
itemIcon: React.CSSProperties;
45+
itemIconRTL: React.CSSProperties;
46+
itemText: React.CSSProperties;
47+
itemTextRTL: React.CSSProperties;
48+
whiteFont: React.CSSProperties;
49+
purple: React.CSSProperties & {
50+
'&:hover,&:focus': React.CSSProperties;
51+
};
52+
blue: React.CSSProperties & {
53+
'&:hover,&:focus': React.CSSProperties;
54+
};
55+
green: React.CSSProperties & {
56+
'&:hover,&:focus': React.CSSProperties;
57+
};
58+
orange: React.CSSProperties & {
59+
'&:hover,&:focus': React.CSSProperties;
60+
};
61+
red: React.CSSProperties & {
62+
'&:hover,&:focus': React.CSSProperties;
63+
};
64+
sidebarWrapper: React.CSSProperties;
65+
activePro: {
66+
[key: string]: React.CSSProperties;
67+
};
68+
}
69+
70+
const sidebarStyle = (theme: Theme) =>
71+
createStyles<keyof SidebarStyle, SidebarStyle>({
72+
drawerPaper: {
73+
border: 'none',
74+
position: 'fixed',
75+
top: '0',
76+
bottom: '0',
77+
left: '0',
78+
zIndex: 1,
79+
...boxShadow,
80+
width: drawerWidth,
81+
[theme.breakpoints.up('md')]: {
82+
width: drawerWidth,
83+
position: 'fixed',
84+
height: '100%',
85+
},
86+
[theme.breakpoints.down('sm')]: {
87+
width: drawerWidth,
88+
...boxShadow,
89+
position: 'fixed',
90+
display: 'block',
91+
top: '0',
92+
height: '100vh',
93+
right: '0',
94+
left: 'auto',
95+
zIndex: '1032',
96+
visibility: 'visible',
97+
overflowY: 'visible',
98+
borderTop: 'none',
99+
textAlign: 'left',
100+
paddingRight: '0px',
101+
paddingLeft: '0',
102+
transform: `translate3d(${drawerWidth}px, 0, 0)`,
103+
...transition,
104+
},
105+
},
106+
drawerPaperRTL: {
107+
[theme.breakpoints.up('md')]: {
108+
left: 'auto !important',
109+
right: '0 !important',
110+
},
111+
[theme.breakpoints.down('sm')]: {
112+
left: '0 !important',
113+
right: 'auto !important',
114+
},
115+
},
116+
logo: {
117+
position: 'relative',
118+
padding: '20px 20px',
119+
zIndex: 4,
120+
'&:after': {
121+
content: '""',
122+
position: 'absolute',
123+
bottom: '0',
124+
height: '1px',
125+
right: '15px',
126+
width: 'calc(100% - 30px)',
127+
backgroundColor: `rgba(${hexToRgb(grayColor[6])}, 0.3)`,
128+
},
129+
},
130+
logoLink: {
131+
...defaultFont,
132+
textTransform: 'uppercase',
133+
padding: '5px 0',
134+
display: 'block',
135+
fontSize: '18px',
136+
textAlign: 'left',
137+
fontWeight: 400,
138+
lineHeight: '30px',
139+
textDecoration: 'none',
140+
backgroundColor: 'transparent',
141+
'&,&:hover': {
142+
color: whiteColor,
143+
},
144+
},
145+
logoLinkRTL: {
146+
textAlign: 'right',
147+
},
148+
logoImage: {
149+
width: '30px',
150+
display: 'inline-block',
151+
maxHeight: '30px',
152+
marginLeft: '10px',
153+
marginRight: '15px',
154+
},
155+
img: {
156+
width: '35px',
157+
top: '22px',
158+
position: 'absolute',
159+
verticalAlign: 'middle',
160+
border: '0',
161+
},
162+
background: {
163+
position: 'absolute',
164+
zIndex: 1,
165+
height: '100%',
166+
width: '100%',
167+
display: 'block',
168+
top: '0',
169+
left: '0',
170+
backgroundSize: 'cover',
171+
backgroundPosition: 'center center',
172+
'&:after': {
173+
position: 'absolute',
174+
zIndex: '3',
175+
width: '100%',
176+
height: '100%',
177+
content: '""',
178+
display: 'block',
179+
background: blackColor,
180+
opacity: '.8',
181+
},
182+
},
183+
list: {
184+
marginTop: '20px',
185+
paddingLeft: '0',
186+
paddingTop: '0',
187+
paddingBottom: '0',
188+
marginBottom: '0',
189+
listStyle: 'none',
190+
position: 'unset',
191+
},
192+
item: {
193+
position: 'relative',
194+
display: 'block',
195+
textDecoration: 'none',
196+
'&:hover,&:focus,&:visited,&': {
197+
color: whiteColor,
198+
},
199+
},
200+
itemLink: {
201+
width: 'auto',
202+
transition: 'all 300ms linear',
203+
margin: '10px 15px 0',
204+
borderRadius: '3px',
205+
position: 'relative',
206+
display: 'block',
207+
padding: '10px 15px',
208+
backgroundColor: 'transparent',
209+
...defaultFont,
210+
},
211+
itemIcon: {
212+
width: '24px',
213+
height: '30px',
214+
fontSize: '24px',
215+
lineHeight: '30px',
216+
float: 'left',
217+
marginRight: '15px',
218+
textAlign: 'center',
219+
verticalAlign: 'middle',
220+
color: `rgba(${hexToRgb(whiteColor)}, 0.8)`,
221+
},
222+
itemIconRTL: {
223+
marginRight: '3px',
224+
marginLeft: '15px',
225+
float: 'right',
226+
},
227+
itemText: {
228+
...defaultFont,
229+
margin: '0',
230+
lineHeight: '30px',
231+
fontSize: '14px',
232+
color: whiteColor,
233+
},
234+
itemTextRTL: {
235+
textAlign: 'right',
236+
},
237+
whiteFont: {
238+
color: whiteColor,
239+
},
240+
purple: {
241+
backgroundColor: primaryColor[0],
242+
...primaryBoxShadow,
243+
'&:hover,&:focus': {
244+
backgroundColor: primaryColor[0],
245+
...primaryBoxShadow,
246+
},
247+
},
248+
blue: {
249+
backgroundColor: infoColor[0],
250+
boxShadow: `0 12px 20px -10px rgba(${hexToRgb(infoColor[0])},.28), 0 4px 20px 0 rgba(${hexToRgb(blackColor)},.12), 0 7px 8px -5px rgba(${hexToRgb(infoColor[0])},.2)`,
251+
'&:hover,&:focus': {
252+
backgroundColor: infoColor[0],
253+
boxShadow: `0 12px 20px -10px rgba(${hexToRgb(infoColor[0])},.28), 0 4px 20px 0 rgba(${hexToRgb(blackColor)},.12), 0 7px 8px -5px rgba(${hexToRgb(infoColor[0])},.2)`,
254+
},
255+
},
256+
green: {
257+
backgroundColor: successColor[0],
258+
boxShadow: `0 12px 20px -10px rgba(${hexToRgb(successColor[0])},.28), 0 4px 20px 0 rgba(${hexToRgb(blackColor)},.12), 0 7px 8px -5px rgba(${hexToRgb(successColor[0])},.2)`,
259+
'&:hover,&:focus': {
260+
backgroundColor: successColor[0],
261+
boxShadow: `0 12px 20px -10px rgba(${hexToRgb(successColor[0])},.28), 0 4px 20px 0 rgba(${hexToRgb(blackColor)},.12), 0 7px 8px -5px rgba(${hexToRgb(successColor[0])},.2)`,
262+
},
263+
},
264+
orange: {
265+
backgroundColor: warningColor[0],
266+
boxShadow: `0 12px 20px -10px rgba(${hexToRgb(warningColor[0])},.28), 0 4px 20px 0 rgba(${hexToRgb(blackColor)},.12), 0 7px 8px -5px rgba(${hexToRgb(warningColor[0])},.2)`,
267+
'&:hover,&:focus': {
268+
backgroundColor: warningColor[0],
269+
boxShadow: `0 12px 20px -10px rgba(${hexToRgb(warningColor[0])},.28), 0 4px 20px 0 rgba(${hexToRgb(blackColor)},.12), 0 7px 8px -5px rgba(${hexToRgb(warningColor[0])},.2)`,
270+
},
271+
},
272+
red: {
273+
backgroundColor: dangerColor[0],
274+
boxShadow: `0 12px 20px -10px rgba(${hexToRgb(dangerColor[0])},.28), 0 4px 20px 0 rgba(${hexToRgb(blackColor)},.12), 0 7px 8px -5px rgba(${hexToRgb(dangerColor[0])},.2)`,
275+
'&:hover,&:focus': {
276+
backgroundColor: dangerColor[0],
277+
boxShadow: `0 12px 20px -10px rgba(${hexToRgb(dangerColor[0])},.28), 0 4px 20px 0 rgba(${hexToRgb(blackColor)},.12), 0 7px 8px -5px rgba(${hexToRgb(dangerColor[0])},.2)`,
278+
},
279+
},
280+
sidebarWrapper: {
281+
position: 'relative',
282+
height: 'calc(100vh - 75px)',
283+
overflow: 'auto',
284+
width: '260px',
285+
zIndex: 4,
286+
WebkitOverflowScrolling: 'touch',
287+
},
288+
activePro: {
289+
[theme.breakpoints.up('md')]: {
290+
position: 'absolute',
291+
width: '100%',
292+
bottom: '13px',
293+
},
294+
},
295+
});
296+
297+
export default sidebarStyle;

0 commit comments

Comments
 (0)