| .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-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: .9; |
| } |
| |
| * { |
| 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: #ccc; |
| &.mq-root-block { |
| background: transparent; |
| } |
| } |
| |
| &.mq-empty { |
| background: transparent; |
| } |
| |
| |
| .mq-text-mode { |
| font-size: 87%; |
| } |
| |
| .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.1em; |
| margin-left: 0.1em; |
| } |
| |
| .mq-roman var.mq-f { |
| margin: 0; |
| } |
| |
| big { |
| font-size: 125%; |
| } |
| |
| .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 black; |
| margin-top: 1px; |
| } |
| .mq-underline { |
| border-bottom: 1px solid black; |
| 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 { |
| font-size: 90%; |
| vertical-align: -.5em; |
| &.mq-limit { |
| font-size: 80%; |
| vertical-align: -.4em; |
| } |
| |
| &.mq-sup-only { |
| vertical-align: .5em; |
| |
| .mq-sup { |
| display: inline-block; |
| vertical-align: text-bottom; |
| } |
| } |
| |
| .mq-sup { |
| display: block; |
| } |
| |
| .mq-sub { |
| display: block; |
| float: left; |
| } |
| &.mq-limit .mq-sub { |
| margin-left: -.25em; |
| } |
| |
| .mq-binary-operator { |
| padding: 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: -.6em; |
| margin-left: .2em; |
| min-width: .5em; |
| } |
| |
| //// |
| // parentheses |
| .mq-paren { |
| padding: 0 .1em; |
| vertical-align: top; |
| -webkit-transform-origin: center .06em; |
| -moz-transform-origin: center .06em; |
| -ms-transform-origin: center .06em; |
| -o-transform-origin: center .06em; |
| transform-origin: center .06em; |
| |
| &.mq-ghost { color: silver; } |
| |
| + span { |
| margin-top: .1em; |
| margin-bottom: .1em; |
| } |
| } |
| |
| .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: .9; |
| font-style: normal; |
| } |
| var.mq-operator-name.mq-first { |
| padding-left: .2em; |
| } |
| var.mq-operator-name.mq-last { |
| padding-right: .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: -.4em; |
| padding: 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 { |
| 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; |
| } |
| |
| //// |
| // \sqrt |
| // square roots |
| .mq-sqrt-prefix { |
| padding-top: 0; |
| position: relative; |
| top: 0.1em; |
| vertical-align: top; |
| .transform-origin(top); |
| } |
| |
| .mq-sqrt-stem { |
| border-top: 1px solid; |
| margin-top: 1px; |
| padding-left: .15em; |
| padding-right: .2em; |
| margin-right: .1em; |
| padding-top: 1px; |
| } |
| |
| .mq-vector-prefix { |
| display: block; |
| text-align: center; |
| line-height: .25em; |
| margin-bottom: -.1em; |
| font-size: 0.75em; |
| } |
| |
| .mq-vector-stem { |
| display: block; |
| } |
| |
| .mq-large-operator { |
| 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; |
| } |
| } |