131 lines
2.5 KiB
JavaScript
131 lines
2.5 KiB
JavaScript
import {
|
|
spacer,
|
|
white,
|
|
zircon,
|
|
secondaryColor,
|
|
spring3,
|
|
comet
|
|
} from 'src/styling/variables'
|
|
|
|
const styles = {
|
|
background: {
|
|
position: 'absolute',
|
|
width: '100vw',
|
|
height: '100vh',
|
|
left: 0,
|
|
top: 0,
|
|
zIndex: -1,
|
|
backgroundColor: white,
|
|
boxShadow: '0 0 14px 0 rgba(0, 0, 0, 0.24)'
|
|
},
|
|
container: {
|
|
left: -200,
|
|
top: -42,
|
|
backgroundColor: white,
|
|
height: '110vh'
|
|
},
|
|
header: {
|
|
display: 'flex',
|
|
justifyContent: 'space-between'
|
|
},
|
|
headerText: {
|
|
marginTop: spacer * 2.5,
|
|
marginLeft: spacer * 3
|
|
},
|
|
actionButtons: {
|
|
display: 'flex',
|
|
marginLeft: spacer * 2,
|
|
height: 0
|
|
},
|
|
notificationIcon: ({ notifButtonCoords, xOffset }) => ({
|
|
position: 'absolute',
|
|
top: notifButtonCoords ? notifButtonCoords.y : 0,
|
|
left: notifButtonCoords ? notifButtonCoords.x - xOffset : 0,
|
|
cursor: 'pointer',
|
|
background: 'transparent',
|
|
boxShadow: '0px 0px 0px transparent',
|
|
border: '0px solid transparent',
|
|
textShadow: '0px 0px 0px transparent',
|
|
outline: 'none'
|
|
}),
|
|
clearAllButton: {
|
|
marginTop: -spacer * 2,
|
|
marginLeft: spacer,
|
|
backgroundColor: zircon
|
|
},
|
|
notificationsList: {
|
|
width: 440,
|
|
height: '90vh',
|
|
maxHeight: '100vh',
|
|
marginTop: spacer * 3,
|
|
marginLeft: 0,
|
|
marginRight: -50,
|
|
overflowY: 'auto',
|
|
overflowX: 'hidden',
|
|
backgroundColor: white,
|
|
zIndex: 10
|
|
},
|
|
notificationRow: {
|
|
position: 'relative',
|
|
marginBottom: spacer / 2,
|
|
paddingTop: spacer * 1.5
|
|
},
|
|
unread: {
|
|
backgroundColor: spring3
|
|
},
|
|
notificationRowIcon: {
|
|
alignSelf: 'center',
|
|
'& > *': {
|
|
marginLeft: spacer * 3
|
|
}
|
|
},
|
|
unreadIcon: {
|
|
marginLeft: spacer,
|
|
marginTop: 5,
|
|
width: '12px',
|
|
height: '12px',
|
|
backgroundColor: secondaryColor,
|
|
borderRadius: '50%',
|
|
cursor: 'pointer',
|
|
zIndex: 1
|
|
},
|
|
readIcon: {
|
|
marginLeft: spacer,
|
|
marginTop: 5,
|
|
width: '12px',
|
|
height: '12px',
|
|
border: `1px solid ${comet}`,
|
|
borderRadius: '50%',
|
|
cursor: 'pointer',
|
|
zIndex: 1
|
|
},
|
|
notificationTitle: {
|
|
margin: 0,
|
|
color: comet
|
|
},
|
|
notificationBody: {
|
|
margin: 0
|
|
},
|
|
notificationSubtitle: {
|
|
margin: 0,
|
|
marginBottom: spacer,
|
|
color: comet
|
|
},
|
|
stripes: {
|
|
position: 'absolute',
|
|
height: '100%',
|
|
top: '0px',
|
|
opacity: '60%'
|
|
},
|
|
hasUnread: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 16,
|
|
width: '9px',
|
|
height: '9px',
|
|
backgroundColor: secondaryColor,
|
|
borderRadius: '50%'
|
|
}
|
|
}
|
|
|
|
export default styles
|