@khanacademy/perseus 0.0.1 → 0.2.1

package/src/styles/widgets/image.less

@@ -0,0 +1,29 @@
+.perseus-image-widget {
+    .perseus-image-title {
+        text-align: center;
+    }
+}
+
+.perseus-image-editor {
+    .label-settings {
+        td {
+            padding: 5px 4px;
+            text-align: center
+        }
+
+        tr:nth-child(odd) {
+            td {
+                background-color: transparent;
+            }
+        }
+
+        th, td {
+            border-width: 0;
+        }
+    }
+
+    .image-settings,
+    .graph-settings {
+        margin-top: 5px;
+    }
+}

package/src/styles/widgets/interactive-graph.less

@@ -0,0 +1,61 @@
+.perseus-widget-interactive-graph {
+    .perseus-graph-padding;
+
+    > .graphie-container {
+        position: relative;
+
+        > img, > .unresponsive-svg-image {
+            position: absolute;
+            // Preserves background image alignment (if image is a graph,
+            // it can extend up and to the right to allow for axis labels)
+            bottom: 0;
+            left: 0;
+        }
+    }
+}
+
+.perseus-mobile {
+    .tooltip.visible {
+        z-index: 2;
+    }
+
+    .tooltip.visible .tooltip-content:before {
+        border: solid;
+        border-color: white transparent;
+        border-width: 10px 10px 0 10px;
+        bottom: -10px;
+        content: "";
+        left: 50%;
+        transform: translateX(-50%);
+        position: absolute;
+        z-index: 2;
+    }
+
+    .tooltip .tooltip-content {
+        display: none;
+    }
+
+    .tooltip.visible .tooltip-content {
+        display: inline-block;
+        background-color: #ffffff;
+        border-radius: 5px;
+        bottom: 50px;
+
+        .katex {
+            color: @kaGreen !important;
+        }
+
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 5px;
+        position: absolute;
+        white-space: nowrap;
+
+        min-width: 30px;
+        text-align: center;
+    }
+
+    .graphie-label .katex {
+        color: inherit !important;
+    }
+}

package/src/styles/widgets/label-image.less

@@ -0,0 +1,41 @@
+.framework-perseus {
+    .perseus-label-image-widget-instructions {
+        // Reset desktop & mobile text content.
+        div.paragraph {
+            margin: 0;
+        }
+    }
+}
+
+.framework-perseus:not(.perseus-article).perseus-mobile {
+    .perseus-label-image-widget-instructions {
+        color: initial;
+
+        // Reset mobile text content.
+        .perseus-renderer .paragraph > .paragraph {
+            color: initial !important;
+            font-size: initial !important;
+            line-height: initial !important;
+        }
+
+        // Reset mobile math content.
+        .perseus-block-math {
+            padding: 0;
+
+            .katex {
+                font-size: initial !important;
+                line-height: initial !important;
+            }
+        }
+    }
+}
+
+.perseus-label-image-widget-answer-choices,
+.perseus-label-image-widget-instructions {
+    // Reset `blockMath` nodes inner style.
+    .perseus-block-math > .perseus-block-math-inner {
+        // Ensure no horizontal scrollbars appear for math rendered in widget.
+        // This may happen for expressions with subscripts (eg. $X_i$).
+        overflow-x: hidden !important;
+    }
+}

package/src/styles/widgets/matcher.less

@@ -0,0 +1,8 @@
+.perseus-widget-matcher {
+    /* Ideally we'd get rid of this, as most of the styles have been moved
+       to inline styles using Aphrodite, but this is a hacky "reach-in" into
+       descendent widgets that we can't modify */
+    div.paragraph {
+        margin: 0;
+    }
+}

package/src/styles/widgets/matrix.less

@@ -0,0 +1,120 @@
+.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;
+            left: 3px;
+        }
+
+        &.bracket-right {
+            border-color: @bracketColor;
+            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

@@ -0,0 +1,20 @@
+.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

@@ -0,0 +1,97 @@
+.orderer {
+    position: relative;
+
+    &.layout-horizontal .draggable-box {
+        margin-left: 0;
+        margin-top: 30px;
+        padding: 13px;
+    }
+
+    .card {
+        padding: 0 10px;
+        cursor: pointer;
+        position: relative;
+        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;
+        -moz-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

@@ -0,0 +1,151 @@
+.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;
+
+        // Use the "Minion Pro" font, if available. If not, fall back to
+        // KaTeX_Main or another serif font.
+        //
+        // NOTE(mdr): Minion Pro is only loaded on SAT and GTP pages, because
+        //     those are the main call sites for the passage widget. We
+        //     considered inserting the relevant stylesheet whenever the
+        //     passage widget loads, but this approach produced a "flash of
+        //     unstyled text", so we decided to embed the stylesheet into the
+        //     relevant page templates instead.
+        //
+        // NOTE(mdr): Minion Pro will not be available on ZNDs, due to
+        //     restrictions in our Adobe TypeKit configuration.
+        //
+        // TODO(mdr): The BodySerif component will hopefully soon use Minion
+        //     Pro by default (WB-399). Once that happens, we should be able to
+        //     switch to the BodySerif component (TP-3112), and remove this
+        //     special font-family rule.
+        div.paragraph {
+            font-family: "minion-pro", KaTeX_Main, Times, "Times New Roman", serif;
+        }
+    }
+    .katex {
+        line-height: @line-height - 2;
+    }
+    .passage-title div.paragraph {
+        font-size: @font-size;
+        font-weight: 700;
+        margin: 0 0 10px;
+    }
+    .passage-text div.paragraph {
+        font-size: @font-size;
+        line-height: @line-height;
+        margin: 0;
+        text-indent: 20px;
+        span {
+            text-indent: 0;
+        }
+    }
+    .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

@@ -0,0 +1,33 @@
+.perseus-widget-plotter {
+    svg, vml {
+        position: absolute;
+    }
+    span.rotate  {
+        -moz-transform: rotate(-90deg);
+        -o-transform: rotate(-90deg);
+        -webkit-transform: rotate(-90deg);
+        transform: rotate(-90deg);
+        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
+    }
+}
+
+.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 {
+            color: @gray41;
+        }
+    }
+}

package/src/styles/widgets/radio.less

@@ -0,0 +1,52 @@
+@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;
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+.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

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