@khanacademy/perseus 19.1.4 → 19.1.6

package/src/styles/widgets/matrix.less

@@ -1,126 +0,0 @@
-.perseus-matrix {
-    @bracketColor: #666;
-    @margin: 5px;
-    @padding: 3px;
-
-    .matrix-prefix,
-    .matrix-suffix {
-        display: inline-block;
-        margin: 2 * @margin @margin 0 2 * @margin;
-        vertical-align: top;
-    }
-    .matrix-suffix {
-        margin: 2 * @margin 2 * @margin 0 @margin;
-    }
-
-    div.paragraph {
-        margin: 0;
-    }
-
-    .matrix-input {
-        background: #e2e2e2;
-        display: inline-block;
-        margin: @margin;
-        padding: @padding;
-        position: relative;
-        width: auto;
-    }
-
-    .matrix-row {
-        white-space: nowrap;
-    }
-
-    .matrix-bracket {
-        @borderWidth: 2px;
-        border-color: @bracketColor;
-        border-style: solid;
-        border-bottom-width: @borderWidth;
-        border-top-width: @borderWidth;
-        margin-top: -@borderWidth;
-        position: absolute;
-        width: 6px;
-
-        &.bracket-left {
-            border-color: @bracketColor;
-            border-left-width: @borderWidth;
-            border-right-width: 0;
-            left: 3px;
-        }
-
-        &.bracket-right {
-            border-color: @bracketColor;
-            border-left-width: 0;
-            border-right-width: @borderWidth;
-            margin-left: (1px - 2 * @borderWidth);
-        }
-    }
-    input,
-    .number-input {
-        border: none;
-        border-radius: 0;
-        box-sizing: border-box;
-        margin: @padding;
-        padding: 0;
-        text-align: center;
-        &.outside {
-            background: #f3f3f3;
-        }
-        &:focus {
-            border: none;
-            outline: none;
-        }
-
-        // TODO(sam): Use inline styles for static mode styles
-        .static-mode& {
-            background: #f5f5f5;
-        }
-    }
-    &.the-matrix {
-        .matrix-bracket,
-        .matrix-left,
-        .matrix-right {
-            border-color: #29f139;
-        }
-        .matrix-input {
-            background: #222;
-        }
-        input,
-        .number-input {
-            background: #666;
-            color: #29f139;
-            font-weight: bold;
-            &.outside {
-                background: #444;
-            }
-        }
-    }
-}
-
-body.mobile {
-    .perseus-matrix {
-        .matrix-input {
-            display: table;
-        }
-
-        .matrix-row {
-            display: table-row;
-        }
-
-        .matrix-input-field {
-            display: table-cell;
-        }
-
-        .math-output {
-            margin: 4px 4px 2px 4px;
-            max-height: 36px;
-            max-width: 80px;
-            overflow: hidden;
-        }
-    }
-}
-
-.perseus-matrix-editor {
-    .perseus-single-editor {
-        width: 338px;
-    }
-}

package/src/styles/widgets/measurer.less

@@ -1,20 +0,0 @@
-.perseus-widget-measurer {
-    position: relative;
-    img {
-        position: absolute;
-    }
-}
-
-.perseus-widget-measurer-url {
-    width: 70%;
-}
-
-// This is required in order to enable translating labels in the background
-// Graphie image for the widget. Without this, click events do not register on
-// the labels, due to the stacking order set inline by the Raphael drawing
-// library (used to draw the measurer ruler, protractor).
-#translations-dashboard .perseus-widget-measurer {
-    > .graphie {
-        z-index: -1;
-    }
-}

package/src/styles/widgets/orderer.less

@@ -1,98 +0,0 @@
-.orderer {
-    position: relative;
-
-    &.layout-horizontal .draggable-box {
-        margin-left: 0;
-        margin-top: 30px;
-        padding: 13px;
-    }
-
-    .card {
-        padding: 0 10px;
-        cursor: pointer;
-        position: relative;
-        -webkit-user-select: none;
-        user-select: none;
-        width: auto;
-
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-
-    &.height-normal.layout-horizontal .card {
-        height: 65px;
-    }
-
-    &.height-normal.layout-vertical .card {
-        padding: 5px;
-    }
-
-    &.height-auto .card {
-        padding: 0;
-    }
-
-    &.height-auto.layout-horizontal .drag-hint {
-        min-height: 65px;
-        min-width: 22px;
-    }
-
-    &.layout-horizontal .bank {
-        padding: 0;
-        margin: 0px 13px;
-    }
-
-    div.paragraph {
-        margin: 0;
-    }
-
-    .card-wrap {
-        .perseus-interactive;
-        width: auto;
-    }
-
-    &.layout-horizontal .card-wrap {
-        float: left;
-
-        &:not(:first-child) {
-            margin-left: 8px;
-        }
-    }
-
-    &.layout-vertical .card-wrap {
-        float: none;
-        text-align: center;
-
-        &:not(:first-child) {
-            margin-top: 8px;
-        }
-    }
-
-    &.layout-vertical .bank,
-    &.layout-vertical .draggable-box {
-        box-sizing: border-box;
-        float: left;
-        max-width: 50%;
-    }
-
-    &.layout-vertical .bank {
-        padding: 11px 20px 11px 0;
-        margin: 0;
-    }
-
-    &.layout-vertical .draggable-box {
-        margin-top: 0;
-        padding: 10px;
-        min-height: 170px;
-
-        .drag-hint {
-            box-sizing: border-box;
-            min-width: 140px;
-            min-height: 34px;
-        }
-
-        .placeholder {
-            box-sizing: border-box;
-        }
-    }
-}

package/src/styles/widgets/passage.less

@@ -1,154 +0,0 @@
-// first one is to beat out specificity of article styles
-.framework-perseus.perseus-article
-    .perseus-renderer
-    .perseus-widget-passage-container,
-.perseus-widget-passage-container {
-    // NOTE(mdr): This is similar to Wonder Blocks "BodySerif" typesetting, but
-    //     not quite: it's a bit smaller, for consistency with the sorta-small
-    //     type styles in rest of the Perseus.
-    // TODO(mdr): Once the rest of Perseus starts using Wonder Blocks
-    //     typography, abandon this LESS entirely, and refactor to use the
-    //     BodySerif component instead. (TP-3112)
-    @font-size: 16px;
-    @line-height: 20px;
-
-    .perseus-widget-passage {
-        line-height: @line-height;
-        margin: 22px;
-        position: relative;
-
-        div.paragraph {
-            font-family: KaTeX_Main, Times, "Times New Roman", serif;
-        }
-
-        .passage-title div.paragraph {
-            font-family: "Noto Serif", serif;
-            font-weight: 700;
-            font-size: 20px;
-            line-height: 22px;
-
-            margin: 0 0 10px;
-        }
-
-        // note(matthewc): If you need to change any of this,
-        // check that line numbers line up correctly.
-        // The margin should probably be 0 or the line height
-        > .passage-text div.paragraph {
-            font-weight: 400;
-            font-size: @font-size;
-            line-height: @line-height;
-            text-indent: 20px;
-            margin: 0;
-
-            span {
-                text-indent: 0;
-            }
-
-            em {
-                // prevents italicized text from disrupting the line height
-                line-height: 0;
-            }
-        }
-    }
-    .katex,
-    mjx-container {
-        line-height: @line-height - 2;
-    }
-
-    .footnotes {
-        margin-top: 22px;
-        div.paragraph {
-            font-size: 14px;
-            margin: 0;
-        }
-    }
-    .perseus-highlight {
-        background-color: #fffabe;
-    }
-    .perseus-review-highlight {
-        background-color: #eee7b2;
-    }
-    .perseus-passage-square-label,
-    .perseus-passage-circle-label,
-    .perseus-passage-bracket-label {
-        // We want these to display the same inside the passage and
-        // inside the instruction text
-        font-family: Times, "Times New Roman", serif;
-        font-size: @font-size;
-    }
-
-    .line-numbers {
-        font-size: 12px;
-        font-style: italic;
-        font-weight: 600;
-        position: absolute;
-        text-align: right;
-
-        // When we suspect the passage widget has resized (e.g. on window
-        // resize), we re-render the line numbers. We throttle this behavior,
-        // in case there's e.g. frequent window resizes, which is important for
-        // performance, but sometimes causes us to be a bit slow to add new
-        // line numbers or delete extra line numbers. This usually isn't
-        // noticeable, unless the extra line numbers leak beyond the passage
-        // widget and into other content, in which case it's incredibly
-        // noticeable and bad.
-        //
-        // So, we set the `.line-numbers` element's height to not exceed the
-        // passage widget's height, and give it `overflow: hidden`. This way,
-        // when temporarily have too many line numbers, they'll stay hidden
-        // inside the passage widget and avoid conflicting with other content.
-        //
-        // However, it's invalid to set `overflow-y: hidden` and
-        // `overflow-x: visible` (bleh), so hiding our y-overflow risks also
-        // risks hiding part of our right-aligned italicized text, because
-        // italicized text often renders a bit beyond its layout box.
-        //
-        // We therefore provide `font-size` worth of extra padding along the
-        // right edge (6px), and adjust all other sizing and positioning
-        // values accordingly.
-        max-height: 100%;
-        overflow: hidden;
-        padding-right: 6px;
-        left: -40px - 12px;
-        width: 25px + 12px;
-
-        // Make sure each line-number takes up a full line
-        span {
-            display: block;
-            line-height: @line-height;
-
-            // Align with .text-content baseline.
-            position: relative;
-            top: 2px;
-
-            visibility: hidden;
-        }
-
-        // Show every 5th line number, as well as the "Line" text
-        span:nth-of-type(5n),
-        .line-marker {
-            visibility: visible;
-        }
-    }
-}
-
-.perseus-widget-passage-editor {
-    .perseus-single-editor {
-        font-family: Times, "Times New Roman", serif;
-
-        // Give writers a bit more space by moving the textarea over to be
-        // flush with the left edge of the editor box.
-        margin-left: -11px;
-    }
-
-    .perseus-textarea-pair textarea {
-        font-size: 13px;
-        line-height: 17px;
-    }
-}
-
-body.sat-section {
-    .perseus-widget-passage {
-        margin-top: 0;
-    }
-}

package/src/styles/widgets/plotter.less

@@ -1,31 +0,0 @@
-.perseus-widget-plotter {
-    svg,
-    vml {
-        position: absolute;
-    }
-    span.rotate {
-        transform: rotate(-90deg);
-    }
-}
-
-.set-from-scale-box {
-    border: 2px solid #eeeeee;
-    border-radius: 3px;
-    padding: 3px;
-}
-
-.categories-title {
-    font-size: 14px;
-}
-
-.perseus-mobile {
-    .perseus-widget-plotter {
-        border: solid 0.5px @gray76;
-        border-radius: 4px;
-
-        .graphie-label .katex,
-        .graphie-label mjx-container {
-            color: @gray41;
-        }
-    }
-}

package/src/styles/widgets/radio.less

@@ -1,58 +0,0 @@
-@import "../util.less";
-
-.perseus-widget-radio {
-    &.perseus-rendered-radio {
-        div,
-        div > p {
-            /* TODO(alpert): Find a better way of doing inline renderers */
-            display: inline;
-        }
-
-        // Multiple-choice rationales might contain several subsequent
-        // paragraphs, which need to have breaks in-between. Thus, we need
-        // to override the above `display: inline` rule.
-        // We use "display: table" instead of "display: block" to make the
-        // width of the element the width of the content. This makes
-        // lint dots better positioned.
-        .perseus-radio-rationale-content > .perseus-renderer > .paragraph {
-            display: table;
-            margin: 0;
-
-            &:not(:last-child) {
-                margin-bottom: 8px;
-            }
-        }
-    }
-
-    .unresponsive-svg-image div,
-    .svg-image div {
-        // The divs in an svg image shouldn't be inline
-        display: block;
-    }
-
-    li {
-        div.instructions {
-            margin-bottom: 5px;
-        }
-
-        .value {
-            display: block;
-            margin-left: 18px;
-            min-height: 22px;
-        }
-
-        img,
-        table {
-            display: inline-block;
-            vertical-align: middle;
-        }
-
-        table {
-            border: 1px solid #ccc;
-        }
-    }
-}
-
-.perseus-widget-radio-fieldset .instructions {
-    font-family: "Lato", sans-serif;
-}

package/src/styles/widgets/reaction-diagram.less

@@ -1,35 +0,0 @@
-.reaction {
-    display: table-row;
-}
-
-.reaction-aligned {
-    display: table-cell;
-    vertical-align: middle;
-}
-
-.molecule-container {
-    .reaction-aligned;
-    margin: 20px;
-}
-
-.molecule-canvas {
-    .reaction-aligned;
-}
-
-.arrow-container {
-    .reaction-aligned;
-}
-
-.above-text {
-    font-size: 0.8em;
-    margin-bottom: -1em;
-    min-height: 1.8em;
-    text-align: center;
-}
-
-.below-text {
-    font-size: 0.8em;
-    margin-top: -1.6em;
-    min-height: 1.8em;
-    text-align: center;
-}

package/src/styles/widgets/sequence.less

@@ -1,5 +0,0 @@
-.framework-perseus {
-    .perseus-sequence {
-        width: 100%;
-    }
-}

package/src/styles/widgets/sortable.less

@@ -1,113 +0,0 @@
-.draggy-boxy-thing-hover (@color: #ffa500) {
-    border-color: @color;
-    @darker: darken(@color, 11%);
-    box-shadow: 0 0 4px @darker;
-}
-
-.draggy-boxy-thing {
-    .draggable-box,
-    .cards-area {
-        background: #eee;
-        border: 1px solid #ccc;
-        border-bottom: 1px solid #aaa;
-
-        box-shadow: 0 1px 2px #ccc;
-    }
-
-    // TODO(jack): Make this work for the orderer too.
-    // Right now don't do this for the orderer because it uses
-    // more complicated positioning that this would break
-    .cards-area {
-        .above-scratchpad;
-    }
-
-    .card {
-        .perseus-interactive;
-
-        background-color: #fff;
-        border: 1px solid #b9b9b9;
-        border-bottom-color: #939393;
-        border-radius: 4px;
-        cursor: pointer;
-        touch-action: none;
-
-        &.placeholder {
-            background: #ddd;
-            border: 1px solid #ccc;
-        }
-
-        &.drag-hint {
-            background: none;
-            border: 1px dashed #aaa;
-            cursor: auto;
-
-            &:hover {
-                border-color: #aaa;
-                box-shadow: none;
-            }
-        }
-
-        &.dragging {
-            background-color: #ffedcd;
-            opacity: 0.8;
-            filter: opacity(0.8);
-        }
-
-        &.stack {
-            z-index: auto;
-            &:after {
-                content: " ";
-                background-color: #fff;
-                border: 1px solid #b9b9b9;
-                border-bottom-color: #939393;
-                border-radius: 4px;
-                height: 100%;
-                width: 100%;
-                z-index: -1;
-                top: 1px;
-                left: 1px;
-                position: absolute;
-            }
-        }
-
-        &:hover {
-            .draggy-boxy-thing-hover();
-        }
-    }
-}
-
-// TODO(benkomalo): ideally all of these would be removed as all of the other
-// sortable styles have been moved to inline styles using Aphrodite. However,
-// these are all hacky styles that reach down into descendents in ways that
-// they probably shouldn't, so Aphrodite doesn't support it. This will require
-// a larger refactoring to wire down options to nested `Renderer`s so they can
-// have their styling modified.
-.perseus-sortable {
-    div.paragraph {
-        margin: 0;
-    }
-
-    .perseus-sortable-draggable {
-        &:before {
-            // Vertical-align, part 1
-            content: "";
-            display: inline-block;
-            height: 100%;
-            vertical-align: middle;
-        }
-
-        & > div {
-            // Vertical-align, part 2
-            display: inline-block;
-            font-size: 14px;
-            max-width: 100%;
-            vertical-align: middle;
-        }
-    }
-
-    .perseus-sortable-draggable-unpadded {
-        img {
-            vertical-align: bottom;
-        }
-    }
-}

package/src/styles/widgets/table.less

@@ -1,57 +0,0 @@
-// Extra specifity is needed to counteract generic tables
-.framework-perseus table.perseus-widget-table-of-values.non-markdown {
-    text-align: left;
-    margin: 20px auto;
-    border-collapse: collapse;
-
-    tr {
-        height: 23px;
-    }
-
-    th,
-    td {
-        border: 2px solid black;
-        border-width: 0 2px;
-
-        &:first-child {
-            border-left: 0;
-        }
-
-        &:last-child {
-            border-right: 0;
-        }
-    }
-
-    th {
-        font-weight: normal;
-        padding: 5px;
-        width: 80px;
-        text-align: left;
-        border-bottom: 2px solid black;
-        .paragraph {
-            margin: 0;
-        }
-    }
-
-    td {
-        padding: 0px 5px;
-    }
-
-    tbody tr:first-child td {
-        padding-top: 5px;
-    }
-}
-.framework-perseus table.perseus-widget-table-of-values input,
-#answer_area table.perseus-widget-table-of-values input {
-    // NOTE(charlie): This should be kept in-sync with the "width: 80" in
-    // table.jsx.
-    width: 80px;
-}
-
-body.mobile {
-    .framework-perseus table.perseus-widget-table-of-values.non-markdown {
-        td {
-            padding: 5px;
-        }
-    }
-}