react-customized-notifications
Version:
A React Notification System forked from https://github.com/igorprado/react-notification-system
245 lines (209 loc) • 4.1 kB
JavaScript
// Used for calculations
var defaultWidth = 320;
var defaultColors = {
success: {
rgb: '94, 164, 0',
hex: '#5ea400'
},
error: {
rgb: '236, 61, 61',
hex: '#ec3d3d'
},
warning: {
rgb: '235, 173, 23',
hex: '#ebad1a'
},
info: {
rgb: '54, 156, 199',
hex: '#369cc7'
}
};
var STYLES = {
Wrapper: {},
Containers: {
DefaultStyle: {
fontFamily: 'inherit',
position: 'fixed',
width: defaultWidth,
padding: 0,
zIndex: 9998,
WebkitBoxSizing: 'border-box',
MozBoxSizing: 'border-box',
boxSizing: 'border-box',
height: 'auto',
maxHeight: 'calc(100% - 7em)',
overflow: 'hidden',
overflowY: 'auto'
},
tl: {
top: '0px',
bottom: 'auto',
left: '0px',
right: 'auto'
},
tr: {
top: '0px',
bottom: 'auto',
left: 'auto',
right: '0px'
},
tc: {
top: '0px',
bottom: 'auto',
margin: '0 auto',
left: '50%',
marginLeft: -(defaultWidth / 2)
},
bl: {
top: 'auto',
bottom: '0px',
left: '0px',
right: 'auto'
},
br: {
top: 'auto',
bottom: '0px',
left: 'auto',
right: '0px'
},
bc: {
top: 'auto',
bottom: '0px',
margin: '0 auto',
left: '50%',
marginLeft: -(defaultWidth / 2)
}
},
NotificationItem: {
DefaultStyle: {
position: 'relative',
width: '100%',
cursor: 'pointer',
fontSize: '13px',
margin: 0,
display: 'block',
WebkitBoxSizing: 'border-box',
MozBoxSizing: 'border-box',
boxSizing: 'border-box',
opacity: 0,
transition: '0.2s ease-out',
WebkitTransform: 'translate3d(0, 0, 0)',
transform: 'translate3d(0, 0, 0)',
willChange: 'transform, opacity',
isHidden: {
opacity: 0
},
isVisible: {
opacity: 1
}
},
success: {
backgroundColor: '#f0f5ea',
color: '#4b583a'
},
error: {
backgroundColor: '#f4e9e9',
color: '#412f2f'
},
warning: {
backgroundColor: '#f9f6f0',
color: '#5a5343'
},
info: {
backgroundColor: '#e8f0f4',
color: '#41555d'
}
},
Title: {
DefaultStyle: {
fontSize: '14px',
margin: '0 0 5px 0',
padding: 0,
fontWeight: 'bold'
},
success: {
color: defaultColors.success.hex
},
error: {
color: defaultColors.error.hex
},
warning: {
color: defaultColors.warning.hex
},
info: {
color: defaultColors.info.hex
}
},
MessageWrapper: {
DefaultStyle: {
margin: 0,
padding: 0
}
},
Dismiss: {
DefaultStyle: {
fontFamily: 'Arial',
fontSize: '17px',
position: 'absolute',
top: '4px',
right: '5px',
lineHeight: '15px',
backgroundColor: '#dededf',
color: '#ffffff',
borderRadius: '50%',
width: '14px',
height: '14px',
fontWeight: 'bold',
textAlign: 'center'
},
success: {
color: '#f0f5ea',
backgroundColor: '#b0ca92'
},
error: {
color: '#f4e9e9',
backgroundColor: '#e4bebe'
},
warning: {
color: '#f9f6f0',
backgroundColor: '#e1cfac'
},
info: {
color: '#e8f0f4',
backgroundColor: '#a4becb'
}
},
Action: {
DefaultStyle: {
background: '#ffffff',
borderRadius: '2px',
padding: '6px 20px',
fontWeight: 'bold',
margin: '10px 0 0 0',
border: 0
},
success: {
backgroundColor: defaultColors.success.hex,
color: '#ffffff'
},
error: {
backgroundColor: defaultColors.error.hex,
color: '#ffffff'
},
warning: {
backgroundColor: defaultColors.warning.hex,
color: '#ffffff'
},
info: {
backgroundColor: defaultColors.info.hex,
color: '#ffffff'
}
},
ActionWrapper: {
DefaultStyle: {
margin: 0,
padding: 0
}
}
};
module.exports = STYLES;