tweak-tools/dist/components/Folder/StyledFolder.js

Tweak your React projects until awesomeness

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledContent = exports.StyledTitle = exports.StyledWrapper = exports.StyledFolder = void 0;
const styles_1 = require("../../styles");
exports.StyledFolder = (0, styles_1.styled)('div', {});
exports.StyledWrapper = (0, styles_1.styled)('div', {
    position: 'relative',
    background: '$elevation2',
    transition: 'height 300ms ease',
    variants: {
        fill: { true: {}, false: {} },
        flat: { false: {}, true: {} },
        isRoot: {
            true: {},
            false: {
                paddingLeft: '$md',
                '&::after': {
                    content: '""',
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    width: '$borderWidths$folder',
                    height: '100%',
                    backgroundColor: '$folderWidgetColor',
                    opacity: 0.4,
                    transform: 'translateX(-50%)',
                },
            },
        },
    },
    compoundVariants: [
        {
            isRoot: true,
            fill: false,
            css: {
                // TODO: fix for calendar popup
                overflowY: 'auto',
                // 20px accounts for top margin
                maxHeight: 'calc(100vh - 20px - $$titleBarHeight)',
            },
        },
        {
            isRoot: true,
            flat: false,
            css: { borderRadius: '$lg' },
        },
    ],
});
exports.StyledTitle = (0, styles_1.styled)('div', {
    $flex: '',
    color: '$folderTextColor',
    userSelect: 'none',
    cursor: 'pointer',
    height: '$folderTitleHeight',
    fontWeight: '$folder',
    '> svg': {
        marginLeft: -4,
        marginRight: 4,
        cursor: 'pointer',
        fill: '$folderWidgetColor',
        opacity: 0.6,
    },
    '&:hover > svg': {
        fill: '$folderWidgetColor',
    },
    [`&:hover + ${exports.StyledWrapper}::after`]: {
        opacity: 0.6,
    },
    [`${exports.StyledFolder}:hover > & + ${exports.StyledWrapper}::after`]: {
        opacity: 0.6,
    },
    [`${exports.StyledFolder}:hover > & > svg`]: {
        opacity: 1,
    },
});
exports.StyledContent = (0, styles_1.styled)('div', {
    position: 'relative',
    display: 'grid',
    gridTemplateColumns: '100%',
    rowGap: '$rowGap',
    transition: 'opacity 250ms ease',
    variants: {
        toggled: {
            true: {
                opacity: 1,
                transitionDelay: '250ms',
            },
            false: {
                opacity: 0,
                transitionDelay: '0ms',
                pointerEvents: 'none',
            },
        },
        isRoot: {
            true: {
                '& > div': {
                    paddingLeft: '$md',
                    paddingRight: '$md',
                },
                '& > div:first-of-type': {
                    paddingTop: '$sm',
                },
                '& > div:last-of-type': {
                    paddingBottom: '$sm', // adds an extra padding at the very bottom of the root folder
                },
                [`> ${exports.StyledFolder}:not(:first-of-type)`]: {
                    paddingTop: '$sm',
                    marginTop: '$md',
                    borderTop: '$borderWidths$folder solid $colors$elevation1',
                },
            },
        },
    },
});