mobile-nixos/doc/_support/styles/float-toc.less

// Good defaults.
@toc-side: left;
@toc-size: 33; // Percent of the width of the screen. NO units.
@toc-max-width: @toc-size/100 * @screen-lg;
@toc-expando-size: 1rem;

@toc-color: #eee;
@toc-active-color: darken(@toc-color, 10%);

@__toc-vw: @toc-size * 1vw;

// Why is the toggle class `toc-toggle` rather than `toc-hidden` or a more
// meaningful one?
//
// Simple! The toggle state is different depending on the width of the display!
// The initial state on narrow display is to *hide* the TOC.
// The initial state on wide displat is to *show* the TOC.
// It is assumed that we don't want to detect the width at load to set an
// initial state. (We don't.)
// The *only* drawback of having this inverted toggle state is that on
// transition from a wide window with the TOC hidden, to a narrow window, the
// TOC will show up, and vice versa, on transition from a narrow window with
// the TOC, to a wide window, the TOC will scurry away.
// It is fixed by the user toggling the TOC.
// It is much less fraught with peril than trying to guesstimate the initial
// state in JavaScript.

#global_toc {
    @_indent: @gutter/2;

    position: fixed;
    top: @header-height;
    @{toc-side}: 0;
    bottom: 0;
    background: @toc-color;

    display: flex;

    & > .toc {
        overflow: auto;
    }

    .toc > p {
        display: none;
    }

    span.current-page {
        font-weight: bold;
    }

    li:not(.current-section) ul {
        display: none;
    }

    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    a {
        display: block;
    }

    ul,
    dl > dt {
        margin-top: 0;
        margin-bottom: 0;
        a {
            line-height: 2.5;
        }
    }
    dl {
        margin-left: -@gutter;
        margin-right: -@gutter;
    }
    dl > dd {
        padding-left: @gutter;
        padding-right: @gutter;
    }

    // Links have padding
    ul > li,
    dl > dt {
        a {
            padding-left: @gutter;
            padding-right: @gutter;
        }
    }

    li.current-section,
    dl > dd > dl {
        border-left: @_indent solid @toc-active-color;
    }
    // This doesn't play well with single-sub-chapter categories.
    // It looks weirdly broken while it isn't
    // li .current-page {
    //     border-left-color: @color-blue-light;
    // }
    .active {
        background: @toc-active-color;
    }
}

body.with-javascript {
    //.book,
    .section,
    .chapter {
        & > .toc {
            display: none;
        }
    }
}

body.with-javascript {
    padding-@{toc-side}: @toc-expando-size + @gutter;
}

#screen-xs-max({
    #global_toc {
        max-width: @toc-max-width;
    }

    body:not(.toc-toggle) #global_toc > .toc {
        width: 0;
    }
});

#screen-sm-min({
    body.toc-toggle #global_toc > .toc {
        width: 0;
    }

	body.with-javascript:not(.toc-toggle) {
		padding-@{toc-side}: calc(@__toc-vw + @gutter * 1);
	}

    body:not(.toc-toggle) {
        #global_toc {
            width: @__toc-vw;
        }
    }
});

#screen-lg-min({
	body.with-javascript:not(.toc-toggle) {
		padding-@{toc-side}: calc(@toc-max-width + @gutter * 1);
		max-width: @screen-lg;
	}
    body:not(.toc-toggle) {
        #global_toc {
            width: @toc-max-width;
        }
    }
});

#global_toc .toc-expando {
    width: @toc-expando-size;
    overflow: hidden;
    text-indent: -999em;
    position: relative;

    background: @toc-color;
    color: inherit;
    border: 0;

    text-transform: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    &:hover, &:focus {
        background: @toc-active-color;
    }

    &::after {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        text-indent: 0;

        // Selects the right symbol depending on the way the TOC toggles.
        #screen-xs-max({
            content: "»";
            .toc-toggle & {
                content: "«";
            }
        });
        #screen-sm-min({
            content: "«";
            .toc-toggle & {
                content: "»";
            }
        });
    }
}