metro4/source/components/treeview/treeview.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.treeview {
    margin: 0 0 0 0;
    padding: 0 0 0 24px;
    font-size: .8125rem;
    list-style: none inside;
    display: block;
    position: relative;
    user-select: none;
}

.treeview {
    li {
        display: block;
        position: relative;
        padding: 2px 0;
        cursor: pointer;
        line-height: 1.25rem;

        .icon {
            position: absolute;
            width: 16px;
            height: 16px;
            font-size: 16px;
            left: 0;
            top: 3px;
            line-height: 16px;

            img {
                max-width: 100%;
                height: 100%;
            }
        }

        .caption {
            position: relative;
            color: #5e5e5e;

            &:hover  {
                text-decoration: underline;
                color: #0a0a0a;
            }
        }

        .icon ~ .caption {
            margin-left: 20px;
        }

        .node-toggle {
            .toggle();
        }

        .node-toggle {
            position: absolute;
            left: 0;
            top: 0;
            .translateX(-100%);
            .square(24, px);

            &::before {
                .rotate(-135deg);
            }
        }

        &.expanded {
            & > .node-toggle {
                &::before {
                    .rotate(-45deg);
                }
            }
        }

        &.current > .caption {
            color: @black;
        }
    }

    ul {
        margin: 0 0 0 1rem;
        padding: 0;
        list-style: none inside;
        display: block;
        font-weight: normal;
    }

    .select .d-menu {
        position: absolute;
        left: 0;
        margin: 0;
        width: auto;
    }

    li {
        .checkbox, .checkbox .check, .checkbox .caption {
            line-height: 1;
        }
        .radio, .radio .check, .radio .caption {
            line-height: 1;
        }
        .switch, .switch .check, .switch .caption {
            line-height: 1;
        }

        .checkbox, .radio, .switch {
            height: 24px;
        }
    }

    .badge {
        display: inline-block!important;
        border-radius: 4px;
        padding: 2px 4px;
        font-size: 10px;
        border: 1px solid @borderColor;
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin-left: 4px;
    }
}