mirror of
https://github.com/discourse/discourse-math.git
synced 2025-02-18 09:25:03 +00:00
5233654fd2
This commit ensures that wide equations can be scrolled on Safari. It previously failed because Safari doesn't not support the two value overflow shorthand.
79 lines
1.9 KiB
SCSS
79 lines
1.9 KiB
SCSS
.math-container {
|
|
&.block-math,
|
|
&.ascii-math {
|
|
display: block;
|
|
|
|
// we use tag selectors because MathJax does not provide helpfull classes
|
|
// and the possible combinations a bit absurd. The styles are scoped by the
|
|
// parent selector. So they don't affect any other elements.
|
|
> {
|
|
div,
|
|
span {
|
|
// Mathjax ships with !important inline;
|
|
display: block !important;
|
|
max-width: 100%;
|
|
margin-bottom: 1em;
|
|
|
|
// Inner containers for all renderers
|
|
// mathjax generic
|
|
[id*="-Frame"],
|
|
> nobr,
|
|
> span,
|
|
// special handeling for SVG
|
|
&.MathJax_SVG,
|
|
// special handeling for katex
|
|
.katex-html {
|
|
display: block;
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
padding: 0.25em 0.5em;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
// On mobile we add a slight fade on either side to indicate that the user can
|
|
// scroll. However, this should not be added to the composer since mathjax does
|
|
// not render in the mobile composer
|
|
.cooked & {
|
|
.mobile-view & {
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 1em;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba($secondary, 1) 0%,
|
|
rgba($secondary, 0) 100%
|
|
);
|
|
}
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 1;
|
|
right: 0;
|
|
top: 0;
|
|
width: 1em;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba($secondary, 0) 0%,
|
|
rgba($secondary, 1) 100%
|
|
);
|
|
}
|
|
|
|
.MJXp-mtable,
|
|
.MJXp-mstyle {
|
|
padding: 0 0.75em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|