@doneproperly/gitbook-plugin-theme-doneproperly-default/src/less/website/summary.less

Default theme for GitBook

.book-summary {
    font-family: @font-family-sans;

    position: absolute;
    top: 0px;
    left: -@sidebar-width;
    bottom: 0px;
    z-index: 1;
    overflow-y: auto;

    width: @sidebar-width;
    color: @sidebar-color;
    background: @sidebar-background;
    border-right: @sidebar-border-right;

    .transition(left @sidebar-transition-duration ease);

    ul.summary {
        list-style: none;
        margin: 0px;
        padding: 0px;

        .transition(top 0.5s ease);

        li {
            list-style: none;

            &.header {
                padding: @sidebar-link-padding-v @sidebar-link-padding-h;
                padding-top: 20px;
                text-transform: uppercase;
                color: @sidebar-header-color;
            }

            &.divider {
                height: 1px;
                margin: 7px 0;
                overflow: hidden;
                background: @sidebar-divider-color;
            }

            i.fa-check {
                display: none;
                position: absolute;
                right: 9px;
                top: 16px;
                font-size: 9px;
                color: @sidebar-icon-color;
            }

            &.done {
                > a {
                    color: @sidebar-link-completed;
                    font-weight: @sidebar-link-completed-weight;

                    i {
                        display: inline;
                    }
                }
            }

            a, span {
                display: block;
                padding: @sidebar-link-padding-v @sidebar-link-padding-h;
                border-bottom: none;
                color: @sidebar-link-color;
                background: @sidebar-link-background;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                position: relative;
            }

            a:hover {
                text-decoration: underline;
            }

            a:focus {
                outline: none;
            }

            &.active > a {
                color: @sidebar-link-hover-color;
                background: @sidebar-link-hover-background;
                text-decoration: none;
            }

            ul {
                padding-left: @sidebar-nested-padding;
            }
        }
    }

    @media (max-width: @sidebar-breakpoint) {
        width: calc(~"100% - 60px");
        bottom: 0px;
        left: -100%;
    }
}

.book {
    &.with-summary {
        .book-summary {
            left: 0px;
        }
    }

    &.without-animation {
        .book-summary {
            .transition(none) !important;
        }
    }
}