@arche-mc2/arche-controls/dist/Components/Inputs/Select/styles.js

We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var typestyle_1 = require("typestyle");
var utils_1 = require("../../../Common/theming/utils");
exports.groupStyles = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
};
exports.groupBadgeStyles = {
    borderRadius: '2em',
    display: 'inline-block',
    fontSize: utils_1.toRem(12),
    fontWeight: 500,
    lineHeight: 1,
    minWidth: 1,
    padding: '0.16666666666667em 0.5em',
    textAlign: 'center',
};
exports.getLabelStyle = function (props) {
    var floatLabel = {
        transform: 'translate(0, 0) !important',
        fontSize: utils_1.toRem(12) + " !important",
    };
    return typestyle_1.style({
        marginTop: props.floatingLabel ? utils_1.toRem(14) : 0,
        minHeight: utils_1.toRem(29),
        position: 'relative',
        $nest: {
            '&.up-select-wrapper .up-select-label': {
                position: 'absolute',
                left: 0,
                top: utils_1.toRem(-10),
                zIndex: 1,
                fontSize: utils_1.toRem(14),
                color: props.theme.colorMap.gray6,
                transformOrigin: "top left",
                transform: "translate(0, " + utils_1.toRem(16) + ") scale(1)",
                transition: "all .1s ease-in-out",
            },
            '&.up-select-wrapper label.up-select-label + div > div': {
                backgroundColor: 'transparent'
            },
            '&.up-select-wrapper label.up-select-label + div > div + div:last-of-type': {
                backgroundColor: '#FFF'
            },
            '&.up-select-wrapper .up-select-label-star': {
                position: 'absolute',
                top: utils_1.toRem(4),
                right: utils_1.toRem(-10)
            },
            '& .up-select-label-focused': tslib_1.__assign({}, floatLabel),
            '& .up-select-label-valued': tslib_1.__assign({}, floatLabel)
        }
    });
};
exports.customStyles = function (theme, value) { return ({
    option: function (provided, state) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { fontWeight: state.isSelected ? 400 : provided.fontWeight || 'inherit', backgroundColor: 'white', padding: utils_1.toRem(10), fontSize: utils_1.toRem(14), cursor: 'pointer', color: state.isSelected ? theme.colorMap.primary : theme.colorMap.grey1, ':active': {
            color: theme.colorMap.primary,
            fontWeight: 400,
            backgroundColor: state.isSelected ? 'transparent' : theme.colorMap.lightGrey1 + " !important",
        }, ':hover': {
            fontWeight: 400,
            backgroundColor: state.isSelected ? 'transparent' : theme.colorMap.lightGrey1 + " !important",
        } })); },
    control: function (provided, state) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { outline: 'none', borderRadius: 0, color: provided.color, fontSize: utils_1.toRem(14), border: state.isFocused ? 0 : 0, boxShadow: state.isFocused ? 0 : 0, '&:hover': {
            border: state.isFocused ? 0 : 0,
            borderBottom: "1px solid " + (state.isFocused ? theme.colorMap.primary : theme.colorMap.gray6),
        }, minHeight: "1.8rem !important", borderBottom: "1px solid " + (state.isFocused ? theme.colorMap.primary : theme.colorMap.gray6) })); },
    dropdownIndicator: function (provided, state) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { color: theme.colorMap.grey1, 'svg, svg path': {
            fill: theme.colorMap.grey1,
        }, '&:hover': {
            cursor: 'pointer'
        }, padding: 0 })); },
    indicatorSeparator: function () { return null; },
    valueContainer: function (provided, state) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { padding: 0, paddingBottom: utils_1.toRem(2), '&:hover': {
            cursor: 'pointer'
        } })); },
    multiValueLabel: function (provided, state) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { backgroundColor: theme.colorMap.primary, color: 'white' })); },
    multiValueRemove: function (provided, state) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { backgroundColor: theme.colorMap.primary, color: 'white' })); },
    menu: function (provided, state) {
        return (tslib_1.__assign(tslib_1.__assign({}, provided), { marginTop: 0, borderRadius: 0, border: "1px solid " + theme.colorMap.lightGrey1, zIndex: 10000 }));
    },
    clearIndicator: function (provided, state) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { color: theme.colorMap.primary, 'svg, svg path': {
            fill: theme.colorMap.primary,
        }, '&:hover': {
            cursor: 'pointer'
        }, padding: 0 })); },
    container: function (provided, state) { return (tslib_1.__assign(tslib_1.__assign({}, provided), { border: 0, outline: 'none' })); },
    singleValue: function (provided, state) {
        var opacity = state.isDisabled ? 0.5 : 1;
        var transition = 'opacity 300ms';
        return tslib_1.__assign(tslib_1.__assign({}, provided), { opacity: opacity, transition: transition, color: theme.colorMap.grey1 });
    },
}); };
//# sourceMappingURL=styles.js.map