@up-group-ui/react-controls/dist/Components/Containers/Panel/styles.js

Up shared react controls

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = exports.DangerDefaultPanel = exports.InfoDefaultPanel = exports.SuccessDefaultPanel = exports.WarningDefaultPanel = exports.PrimaryDefaultPanel = exports.DefaultPanelStyle = void 0;
var tslib_1 = require("tslib");
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var typestyle_1 = require("typestyle");
var utils_1 = require("../../../Common/theming/utils");
var base = function (props) { return ({
    borderRadius: props.theme.borderRadius || (0, utils_1.toRem)(6),
    verticalAlign: 'top',
    borderWidth: '1px',
    borderStyle: 'solid',
    width: '100%',
    marginBottom: (0, utils_1.toRem)(10),
    boxShadow: '0px 0px 1px grey',
    $nest: {
        '& .up-panel_header': {
            padding: (0, utils_1.toRem)(8),
            fontWeight: 700,
            color: '#fff',
        },
        '& .up-panel_body': {
            background: 'linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat',
            backgroundColor: '#fff',
            padding: (0, utils_1.toRem)(20),
            borderRadius: props.theme.borderRadius || (0, utils_1.toRem)(6),
        },
        '& .up-panel_message': {
            margin: (0, utils_1.toRem)(10),
            display: 'inline-block',
        },
        '& .up-panel_footer': {
            background: 'linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat',
            backgroundColor: props.theme.colorMap ? props.theme.colorMap.lightGray5 : theming_1.default.colorMap.lightGray5,
            borderColor: props.theme.colorMap ? props.theme.colorMap.lightGray1 : theming_1.default.colorMap.lightGray1,
            borderTopWidth: '1px',
            borderTopStyle: 'solid',
            padding: (0, utils_1.toRem)(6),
        },
        svg: {
            margin: (0, utils_1.toRem)(4) + " " + (0, utils_1.toRem)(4) + " " + (0, utils_1.toRem)(4) + " " + (0, utils_1.toRem)(0),
            display: 'inline-block',
            float: 'left',
        },
    },
}); };
var DefaultPanelStyle = function (props) {
    return (0, classnames_1.default)((0, typestyle_1.style)(base(props)), (0, typestyle_1.style)({
        borderColor: props.theme.colorMap ? props.theme.colorMap.default : theming_1.default.colorMap.default,
        $nest: {
            '& .up-panel_header': {
                backgroundColor: props.theme.colorMap ? props.theme.colorMap.default : theming_1.default.colorMap.default,
            },
        },
    }));
};
exports.DefaultPanelStyle = DefaultPanelStyle;
var PrimaryDefaultPanel = function (props) {
    return (0, classnames_1.default)((0, typestyle_1.style)(base(props)), (0, typestyle_1.style)({
        borderColor: props.theme.colorMap ? props.theme.colorMap.primary : theming_1.default.colorMap.primary,
        $nest: {
            '& .up-panel_header': {
                backgroundColor: props.theme.colorMap ? props.theme.colorMap.primary : theming_1.default.colorMap.primary,
            },
        },
    }));
};
exports.PrimaryDefaultPanel = PrimaryDefaultPanel;
var WarningDefaultPanel = function (props) {
    return (0, classnames_1.default)((0, typestyle_1.style)(base(props)), (0, typestyle_1.style)({
        borderColor: props.theme.colorMap ? props.theme.colorMap.warning : theming_1.default.colorMap.warning,
        $nest: {
            '& .up-panel_header': {
                backgroundColor: props.theme.colorMap ? props.theme.colorMap.warning : theming_1.default.colorMap.warning,
            },
        },
    }));
};
exports.WarningDefaultPanel = WarningDefaultPanel;
var SuccessDefaultPanel = function (props) {
    return (0, classnames_1.default)((0, typestyle_1.style)(base(props)), (0, typestyle_1.style)({
        borderColor: props.theme.colorMap ? props.theme.colorMap.successDark : theming_1.default.colorMap.successDark,
        $nest: {
            '& .up-panel_header': {
                backgroundColor: props.theme.colorMap ? props.theme.colorMap.success : theming_1.default.colorMap.success,
            },
        },
    }));
};
exports.SuccessDefaultPanel = SuccessDefaultPanel;
var InfoDefaultPanel = function (props) {
    return (0, classnames_1.default)((0, typestyle_1.style)(base(props)), (0, typestyle_1.style)({
        borderColor: props.theme.colorMap ? props.theme.colorMap.infoDark : theming_1.default.colorMap.infoDark,
        $nest: {
            '& .up-panel_header': {
                backgroundColor: props.theme.colorMap ? props.theme.colorMap.info : theming_1.default.colorMap.info,
            },
        },
    }));
};
exports.InfoDefaultPanel = InfoDefaultPanel;
var DangerDefaultPanel = function (props) {
    return (0, classnames_1.default)((0, typestyle_1.style)(base(props)), (0, typestyle_1.style)({
        borderColor: props.theme.colorMap ? props.theme.colorMap.danger : theming_1.default.colorMap.danger,
        $nest: {
            '& .up-panel_header': {
                backgroundColor: props.theme.colorMap ? props.theme.colorMap.danger : theming_1.default.colorMap.danger,
            },
        },
    }));
};
exports.DangerDefaultPanel = DangerDefaultPanel;
var getStyles = function (props) {
    switch (props.type) {
        case 'primary':
            return (0, exports.PrimaryDefaultPanel)(props);
        case 'info':
            return (0, exports.InfoDefaultPanel)(props);
        case 'warning':
            return (0, exports.WarningDefaultPanel)(props);
        case 'danger':
            return (0, exports.DangerDefaultPanel)(props);
        case 'success':
            return (0, exports.SuccessDefaultPanel)(props);
        default:
            return (0, exports.DefaultPanelStyle)(props);
    }
};
exports.getStyles = getStyles;
//# sourceMappingURL=styles.js.map