@codedoc/core/dist/es5/components/collapse/style.js

Create beautiful modern documentation websites.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CollapseStyle = void 0;
var color_1 = __importDefault(require("color"));
var jss_theme_1 = require("@connectv/jss-theme");
exports.CollapseStyle = jss_theme_1.themedStyle(function (theme) { return ({
    collapse: {
        '&>.label': {
            cursor: 'pointer',
            display: 'flex',
            margin: '8px 0',
            alignItems: 'center',
            userSelect: 'none',
            '& .text': { flexGrow: 1 },
            '& .icon-font': {
                marginRight: 32,
                'body.dark-mode-animate &': { transition: 'transform .15s', },
            },
            '&:hover': {
                color: theme.light.primary,
                transition: 'color .15s',
                'body.dark &': {
                    color: theme.dark.primary,
                },
                '@media (prefers-color-scheme: dark)': {
                    'body:not(.dark-mode-animate) &': {
                        color: theme.dark.primary,
                    }
                }
            },
        },
        '&>.content': {
            opacity: 0,
            maxHeight: 0,
            visibility: 'hidden',
            transition: 'opacity .3s',
            paddingLeft: 16,
            borderLeft: "2px solid " + color_1.default(theme.light.border).alpha(.5).toString(),
            'body.dark-mode-animate &': {
                transition: 'transform .15s, opacity .15s, border-color .3s'
            },
            'body.dark &': { borderColor: color_1.default(theme.dark.border).alpha(.5).toString() },
            '@media (prefers-color-scheme: dark)': {
                'body:not(.dark-mode-animate) &': { borderColor: color_1.default(theme.dark.border).alpha(.5).toString() },
            },
        },
        '&.open': {
            '&>.content': { maxHeight: 'none', opacity: 1, visibility: 'visible' },
            '&>.label': {
                '& .icon-font': { transform: 'rotate(90deg)' }
            }
        },
    }
}); });
//# sourceMappingURL=style.js.map