@up-group/react-controls/dist/Components/Containers/ButtonGroup/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 themedComponents_1 = require("../../../Common/theming/themedComponents");
var NoGutterStyle = function (props) {
    switch (props.isAddOn) {
        case "none": {
            return (_a = ["\n          .up-btn-wrapper:first-child:not(:last-child):not(.up-dropdown-toggle) .up-btn {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .up-btn-wrapper:last-child:not(:first-child):not(.up-dropdown-toggle) .up-btn {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n          .up-btn-wrapper:not(:last-child):not(:first-child) .up-btn {\n            border-radius: 0;\n          }\n        "], _a.raw = ["\n          .up-btn-wrapper:first-child:not(:last-child):not(.up-dropdown-toggle) .up-btn {\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n          }\n          .up-btn-wrapper:last-child:not(:first-child):not(.up-dropdown-toggle) .up-btn {\n            border-top-left-radius: 0;\n            border-bottom-left-radius: 0;\n          }\n          .up-btn-wrapper:not(:last-child):not(:first-child) .up-btn {\n            border-radius: 0;\n          }\n        "], themedComponents_1.css(_a));
        }
        case "right": {
            return (_b = ["\n        .up-btn-wrapper:first-child .up-btn {\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n        }\n        .up-btn-wrapper:first-child:not(:last-child):not(.up-dropdown-toggle) .up-btn {\n          border-top-right-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        .up-btn-wrapper:last-child:not(:first-child):not(.up-dropdown-toggle) .up-btn {\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n        }\n        .up-btn-wrapper:not(:last-child):not(:first-child) .up-btn {\n          border-radius: 0;\n        }\n      "], _b.raw = ["\n        .up-btn-wrapper:first-child .up-btn {\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n        }\n        .up-btn-wrapper:first-child:not(:last-child):not(.up-dropdown-toggle) .up-btn {\n          border-top-right-radius: 0;\n          border-bottom-right-radius: 0;\n        }\n        .up-btn-wrapper:last-child:not(:first-child):not(.up-dropdown-toggle) .up-btn {\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n        }\n        .up-btn-wrapper:not(:last-child):not(:first-child) .up-btn {\n          border-radius: 0;\n        }\n      "], themedComponents_1.css(_b));
        }
        case "left": {
            return (_c = ["\n      .up-btn-wrapper:last-child .up-btn {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      .up-btn-wrapper:first-child:not(:last-child):not(.up-dropdown-toggle) .up-btn {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      .up-btn-wrapper:last-child:not(:first-child):not(.up-dropdown-toggle) .up-btn {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n      .up-btn-wrapper:not(:last-child):not(:first-child) .up-btn {\n        border-radius: 0;\n      }\n    "], _c.raw = ["\n      .up-btn-wrapper:last-child .up-btn {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      .up-btn-wrapper:first-child:not(:last-child):not(.up-dropdown-toggle) .up-btn {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      .up-btn-wrapper:last-child:not(:first-child):not(.up-dropdown-toggle) .up-btn {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n      .up-btn-wrapper:not(:last-child):not(:first-child) .up-btn {\n        border-radius: 0;\n      }\n    "], themedComponents_1.css(_c));
        }
    }
    var _a, _b, _c;
};
var setGutter = function (props) {
    if (props.align === 'v') {
        return (_a = ["\n      button.up-btn {\n        margin-bottom: ", "px;\n      }\n      ()\n    "], _a.raw = ["\n      button.up-btn {\n        margin-bottom: ", "px;\n      }\n      ()\n    "], themedComponents_1.css(_a, props.gutter));
    }
    else {
        return (_b = ["\n      button.up-btn {\n        margin-right: ", "px;\n      }\n      \n    "], _b.raw = ["\n      button.up-btn {\n        margin-right: ", "px;\n      }\n      \n    "], themedComponents_1.css(_b, props.gutter));
    }
    var _a, _b;
};
var setAlignment = function (props) {
    if (props.align === 'v') {
        return (_a = ["\n      button.up-btn, div {\n        display:block;\n        float:left;\n        clear:left;\n      }\n    "], _a.raw = ["\n      button.up-btn, div {\n        display:block;\n        float:left;\n        clear:left;\n      }\n    "], themedComponents_1.css(_a));
    }
    else {
        return (_b = ["\n      button.up-btn {\n        display:inline-block;\n        float:left;\n      }\n    "], _b.raw = ["\n      button.up-btn {\n        display:inline-block;\n        float:left;\n      }\n    "], themedComponents_1.css(_b));
    }
    var _a, _b;
};
exports.ButtonGroupStyled = (_a = ["\n  ", "\n  ", "\n  ", "\n"], _a.raw = ["\n  ", "\n  ", "\n  ", "\n"], themedComponents_1.default.div(_a, function (props) { return setGutter(props); }, function (props) { return setAlignment(props); }, function (props) {
    return (props.gutter == 0) ? NoGutterStyle : (_a = [""], _a.raw = [""], themedComponents_1.css(_a));
    var _a;
}));
var _a;
//# sourceMappingURL=styles.js.map