@up-group-ui/react-controls/dist/Components/Inputs/Button/styles.js

Up shared react controls

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getWrapperStyles = exports.getStyles = exports.rotate = exports.rotatingAnimation = exports.borderless = exports.rounded = exports.getHeight = exports.getWidth = exports.iconLarge = exports.iconNormal = void 0;
var tslib_1 = require("tslib");
var utils_1 = (0, tslib_1.__importDefault)(require("../../../Common/utils"));
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var typestyle_1 = require("typestyle");
var types_1 = require("./types");
var csx_1 = require("csx");
var utils_2 = require("../../../Common/theming/utils");
var DEFAULT_MIN_SIZE = (0, utils_2.toRem)(30);
var DEFAULT_BORDER_RADIUS = '4px';
var shadow = function (props) {
    return {
        boxShadow: 'inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1)',
    };
};
var positions = function (props) {
    var positions = {};
    var offsetInPx = (props.theme.minButtonSize - 22) / 2 + "px";
    if (props.width != 'icon') {
        if (props.iconPosition === 'left') {
            positions.position = 'absolute';
            positions.top = offsetInPx;
            positions.left = offsetInPx;
        }
        else if (props.iconPosition === 'right') {
            positions.position = 'absolute';
            positions.top = offsetInPx;
            positions.right = offsetInPx;
        }
    }
    return positions;
};
var base = function (props) {
    var _a, _b;
    var borderColor = ((_a = props === null || props === void 0 ? void 0 : props.additionalStyles) === null || _a === void 0 ? void 0 : _a.backgroundColor)
        ? (_b = props === null || props === void 0 ? void 0 : props.additionalStyles) === null || _b === void 0 ? void 0 : _b.backgroundColor
        : props.borderColor || props.theme.colorMap[props.intent + "Border"];
    return {
        $nest: {
            '&.up-btn': {
                textAlign: 'center',
                flex: 1,
                fontSize: (0, utils_1.default)(types_1.fontSizeMap[props.fontSize]),
                borderColor: borderColor,
                borderWidth: '1px',
                borderStyle: 'solid',
                paddingBottom: 0,
                paddingTop: 0,
                paddingLeft: props.width === 'icon'
                    ? 0
                    : (props.iconName != null || props.actionType != null) && props.iconPosition === 'left'
                        ? (0, utils_2.toRem)(32)
                        : (0, utils_2.toRem)(6),
                paddingRight: props.width === 'icon'
                    ? 0
                    : (props.iconName != null || props.actionType != null) && props.iconPosition === 'right'
                        ? (0, utils_2.toRem)(32)
                        : (0, utils_2.toRem)(6),
                textDecoration: 'none',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'row',
                position: 'relative',
                minWidth: props.dropDown && props.width != 'icon' ? (0, utils_2.toRem)(44) : 'inherit',
            },
            '&.up-btn.up-btn-drop-down': {
                paddingLeft: 0,
                paddingRight: 0,
                display: 'flex',
                flexDirection: 'row-reverse',
            },
            '&.up-btn.up-btn-drop-down .up-btn-label': {
                paddingRight: 0,
                paddingLeft: 0,
                marginRight: (0, utils_2.toRem)(28),
                marginLeft: (0, utils_2.toRem)(28),
            },
            '&.up-btn.up-btn-drop-down .up-icon-wrapper': {
                position: 'unset',
                marginRight: (0, utils_2.toRem)(14),
            },
            '&.up-btn .up-icon-wrapper': (0, tslib_1.__assign)({}, positions(props)),
            '&.up-btn svg': {
                margin: 0,
                display: 'inline-block',
            },
            '&.up-btn .up-btn-label': {
                display: 'inline-block',
                paddingTop: 0,
                paddingLeft: props.width == 'auto' ? (0, utils_2.toRem)(8) : 0,
                paddingRight: props.width == 'auto' ? (0, utils_2.toRem)(8) : 0,
                color: props.isProcessing ? props.theme.colorMap.disabledBg : 'inherit',
                width: '100%',
                textAlign: 'center',
                textTransform: 'uppercase',
                fontWeight: 700,
                fontSize: (0, utils_2.toRem)(14),
            },
            '&.up-btn:focus': {
                outline: 'transparent auto 0px',
                outlineOffset: 0,
            },
            '&.up-btn .up-loading-indicator-wrapper': {
                position: 'absolute',
                top: '0',
                left: '0',
                width: '100%',
                height: (0, csx_1.calc)('100%'),
                display: 'flex',
                alignContent: 'center',
                justifyItems: 'center',
            },
            '&.up-btn .up-loading-indicator-wrapper > div': {
                width: '100%',
                height: (0, csx_1.calc)('100%'),
            },
        },
    };
};
var disabled = function (props) {
    return {
        $nest: {
            '&.up-btn[disabled]': {
                cursor: 'not-allowed',
                background: props.theme.colorMap.disabledBg,
                color: props.theme.colorMap.disabledFg,
                borderColor: props.theme.colorMap.disabledBg,
            },
            '&.up-btn[disabled] svg, &.up-btn[disabled] svg path, &.up-btn[disabled] svg polygon': {
                fill: props.theme.colorMap.disabledFg,
            },
        },
    };
};
var toggle = function (props) {
    return {
        color: props.color || props.theme.colorMap[props.intent + "HoverFg"] || 'black',
        backgroundColor: props.color || props.theme.colorMap[props.intent + "Active"] || 'white',
        boxShadow: 'inset 5px 5px 5px rgba(16, 22, 26, 0.2)',
        $nest: {
            '&.up-btn': {
                backgroundColor: 'white',
                boxShadow: 'unset',
                color: "" + props.theme.colorMap[props.intent],
                borderBottom: 'unset',
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0,
                borderTopRightRadius: '4px',
                borderTopLeftRadius: '4px !important',
            },
            '&.up-btn svg': {
                transform: !props.disabled ? 'rotate(180deg)' : 'normal',
            },
            '&.up-btn svg, &.up-btn svg path, &.up-btn svg polygon, &.up-btn svg polyline': {
                fill: (props.backgroundColor || props.theme.colorMap["" + props.intent]) + " !important",
            },
        },
    };
};
var active = function (props) {
    var _a, _b, _c, _d;
    return {
        color: props.color || props.theme.colorMap[props.intent + "Fg"] || 'black',
        backgroundColor: ((_a = props === null || props === void 0 ? void 0 : props.additionalStyles) === null || _a === void 0 ? void 0 : _a.backgroundColor) || props.backgroundColor || props.theme.colorMap[props.intent],
        borderColor: ((_b = props === null || props === void 0 ? void 0 : props.additionalStyles) === null || _b === void 0 ? void 0 : _b.backgroundColor) || props.borderColor || props.theme.colorMap[props.intent + "Border"],
        borderWidth: '1px',
        borderStyle: 'solid',
        $nest: {
            '&:hover': {
                color: props.color || props.theme.colorMap[props.intent + "HoverFg"] || 'black',
                backgroundColor: ((_c = props === null || props === void 0 ? void 0 : props.additionalStyles) === null || _c === void 0 ? void 0 : _c.hoverBackgroundColor) ||
                    props.color ||
                    props.theme.colorMap[props.intent + "Hover"] ||
                    'white',
            },
            '&.up-btn:hover .colored svg, &.up-btn:hover .colored svg path, &.up-btn:hover .colored svg polygon, &.up-btn:hover .colored svg polyline': {
                fill: props.backgroundColor ||
                    props.theme.colorMap["" + props.intent + (props.dropDown === 'none' ? 'HoverFg' : '')],
            },
            '&:hover:active': {
                color: props.color || props.theme.colorMap[props.intent + "HoverFg"] || 'black',
                backgroundColor: ((_d = props === null || props === void 0 ? void 0 : props.additionalStyles) === null || _d === void 0 ? void 0 : _d.hoverBackgroundColor) ||
                    props.color ||
                    props.theme.colorMap[props.intent + "HoverActive"] ||
                    'white',
            },
            '&:hover:active .colored svg, &:hover:active .colored svg path, &:hover:active .colored svg polygon, &:hover:active .colored svg polyline': {
                fill: props.backgroundColor || props.theme.colorMap[props.intent + "HoverFg"],
            },
            '&:active': {
                color: props.color || props.theme.colorMap[props.intent + "HoverFg"] || 'black',
                backgroundColor: props.color || props.theme.colorMap[props.intent + "Active"] || 'white',
                boxShadow: 'inset 5px 5px 5px rgba(16, 22, 26, 0.2)',
            },
            '&:active .colored svg, &:active .colored svg path, &:active .colored svg polygon, &:active .colored svg polyline': {
                fill: props.backgroundColor || props.theme.colorMap[props.intent + "HoverFg"],
            },
            '&.up-btn .colored svg, &.up-btn .colored svg path, &.up-btn .colored svg polygon, &.up-btn .colored svg polyline': {
                fill: props.color || props.theme.colorMap[props.intent + "Fg"] || 'white',
            },
            '&.up-btn': {
                cursor: 'pointer',
            },
        },
    };
};
var large = function (props) {
    return {
        fontSize: (0, utils_2.toRem)(18),
        lineHeight: '1.3',
        borderRadius: props.theme.borderRadius || DEFAULT_BORDER_RADIUS,
        $nest: {
            '&.up-btn svg': {
                margin: 0,
                width: (0, utils_2.toRem)(20),
                height: (0, utils_2.toRem)(20),
            },
        },
    };
};
var normal = function (props) {
    return {
        fontSize: (0, utils_1.default)(types_1.fontSizeMap[props.fontSize]),
        height: props.theme.minButtonSize || DEFAULT_MIN_SIZE,
        width: props.dropDown != 'none' ? 'auto' : types_1.buttonSizeMap[props.width] || 'inherit',
        borderRadius: props.theme.borderRadius || DEFAULT_BORDER_RADIUS,
        $nest: {
            '&.up-btn svg': {
                margin: 0,
                width: (0, utils_2.toRem)(20),
                height: (0, utils_2.toRem)(20),
            },
        },
    };
};
var small = function (props) {
    return {
        padding: (0, utils_2.toRem)(3) + " " + (0, utils_2.toRem)(8),
        fontSize: (0, utils_2.toRem)(12),
        lineHeight: '1.5',
        borderRadius: '3px',
        $nest: {
            '&.up-btn svg': {
                margin: 0,
                width: props.iconSize ? props.iconSize : (0, utils_2.toRem)(16),
                height: props.iconSize ? props.iconSize : (0, utils_2.toRem)(16),
            },
        },
    };
};
var xsmall = function (props) {
    return {
        padding: (0, utils_2.toRem)(1) + " " + (0, utils_2.toRem)(4),
        fontSize: (0, utils_2.toRem)(12),
        lineHeight: '1.5',
        borderRadius: '3px',
        $nest: {
            '&.up-btn svg': {
                margin: 0,
                width: props.iconSize ? props.iconSize : (0, utils_2.toRem)(12),
                height: props.iconSize ? props.iconSize : (0, utils_2.toRem)(12),
            },
        },
    };
};
var defaultIcon = function (props) {
    var styles = {};
    if (props.width === 'icon') {
        styles = {
            $nest: {
                '&.up-btn .up-icon-wrapper': {
                    display: 'flex',
                    width: 'auto',
                    height: 'auto',
                    justifyContent: 'center',
                    alignItems: 'center',
                },
            },
        };
    }
    return styles;
};
var icon = function (props) {
    var styles = {
        padding: 0,
        height: (0, utils_2.toRem)(24),
        width: (0, utils_2.toRem)(24),
        minWidth: 'initial',
        minHeight: 'initial',
        borderRadius: '3px',
        fontSize: (0, utils_2.toRem)(12),
        lineHeight: '1.5',
        $nest: {
            '&.up-btn svg': {
                margin: '0px !important',
                width: props.iconSize ? props.iconSize : (0, utils_2.toRem)(15),
                height: props.iconSize ? props.iconSize : (0, utils_2.toRem)(15),
                padding: (0, utils_2.toRem)(3),
            },
        },
    };
    return styles;
};
var iconXSmall = function (props) {
    var styles = {
        padding: (0, utils_2.toRem)(1) + " " + (0, utils_2.toRem)(2),
        minWidth: 'initial',
        minHeight: 'initial',
        borderRadius: '3px',
        fontSize: (0, utils_2.toRem)(10),
        width: (0, utils_2.toRem)(16),
        height: (0, utils_2.toRem)(16),
        lineHeight: '1',
        $nest: {
            '&.up-btn svg': {
                margin: '3px',
                width: props.iconSize ? props.iconSize : (0, utils_2.toRem)(12),
                height: props.iconSize ? props.iconSize : (0, utils_2.toRem)(12),
            },
        },
    };
    return styles;
};
var iconSmall = function (props) {
    var styles = {
        padding: (0, utils_2.toRem)(3) + " " + (0, utils_2.toRem)(4),
        minWidth: 'initial',
        minHeight: 'initial',
        borderRadius: '3px',
        fontSize: (0, utils_2.toRem)(12),
        lineHeight: '1.5',
        $nest: {
            '&.up-btn svg': {
                margin: (0, utils_2.toRem)(3),
                width: (0, utils_2.toRem)(16),
                height: (0, utils_2.toRem)(16),
            },
        },
    };
    return styles;
};
var iconNormal = function (props) {
    var styles = {
        padding: (0, utils_2.toRem)(4) + " " + (0, utils_2.toRem)(5),
        borderRadius: '3px',
        minWidth: 'initial',
        minHeight: 'initial',
        fontSize: (0, utils_2.toRem)(12),
        lineHeight: 1.5,
        $nest: {
            '&.up-btn svg': {
                margin: (0, utils_2.toRem)(3),
                width: (0, utils_2.toRem)(20),
                height: (0, utils_2.toRem)(20),
            },
        },
    };
    return styles;
};
exports.iconNormal = iconNormal;
var iconLarge = function (props) {
    return {
        $nest: {
            '&.up-btn': {
                padding: (0, utils_2.toRem)(8),
                borderRadius: '3px',
                minWidth: 'initial',
                minHeight: 'initial',
                fontSize: (0, utils_2.toRem)(14),
                lineHeight: 1.5,
            },
            '&.up-btn svg': {
                margin: (0, utils_2.toRem)(3),
                width: (0, utils_2.toRem)(20),
                height: (0, utils_2.toRem)(20),
            },
        },
    };
};
exports.iconLarge = iconLarge;
var getWidth = function (props) {
    return props.width != 'icon' ? normal(props) : {};
};
exports.getWidth = getWidth;
var getHeight = function (props) {
    if (props.width == 'icon') {
        switch (props.height) {
            case 'xsmall':
                return iconXSmall(props);
            case 'small':
                return iconSmall(props);
            case 'large':
                return (0, exports.iconLarge)(props);
            default:
                return icon(props);
        }
    }
    else {
        switch (props.height) {
            case 'xsmall':
                return xsmall(props);
            case 'small':
                return small(props);
            case 'large':
                return large(props);
            default:
                return normal(props);
        }
    }
};
exports.getHeight = getHeight;
var rounded = function (props) {
    if (props.width === 'icon') {
        return {
            height: (0, utils_2.toRem)(32),
            width: (0, utils_2.toRem)(32),
            borderRadius: (0, utils_2.toRem)(16),
            $nest: {
                div: {
                    margin: 0,
                    height: (0, utils_2.toRem)(32),
                    width: (0, utils_2.toRem)(32),
                },
                '&.up-btn svg': {
                    margin: (0, utils_2.toRem)(4) + " !important",
                    width: (0, utils_2.toRem)(24),
                    height: (0, utils_2.toRem)(24),
                },
            },
        };
    }
    else {
        return {
            $nest: {
                '&.up-btn': {
                    borderRadius: (0, utils_2.toRem)(22),
                },
            },
        };
    }
};
exports.rounded = rounded;
var borderless = function (props) {
    return {
        $nest: {
            '&.up-btn': {
                border: 'unset !important',
                backgroundColor: 'transparent',
            },
            '&.up-btn svg, &.up-btn svg path, &.up-btn svg polygon, &.up-btn svg polyline': {
                fill: " " + props.theme.colorMap[props.intent] + " !important",
            },
            '&.up-btn:hover .colored svg, &.up-btn:hover .colored svg path, &.up-btn:hover .colored svg polygon, &.up-btn:hover .colored svg polyline': {
                fill: '#C47400 !important',
            },
            '&:hover:active': {
                color: 'unset',
                backgroundColor: 'unset',
            },
            '&:active': {
                boxShadow: 'unset',
            },
        },
    };
};
exports.borderless = borderless;
exports.rotatingAnimation = (0, typestyle_1.keyframes)({
    from: {
        '-ms-transform': 'rotate(0deg)',
        '-moz-transform': 'rotate(0deg)',
        '-webkit-transform': 'rotate(0deg)',
        transform: 'rotate(0deg)',
    },
    to: {
        '-ms-transform': 'rotate(360deg)',
        '-moz-transform': 'rotate(360deg)',
        '-webkit-transform': 'rotate(360deg)',
        transform: 'rotate(360deg)',
    },
});
var rotate = function (props) {
    return {
        $nest: {
            '& .up-rotating': {
                '-webkit-animation': exports.rotatingAnimation + " 2s linear infinite",
                '-ms-animation': exports.rotatingAnimation + " 2s linear infinite",
                animation: exports.rotatingAnimation + " 2s linear infinite",
            },
        },
    };
};
exports.rotate = rotate;
var getStyles = function (props) {
    return (0, classnames_1.default)((0, typestyle_1.style)(base(props)), (0, typestyle_1.style)(defaultIcon(props)), (0, typestyle_1.style)((0, exports.getWidth)(props)), (0, typestyle_1.style)((0, exports.getHeight)(props)), props.shadow ? (0, typestyle_1.style)(shadow(props)) : null, props.rounded ? (0, typestyle_1.style)((0, exports.rounded)(props)) : null, props.disabled ? (0, typestyle_1.style)(disabled(props)) : (0, typestyle_1.style)(active(props)), props.rotate ? (0, typestyle_1.style)((0, exports.rotate)(props)) : null, props.isToggled ? (0, typestyle_1.style)(toggle(props)) : null, props.borderless && props.width === 'icon' ? (0, typestyle_1.style)((0, exports.borderless)(props)) : null, props.additionalStyles ? (0, typestyle_1.style)(props.additionalStyles) : null);
};
exports.getStyles = getStyles;
var getWrapperStyles = function (props) {
    return (0, typestyle_1.style)({
        display: 'inline-block',
        position: 'relative',
        width: props.dropDown != 'none' ? 'auto' : types_1.buttonSizeMap[props.width] || 'inherit',
        $nest: {
            '& .up-btn-missing-border': {
                width: '100%',
                borderBottom: "1px solid " + props.theme.colorMap[props.intent],
            },
        },
    });
};
exports.getWrapperStyles = getWrapperStyles;
//# sourceMappingURL=styles.js.map