Something went wrong. Try again.
fork of mathquill to add matrix support. used in cartesium
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515// look here to see the digit layout strategy:// https://www.desmos.com/calculator/ctvh9utz0t@digit-separator: 0.11em;@expand-margin: 0.009em;@contract-margin: -0.01em;@ellipsis-separator: 0.14em;@ellipsis-internal-sep: 0.009em;
.mq-root-block,.mq-math-mode .mq-root-block { .inline-block; width: 100%; padding: 2px; .box-sizing(border-box); // supported by IE8+: http://caniuse.com/css3-boxsizing white-space: nowrap; overflow: hidden; vertical-align: middle;
.mq-digit { display: inline-block; margin-left: @expand-margin; margin-right: @expand-margin; }
&.mq-has-spacing-bug .mq-digit { display: inline; }
&.mq-show-grouping { .mq-group-start { margin-left: @digit-separator; margin-right: @contract-margin; }
.mq-group-other { margin-left: @contract-margin; margin-right: @contract-margin; }
.mq-group-leading-1, .mq-group-leading-2 { margin-left: 0; margin-right: @contract-margin; }
.mq-group-leading-3 { margin-left: 4 * @expand-margin; margin-right: @contract-margin; } } .mq-ellipsis-start { margin-left: @ellipsis-separator; margin-right: @ellipsis-internal-sep; }
.mq-ellipsis-middle { margin-left: @ellipsis-internal-sep; margin-right: @ellipsis-internal-sep; }
.mq-ellipsis-end { margin-left: @ellipsis-internal-sep; margin-right: @ellipsis-separator; }}
.mq-math-mode { font-variant: normal; font-weight: normal; font-style: normal; font-size: 115%; line-height: 1;
.inline-block; .mq-non-leaf, .mq-scaled { .inline-block; }
// TODO: dasherize non-symbola var, .mq-text-mode, .mq-nonSymbola { font-family: @times; line-height: 0.9; }
svg { // svg symbols are sometimes used for autoscaling brackets and // square root symbols. This piece of css magic allows you to copy // over the current value of the font color to the svg symbols. fill: currentColor;
// the svg symbols fill their container position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
* { font-size: inherit; line-height: inherit; margin: 0; padding: 0; border-color: black; .user-select(none); box-sizing: border-box; }
// TODO: what's the difference between these? .mq-empty { background: rgba(0, 0, 0, 0.2); &.mq-root-block { background: transparent; } &.mq-quiet-delimiter { background: transparent; } }
&.mq-empty { background: transparent; }
.mq-text-mode { display: inline-block; white-space: pre; }
.mq-text-mode.mq-hasCursor { box-shadow: inset darkgray 0 0.1em 0.2em; padding: 0 0.1em; margin: 0 -0.1em;
min-width: 1ex; }
.mq-font { font: 1em @times;
* { font-family: inherit; font-style: inherit; } }
// TODO [Han]: Why do we have to special-case .font? b, b.mq-font { font-weight: bolder; }
var, i, i.mq-font { font-style: italic; }
var.mq-f { margin-right: 0.2em; margin-left: 0.1em; }
.mq-roman var.mq-f { margin: 0; }
big { font-size: 200%; }
.mq-int { > big { display: inline-block; .transform(scaleX(0.7)); vertical-align: -0.16em; }
> .mq-supsub { font-size: 80%; vertical-align: -1.1em; padding-right: 0.2em;
> .mq-sup > .mq-sup-inner { vertical-align: 1.3em; }
> .mq-sub { margin-left: -0.35em; } } }
.mq-roman { font-style: normal; }
.mq-sans-serif { font-family: sans-serif, Symbola, serif; }
.mq-monospace { font-family: monospace, Symbola, serif; }
.mq-overline { border-top: 1px solid; margin-top: 1px; } .mq-underline { border-bottom: 1px solid; margin-bottom: 1px; }
//// // operators @operator-padding: 0.2em;
.mq-binary-operator { padding: 0 @operator-padding; .inline-block; }
//// // ^, _ // sup/sub // TODO: try http://jsbin.com/gabunebe/3/edit instead // obsoletes the in HTML template, but needs cross-browser // testing. Should also make the superscript shrink to the size of // its contents, rather than always being as wide as the subscript. // See also .fraction .mq-supsub { text-align: left; font-size: 90%; vertical-align: -0.5em;
&.mq-sup-only { vertical-align: 0.5em;
& > .mq-sup { display: inline-block; vertical-align: text-bottom; } }
.mq-sup { display: block; }
.mq-sub { display: block; float: left; }
.mq-binary-operator { padding: 0 0.1em; }
// special styles for fractions // within sup/sub. .mq-fraction { font-size: 70%; } }
sup.mq-nthroot { font-size: 80%; vertical-align: 0.8em; margin-right: -0.6em; margin-left: 0.2em; min-width: 0.5em; }
//// // parentheses .mq-ghost svg { opacity: 0.2; } .mq-bracket-middle { margin-top: 0.1em; margin-bottom: 0.1em; } .mq-bracket-l, .mq-bracket-r { position: absolute; top: 0; bottom: 2px; } .mq-bracket-l { left: 0; } .mq-bracket-r { right: 0; } .mq-bracket-container { position: relative; }
.mq-array { vertical-align: middle; text-align: center; }
.mq-array > span { display: block; }
//// // non-italicized operator names // like \sin, \cos, \ln, etc. .mq-operator-name { font-family: Symbola, 'Times New Roman', serif; line-height: 0.9; font-style: normal; } var.mq-operator-name.mq-first { padding-left: 0.2em; } var.mq-operator-name.mq-last, .mq-supsub.mq-after-operator-name { padding-right: 0.2em; }
//// // \frac // fractions // TODO: try http://jsbin.com/gabunebe/4/edit instead // obsoletes the in HTML template, but needs cross-browser // testing. See also .supsub .mq-fraction { font-size: 90%; text-align: center; vertical-align: -0.4em; padding: 0 0.2em; }
// Firefox 2 (and older?) only // because display:inline-block is FUBAR in Gecko < 1.9.0 .mq-fraction, .mq-large-operator, x:-moz-any-link { display: -moz-groupbox; }
// Firefox 3+ (Gecko 1.9.0+) .mq-fraction, .mq-large-operator, x:-moz-any-link, x:default { display: inline-block; }
.mq-numerator, .mq-denominator, .mq-dot-recurring { display: block; }
.mq-numerator { padding: 0 0.1em; }
.mq-denominator { border-top: 1px solid; float: right; // take out of normal flow to manipulate baseline width: 100%; padding: 0.1em; }
.mq-dot-recurring { text-align: center; height: 0.3em; }
//// // \sqrt // square roots .mq-sqrt-prefix { position: absolute; top: 1px; bottom: 0.15em; width: 0.95em; }
.mq-sqrt-container { position: relative; }
.mq-sqrt-stem { border-top: 1px solid; margin-top: 1px; margin-left: 0.9em; padding-left: 0.15em; padding-right: 0.2em; margin-right: 0.1em; padding-top: 1px; }
.mq-diacritic-above { display: block; text-align: center; line-height: 0.4em; }
.mq-diacritic-stem { display: block; text-align: center; }
.mq-hat-prefix { display: block; text-align: center; line-height: 0.95em; margin-bottom: -0.7em; transform: scaleX(1.5); -moz-transform: scaleX(1.5); -o-transform: scaleX(1.5); -webkit-transform: scaleX(1.5); }
.mq-hat-stem { display: block; }
.mq-large-operator { vertical-align: -0.2em; padding: 0.2em; text-align: center;
.mq-from, big, .mq-to { display: block; } .mq-from, .mq-to { font-size: 80%; } .mq-from { float: right; /* take out of normal flow to manipulate baseline */ width: 100%; } }
&, .mq-editable-field { cursor: text; font-family: @symbola; }
.mq-overarc { border-top: 1px solid; -webkit-border-top-right-radius: 50% 0.3em; -moz-border-radius-topright: 50% 0.3em; border-top-right-radius: 50% 0.3em; -webkit-border-top-left-radius: 50% 0.3em; -moz-border-radius-topleft: 50% 0.3em; border-top-left-radius: 50% 0.3em; margin-top: 1px; padding-top: 0.15em; }
.mq-overarrow { min-width: 0.5em; border-top: 1px solid; margin-top: 1px; padding-top: 0.2em; text-align: center; position: relative; }}
.mq-arrow-right-content { position: absolute; right: -0.1em; top: -0.48em; font-size: 0.5em;}
.mq-arrow-left-content { position: absolute; top: -0.48em; left: -0.1em; font-size: 0.5em; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: 'FlipH';}
.mq-matrix { vertical-align: middle; margin: 0 0.1em;
> table { display: inline-table; width: auto; border: none; border-spacing: 3px; border-collapse: separate; text-align: center; }
> table > tr > td { border: none; width: auto; padding: 0.1em 0.3em; vertical-align: baseline; }}