@khanacademy/perseus 7.2.0 → 8.0.0

package/src/styles/variables.shared.less

@@ -1,12 +1,9 @@
-
 @import "./variables.boostrap.less";
 
 // Variables.less
 // Variables to customize the look and feel of Bootstrap
 // -----------------------------------------------------
 
-
-
 // GLOBAL VALUES
 // --------------------------------------------------
 
@@ -17,49 +14,49 @@
 @kaBlueLight: #4d6779;
 
 // Links
-@linkColor:             #005987;
-@linkColorHover:        #678d00;
+@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;
+@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;
+@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;
+@coral: #ee6666;
+@grayBlue: #9ab3b9;
 
-@lightPageBackground:   @whiteDark;
+@lightPageBackground: @whiteDark;
 
 // "You Can Learn Anything" Campaign Colors
-@yclaBlue: #49BAD5;
-@yclaTeal: #56D0B3;
-@yclaTealDark: #50C1A7;
-@yclaGreenDark: #3D9A82;
-@yclaGreen: #81C262;
+@yclaBlue: #49bad5;
+@yclaTeal: #56d0b3;
+@yclaTealDark: #50c1a7;
+@yclaGreenDark: #3d9a82;
+@yclaGreen: #81c262;
 
 // LearnStorm Colors
 @learnstormBlue: #4898fc;
@@ -71,117 +68,114 @@
 @streakColor: #f79734;
 
 // Provider Colors
-@facebookColor:			#1A60A2;
-@blueGoogleColor:		#2cafe2;
-@redGoogleColor:		#bf4434;
-@homepageColor:			#2d585e;
+@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.50);
-@offBlack32:             rgba(33, 36, 44, 0.32);
-@offBlack16:             rgba(33, 36, 44, 0.16);
-@offBlack8:              rgba(33, 36, 44, 0.8);
-@wonderBlocksBlue:       #1865f2;
+@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;
+@baseFontSize: 14px;
 // The body of the page is setup to use 'Helvetica' by default and 'Proxima
 // Nova' (or 'Lato' if you're testing our new typography) 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;
+@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;
+@fontSizeBakana: 48px;
+@fontSizeBananas: 60px;
 
+@fixedWidthFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@contentPadding: 20px;
 
 // Buttons
-@primaryButtonBackground:    #89b908;
-@primaryButtonBorder:        #76a005;
-@buttonTextColor:            lighten(@grayDark, 15%);
-@buttonBorderRadius:	     3px;
-
+@primaryButtonBackground: #89b908;
+@primaryButtonBorder: #76a005;
+@buttonTextColor: lighten(@grayDark, 15%);
+@buttonBorderRadius: 3px;
 
 // CONTAINERS
 // --------------------------------------------------
-@basicBorderColor:        #ccc;
-@minContainerWidth:       1000px;
-@maxContainerWidth:       1200px;
+@basicBorderColor: #ccc;
+@minContainerWidth: 1000px;
+@maxContainerWidth: 1200px;
 
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
 // Form states and alerts
 // -------------------------
-@formHintColor:           #999;
-@infoText:                #4a7c17;
-@infoBackground:          #edf2df;
-@infoBorder:              darken(spin(@infoBackground, -10), 7%);
+@formHintColor: #999;
+@infoText: #4a7c17;
+@infoBackground: #edf2df;
+@infoBorder: darken(spin(@infoBackground, -10), 7%);
 
 // Discussion guidelines
 // ---------------------
-@guidelineExampleText:    #606060;
+@guidelineExampleText: #606060;
 
 // User hovercards
-@hoverCardWidth:          450px;
+@hoverCardWidth: 450px;
 
 // DROPDOWN MENUS
 // --------------------------------------------------
 
 // Highlights
-@menuHighlightColor:          #96ab4f;
-@menuHighlightBorderColor:    @primaryButtonBorder;
+@menuHighlightColor: #96ab4f;
+@menuHighlightBorderColor: @primaryButtonBorder;
 
 // Text
-@menuActiveTextColor:       @white;
-@menuInactiveTextColor:     @textColor;
-@menuSubheaderTextColor:    desaturate(lighten(@textColor, 20%), 50%);
+@menuActiveTextColor: @white;
+@menuInactiveTextColor: @textColor;
+@menuSubheaderTextColor: desaturate(lighten(@textColor, 20%), 50%);
 
 // Border
-@menuBorderColor:        #94a170;
+@menuBorderColor: #94a170;
 
 // Notifications dropdown menu
-@unreadBackgroundColor:     #ECEEF4;
+@unreadBackgroundColor: #eceef4;
 
 // Metrics
-@menuLineHeight:            18px;
-@menuSubheaderLineHeight:   17px;
-@menuSubheaderFontSize:      9px;
+@menuLineHeight: 18px;
+@menuSubheaderLineHeight: 17px;
+@menuSubheaderFontSize: 9px;
 
 // Notification bar
-@notificationBarColor:	#4858a4; // Same as purple domain
+@notificationBarColor: #4858a4; // Same as purple domain
 
 // MODAL DIALOGS
 // --------------------------------------------------
-@modalBodyTopPadding:    20px;
-@modalDialogPadding:     15px;
-@modalSectionPadding:     9px;
-
+@modalBodyTopPadding: 20px;
+@modalDialogPadding: 15px;
+@modalSectionPadding: 9px;
 
 // ZINDEX (Adds on to whats already in bootstrap)
 // --------------------------------------------------
-@zindexHeader:                      1060;
-@zindexAboveModal:                  1090;
-@zindexAboveFooter:                   20;
+@zindexHeader: 1060;
+@zindexAboveModal: 1090;
+@zindexAboveFooter: 20;
 
 // DOMAIN COLORS
 // If you update these colors,
@@ -223,112 +217,112 @@
 
 // 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
+@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;
+@testPrepDomain1: #1865f2;
+@testPrepDomain2: #1865f2;
+@testPrepDomain3: #1865f2;
+@testPrepDomain4: #1865f2;
 
-@defaultDomain1: #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;
+@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;
+@scienceDomainColor: #94424f;
+@scienceSubjectColor: #9d4a5a;
+@scienceTopicColor: #c55f73;
+@scienceHoverColor: @scienceDomainColor;
+@scienceLinkColor: @scienceDomainColor;
 @scienceLinkHoverColor: @scienceTopicColor;
 
-@humanitiesDomainColor:    #ad3434;
-@humanitiesSubjectColor:   #c13b31;
-@humanitiesTopicColor:     #d24a45;
-@humanitiesHoverColor:     @humanitiesDomainColor;
-@humanitiesLinkColor:      @humanitiesDomainColor;
+@humanitiesDomainColor: #ad3434;
+@humanitiesSubjectColor: #c13b31;
+@humanitiesTopicColor: #d24a45;
+@humanitiesHoverColor: @humanitiesDomainColor;
+@humanitiesLinkColor: @humanitiesDomainColor;
 @humanitiesLinkHoverColor: @humanitiesTopicColor;
 
-@economicsDomainColor:    #b77033;
-@economicsSubjectColor:   #bf7b34;
-@economicsTopicColor:     #d1933b;
-@economicsHoverColor:     @economicsDomainColor;
-@economicsLinkColor:      @economicsDomainColor;
+@economicsDomainColor: #b77033;
+@economicsSubjectColor: #bf7b34;
+@economicsTopicColor: #d1933b;
+@economicsHoverColor: @economicsDomainColor;
+@economicsLinkColor: @economicsDomainColor;
 @economicsLinkHoverColor: @economicsTopicColor;
 
-@csDomainColor:    #437a39;
-@csSubjectColor:   #53893e;
-@csTopicColor:     #689b51;
-@csHoverColor:     @csDomainColor;
-@csLinkColor:      @csDomainColor;
+@csDomainColor: #437a39;
+@csSubjectColor: #53893e;
+@csTopicColor: #689b51;
+@csHoverColor: @csDomainColor;
+@csLinkColor: @csDomainColor;
 @csLinkHoverColor: @csTopicColor;
 
-@partnerContentDomainColor:    #218270;
-@partnerContentSubjectColor:   #2c8d7b;
-@partnerContentTopicColor:     #329a86;
-@partnerContentHoverColor:     @partnerContentDomainColor;
-@partnerContentLinkColor:      @partnerContentDomainColor;
+@partnerContentDomainColor: #218270;
+@partnerContentSubjectColor: #2c8d7b;
+@partnerContentTopicColor: #329a86;
+@partnerContentHoverColor: @partnerContentDomainColor;
+@partnerContentLinkColor: @partnerContentDomainColor;
 @partnerContentLinkHoverColor: @partnerContentTopicColor;
 
-@essayDomainColor:   #0071b3;
+@essayDomainColor: #0071b3;
 
-@mathDomainColor:    #1c758a;
-@mathSubjectColor:   #46a8bf;
-@mathTopicColor:     #4fbad4;
-@mathHoverColor:     @mathDomainColor;
-@mathLinkColor:      @mathDomainColor;
+@mathDomainColor: #1c758a;
+@mathSubjectColor: #46a8bf;
+@mathTopicColor: #4fbad4;
+@mathHoverColor: @mathDomainColor;
+@mathLinkColor: @mathDomainColor;
 @mathLinkHoverColor: @mathTopicColor;
 
-@testPrepDomainColor:    #644172;
-@testPrepSubjectColor:   #7e5f8e;
-@testPrepTopicColor:     #9a72ac;
-@testPrepHoverColor:     @testPrepDomainColor;
-@testPrepLinkColor:      @testPrepDomainColor;
+@testPrepDomainColor: #644172;
+@testPrepSubjectColor: #7e5f8e;
+@testPrepTopicColor: #9a72ac;
+@testPrepHoverColor: @testPrepDomainColor;
+@testPrepLinkColor: @testPrepDomainColor;
 @testPrepLinkHoverColor: @testPrepTopicColor;
 
-@collegeCareersMoreDomainColor:    #218270;
-@collegeCareersMoreSubjectColor:   #2c8d7b;
-@collegeCareersMoreTopicColor:     #329a86;
-@collegeCareersMoreHoverColor:     @collegeCareersMoreDomainColor;
-@collegeCareersMoreLinkColor:      @collegeCareersMoreDomainColor;
+@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;
+@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
 // --------------------------------------------------

package/src/styles/widgets/categorizer.less

@@ -18,7 +18,6 @@
     }
 }
 
-
 // TODO(benkomalo): ughhh. kill or move this out of here :(
 // Styles specifically for the mobile native apps
 body.mobile {
@@ -31,7 +30,7 @@ body.mobile {
 
                 & + span:active:before {
                     color: #666;
-                    content: "\f111";  // fa-circle
+                    content: "\f111"; // fa-circle
                 }
             }
         }

package/src/styles/widgets/expression.less

@@ -1,5 +1,6 @@
 .perseus-widget-expression {
-    & > span, .error-tooltip {
+    & > span,
+    .error-tooltip {
         display: inline-block;
         vertical-align: middle;
     }
@@ -25,7 +26,9 @@
         width: 210px;
     }
 
-    &.show-error-tooltip .perseus-math-input.mq-editable-field.mq-math-mode > .mq-root-block {
+    &.show-error-tooltip
+        .perseus-math-input.mq-editable-field.mq-math-mode
+        > .mq-root-block {
         padding-right: 25px;
     }
 
@@ -112,11 +115,11 @@
     overflow-y: hidden;
 }
 
-.perseus-widget-expression-old > .output > .placeholder  > .error {
+.perseus-widget-expression-old > .output > .placeholder > .error {
     border-radius: 10px;
     background: #f7f7f7;
     border: 1px solid #ddd;
-    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
     color: #000;
     display: none;
     font-weight: normal;

package/src/styles/widgets/grapher.less

@@ -4,7 +4,8 @@
     > .graphie-container {
         position: relative;
 
-        > img, .svg-image {
+        > img,
+        .svg-image {
             position: absolute;
         }
     }

package/src/styles/widgets/image.less

@@ -8,7 +8,7 @@
     .label-settings {
         td {
             padding: 5px 4px;
-            text-align: center
+            text-align: center;
         }
 
         tr:nth-child(odd) {
@@ -17,7 +17,8 @@
             }
         }
 
-        th, td {
+        th,
+        td {
             border-width: 0;
         }
     }

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

@@ -4,7 +4,8 @@
     > .graphie-container {
         position: relative;
 
-        > img, > .unresponsive-svg-image {
+        > 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)
@@ -41,7 +42,8 @@
         border-radius: 5px;
         bottom: 50px;
 
-        .katex, mjx-container {
+        .katex,
+        mjx-container {
             color: @kaGreen !important;
         }
 

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

@@ -22,7 +22,8 @@
         .perseus-block-math {
             padding: 0;
 
-            .katex, mjx-container {
+            .katex,
+            mjx-container {
                 font-size: initial !important;
                 line-height: initial !important;
             }

package/src/styles/widgets/matrix.less

@@ -6,11 +6,11 @@
     .matrix-prefix,
     .matrix-suffix {
         display: inline-block;
-        margin: 2*@margin @margin 0 2*@margin;
+        margin: 2 * @margin @margin 0 2 * @margin;
         vertical-align: top;
     }
     .matrix-suffix {
-        margin: 2*@margin 2*@margin 0 @margin;
+        margin: 2 * @margin 2 * @margin 0 @margin;
     }
 
     div.paragraph {
@@ -54,7 +54,8 @@
             margin-left: (1px - 2 * @borderWidth);
         }
     }
-    input, .number-input {
+    input,
+    .number-input {
         border: none;
         border-radius: 0;
         box-sizing: border-box;
@@ -75,15 +76,18 @@
         }
     }
     &.the-matrix {
-        .matrix-bracket, .matrix-left, .matrix-right {
-            border-color: #29F139;
+        .matrix-bracket,
+        .matrix-left,
+        .matrix-right {
+            border-color: #29f139;
         }
         .matrix-input {
             background: #222;
         }
-        input, .number-input {
+        input,
+        .number-input {
             background: #666;
-            color: #29F139;
+            color: #29f139;
             font-weight: bold;
             &.outside {
                 background: #444;

package/src/styles/widgets/orderer.less

@@ -68,7 +68,8 @@
         }
     }
 
-    &.layout-vertical .bank,  &.layout-vertical .draggable-box {
+    &.layout-vertical .bank,
+    &.layout-vertical .draggable-box {
         box-sizing: border-box;
         float: left;
         max-width: 50%;

package/src/styles/widgets/passage.less

@@ -68,7 +68,8 @@
             }
         }
     }
-    .katex, mjx-container {
+    .katex,
+    mjx-container {
         line-height: @line-height - 2;
     }
 

package/src/styles/widgets/plotter.less

@@ -1,14 +1,15 @@
 .perseus-widget-plotter {
-    svg, vml {
+    svg,
+    vml {
         position: absolute;
     }
-    span.rotate  {
+    span.rotate {
         transform: rotate(-90deg);
     }
 }
 
 .set-from-scale-box {
-    border: 2px solid #EEEEEE;
+    border: 2px solid #eeeeee;
     border-radius: 3px;
     padding: 3px;
 }

package/src/styles/widgets/radio.less

@@ -24,7 +24,8 @@
         }
     }
 
-    .unresponsive-svg-image div, .svg-image div {
+    .unresponsive-svg-image div,
+    .svg-image div {
         // The divs in an svg image shouldn't be inline
         display: block;
     }
@@ -40,7 +41,8 @@
             min-height: 22px;
         }
 
-        img, table {
+        img,
+        table {
             display: inline-block;
             vertical-align: middle;
         }