@up-group-ui/react-controls
Version:
Up shared react controls
112 lines • 3.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.wrapperToastStyle = exports.mount = exports.unmount = exports.wrapperToastCss = exports.buttonStyle = exports.toastTitleStyle = exports.getHoverColor = exports.getIntentStyle = exports.getIntentColor = exports.convertDurationFromMsToSecond = void 0;
var tslib_1 = require("tslib");
var typestyle_1 = require("typestyle");
var csx_1 = require("csx");
var utils_1 = require("../../../Common/theming/utils");
var convertDurationFromMsToSecond = function (duration) {
return duration && duration / 1000;
};
exports.convertDurationFromMsToSecond = convertDurationFromMsToSecond;
var getIntentColor = function (intent, theme) { return ({
fg: theme.colorMap[intent + "Dark"] || theme.colorMap.darkGray5,
bg: theme.colorMap[intent + "Light"] || theme.colorMap.white3,
}); };
exports.getIntentColor = getIntentColor;
var getIntentStyle = function (intent, theme) {
var intentColors = (0, exports.getIntentColor)(intent, theme);
return (0, typestyle_1.style)({
color: intentColors.fg,
backgroundColor: intentColors.bg,
$nest: {
'& p, & .up-toast-title': {
color: intentColors.fg,
backgroundColor: intentColors.bg,
},
'& .up-toast-close .colored svg, & .up-toast-close .colored svg path, & .up-toast-close .colored svg polygon, & .up-toast-close .colored svg polyline': {
fill: intentColors.fg,
},
},
});
};
exports.getIntentStyle = getIntentStyle;
var getHoverColor = function (hexaColor) { return (0, csx_1.color)(hexaColor).darken('10%').toHexString(); };
exports.getHoverColor = getHoverColor;
exports.toastTitleStyle = (0, typestyle_1.style)({
$nest: {
'&.up-toast-title': {
padding: (0, utils_1.toRem)(6),
borderTopLeftRadius: '6px',
borderTopRightRadius: '6px',
width: '100%',
margin: (0, utils_1.toRem)(0) + " " + (0, utils_1.toRem)(0) + " " + (0, utils_1.toRem)(10) + " " + (0, utils_1.toRem)(0),
textAlign: 'left',
},
},
});
exports.buttonStyle = (0, typestyle_1.style)({
fontFamily: 'materialinear',
backgroundColor: 'transparent',
border: '0px',
cursor: 'pointer',
fontSize: (0, utils_1.toRem)(32),
position: 'absolute',
top: (0, utils_1.toRem)(-4),
right: (0, utils_1.toRem)(4),
});
exports.wrapperToastCss = {
position: 'fixed',
fontSize: (0, utils_1.toRem)(16),
bottom: (0, utils_1.toRem)(10),
right: (0, utils_1.toRem)(30),
borderRadius: '6px',
zIndex: 999999,
display: 'flex',
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)',
textAlign: 'center',
padding: '0',
width: (0, utils_1.toRem)(350),
height: 'auto',
flexDirection: 'column',
$nest: {
'& .up-toast-body': {
padding: 0,
},
'& .up-toast-message': {
border: 0,
marginBottom: 0,
},
'& .up-toast-message p': {
margin: (0, utils_1.toRem)(6),
},
'& .up-toast-title': {
marginBottom: 0,
},
},
};
exports.unmount = (0, typestyle_1.keyframes)({
'0%': {
transform: 'translateX(0%)',
opacity: 1,
},
'100%': {
transform: 'translateX(50%)',
opacity: 0,
},
});
exports.mount = (0, typestyle_1.keyframes)({
'0%': {
transform: 'translateX(50%)',
opacity: 0,
},
'100%': {
transform: 'translateX(0%)',
opacity: 1,
},
});
var wrapperToastStyle = function (isUnmounting) {
return (0, typestyle_1.style)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, exports.wrapperToastCss), { animationName: isUnmounting ? exports.unmount : exports.mount, animationDuration: '1.5s' }));
};
exports.wrapperToastStyle = wrapperToastStyle;
//# sourceMappingURL=styles.js.map