@khanacademy/perseus 22.5.1 → 22.7.0

package/dist/es/index.css

@@ -3203,6 +3203,13 @@ body.sat-section .perseus-widget-passage {
 .perseus-widget-radio li table {
   border: 1px solid #ccc;
 }
+.perseus-widget-radio .perseus-radio-option {
+  /* Radio options with images that are set apart should be on their own line */
+}
+.perseus-widget-radio .perseus-radio-option .paragraph + .paragraph:has(img:only-child),
+.perseus-widget-radio .perseus-radio-option .paragraph:has(img:only-child):has(+ .paragraph) {
+  display: block;
+}
 .perseus-widget-radio-fieldset .instructions {
   font-family: "Lato", sans-serif;
 }
@@ -4286,6 +4293,9 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     /* Grid lines */
     --mafs-line-color: rgba(33, 36, 44, 0.16); /* WB color.offBlack16*/
 
+    /* Axis lines */
+    --mafs-axis-stroke-width: 2px;
+
     --mafs-blue: #1865f2; /* WB color.blue */
     --mafs-red: #d92916; /* WB color.red */
     --mafs-green: #00a60e; /* WB color.green */
@@ -4429,6 +4439,17 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     cursor: grab;
 }
 
+.MafsView .movable-circle .circle {
+    stroke: var(--mafs-blue);
+    stroke-width: 2px;
+    fill: transparent;
+}
+
+.MafsView .movable-circle:hover .circle {
+    fill: var(--mafs-blue);
+    fill-opacity: 0.16;
+}
+
 .MafsView .movable-circle.movable-circle--dragging {
     cursor: grabbing;
     outline: none;
@@ -4466,7 +4487,62 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
         format("woff");
 }
 
-.MafsView .axis-ticks text {
+.MafsView pattern g {
+    stroke: #909296;
+}
+.axis-tick-labels {
     font-size: 14px;
     font-family: "Mafs-MJXTEX";
+    line-height: 1.5em;
+    /* Prevent labels from being selected, and from interfering with click and
+     * drag interactions on the graph. */
+    user-select: none;
+    pointer-events: none;
+    /* Prevent labels from covering up interaction points. */
+    z-index: -1;
+}
+
+.y-axis-tick-labels {
+    width: 1.75em;
+    display: flex;
+    flex-flow: column;
+    transform: translateX(calc(-100% - 0.5em));
+    position: absolute;
+    text-align: right;
+}
+.y-axis-right-of-grid {
+    transform: translateX(calc(50% + 0.5em));
+}
+.x-axis-tick-labels {
+    display: flex;
+    flex-flow: row;
+    flex-direction: row-reverse;
+    position: absolute;
+    transform: translateY(calc(50% - 0.25em));
+}
+.x-axis-top-of-grid {
+    transform: translateY(calc(-100% + 0.25em));
+}
+
+.x-axis-tick-labels span,
+.y-axis-tick-labels span {
+    /* The negative sign is rendered as a pseudo-element to
+        ensure that we are positioning all labels correctly */
+    &::before {
+        content: attr(data-content);
+        position: absolute;
+        /* We're translating the symbol up by 1px to ensure it's legible around gridlines. */
+        transform: translate(-100%, -1px);
+        font-weight: 600; /* This helps get the symbol to render crisply */
+    }
+}
+
+.y-axis-tick-labels span {
+    display: inline-block;
+    height: var(--y-axis-label-height, 20px);
+}
+
+.x-axis-tick-labels span {
+    text-align: center;
+    width: var(--x-axis-label-width, 20px);
 }