1035d67a25
fix typo and add more security on API fix some bugs and typos address PR feedback be sure to send emails when accounts already exist PR feedback fix multiple uploads pep8 fixes pep8 fix pylint fixes fix url mapping WL-98 - Complete code coverage - Update code for error and warning messages. - improve code as per some suggestions updated the UI of the auto_enroll feature fixed the errors PR feedback add test add back file filtering add some more error handling of input remove unneeded coffeescript code pylint fixes add pep8 space WL-98 - Updated and added test cases. - Updated membership coffee file for errors display handling. - fixed minor text issues. allow for blank lines and add a test add blank line (pep8)
436 lines
12 KiB
SCSS
436 lines
12 KiB
SCSS
// lms variables
|
|
|
|
// base
|
|
$baseline: 20px;
|
|
|
|
// ====================
|
|
|
|
// LAYOUT: grid
|
|
$gw-column: 80px;
|
|
$gw-gutter: 20px;
|
|
$fg-column: $gw-column;
|
|
$fg-gutter: $gw-gutter;
|
|
$fg-max-columns: 12;
|
|
$fg-max-width: 1400px;
|
|
$fg-min-width: 810px;
|
|
|
|
// ====================
|
|
|
|
// FONTS
|
|
$sans-serif: 'Open Sans', $verdana, sans-serif;
|
|
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
|
|
$body-font-family: $sans-serif;
|
|
$serif: $georgia;
|
|
|
|
// ====================
|
|
|
|
// MISC: base fonts/colors
|
|
$body-font-size: em(14);
|
|
$body-line-height: golden-ratio(.875em, 1);
|
|
$base-font-color: rgb(60,60,60);
|
|
$baseFontColor: rgb(60,60,60);
|
|
$base-font-color: rgb(60,60,60);
|
|
$lighter-base-font-color: rgb(100,100,100);
|
|
$very-light-text: #fff;
|
|
|
|
// ====================
|
|
|
|
// TIMING - used for animation/transition mixin syncing
|
|
$tmg-s3: 3.0s;
|
|
$tmg-s2: 2.0s;
|
|
$tmg-s1: 1.0s;
|
|
$tmg-avg: 0.75s;
|
|
$tmg-f1: 0.50s;
|
|
$tmg-f2: 0.25s;
|
|
$tmg-f3: 0.125s;
|
|
|
|
// ====================
|
|
|
|
// COLORS - utility
|
|
$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
|
|
|
|
// COLORS
|
|
$black: rgb(0,0,0);
|
|
$black-t0: rgba($black, 0.125);
|
|
$black-t1: rgba($black, 0.25);
|
|
$black-t2: rgba($black, 0.5);
|
|
$black-t3: rgba($black, 0.75);
|
|
|
|
$white: rgb(255,255,255);
|
|
$white-t0: rgba($white, 0.125);
|
|
$white-t1: rgba($white, 0.25);
|
|
$white-t2: rgba($white, 0.5);
|
|
$white-t3: rgba($white, 0.75);
|
|
|
|
$gray: rgb(127,127,127);
|
|
$gray-l1: tint($gray,20%);
|
|
$gray-l2: tint($gray,40%);
|
|
$gray-l3: tint($gray,60%); // #cbcbcb;
|
|
$gray-l4: tint($gray,80%); // #e5e5e5;
|
|
$gray-l5: tint($gray,90%); // #f2f2f2;
|
|
$gray-l6: tint($gray,95%); // #f8f8f8;
|
|
$gray-l7: tint($gray,99%);
|
|
$gray-d1: shade($gray,20%);
|
|
$gray-d2: shade($gray,40%);
|
|
$gray-d3: shade($gray,60%);
|
|
$gray-d4: shade($gray,80%);
|
|
|
|
$pink: rgb(182,37,103);
|
|
$pink-l1: tint($pink,20%);
|
|
$pink-l2: tint($pink,40%);
|
|
$pink-l3: tint($pink,60%);
|
|
$pink-l4: tint($pink,80%);
|
|
$pink-l5: tint($pink,90%);
|
|
$pink-d1: shade($pink,20%);
|
|
$pink-d2: shade($pink,40%);
|
|
$pink-d3: shade($pink,60%);
|
|
$pink-d4: shade($pink,80%);
|
|
$pink-s1: saturate($pink,15%);
|
|
$pink-s2: saturate($pink,30%);
|
|
$pink-s3: saturate($pink,45%);
|
|
$pink-u1: desaturate($pink,15%);
|
|
$pink-u2: desaturate($pink,30%);
|
|
$pink-u3: desaturate($pink,45%);
|
|
|
|
$red: rgb(178, 6, 16);
|
|
$red-l1: tint($red,20%);
|
|
$red-l2: tint($red,40%);
|
|
$red-l3: tint($red,60%);
|
|
$red-l4: tint($red,80%);
|
|
$red-l5: tint($red,90%);
|
|
$red-d1: shade($red,20%);
|
|
$red-d2: shade($red,40%);
|
|
$red-d3: shade($red,60%);
|
|
$red-d4: shade($red,80%);
|
|
$red-s1: saturate($red,15%);
|
|
$red-s2: saturate($red,30%);
|
|
$red-s3: saturate($red,45%);
|
|
$red-u1: desaturate($red,15%);
|
|
$red-u2: desaturate($red,30%);
|
|
$red-u3: desaturate($red,45%);
|
|
|
|
$green: rgb(37, 184, 90);
|
|
$green-l1: tint($green,20%);
|
|
$green-l2: tint($green,40%);
|
|
$green-l3: tint($green,60%);
|
|
$green-l4: tint($green,80%);
|
|
$green-l5: tint($green,90%);
|
|
$green-d1: shade($green,20%);
|
|
$green-d2: shade($green,40%);
|
|
$green-d3: shade($green,60%);
|
|
$green-d4: shade($green,80%);
|
|
$green-s1: saturate($green,15%);
|
|
$green-s2: saturate($green,30%);
|
|
$green-s3: saturate($green,45%);
|
|
$green-u1: desaturate($green,15%);
|
|
$green-u2: desaturate($green,30%);
|
|
$green-u3: desaturate($green,45%);
|
|
|
|
// TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching.
|
|
$blue: rgb(29,157,217);
|
|
$yellow: rgb(255, 252, 221);
|
|
|
|
// COLORS: old variables
|
|
$error-red: rgb(253, 87, 87);
|
|
$danger-red: rgb(212, 64, 64);
|
|
$light-gray: rgb(221, 221, 221);
|
|
$dark-gray: rgb(51, 51, 51);
|
|
$border-color: rgb(200, 200, 200);
|
|
$sidebar-color: rgb(246, 246, 246);
|
|
$outer-border-color: rgb(170, 170, 170);
|
|
$light-gray: #ddd;
|
|
|
|
// used by descriptor css
|
|
$lightGrey: #edf1f5;
|
|
$darkGrey: #8891a1;
|
|
$lightGrey1: #ccc;
|
|
$blue-d1: shade($blue,20%);
|
|
$blue-d2: shade($blue,40%);
|
|
$blue-d4: shade($blue,80%);
|
|
|
|
// edx.org marketing site variables
|
|
$m-gray: #8A8C8F;
|
|
$m-gray-l1: #97999B;
|
|
$m-gray-l2: #A4A6A8;
|
|
$m-gray-l3: #B1B2B4;
|
|
$m-gray-l4: #F5F5F5;
|
|
$m-gray-d1: #7D7F83;
|
|
$m-gray-d2: #707276;
|
|
$m-gray-d3: #646668;
|
|
$m-gray-d4: #050505;
|
|
$m-gray-t0: rgba($m-gray,0.125);
|
|
$m-gray-t1: rgba($m-gray,0.25);
|
|
$m-gray-t2: rgba($m-gray,0.50);
|
|
$m-gray-t3: rgba($m-gray,0.75);
|
|
|
|
$m-blue: #1AA1DE;
|
|
$m-blue-l1: #2BACE6;
|
|
$m-blue-l2: #42B5E9;
|
|
$m-blue-l3: #59BEEC;
|
|
$m-blue-l4: tint($m-blue,90%);
|
|
$m-blue-l5: tint($m-blue,95%);
|
|
$m-blue-d1: #1790C7;
|
|
$m-blue-d2: #1580B0;
|
|
$m-blue-d3: #126F9A;
|
|
$m-blue-d4: #0A4A67;
|
|
$m-blue-t0: rgba($m-blue,0.125);
|
|
$m-blue-t1: rgba($m-blue,0.25);
|
|
$m-blue-t2: rgba($m-blue,0.50);
|
|
$m-blue-t3: rgba($m-blue,0.75);
|
|
|
|
$m-pink: #B52A67;
|
|
$m-pink-l1: #CA2F73;
|
|
$m-pink-l2: #D33F80;
|
|
$m-pink-l3: #D7548E;
|
|
$m-pink-l4: tint($m-pink,75%);
|
|
$m-pink-l5: tint($m-pink,85%);
|
|
$m-pink-d1: #A0255B;
|
|
$m-pink-d2: #8C204F;
|
|
$m-pink-d3: #771C44;
|
|
|
|
$m-green: rgb(0, 136, 1);
|
|
$m-green-s1: rgb(96, 188, 97);
|
|
$m-green-l1: tint($m-green,20%);
|
|
$m-green-l2: tint($m-green,40%);
|
|
$m-green-l3: tint($m-green,60%);
|
|
$m-green-l4: tint($m-green,90%);
|
|
$m-green-l5: tint($m-green,95%);
|
|
$m-green-d1: shade($m-green,20%);
|
|
$m-green-d2: shade($m-green,40%);
|
|
$m-green-d3: shade($m-green,60%);
|
|
$m-green-d4: shade($m-green,90%);
|
|
$m-green-t0: rgba($m-green,0.125);
|
|
$m-green-t1: rgba($m-green,0.25);
|
|
$m-green-t2: rgba($m-green,0.50);
|
|
$m-green-t3: rgba($m-green,0.75);
|
|
|
|
// ====================
|
|
|
|
// shadows
|
|
$shadow: rgba(0,0,0,0.2);
|
|
$shadow-l1: rgba(0,0,0,0.1);
|
|
$shadow-l2: rgba(0,0,0,0.05);
|
|
$shadow-d1: rgba(0,0,0,0.4);
|
|
$shadow-d2: rgba($black, 0.6);
|
|
|
|
// ====================
|
|
|
|
$m-base-font-size: em(15);
|
|
|
|
$base-font-color: rgb(60,60,60);
|
|
$baseFontColor: rgb(60,60,60);
|
|
$lighter-base-font-color: rgb(100,100,100);
|
|
$text-color: $dark-gray;
|
|
|
|
$dark-trans-bg: rgba(0, 0, 0, .75);
|
|
|
|
$body-bg: rgb(250,250,250);
|
|
$container-bg: $white;
|
|
$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
|
|
$header-bg: $white;
|
|
$courseware-header-image: linear-gradient(top, #fff, #eee);
|
|
$courseware-header-bg: transparent;
|
|
$footer-bg: $white;
|
|
$courseware-footer-border: none;
|
|
$courseware-footer-shadow: none;
|
|
$courseware-footer-margin: 0px;
|
|
$courseware-border-bottom-color: #44a2de;
|
|
$courseware-button-border-color: #e6e6e6;
|
|
$courseware-hover-color: #333435;
|
|
$courseware-navigation-color: #009ee7;
|
|
|
|
// ====================
|
|
|
|
// STATE: verified
|
|
$verified-color-lvl1: $m-green;
|
|
$verified-color-lvl2: $m-green-l1;
|
|
$verified-color-lvl3: $m-green-l2;
|
|
$verified-color-lvl4: $m-green-l3;
|
|
$verified-color-lvl5: $m-green-l4;
|
|
|
|
// STATE: professional ed
|
|
$professional-color-lvl1: $m-pink;
|
|
$professional-color-lvl2: $m-pink-l1;
|
|
$professional-color-lvl3: $m-pink-l2;
|
|
$professional-color-lvl4: $m-pink-l3;
|
|
$professional-color-lvl5: $m-pink-l4;
|
|
|
|
// STATE: honor code
|
|
$honorcode-color-lvl1: rgb(50, 165, 217);
|
|
$honorcode-color-lvl2: tint($honorcode-color-lvl1, 33%);
|
|
|
|
// STATE: audit
|
|
$audit-color-lvl1: $light-gray;
|
|
$audit-color-lvl2: tint($audit-color-lvl1, 33%);
|
|
|
|
|
|
// ====================
|
|
|
|
// ACTIONS: general
|
|
$button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
|
|
$button-bg-color: transparent;
|
|
$button-bg-hover-color: #fff;
|
|
|
|
// ACTIONS: primary
|
|
$action-primary-bg: $m-blue-d3;
|
|
$action-primary-fg: $white;
|
|
$action-primary-shadow: $m-blue-d4;
|
|
|
|
// ACTIONS: primary - focused - hover/active pseudo states
|
|
$action-primary-focused-bg: $m-blue-d1;
|
|
$action-primary-focused-fg: $white;
|
|
|
|
// ACTIONS: primary - current or active navigation item
|
|
$action-primary-active-bg: $m-blue;
|
|
$action-primary-active-fg: $m-blue-d3;
|
|
$action-primary-active-shadow: $m-blue-d2;
|
|
$action-primary-active-focused-fg: $m-blue-d4;
|
|
$action-primary-active-focused-shadow: $m-blue-d3;
|
|
|
|
// ACTIONS: disabled
|
|
$action-primary-disabled-bg: $m-gray-d3;
|
|
$action-prmary-disabled-fg: $white;
|
|
|
|
// ACTIONS: secondary
|
|
$action-secondary-bg: $m-pink;
|
|
$action-secondary-fg: $white;
|
|
$action-secondary-shadow: $m-pink-d2;
|
|
|
|
// ACTIONS: secondary - focused - hover/active pseudo states
|
|
$action-secondary-focused-bg: $m-pink-l3;
|
|
$action-secondary-focused-fg: $white;
|
|
|
|
// ACTIONS: secondary - current or active navigation item
|
|
$action-secondary-active-bg: $m-pink-l2;
|
|
$action-secondary-active-fg: $m-pink-d1;
|
|
$action-secondary-active-shadow: $m-pink-d1;
|
|
$action-secondary-active-focused-fg: $m-pink-d3;
|
|
$action-secondary-active-focused-shadow: $m-pink-d2;
|
|
|
|
// ACTIONS: secondary - disabled
|
|
$action-secondary-disabled-bg: $m-gray-d3;
|
|
$action-secondary-disabled-fg: $white;
|
|
|
|
// HEADER: graphic-based page titles
|
|
$header-graphic-super-color: $m-blue-d1;
|
|
$header-graphic-sub-color: $m-gray-d2;
|
|
|
|
// State-based colors
|
|
$error-color: $error-red;
|
|
$warning-color: $m-pink;
|
|
$confirm-color: $m-green;
|
|
|
|
// Notifications
|
|
$notify-banner-bg-1: rgb(56,56,56);
|
|
$notify-banner-bg-2: rgb(136,136,136);
|
|
$notify-banner-bg-3: rgb(223,223,223);
|
|
|
|
$alert-color: rgb(212, 64, 64); //rich red
|
|
$warning-color: rgb(237, 189, 60); //rich yellow
|
|
$success-color: rgb(37, 184, 90); //rich green
|
|
|
|
// ====================
|
|
|
|
// MISC: visual horizontal rules
|
|
$faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0));
|
|
$faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1));
|
|
$faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0));
|
|
$faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240,240, 1) 50%, rgba(240,240,240, 0));
|
|
$faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0));
|
|
$faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0));
|
|
|
|
// MISC: dashboard
|
|
$dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245));
|
|
$dashboard-profile-header-color: transparent;
|
|
$dashboard-profile-color: rgb(252,252,252);
|
|
$dot-color: $light-gray;
|
|
$dashboard-course-cover-border: $light-gray;
|
|
|
|
// MISC: course assets
|
|
$content-wrapper-bg: $white;
|
|
$course-bg-color: #d6d6d6;
|
|
$course-bg-image: url(../images/bg-texture.png);
|
|
$account-content-wrapper-bg: shade($body-bg, 2%);
|
|
$course-profile-bg: rgb(245,245,245);
|
|
$course-header-bg: rgba(255,255,255, 0.93);
|
|
|
|
// MISC: borders
|
|
$border-color-1: rgb(190,190,190);
|
|
$border-color-2: rgb(200,200,200);
|
|
$border-color-3: rgb(100,100,100);
|
|
$border-color-4: rgb(252,252,252);
|
|
$border-color-l1: $m-gray-l1;
|
|
$border-color-l2: $m-gray-l2;
|
|
$border-color-l3: $m-gray-l3;
|
|
$border-color-l4: $m-gray-l4;
|
|
|
|
// MISC: links and buttons
|
|
$link-color: $blue;
|
|
$link-color-d1: $m-blue-d2;
|
|
$link-hover: $pink;
|
|
$site-status-color: $pink;
|
|
$button-color: $blue;
|
|
$button-archive-color: #eee;
|
|
|
|
// MISC: shadow, form, modal
|
|
$shadow-color: $blue;
|
|
$form-bg-color: #fff;
|
|
$modal-bg-color: rgb(245,245,245);
|
|
|
|
// MISC: sidebar
|
|
$sidebar-chapter-bg-top: rgba(255, 255, 255, .6);
|
|
$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0);
|
|
$sidebar-chapter-bg: #eee;
|
|
$sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6);
|
|
|
|
// TOP HEADER IMAGE MARGIN
|
|
$header_image_margin: -69px;
|
|
|
|
//FOOTER MARGIN
|
|
$footer_margin: ($baseline/4) 0 ($baseline*1.5) 0;
|
|
|
|
// ====================
|
|
|
|
// VIEWS: homepage
|
|
$homepage__header--gradient__color--alpha: lighten($blue, 15%);
|
|
$homepage__header--gradient__color--bravo: saturate($blue, 30%);
|
|
$homepage__header--background: lighten($blue, 15%);
|
|
|
|
// ====================
|
|
|
|
// IMAGES: backgrounds
|
|
$homepage-bg-image: none;
|
|
|
|
$login-banner-image: url(../images/bg-banner-account.png);
|
|
$register-banner-image: url(../images/bg-banner-account.png);
|
|
$passwordreset-banner-image: url(../images/bg-banner-account.png);
|
|
|
|
$video-thumb-url: '../images/courses/video-thumb.jpg';
|
|
|
|
// ====================
|
|
|
|
// SPLINT: new standards
|
|
|
|
// SPLINT: fonts
|
|
$f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
|
|
|
|
// Header specific sans-serif
|
|
$header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif;
|
|
|
|
// SPLINT: colors
|
|
|
|
$msg-bg: $action-primary-bg;
|
|
|
|
// New Shopping Cart
|
|
|
|
$dark-gray1: #4a4a4a;
|
|
$light-gray1: #f2f2f2;
|
|
$light-gray2: #ababab;
|
|
$dark-gray2: #979797;
|
|
$blue1: #4A90E2;
|
|
$blue2: #00A1E5;
|
|
$green1: #61A12E;
|
|
$red1: #D0021B;
|