bubcloud/src/assets/less/slices/libs/toc.less

A responsive theme for Forumotion

.toc {
    &-anchor {
        .inline-block();
        margin-left: .2em;
        transform: scale(.8);
        color: @wrapperColor;

        &:hover {
            transform: scale(1.2);
            color: @progress;
        }
    }

    &-fly {
        .border();
        .radius();
        user-select: none;
        position: absolute;
        top: 131px;
        right: 0;
        overflow: hidden;
        width: 30px;
        height: 30px;
        background: @secondaryBg;
        box-shadow: @dropShadow;
        opacity: .7;
        transition: opacity .3s, top .2s;

        &:hover {
            opacity: 1;
        }

        &.active {
            width: auto;
            height: auto;

            .toc-totop,
            .toc-list {
                position: relative;
            }

            .toc-list {
                top: 0;
                overflow: auto;
            }

            .toc-control {
                .fa:before {
                    content: "\f00d";
                }
            }
        }

        a {
            .show();
            height: 24px;
            padding: 0 10px;
            font-size: 12px;
            line-height: 24px;
            white-space: pre;
            color: @lightSecondaryColor;

            &:focus,
            &:hover {
                color: @darkSecondaryColor;
                background: @wrapperColor;
            }

            &.toc-top {
                height: 30px;
                border-bottom: @border;
                line-height: 30px;
                background: @primaryBg;
            }

            &.toc-h3 {
                padding-left: 20px;
            }

            &.toc-h4 {
                padding-left: 30px;
            }
        }
    }

    &-control {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        padding-left: .75em;
        line-height: 30px;
        cursor: pointer;

        &:hover {
            color: @progress;
        }
    }

    &-totop,
    &-list {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 160px;
    }

    &-list {
        top: 30px;
    }
}