oneframe-react/bundle/lib/components/Treeview/styled.js

Oneframe React ## Components, Hooks, Helper Functions & State Management

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importDefault(require("styled-components"));
exports.TreeviewWrapper = styled_components_1.default.div.attrs((props) => ({
    iconPosition: props.iconPosition,
    deepIcon: props.deepIcon,
})) `
    .oneframe-tree-item {
        .MuiTreeItem-content {
            flex-direction: ${props => (props.iconPosition === 'right' ? 'row-reverse' : 'row')};
        }
        cursor: pointer;
        font-size: 16px;

        .oneframe-tree-item-link,
        .oneframe-tree-item-deep {
            display: flex;
            align-items: center;
            line-height: 1.5;

            &:hover {
                background-color: rgba(0, 0, 0, 0.08);
            }
        }

        .oneframe-tree-item-icon {
            margin-left: 3px;

            &.deep-icon {
                margin-left: ${props => props.iconPosition === 'right'
    ? 'auto'
    : props.iconPosition === 'left' && !props.deepIcon
        ? '22px'
        : '3px'};
                text-align: ${props => (props.iconPosition === 'right' ? 'center' : 'inherit')};
                margin-right: ${props => (props.iconPosition === 'right' ? '1px' : 'inherit')};
            }

            i {
                width: 24px;
            }
        }

        ul {
            list-style: none;
        }
    }
`;