@khanacademy/perseus 19.1.5 → 19.1.7

package/src/styles/perseus-renderer.less

@@ -1,732 +0,0 @@
-@import (inline) "./khan-exercise.css";
-
-//
-// Edit this file in the *perseus* repo!
-// (All changes outside the perseus repo will be overwritten)
-//
-
-@import "./variables.less";
-@import "./util.less";
-
-// Article Renderer
-@import "./articles.less";
-
-#perseus {
-    position: relative;
-}
-
-.framework-perseus.perseus-mobile {
-    margin-top: 48px;
-}
-
-// .no-select is used to prevent selection of certain widgets.
-// often, allowing selection makes for an awkward mobile experience
-// where you constantly highlight elements unintentionally.
-.no-select {
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-// .blank-background is used to prevent drawing under transparent widgets.
-// drawing under transparent widgets is particularly annoying because if
-// you lift up your pen and put it down again, you can't continue drawing,
-// because you're now clicking on the widget. This is very
-// counterintuitive, so we simply don't let you see anything you draw under
-// a widget.
-.blank-background {
-    background-color: #fdfdfd; // Keep in sync with KhanUtil._BACKGROUND
-}
-// There is no scratchpad in the answer_area, and it has a different color
-// background, so just make it transparent
-#answer_area .blank-background {
-    background-color: transparent;
-}
-
-.above-scratchpad {
-    position: relative;
-    z-index: @zIndexAboveScratchpad;
-}
-
-// All graphie components placed above the scratchpad should have their
-// background wiped out.
-.graphie.above-scratchpad,
-.graphie-container.above-scratchpad {
-    .blank-background;
-}
-
-.perseus-mobile .graphie-container.above-scratchpad {
-    background: #ffffff;
-}
-
-// Selectable graphie components make for awkward touch experiences
-.graphie {
-    .no-select;
-}
-
-.perseus-interactive,
-.perseus-interactive.above-scratchpad {
-    position: relative;
-    z-index: @zIndexInteractiveComponent;
-}
-
-&,  // and moar specificity...
-#answercontent input[type=text],
-#answercontent input[type=number],
-.framework-perseus input[type=text],
-.framework-perseus input[type=number] {
-    &.perseus-input-size-normal {
-        border: 1px solid #ccc;
-        width: 80px;
-    }
-
-    &.perseus-input-size-small {
-        border: 1px solid #ccc;
-        width: 40px;
-    }
-
-    &.perseus-input-right-align {
-        text-align: right;
-    }
-}
-
-.framework-perseus.perseus-mobile {
-    .perseus-input-right-align .keypad-input {
-        text-align: right;
-    }
-}
-
-.framework-perseus {
-    div.paragraph {
-        font-family: "Lato", sans-serif;
-        font-weight: 400;
-        font-size: 18px;
-        line-height: 22px;
-        margin: 22px 0px;
-    }
-
-    // HACK(yejia): Override the font size and line height for blurbs
-    //
-    // TODO(TP-3315): Remove once Perseus uses Wonder Blocks BodySerif
-    .test-prep-blurb div.paragraph {
-        font-size: 16px;
-        line-height: 20px;
-    }
-
-    div.instructions {
-        display: block;
-        font-family: "Noto Serif", serif;
-        font-weight: 800;
-        font-size: 18px;
-        line-height: 22px;
-        font-style: italic;
-    }
-
-    .perseus-renderer > .paragraph > ul:not(.perseus-widget-radio),
-    .perseus-renderer > .paragraph > ol {
-        margin: -11px 0px 22px 0px; // first-level lists need padding
-    }
-
-    .paragraph ul:not(.perseus-widget-radio, .indicatorContainer) {
-        padding-left: 35px;
-        list-style-type: disc;
-    }
-
-    .paragraph ol {
-        list-style: decimal;
-        padding-left: 2em;
-    }
-
-    blockquote {
-        padding: 0 2.5em;
-    }
-
-    .zoomable {
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        -webkit-touch-callout: none;
-    }
-
-    // We do not apply this styling to MathQuill elements because the
-    // styles interfere with calculation of the size of the container
-    // surrounding the math.
-    sup:not(.mq-non-leaf) {
-        font-size: smaller;
-        vertical-align: super;
-
-        // by default, vertical-align: super changes the line height of
-        // the line this text is in, which repositions surrounding text
-        // and is sad. This is especially important for the passage
-        // widget, as changes to line-height there make the line numbers
-        // incorrect. This hack fixes that, and seems to not cause problems
-        // even if there is no other text on the line (it still gets the
-        // standard line-height of what non `vertical-align: super` text
-        // would be.
-        line-height: 0;
-    }
-
-    // place on a div above the inputs
-    .range-input {
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        display: inline-block;
-        padding: 0px 5px;
-
-        & > input {
-            border: 0;
-            display: inline;
-            text-align: center;
-            width: 30px;
-        }
-
-        & > span {
-            color: #999;
-            font-size: 14px;
-        }
-    }
-
-    .number-input {
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        margin: 0; // override
-        padding: 5px 0; // override
-        text-align: center;
-        width: 40px;
-
-        &.invalid-input {
-            background-color: @red;
-            outline-color: red;
-        }
-
-        &.mini {
-            width: 40px;
-        }
-        &.small {
-            width: 60px;
-        }
-        &.normal {
-            width: 80px;
-        }
-    }
-
-    .math-output {
-        display: inline-block;
-        min-width: 80px;
-        min-height: 36px;
-        border-radius: 5px;
-        padding: 0;
-        margin-top: 4px;
-        margin-bottom: 4px;
-        background: white;
-        border: 1px solid #a4a4a4;
-    }
-
-    .graph-settings {
-        .graph-settings-axis-label {
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            display: inline-block;
-            padding: 5px 5px;
-            width: 70px;
-            float: right;
-            margin: 0 5px;
-        }
-        .graph-settings-background-url {
-            width: 250px;
-        }
-    }
-
-    .graphie-container {
-        // TODO(alex): Is this still used?
-        position: relative;
-    }
-
-    .graph-settings,
-    .image-settings,
-    .misc-settings {
-        padding-bottom: 5px;
-    }
-
-    .misc-settings,
-    .type-settings {
-        border-top: 1px solid black;
-        padding-top: 5px;
-    }
-
-    .svg-image {
-        display: inline-block;
-    }
-
-    .unresponsive-svg-image,
-    .perseus-rendered-radio .unresponsive-svg-image {
-        display: inline-block;
-        position: relative;
-
-        > .graphie-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-    }
-
-    .fixed-to-responsive {
-        position: relative;
-        width: 100%;
-
-        // The first child is different than the rest - it's a div
-        // with vertical padding that reserves space for the rest
-        // of the children (which are absolutely positioned and
-        // thus can't claim space for themselves).
-        > :not(:first-child) {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-        }
-    }
-}
-
-/* Legacy table styles. Remove when XOM is rolled out (see below for
-   updated XOM styles). */
-.framework-perseus:not(.perseus-mobile) {
-    table {
-        .legacy-typography;
-
-        th,
-        td {
-            padding: 5px 10px;
-            text-align: left;
-
-            &[align="center"] {
-                text-align: center;
-            }
-
-            &[align="right"] {
-                text-align: right;
-            }
-        }
-
-        th {
-            border-bottom: 2px solid #ccc;
-            font-weight: bold;
-            padding-bottom: 2px;
-        }
-
-        tr:nth-child(odd) {
-            // Doesn't work in IE8 :(
-            td {
-                background-color: @offWhite;
-            }
-        }
-    }
-
-    .perseus-titled-table {
-        display: inline-block;
-
-        // Center the table in a titled table
-        table {
-            margin-left: auto;
-            margin-right: auto;
-        }
-    }
-
-    // Center the title in a titled table
-    .perseus-table-title {
-        text-align: center;
-        font-size: larger;
-    }
-
-    table.non-markdown {
-        tr:nth-child(odd) {
-            td {
-                background-color: transparent;
-            }
-        }
-
-        th,
-        td {
-            border-width: 0;
-        }
-    }
-}
-
-/* New XOM styles for tables. */
-.framework-perseus.perseus-mobile {
-    /* There are three kinds of tables:
-       1) normal "tables" - emitted by markdown (src/perseus-markdown.jsx)
-       2) "titled tables" - emitted by markdown as well (these are just
-          tables with a title, and encased in one more element)
-       3) "table widget" - where a user is expected to enter answers in a
-          table form (src/widgets/table.jsx).
-      Moreover, there the Categorizer widget uses <table> tags, so these
-      stylings will apply there as well.  */
-    // TODO(benkomalo): be more explicit by adding className values to all
-    // widgets and stop relying on tag names when using CSS. or use aphrodite
-    // evurrwhere
-    table {
-        border-collapse: collapse;
-        margin: 0 auto;
-
-        tbody > tr {
-            border: 1px solid #e5e5e5;
-        }
-
-        th,
-        td {
-            padding: 16px;
-            text-align: left;
-
-            &[align="center"] {
-                text-align: center;
-            }
-
-            &[align="right"] {
-                text-align: right;
-            }
-        }
-
-        td {
-            background: #fff;
-        }
-
-        th {
-            font-weight: bold;
-        }
-    }
-
-    @media (max-width: @pure-sm-max) {
-        table {
-            // Make tables "full-bleed" on phones.
-            width: 100%;
-            min-width: 480px;
-
-            tbody > tr {
-                border-left: 0;
-                border-right: 0;
-            }
-        }
-    }
-
-    .perseus-titled-table {
-        display: inline-block;
-    }
-
-    // Center the title in a titled table
-    .perseus-table-title {
-        text-align: center;
-        font-size: larger;
-    }
-
-    table.non-markdown {
-        // No customizations for table widgets for now.
-    }
-}
-
-/* Widget CSS */
-
-.perseus-graph-padding {
-    box-sizing: content-box;
-    padding: 25px 25px 0 0;
-}
-
-@import "./widgets/categorizer.less";
-@import "./widgets/dropdown.less";
-@import "./widgets/expression.less";
-@import "./widgets/grapher.less";
-@import "./widgets/graded-group.less";
-@import "./widgets/group.less";
-@import "./widgets/image.less";
-@import "./widgets/interactive-graph.less";
-@import "./widgets/label-image.less";
-@import "./widgets/matcher.less";
-@import "./widgets/matrix.less";
-@import "./widgets/measurer.less";
-@import "./widgets/orderer.less";
-@import "./widgets/passage.less";
-@import "./widgets/plotter.less";
-@import "./widgets/radio.less";
-@import "./widgets/reaction-diagram.less";
-@import "./widgets/sequence.less";
-@import "./widgets/sortable.less";
-@import "./widgets/table.less";
-@import "./widgets/unit.less";
-
-.perseus-widget-container {
-    &.widget-nohighlight {
-        transition: all 0.15s;
-    }
-
-    &.widget-highlight {
-        @highlight: 0px 0px 0px 2px rgba(255, 165, 0, 1);
-        box-shadow: @highlight;
-        transition: all 0.15s;
-    }
-
-    &.widget-inline {
-        display: inline;
-    }
-
-    &.widget-inline-block {
-        display: inline-block;
-    }
-}
-
-// Hide new hints styling everywhere except Bibliotron. Note that the Bibliotron
-// styles are used both in webapp and in the mobile native apps.
-.bibliotron-exercise .perseus-hint-renderer {
-    border-left: 4px solid #f6f7f7;
-    padding-left: 16px;
-    position: relative;
-    &:focus {
-        border-left-color: #d6d8da;
-        outline: none;
-    }
-    &:before,
-    &:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-    // NOTE(charlie): In XOM, these margins get overridden with the paragraph
-    // defaults. Instead, we apply similar margins through inline styles in
-    // `hints-renderer.jsx`.
-    div.paragraph {
-        margin-top: 0px;
-        margin-bottom: 16px;
-    }
-    &.last-hint {
-        margin-bottom: 32px;
-    }
-}
-
-@media (max-width: @pure-sm-max) {
-    .bibliotron-exercise .perseus-hint-renderer {
-        &.last-hint {
-            margin-bottom: 0;
-        }
-    }
-}
-
-@default3: #00457c;
-@science3: #9e034e;
-@math3: #007d96;
-@economics3: #a75a05;
-@partner3: #208170;
-@humanities3: #be2612;
-@testPrep3: #543b78;
-@cs3: #0d923f;
-.perseus-hint-label {
-    color: @default3;
-    display: none;
-    font-weight: 600;
-    margin-right: 13px;
-    position: absolute;
-    right: 100%;
-    white-space: nowrap;
-}
-.perseus-domain-science .perseus-hint-label {
-    color: @science3;
-}
-.perseus-domain-math .perseus-hint-label {
-    color: @math3;
-}
-.perseus-domain-economics .perseus-hint-label {
-    color: @economics3;
-}
-.perseus-domain-partner .perseus-hint-label {
-    color: @partner3;
-}
-.perseus-domain-humanities .perseus-hint-label {
-    color: @humanities3;
-}
-.perseus-domain-test-prep .perseus-hint-label {
-    color: @testPrep3;
-}
-.perseus-domain-cs .perseus-hint-label {
-    color: @cs3;
-}
-.bibliotron-exercise .perseus-hint-renderer.last-rendered .perseus-hint-label {
-    display: block;
-}
-
-@media (max-width: @pure-sm-max) {
-    .bibliotron-exercise
-        .perseus-hint-renderer.last-rendered
-        .perseus-hint-label {
-        display: none;
-    }
-}
-
-// TODO(joel) - remove?
-.perseus-tooltip {
-    background: #fff;
-    padding: 5px 10px;
-    width: 240px;
-}
-
-// CSS is evil; let's overwrite some styles. T_T
-.perseus-formats-tooltip {
-    .perseus-tooltip;
-    color: #777;
-}
-.framework-perseus .perseus-formats-tooltip .paragraph > ul {
-    padding: 0;
-    margin: -20px 0 -16px 0;
-    > li {
-        list-style-type: none;
-    }
-}
-
-.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,0.25)) {
-    box-shadow: @shadow;
-}
-
-.perseus-math-input.mq-editable-field.mq-math-mode {
-    background-color: transparent;
-
-    // If the font-size is too small, super/subscripts become hard to input
-    font-size: 18px;
-
-    // Make the click target easier to hit
-    min-width: 100px;
-
-    border: unset;
-
-    &.mq-focused {
-        box-shadow: unset;
-    }
-
-    & > .mq-root-block {
-        // A bit of extra whitespace here greatly improves legibility
-        padding: 4px;
-    }
-
-    // Fixes for strange default MathQuill styles:
-
-    // Cursor shouldn't actually be touching left border
-    .mq-cursor {
-        padding-left: 0;
-    }
-
-    // Don't gray out implicitly created closing parens
-    .mq-paren.mq-ghost {
-        color: inherit;
-    }
-
-    // Don't put vertical margins on an expression wrapped in parens
-    // because it messes up baseline alignment, e.g. h(x)
-    .mq-paren + span {
-        margin: 0;
-    }
-
-    .mq-binary-operator {
-        // MathQuill uses Symbola to render binary operators.  Unfortunately,
-        // Firefox 47 on Windows doesn't render the +/- signs correctly when
-        // using Symbola so we override it and use KaTeX_Main instead.
-        font-family: KaTeX_Main !important;
-    }
-
-    sup {
-        // This is set to 0 across Perseus normally, but we need to override it
-        // here so nth-roots are rendered correctly.
-        line-height: normal;
-    }
-}
-
-// override normal 5px border radius for the editor only
-.perseus-widget-editor
-    .perseus-math-input.mq-editable-field.mq-math-mode
-    > .mq-root-block {
-    border-radius: 0;
-}
-
-// This style looks a little off in the expression editor. Luckily users don't
-// use the expression editor.
-.math-input-buttons {
-    background-color: rgba(255, 255, 255, 0.7);
-    border-radius: 5px;
-    border: 1px solid #ddd;
-    box-sizing: border-box;
-    margin-top: 5px;
-    padding: 2px;
-    // each button is 35 + 4 px, plus 4 padding, plus 2 border
-    width: 39px * 5 + 4px + 2px; // (201)
-
-    &.absolute {
-        left: -2px;
-        position: absolute;
-        top: -3px;
-        z-index: @zIndexCalculator;
-    }
-}
-
-// Math domain color
-@borderColor: #1c758a;
-
-.tex-button {
-    display: block;
-    float: left;
-    width: 35px;
-    height: 35px;
-    margin: 2px;
-    border: 1px solid @borderColor;
-    background-color: white;
-    border-radius: 5px;
-
-    &:hover {
-        cursor: pointer;
-        background-color: #f0f0f0;
-    }
-
-    &:focus {
-        border: 2px solid @borderColor;
-        outline: none;
-    }
-}
-
-.tex-button-row {
-    margin: 5px 0;
-
-    &:first-child {
-        margin-top: 0;
-    }
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.renderer-widget-error {
-    background-color: #fcc;
-}
-
-@satTopSpacingForTwoColumnLayout: 48px;
-@satTwoColumnLayoutSideMargin: 32px;
-
-.perseus-error {
-    background: @red;
-    border: 2px solid red;
-    border-radius: 5px;
-    padding: 20px;
-    margin: 15px 0 10px;
-}
-
-@media (max-width: @pure-sm-max) {
-    .perseus-renderer-responsive {
-        margin: 0 @phoneMargin;
-
-        // Horizontal margins should only be applied to top-level Renderers.
-        .perseus-renderer-responsive {
-            margin: 0;
-        }
-    }
-}
-
-.perseus-mobile {
-    @media (max-width: 767px) {
-        .perseus-block-math {
-            font-size: 18px;
-        }
-    }
-}
-
-@import "../../../math-input/less/main.less";