KaTeX/static/katex.less

/*
things to do:
\sum, \int, \lim
\sqrt
big parens
*/

.katex {
    font: normal 1.21em katex_main;
    line-height: 1.2;
    white-space: nowrap;

    .katex-inner {
        // Making .katex inline-block allows line breaks before and after,
        // which is undesireable ("to $x$,"). Instead, adjust the .katex-inner
        // style and put nowrap on the inline .katex element.
        display: inline-block;
    }

    .base {
        display: inline-block;
    }

    .strut {
        display: inline-block;
    }

    .mathit {
        font-family: katex_math;
        font-style: italic;
    }

    .amsrm {
        font-family: katex_ams;
    }

    @thinspace: 0.16667em;
    @mediumspace: 0.22222em;
    @thickspace: 0.27778em;

    .textstyle {
        > .mord {
            & + .mord {}
            & + .mop { margin-left: @thinspace; }
            & + .mbin { margin-left: @mediumspace; }
            & + .mrel { margin-left: @thickspace; }
            & + .mopen {}
            & + .mclose {}
            & + .mpunct {}
            & + .minner { margin-left: @thinspace; }
        }

        > .mop {
            & + .mord { margin-left: @thinspace; }
            & + .mop { margin-left: @thinspace; }
            & + .mbin {}
            & + .mrel { margin-left: @thickspace; }
            & + .mopen {}
            & + .mclose {}
            & + .mpunct {}
            & + .minner { margin-left: @thinspace; }
        }

        > .mbin {
            & + .mord { margin-left: @mediumspace; }
            & + .mop { margin-left: @mediumspace; }
            & + .mbin {}
            & + .mrel {}
            & + .mopen { margin-left: @mediumspace; }
            & + .mclose {}
            & + .mpunct {}
            & + .minner { margin-left: @mediumspace; }
        }

        > .mrel {
            & + .mord { margin-left: @thickspace; }
            & + .mop { margin-left: @thickspace; }
            & + .mbin {}
            & + .mrel {}
            & + .mopen { margin-left: @thickspace; }
            & + .mclose {}
            & + .mpunct {}
            & + .minner { margin-left: @thickspace; }
        }

        > .mopen {
            & + .mord {}
            & + .mop {}
            & + .mbin {}
            & + .mrel {}
            & + .mopen {}
            & + .mclose {}
            & + .mpunct {}
            & + .minner {}
        }

        > .mclose {
            & + .mord {}
            & + .mop { margin-left: @thinspace; }
            & + .mbin { margin-left: @mediumspace; }
            & + .mrel { margin-left: @thickspace; }
            & + .mopen {}
            & + .mclose {}
            & + .mpunct {}
            & + .minner { margin-left: @thinspace; }
        }

        > .mpunct {
            & + .mord { margin-left: @thinspace; }
            & + .mop { margin-left: @thinspace; }
            & + .mbin {}
            & + .mrel { margin-left: @thinspace; }
            & + .mopen { margin-left: @thinspace; }
            & + .mclose { margin-left: @thinspace; }
            & + .mpunct { margin-left: @thinspace; }
            & + .minner { margin-left: @thinspace; }
        }

        > .minner {
            & + .mord { margin-left: @thinspace; }
            & + .mop { margin-left: @thinspace; }
            & + .mbin { margin-left: @mediumspace; }
            & + .mrel { margin-left: @thickspace; }
            & + .mopen { margin-left: @thinspace; }
            & + .mclose {}
            & + .mpunct { margin-left: @thinspace; }
            & + .minner { margin-left: @thinspace; }
        }
    }

    .mord {
        & + .mop { margin-left: @thinspace; }
    }

    .mop {
        & + .mord { margin-left: @thinspace; }
        & + .mop { margin-left: @thinspace; }
    }

    .mclose {
        & + .mop { margin-left: @thinspace; }
    }

    .minner {
        & + .mop { margin-left: @thinspace; }
    }

    .reset-textstyle.textstyle { font-size: 1em; }
    .reset-textstyle.scriptstyle { font-size: 0.66667em; }
    .reset-textstyle.scriptscriptstyle { font-size: 0.5em; }

    .reset-scriptstyle.textstyle { font-size: 1.5em; }
    .reset-scriptstyle.scriptstyle { font-size: 1em; }
    .reset-scriptstyle.scriptscriptstyle { font-size: 0.75em; }

    .reset-scriptscriptstyle.textstyle { font-size: 2em; }
    .reset-scriptscriptstyle.scriptstyle { font-size: 1.5em; }
    .reset-scriptscriptstyle.scriptscriptstyle { font-size: 1em; }

    .baseline-align-hack-outer() {
        display: inline-block;
    }

    .baseline-align-hack-middle() {
        display: block;
        height: 0;
    }

    .baseline-align-hack-inner() {
        display: inline-block;
    }

    .msupsub {
        .baseline-align-hack-outer;
        text-align: left;

        // The rendering of $y'$, for example, looks bad without this.
        // TODO(alpert): Obviously incorrect. Figure out the proper fix here.
        margin-left: 0.05em;

        .msup,
        .msub,
        .fix-ie {
            .baseline-align-hack-middle;
            position: relative;

            > span {
                .baseline-align-hack-inner;
            }
        }

        .fix-ie {
            display: inline-block;
        }
    }

    .mfrac {
        .baseline-align-hack-outer;

        .mfracnum,
        .mfracmid,
        .mfracden,
        .fix-ie {
            .baseline-align-hack-middle;
            position: relative;
            text-align: center;

            > span {
                .baseline-align-hack-inner;
            }
        }

        .fix-ie {
            display: inline-block;
        }

        .mfracmid > span {
            width: 100%;

            &:before {
                border-bottom-style: solid;
                border-bottom-width: 1px;
                content: "";
                display: block;
            }

            &:after {
                border-bottom-style: solid;
                border-bottom-width: 0.05em;
                content: "";
                display: block;
                margin-top: -1px;
            }
        }
    }

    .mspace {
        display: inline-block;

        &.negativethinspace {
            margin-left: -@thinspace;
        }

        &.thinspace {
            width: @thinspace;
        }

        &.mediumspace {
            width: @mediumspace;
        }

        &.thickspace {
            width: @thickspace;
        }

        &.enspace {
            width: 0.5em;
        }

        &.quad {
            width: 1em;
        }

        &.qquad {
            width: 2em;
        }
    }

    .llap,
    .rlap {
        width: 0;
        position: relative;

        > .inner {
            position: absolute;
        }

        > .fix {
            display: inline-block;
        }
    }

    .llap > .inner {
        right: 0;
    }

    .rlap > .inner {
        left: 0;
    }

    .katex-logo {
        .a {
            font-size: 0.75em;
            margin-left: -0.32em;
            position: relative;
            top: -0.2em;
        }
        .t {
            margin-left: -0.23em;
        }
        .e {
            margin-left: -0.1667em;
            position: relative;
            top: 0.2155em;
        }
        .x {
            margin-left: -0.125em;
        }
    }

    .sizing {
        display: inline-block;

        @size1: 0.5;
        @size2: 0.7;
        @size3: 0.8;
        @size4: 0.9;
        @size5: 1.0;
        @size6: 1.2;
        @size7: 1.44;
        @size8: 1.73;
        @size9: 2.07;
        @size10: 2.49;

        .generate-size-change(@from, @to) {
            &.reset-size@{from}.size@{to} {
                @sizeFromVariable: ~"size@{from}";
                @sizeToVariable: ~"size@{to}";
                font-size: (@@sizeToVariable / @@sizeFromVariable) * 1em;
            }
        }

        .generate-to-size-change(@from, @currTo) when (@currTo =< 10) {
            .generate-size-change(@from, @currTo);

            .generate-to-size-change(@from, (@currTo + 1));
        }

        .generate-from-size-change(@currFrom) when (@currFrom =< 10) {
            .generate-to-size-change(@currFrom, 1);

            .generate-from-size-change((@currFrom + 1));
        }

        .generate-from-size-change(1);
    }

    .delimsizing {
        &.size1 { font-family: katex_size1; }
        &.size2 { font-family: katex_size2; }
        &.size3 { font-family: katex_size3; }
        &.size4 { font-family: katex_size4; }

        &.mult {
            .baseline-align-hack-outer;

            > .fix-ie,
            > .delimsizinginner {
                .baseline-align-hack-middle;
                position: relative;

                &.size1 {
                    > span {
                        font-family: katex_size1;
                    }
                }
            }
        }
    }
}