@codedoc/core/dist/es5/components/button/button.js

Create beautiful modern documentation websites.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = exports.ButtonStyle = void 0;
var color_1 = __importDefault(require("color"));
var jss_theme_1 = require("@connectv/jss-theme");
exports.ButtonStyle = jss_theme_1.themedStyle(function (theme) { return ({
    button: {
        background: theme.light.primary,
        color: theme.light.primaryContrast,
        padding: '4px 16px',
        outline: 'none',
        cursor: 'pointer',
        borderRadius: '3px',
        border: "2px solid " + theme.light.primary,
        minWidth: '96px',
        height: '40px',
        display: 'inline-flex',
        justifyContent: 'center',
        alignItems: 'center',
        textDecoration: 'none',
        fontSize: '16px',
        margin: 8,
        marginRight: 0,
        verticalAlign: 'middle',
        'body.dark-mode-animate &': {
            transition: 'background .15s, color .15s, border-color .15s',
        },
        '&.icon': {
            padding: 0,
            minWidth: 0,
            width: '40px',
            fontSize: '24px',
        },
        '&[disabled]': {
            background: color_1.default(theme.light.text).alpha(.35).toString(),
            border: color_1.default(theme.light.text).alpha(.35).toString(),
            color: theme.light.background,
        },
        'body.dark &': {
            background: theme.dark.primary,
            borderColor: theme.dark.primary,
            color: theme.dark.primaryContrast,
            '&[disabled]': {
                background: color_1.default(theme.dark.text).alpha(.35).toString(),
                border: color_1.default(theme.dark.text).alpha(.35).toString(),
                color: theme.dark.background,
            },
        },
        '@media (prefers-color-scheme: dark)': {
            'body:not(.dark-mode-animate) &': {
                background: theme.dark.primary,
                borderColor: theme.dark.primary,
                color: theme.dark.primaryContrast,
                '&[disabled]': {
                    background: color_1.default(theme.dark.text).alpha(.35).toString(),
                    border: color_1.default(theme.dark.text).alpha(.35).toString(),
                    color: theme.dark.background,
                },
            }
        },
        '&:hover:not([disabled])': {
            background: 'transparent',
            color: theme.light.primary,
            textDecoration: 'none',
            'body.dark &': {
                background: 'transparent',
                color: theme.dark.primary,
            },
            '@media (prefers-color-scheme: dark)': {
                'body:not(.dark-mode-animate) &': {
                    background: 'transparent',
                    color: theme.dark.primary,
                }
            },
        },
    },
    '@global': {
        a: {
            '&$button': {
                height: '28px',
                '&.icon': { height: '36px', width: '36px' }
            }
        }
    }
}); });
function Button(options, renderer) {
    var classes = this.theme.classes(exports.ButtonStyle);
    var _class = classes.button;
    if (options.icon === 'true')
        _class += ' icon icon-font';
    if (options.url)
        return renderer.create("a", __assign({ class: _class, href: options.url }, ((options.url.startsWith('/')
            || options.url.startsWith('#')) ? {} : { target: '_blank' })), options.label || '');
    else
        return renderer.create("button", { class: _class, onclick: options.onclick || '' }, options.label || '');
}
exports.Button = Button;
//# sourceMappingURL=button.js.map