@khanacademy/perseus 0.0.1 → 0.2.1

package/src/styles/variables.shared.less

@@ -0,0 +1,356 @@
+
+@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.50);
+@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 '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;
+// 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;
+
+// NOTE(johnsullivan): SAT isn't really a part of the domain system so doesn't
+// get included in the .applyToDomains mixin. Currently these variables are
+// only used for KUI buttons.
+@satDomainColor:    #0084ce;
+@satSubjectColor:   #0084ce;
+@satTopicColor:     #0084ce;
+@satHoverColor:     @satDomainColor;
+@satLinkColor:      @satDomainColor;
+@satLinkHoverColor: @satTopicColor;
+
+// 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

@@ -0,0 +1,39 @@
+.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/definition.less

@@ -0,0 +1,86 @@
+@import "../variables.less";
+@import "../util.less";
+
+// HACK(michaelpolyak): As the Definition widget may be rendered within an
+// Article or an Exercise, we need to support the "legacy" way of styling for
+// the specific responsive rendering context. In order to match the surrounding
+// Perseus content styling, we copy and apply styles defined in
+// `perseus-renderer.less`, `articles.less` (both of which are now moved into
+// Perseus).
+
+// Desktop exercise styles
+.framework-perseus:not(.perseus-article):not(.perseus-mobile) {
+    .perseus-widget-definition {
+        .legacy-typography;
+    }
+}
+
+// Mobile exercise styles
+.framework-perseus:not(.perseus-article).perseus-mobile {
+    .perseus-widget-definition {
+        @desktop-width-min: 1200px;
+        @tablet-width-max: (@desktop-width-min - 1);
+
+        // Phone styles
+        @media (max-width: @pure-sm-max) {
+            font-size: 18px;
+            line-height: 1.4;
+        }
+
+        // Tablet styles
+        @media (min-width: @pure-md-min) and (max-width: @tablet-width-max) {
+            font-size: 20px;
+            line-height: 1.5;
+        }
+
+        // "Desktop" (resolution) styles (while rendering on a mobile device,
+        // ie. `this.props.apiOptions.isMobile` is `true`)
+        @media (min-width: @desktop-width-min) {
+            font-size: 22px;
+            line-height: 1.4;
+        }
+    }
+}
+
+// Default article styles
+.bibliotron-article.framework-perseus.perseus-article {
+    .perseus-widget-definition {
+        font-size: 18px;
+        line-height: 1.4;
+    }
+}
+
+// Desktop article styles
+.bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) {
+    .perseus-widget-definition {
+        font-size: 20px;
+        line-height: 30px;
+    }
+}
+
+// Mobile article styles
+.bibliotron-article.framework-perseus.perseus-article.perseus-mobile {
+    .perseus-widget-definition {
+        @desktop-width-min: 1200px;
+        @tablet-width-max: (@desktop-width-min - 1);
+
+        // Phone styles
+        @media (max-width: @pure-sm-max) {
+            font-size: 18px;
+            line-height: 1.4;
+        }
+
+        // Tablet styles
+        @media (min-width: @pure-md-min) and (max-width: @tablet-width-max) {
+            font-size: 20px;
+            line-height: 1.5;
+        }
+
+        // "Desktop" (resolution) styles (while rendering on a mobile device,
+        // ie. `this.props.apiOptions.isMobile` is `true`)
+        @media (min-width: @desktop-width-min) {
+            font-size: 22px;
+            line-height: 1.4;
+        }
+    }
+}

package/src/styles/widgets/dropdown.less

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

package/src/styles/widgets/expression.less

@@ -0,0 +1,147 @@
+.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;
+    }
+
+    &.show-error-tooltip .perseus-math-input.mq-editable-field.mq-math-mode > .mq-root-block {
+        padding-right: 25px;
+    }
+
+    .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;
+        }
+    }
+}
+
+// Old expression widget
+.perseus-widget-expression-old {
+    &,
+    > .output,
+    > .output > .tex,
+    > .output > .placeholder {
+        display: block;
+    }
+}
+
+.perseus-widget-expression-old input,
+#answer_area .perseus-widget-expression-old input {
+    direction: ltr;
+    border: 1px solid #a4a4a4;
+    border-radius: 5px;
+    box-sizing: border-box;
+    font-size: 14px;
+    margin-bottom: 5px;
+    max-width: 240px;
+    padding: 6px;
+    width: 100%;
+}
+
+.perseus-widget-expression-old > .output {
+    background: #f2f2f2;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 10px 0;
+}
+
+#answer_area .perseus-widget-expression-old > .output {
+    background: #f7f7f7;
+}
+
+.perseus-widget-expression-old > .output > .tex {
+    overflow-x: auto;
+    padding: 5px;
+}
+
+.perseus-widget-expression-old > .output > .placeholder {
+    position: relative;
+    height: 40px;
+    overflow-y: hidden;
+}
+
+.perseus-widget-expression-old > .output > .placeholder  > .error {
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    background: #f7f7f7;
+    border: 1px solid #ddd;
+    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
+    color: #000;
+    display: none;
+    font-weight: normal;
+    min-height: 22px;
+    width: 168px;
+    position: absolute;
+    top: 0px;
+    left: 40px;
+    margin: auto;
+}
+
+.perseus-widget-expression-old > .output > .placeholder > .error > .buddy {
+    background-image: url(/images/perseus/error-buddy.png);
+    background-size: 100%;
+    height: 36px;
+    width: 40px;
+    position: absolute;
+    top: -3px;
+    left: -42px;
+}
+
+.perseus-widget-expression-old > .output > .placeholder > .error > .message {
+    font: 12px @baseFontFamily;
+    line-height: 1.4em;
+    margin: 0px 4px;
+}

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

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

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

package/src/styles/widgets/group.less

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