@up-group-ui/react-controls/dist/Components/Display/Notification/styles.js

Up shared react controls

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = exports.progressBar = exports.text = exports.icon = exports.colors = void 0;
var tslib_1 = require("tslib");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var typestyle_1 = require("typestyle");
var utils_1 = require("../../../Common/theming/utils");
var colors = function (props) {
    return {
        position: 'relative',
        backgroundColor: props.displayMode === 'text'
            ? 'transparent'
            : props.theme.colorMap["" + props.intent] || props.theme.colorMap.white3,
        color: props.theme.colorMap[props.intent + "Dark"] || props.theme.colorMap.darkGray5,
        borderRadius: props.displayMode === 'text' ? 0 : props.theme.borderRadius,
        $nest: {
            '& p, & span, & div, & em, & strong': {
                fontWeight: 400,
                textAlign: 'left',
                color: props.displayMode === 'text'
                    ? props.theme.colorMap["" + props.intent]
                    : props.theme.colorMap.white1 || props.theme.colorMap.darkGray5,
            },
        },
    };
};
exports.colors = colors;
var icon = function (props) {
    var iconWithBorderStyle = {
        display: 'flex',
        marginLeft: (0, utils_1.toRem)(25),
        alignItems: 'center',
        justifyContent: 'center',
        minWidth: (0, utils_1.toRem)(25),
        minHeight: (0, utils_1.toRem)(25),
        border: '1px solid white',
        borderRadius: (0, utils_1.toRem)(360),
    };
    var iconContainerStyle = props.intent === 'success' || props.intent === 'error' || props.intent === 'danger'
        ? { marginLeft: (0, utils_1.toRem)(25) }
        : iconWithBorderStyle;
    return {
        $nest: {
            '& .up-notification .up-notification-icon-container': (0, tslib_1.__assign)({}, iconContainerStyle),
            '& .up-notification .colored svg, & .up-notification .colored svg path, & .up-notification .colored svg polygon, & .up-notification .colored svg polyline': {
                fill: props.displayMode === 'text' ? props.theme.colorMap["" + props.intent] : props.theme.colorMap.white1,
                display: 'inline-block',
                background: 'unset !important',
            },
            '& .up-notification .cancel-icon': {
                position: 'absolute',
                top: (0, utils_1.toRem)(10),
                right: (0, utils_1.toRem)(10),
                cursor: 'pointer',
            },
            '& .up-notification .cancel-icon svg path': {
                fill: props.theme.colorMap.white1,
            },
        },
    };
};
exports.icon = icon;
var text = function (props) {
    return {
        $nest: {
            '& .up-notification .up-notification-message': {
                marginLeft: (0, utils_1.toRem)(25),
                whiteSpace: 'pre-line',
            },
        },
    };
};
exports.text = text;
var progressBar = function (props) {
    var progress = (0, typestyle_1.keyframes)({
        from: {
            width: '0%',
        },
        to: {
            width: '100%',
        },
    });
    return {
        $nest: {
            '& .up-notification-progress-bar-container': {
                position: 'absolute',
                backgroundColor: props.theme.colorMap.grey1,
                width: '100%',
                borderBottomRightRadius: '4px',
                borderBottomLeftRadius: '4px',
                bottom: 0,
                right: 0,
            },
            '& .up-notification-progress-bar': {
                width: '100%',
                height: '4px',
                animationPlayState: 'running',
                animation: progress + " " + props.durationBeforeClosing + "s",
                backgroundColor: props.theme.colorMap.gray6,
                borderBottomRightRadius: '4px',
                borderBottomLeftRadius: '4px',
            },
            '&.up-notification-container:hover .up-notification-progress-bar': {
                animationPlayState: 'paused',
            },
            '&.up-notification-container': {
                borderRadius: '0 0 4px 4px',
            },
        },
    };
};
exports.progressBar = progressBar;
var getStyles = function (props) {
    return (0, classnames_1.default)((0, typestyle_1.style)((0, exports.colors)(props)), (0, typestyle_1.style)((0, exports.icon)(props)), (0, typestyle_1.style)((0, exports.text)(props)), (0, typestyle_1.style)((0, exports.progressBar)(props)), (0, typestyle_1.style)({
        width: '100%',
        padding: props.title ? (0, utils_1.toRem)(28) + " " + (0, utils_1.toRem)(8) : (0, utils_1.toRem)(8),
        borderRadius: '4px',
        boxSizing: 'border-box',
        minHeight: (0, utils_1.toRem)(100),
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
    }));
};
exports.getStyles = getStyles;
//# sourceMappingURL=styles.js.map