@khanacademy/perseus 19.1.4 → 19.1.6

package/src/styles/variables.shared.less

@@ -1,340 +0,0 @@
-@import "./variables.boostrap.less";
-
-// Variables.less
-// Variables to customize the look and feel of Bootstrap
-// -----------------------------------------------------
-
-// GLOBAL VALUES
-// --------------------------------------------------
-
-@kaGreen: #71b307;
-@kaGreenLight: #bed47a;
-@kaGreenHover: #518005;
-@kaBlue: #314453;
-@kaBlueLight: #4d6779;
-
-// Links
-@linkColor: #005987;
-@linkColorHover: #678d00;
-
-// Grays
-@grayExtraDark: #111;
-@grayDarker: #333;
-@grayDark: #555;
-@gray: #999;
-@grayLight: #aaa;
-@grayLighter: #ddd;
-@grayExtraLight: #eee;
-@graySuperLight: #f7f7f7;
-@whiteDark: #fdfdfd;
-@white: #fff;
-
-// Accent colors
-@dark: #21242c;
-@blueDark: #2c3747;
-@blueDarkUnsaturated: #3b414e;
-@blueDarkSaturated: #1f3043;
-@blue: #005a88;
-@blueLight: #a9c0d1;
-@green: #76a005;
-@greenLight: #c6d1ad;
-@greenDark: #356700;
-@yellowGreen: #9db63b;
-@okGreen: #a7cf5b;
-@orange: #bf4f04;
-@red: #cf5044;
-@alertRed: #c42420;
-
-// Other colors
-@coral: #ee6666;
-@grayBlue: #9ab3b9;
-
-@lightPageBackground: @whiteDark;
-
-// "You Can Learn Anything" Campaign Colors
-@yclaBlue: #49bad5;
-@yclaTeal: #56d0b3;
-@yclaTealDark: #50c1a7;
-@yclaGreenDark: #3d9a82;
-@yclaGreen: #81c262;
-
-// LearnStorm Colors
-@learnstormBlue: #4898fc;
-
-// Homepage Specific Colors
-@homepageBlue: #46a8bf;
-@homepageGreen: #2b8e7b;
-
-@streakColor: #f79734;
-
-// Provider Colors
-@facebookColor: #1a60a2;
-@blueGoogleColor: #2cafe2;
-@redGoogleColor: #bf4434;
-@homepageColor: #2d585e;
-
-// Wonder Blocks colors
-// These are copied from the Wonder Blocks package and should be kept in sync if possible.
-// https://github.com/Khan/wonder-blocks/blob/master/packages/wonder-blocks-color/index.js
-@offBlack: rgba(33, 36, 44, 1);
-@offBlack64: rgba(33, 36, 44, 0.64);
-@offBlack50: rgba(33, 36, 44, 0.5);
-@offBlack32: rgba(33, 36, 44, 0.32);
-@offBlack16: rgba(33, 36, 44, 0.16);
-@offBlack8: rgba(33, 36, 44, 0.8);
-@wonderBlocksBlue: #1865f2;
-
-// Typography
-@baseFontSize: 14px;
-// The body of the page is setup to use 'Helvetica' by default and
-// 'Lato' if/once it downloads.
-// For your elements to follow this pattern, all you need is to make the text
-// in your element inherit from the body using the "inherit" value.
-@baseFontFamily: inherit;
-@wonderBlocksFontFamily: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif;
-@monospaceFontFamily: "Inconsolata", monospace;
-@baseLineHeight: 20px;
-@textColor: #444;
-@lightTextColor: #898989;
-@fontSizeTiny: 11px;
-@fontSizeSmall: 12px;
-@fontSizeNormal: 14px;
-@fontSizeMedium: 16px;
-@fontSizeLarge: 18px;
-@fontSizeExtraLarge: 24px;
-@fontSizeHuge: 36px;
-// Let's get ridiculous: https://www.google.com/search?q=Bakana
-@fontSizeBakana: 48px;
-@fontSizeBananas: 60px;
-
-@fixedWidthFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
-@contentPadding: 20px;
-
-// Buttons
-@primaryButtonBackground: #89b908;
-@primaryButtonBorder: #76a005;
-@buttonTextColor: lighten(@grayDark, 15%);
-@buttonBorderRadius: 3px;
-
-// CONTAINERS
-// --------------------------------------------------
-@basicBorderColor: #ccc;
-@minContainerWidth: 1000px;
-@maxContainerWidth: 1200px;
-
-// COMPONENT VARIABLES
-// --------------------------------------------------
-
-// Form states and alerts
-// -------------------------
-@formHintColor: #999;
-@infoText: #4a7c17;
-@infoBackground: #edf2df;
-@infoBorder: darken(spin(@infoBackground, -10), 7%);
-
-// Discussion guidelines
-// ---------------------
-@guidelineExampleText: #606060;
-
-// User hovercards
-@hoverCardWidth: 450px;
-
-// DROPDOWN MENUS
-// --------------------------------------------------
-
-// Highlights
-@menuHighlightColor: #96ab4f;
-@menuHighlightBorderColor: @primaryButtonBorder;
-
-// Text
-@menuActiveTextColor: @white;
-@menuInactiveTextColor: @textColor;
-@menuSubheaderTextColor: desaturate(lighten(@textColor, 20%), 50%);
-
-// Border
-@menuBorderColor: #94a170;
-
-// Notifications dropdown menu
-@unreadBackgroundColor: #eceef4;
-
-// Metrics
-@menuLineHeight: 18px;
-@menuSubheaderLineHeight: 17px;
-@menuSubheaderFontSize: 9px;
-
-// Notification bar
-@notificationBarColor: #4858a4; // Same as purple domain
-
-// MODAL DIALOGS
-// --------------------------------------------------
-@modalBodyTopPadding: 20px;
-@modalDialogPadding: 15px;
-@modalSectionPadding: 9px;
-
-// ZINDEX (Adds on to whats already in bootstrap)
-// --------------------------------------------------
-@zindexHeader: 1060;
-@zindexAboveModal: 1090;
-@zindexAboveFooter: 20;
-
-// DOMAIN COLORS
-// If you update these colors,
-// please update thumbnails_util.py's get_domain_color method.
-// --------------------------------------------------
-
-// Bibliotron colors
-// Must be synced with javascript/shared-styles-package/global-styles.js
-// Must also be synced with emails/styles.py
-@mathDomain1: #11accd;
-@mathDomain2: #63d9ea;
-@mathDomain3: #027d97;
-@mathDomain4: #085566;
-
-@partnerContentDomain1: #01a995;
-@partnerContentDomain2: #01d1c1;
-@partnerContentDomain3: #208170;
-@partnerContentDomain4: #144f44;
-
-@csDomain1: #1fab54;
-@csDomain2: #74cf70;
-@csDomain3: #0d923f;
-@csDomain4: #085e29;
-
-@economicsDomain1: #e07d10;
-@economicsDomain2: #ffbe26;
-@economicsDomain3: #a75a05;
-@economicsDomain4: #953c02;
-
-@collegeCareersMoreDomain1: #01a995;
-@collegeCareersMoreDomain2: #01d1c1;
-@collegeCareersMoreDomain3: #208170;
-@collegeCareersMoreDomain4: #144f44;
-
-@humanitiesDomain1: #e84d39;
-@humanitiesDomain2: #ff8482;
-@humanitiesDomain3: #be2612;
-@humanitiesDomain4: #8c1c0d;
-
-// TODO(kimerie): Once we have guidance from design, these stylings should be
-// changed.
-@gtpDomain1: #1865f2; // header
-@gtpDomain2: #1865f2; // accents/buttons
-@gtpDomain3: #1865f2; // accents/buttons
-@gtpDomain4: #1865f2; // links
-
-@scienceDomain1: #ca337c;
-@scienceDomain2: #ff92c6;
-@scienceDomain3: #9e034e;
-@scienceDomain4: #6b0235;
-
-@testPrepDomain1: #1865f2;
-@testPrepDomain2: #1865f2;
-@testPrepDomain3: #1865f2;
-@testPrepDomain4: #1865f2;
-
-@defaultDomain1: #1865f2;
-@defaultDomain2: #66afe9;
-@defaultDomain3: #1152b0;
-@defaultDomain4: #0d3d82;
-
-/* Fall back colors? Eg educator, talks & interviews */
-@defaultDomainColor: #314453;
-@defaultSubjectColor: #4d6779;
-@defaultTopicColor: #6a8da6;
-@defaultHoverColor: @defaultDomainColor;
-@defaultLinkColor: @defaultDomainColor;
-@defaultLinkHoverColor: @defaultTopicColor;
-
-// The domain prefix is usually the domain's slug/id. See .applyToDomains in
-// mixins.less for details.
-@scienceDomainColor: #94424f;
-@scienceSubjectColor: #9d4a5a;
-@scienceTopicColor: #c55f73;
-@scienceHoverColor: @scienceDomainColor;
-@scienceLinkColor: @scienceDomainColor;
-@scienceLinkHoverColor: @scienceTopicColor;
-
-@humanitiesDomainColor: #ad3434;
-@humanitiesSubjectColor: #c13b31;
-@humanitiesTopicColor: #d24a45;
-@humanitiesHoverColor: @humanitiesDomainColor;
-@humanitiesLinkColor: @humanitiesDomainColor;
-@humanitiesLinkHoverColor: @humanitiesTopicColor;
-
-@economicsDomainColor: #b77033;
-@economicsSubjectColor: #bf7b34;
-@economicsTopicColor: #d1933b;
-@economicsHoverColor: @economicsDomainColor;
-@economicsLinkColor: @economicsDomainColor;
-@economicsLinkHoverColor: @economicsTopicColor;
-
-@csDomainColor: #437a39;
-@csSubjectColor: #53893e;
-@csTopicColor: #689b51;
-@csHoverColor: @csDomainColor;
-@csLinkColor: @csDomainColor;
-@csLinkHoverColor: @csTopicColor;
-
-@partnerContentDomainColor: #218270;
-@partnerContentSubjectColor: #2c8d7b;
-@partnerContentTopicColor: #329a86;
-@partnerContentHoverColor: @partnerContentDomainColor;
-@partnerContentLinkColor: @partnerContentDomainColor;
-@partnerContentLinkHoverColor: @partnerContentTopicColor;
-
-@essayDomainColor: #0071b3;
-
-@mathDomainColor: #1c758a;
-@mathSubjectColor: #46a8bf;
-@mathTopicColor: #4fbad4;
-@mathHoverColor: @mathDomainColor;
-@mathLinkColor: @mathDomainColor;
-@mathLinkHoverColor: @mathTopicColor;
-
-@testPrepDomainColor: #644172;
-@testPrepSubjectColor: #7e5f8e;
-@testPrepTopicColor: #9a72ac;
-@testPrepHoverColor: @testPrepDomainColor;
-@testPrepLinkColor: @testPrepDomainColor;
-@testPrepLinkHoverColor: @testPrepTopicColor;
-
-@collegeCareersMoreDomainColor: #218270;
-@collegeCareersMoreSubjectColor: #2c8d7b;
-@collegeCareersMoreTopicColor: #329a86;
-@collegeCareersMoreHoverColor: @collegeCareersMoreDomainColor;
-@collegeCareersMoreLinkColor: @collegeCareersMoreDomainColor;
-@collegeCareersMoreLinkHoverColor: @collegeCareersMoreTopicColor;
-
-// Exercise Colors
-// If you update these colours, please update thumbnail_handler.py's
-// get_domain_color method.
-// TODO(dmnd): Make a build step for emails that inlines CSS
-@colorProficient: @mathDomainColor;
-@colorPracticed: lighten(@colorProficient, 44%);
-@colorMastery1: lighten(@colorProficient, 28%);
-@colorMastery2: lighten(@colorProficient, 15%);
-@colorMastery3: @colorProficient;
-@colorSuggested: #73982c;
-@colorReview: #e35d04;
-@colorNotStarted: #ccc;
-@colorStarted: #c7e5f7;
-@colorStruggling: #c30202;
-@colorPersonal: #00809c;
-@colorPractice: #96d9ff;
-
-@colorEnergyPoints: #005987;
-
-// Media query breakpoints
-// --------------------------------------------------
-
-// Kept in sync from Pure's default breakpoints: http://purecss.io/grids/
-// With the exception of @pure-xl-min which is now 1200px instead of 1280px
-@pure-sm-min: 568px;
-@pure-md-min: 768px;
-@pure-lg-min: 1024px;
-@pure-xl-min: 1200px;
-
-@pure-xs-max: (@pure-sm-min - 1);
-@pure-sm-max: (@pure-md-min - 1);
-@pure-md-max: (@pure-lg-min - 1);
-@pure-lg-max: (@pure-xl-min - 1);

package/src/styles/widgets/categorizer.less

@@ -1,38 +0,0 @@
-.categorizer-container {
-    margin-top: 20px;
-
-    div.paragraph {
-        margin: 10px 0px;
-    }
-
-    .category {
-        text-align: center;
-    }
-
-    table {
-        min-width: 0;
-    }
-
-    label {
-        .above-scratchpad;
-    }
-}
-
-// TODO(benkomalo): ughhh. kill or move this out of here :(
-// Styles specifically for the mobile native apps
-body.mobile {
-    .categorizer-container {
-        td.category {
-            input[type="radio"] {
-                &:checked + span:before {
-                    color: @blue;
-                }
-
-                & + span:active:before {
-                    color: #666;
-                    content: "\f111"; // fa-circle
-                }
-            }
-        }
-    }
-}

package/src/styles/widgets/dropdown.less

@@ -1,3 +0,0 @@
-.perseus-widget-dropdown {
-    position: relative;
-}

package/src/styles/widgets/expression.less

@@ -1,65 +0,0 @@
-.perseus-widget-expression {
-    & > span,
-    .error-tooltip {
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    position: relative;
-
-    .error-tooltip {
-        position: absolute;
-        right: 6px;
-        top: -2px;
-    }
-
-    .error-icon {
-        color: #fcc335;
-        cursor: pointer;
-        font-size: 20px;
-        .perseus-interactive;
-    }
-
-    .error-text {
-        background-color: #fff;
-        padding: 5px;
-        width: 210px;
-    }
-
-    .perseus-formats-tooltip {
-        width: 190px;
-    }
-}
-
-#answer_area .perseus-widget-expression {
-    // Super hacky overrides to make the error tooltip fit into the answer area
-    // by putting it on top of the MathQuill input.
-
-    // TODO(alex): Implement arrows coming from the middle of the tooltip side,
-    // then use some of those here; e.g. align to left middle
-
-    .perseus-math-input.mq-editable-field.mq-math-mode {
-        // Make the input wider so that error message never scrolls left
-        min-width: 130px;
-    }
-
-    .error-tooltip {
-        .error-text-container {
-            // Move the tooltip to the left of the error icon
-            left: -125px !important;
-            top: -17px !important;
-        }
-
-        .error-text {
-            // Make the error message much smaller
-            font-size: 12px;
-            width: 90px;
-        }
-
-        .tooltipContainer > div:first-child {
-            // Hide the little triangle "arrow" created by the tooltip
-            // (If it weren't in a corner, we wouldn't have to hide it)
-            visibility: hidden !important;
-        }
-    }
-}

package/src/styles/widgets/graded-group.less

@@ -1,36 +0,0 @@
-.framework-perseus {
-    .perseus-graded-group {
-        position: relative;
-
-        // We don't want group text to be centered, so we
-        // set the group width to 100% so that a centered
-        // group is the same as an uncentered group, and
-        // its text still ends up all on the left.
-        width: 100%;
-
-        margin-left: 3px;
-        padding-left: 5px;
-
-        // The border colors are darkened by 10% for the checkmark / x icons
-        // in graded-group.jsx
-        &.answer-correct {
-            border-left: 3px solid @green;
-            margin-left: 0;
-        }
-
-        &.answer-incorrect {
-            border-left: 3px solid darken(@red, 10%);
-            margin-left: 0;
-        }
-
-        .group-icon {
-            font-size: 14px;
-            position: absolute;
-            top: 50%;
-            top: ~"calc(50% - 7px)";
-            left: -30px;
-            text-align: center;
-            width: 16px;
-        }
-    }
-}

package/src/styles/widgets/grapher.less

@@ -1,12 +0,0 @@
-.perseus-widget-grapher {
-    .perseus-graph-padding;
-
-    > .graphie-container {
-        position: relative;
-
-        > img,
-        .svg-image {
-            position: absolute;
-        }
-    }
-}

package/src/styles/widgets/group.less

@@ -1,19 +0,0 @@
-.framework-perseus {
-    .perseus-group {
-        position: relative;
-
-        // We don't want group text to be centered, so we
-        // set the group width to 100% so that a centered
-        // group is the same as an uncentered group, and
-        // its text still ends up all on the left.
-        width: 100%;
-
-        .group-icon {
-            font-size: 14px;
-            position: absolute;
-            top: 50%;
-            top: ~"calc(50% - 7px)";
-            margin-left: -20px;
-        }
-    }
-}

package/src/styles/widgets/image.less

@@ -1,54 +0,0 @@
-.perseus-image-widget {
-    .perseus-image-title {
-        text-align: center;
-    }
-
-    .perseus-image-caption {
-        color: rgba(33, 36, 44, 0.7);
-        padding-left: 16px;
-        position: relative;
-
-        &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            margin-left: 4px;
-            width: 1px;
-            background-color: rgba(33, 36, 44, 0.5);
-
-            border: 1px solid rgba(33, 36, 44, 0.5);
-            border-radius: 2px;
-        }
-        .paragraph {
-            font-size: 14px;
-            padding-right: 12px;
-        }
-    }
-}
-
-.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

@@ -1,64 +0,0 @@
-.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,
-        mjx-container {
-            color: @kaGreen !important;
-        }
-
-        left: 50%;
-        transform: translateX(-50%);
-        padding: 5px;
-        position: absolute;
-        white-space: nowrap;
-
-        min-width: 30px;
-        text-align: center;
-    }
-
-    .graphie-label .katex,
-    .graphie-label mjx-container {
-        color: inherit !important;
-    }
-}

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

@@ -1,57 +0,0 @@
-.framework-perseus {
-    .perseus-label-image-widget-instructions {
-        // Reset desktop & mobile text content.
-        div.paragraph {
-            margin: 0;
-        }
-    }
-}
-
-// Reset mobile text content for answer pills.
-@media (max-width: 767px) {
-    [id*="perseus-label-image-widget-answer-pill"] {
-        > div.perseus-renderer-responsive {
-            all: revert;
-        }
-    }
-    .framework-perseus.perseus-mobile
-        [id*="perseus-label-image-widget-answer-pill"] {
-        mjx-container {
-            all: revert;
-        }
-    }
-}
-
-.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,
-            mjx-container {
-                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

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