adding Sass architecture:

* import order - with base blocks, theming, and specific app layers
* base utilities/tools
* notes/starters for each Sass partial imported

TIM-127

apps/openassessment/xblock/static/sass/main.scss

-// xblock: openassessment - main style compile
-// ====================
-
-// app: libraries and resets
-// --------------------
-@import 'utilities/bourbon/bourbon';        // http://bourbon.io
-@import 'utilities/neat/neat';              // http://neat.bourbon.io
-@import 'libs/font-awesome/font-awesome';   // http://fontawesome.io/
-@import 'libs/normalize';                   // http://necolas.github.io/normalize.css/
-
-// app: utilities and assets
-// --------------------
-// utilities
-@import 'utilities/variables';              // settings/values/placeholders
-@import 'utilities/mixins';                 // mixins and functions
-@import 'utilities/extends';                // re-usable extends, placeholders, archetypes
-
-// assets
-@import 'assets/fonts';                     // imported/used fonts
-@import 'assets/graphics';                  // sprites, basic img/figure/svg styling
-@import 'assets/animations';                // css-based animations
-
-
-// theme: utilities and assets
-// --------------------
-@import 'themes/edx/utilities';             // theme-based utilities (variables, mixins, extends)
-@import 'themes/edx/assets';                // default theme by default
-
-
-// app: general, elements, and views
-// --------------------
-// elements
-@import 'elements/base';                    // basic styles
-@import 'elements/typography';              // font sizes/scale and applied/canned definitions
-@import 'elements/controls';                // buttons, link styles, sliders, etc.
-@import 'elements/header';                  // view/app headers
-@import 'elements/footer';                  // view/app footers
-@import 'elements/navigation';              // navigation sets
-@import 'elements/forms';                   // form elements
-
-// app: specific views
-@import 'views/resume';                     // resume
-
-// app: contextual
-@import 'contexts/print';                  // basic print styling
-@import 'contexts/ie';                     // ie-specific styling
-
-// app: misc.
-@import 'utilities/shame';                 // shame file - used for any bad-form/orphaned css
-
-
-// theme: general, elements, views, and contexts
-// --------------------
-@import 'themes/edx/base';
-@import 'themes/edx/elements';
-@import 'themes/edx/views';
-@import 'themes/edx/contexts';

apps/openassessment/xblock/static/sass/oa/contexts/_ie.scss

+// openassessment: contexts - internet explorer
+// ====================
+
+// NOTES:
+// * any openassessment-specific suport-based styling needed for internet explorer should be placed here
+
+
+// --------------------
+// CASE: less than or equal to IE9
+// --------------------
+.lte9 {
+
+}
+
+
+// --------------------
+// CASE: less than or equal to IE8
+// --------------------
+.lte8 {
+
+}
+
+
+// --------------------
+// CASE: less than or equal to IE7
+// --------------------
+.lte7 {
+
+}

apps/openassessment/xblock/static/sass/oa/contexts/_lms.scss

+// openassessment: contexts - lms UI
+// ====================
+
+// NOTES:
+// * any openassessment-specific suport-based styling needed for the xblock rendering in edX's LMS should be placed here
+
+
+// --------------------
+// CASE: less than or equal to IE9
+// --------------------
+.is--in-edxlms {
+
+}

apps/openassessment/xblock/static/sass/oa/elements/_footer.scss

+// openassessment: elements - footer
+// ====================
+
+// NOTES:
+// * The grade/status portion of the openassessment UI

apps/openassessment/xblock/static/sass/oa/elements/_header.scss

+// openassessment: elements - header
+// ====================
+
+// NOTES:
+// * The prompt/status portion of the openassessment UI

apps/openassessment/xblock/static/sass/oa/elements/_layout.scss

+// openassessment: elements - layouts
+// ====================
+
+// NOTES:
+// * Grid and common page layout rules
+// * any manual layout breakpoints for ORA (a la shirt sizes - s,m,l,xl) - needed since media queries of UI xblocks are contained in don't give enough context

apps/openassessment/xblock/static/sass/oa/elements/_navigation.scss

+// openassessment: elements - navigation
+// ====================
+
+// NOTES:
+// * openassessment-specific navigation UI

apps/openassessment/xblock/static/sass/oa/utilities/_developer.scss

+// openassessment: utilities - developer
+// ====================
+
+// NOTES:
+// * use this area for any developer-needed or created styling that needs to be refactored into patterns or visually polished. Please list any template/view that your styles reference when definining them (example below):
+
+// --------------------
+// Views: Error
+// --------------------
+// .crazy-new-feature {
+//   background: transparent;
+// }
+

apps/openassessment/xblock/static/sass/oa/utilities/_shame.scss

+// openassessment: utilities - shame
+// ====================
+
+// NOTES: use for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css)

apps/openassessment/xblock/static/sass/oa/utilities/_variables.scss

+// openassessment: utilities - variables
+// ====================
+
+// NOTES:
+// * these are openassessment-specific variable files

apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss

+// openassessment: views - base
+// ====================
+
+// NOTES:
+// * The basic view and all of its states of the openassessment xblock

apps/openassessment/xblock/static/sass/openassessment.scss

+// xblock: openassessment - main style compile
+// ====================
+
+// NOTES:
+// * this Sass compiles into the static CSS needed for the openassessment xblock
+// * Sass partials that can be re-used are organized in the "xb/" directory and listed in "general xblock" segments
+// * theme-based Sass partials are noted by "theme - [theme name]" in the import order to override defaults
+// * openassessment-specific styles are collected within the "oa/" directory and listed in "app -" segment
+
+// * openassessment-based layouts are sized like media-query breakpoints, but will be applied by specific classes/variables
+// * the system/app digesting this xblock will control general page layout and overall screensize-based breakpoints
+
+// --------------------
+
+// KNOWN ISSUES/CONCERNS:
+// * manual syncing of a view's breakpoints/layout with openassessment's sizes is needed on a system/app basis
+// * the system/app ingesting this xblock may have conflicts/redundancies/versioning issues with the utilities used
+
+// --------------------
+// general - xblocks:
+// shared utilities, assets and set up
+// --------------------
+// xblocks: libraries and resets
+@import 'xb/libs/bourbon/bourbon';             // general sass utility (http://bourbon.io)
+@import 'xb/libs/neat/neat';                   // responsive grid utility (http://neat.bourbon.io)
+@import 'xb/libs/font-awesome/font-awesome';   // font-based icons (http://fontawesome.io/)
+
+// xblocks: utilities
+@import 'xb/utilities/reset';                  // xblocks-based reset
+@import 'xb/utilities/variables';              // default settings and values
+@import 'xb/utilities/mixins';                 // mixins and functions
+@import 'xb/utilities/extends';                // re-usable extends, placeholders, archetypes
+
+// general xblocks: assets
+@import 'xb/assets/fonts';                     // imported/used fonts
+@import 'xb/assets/graphics';                  // sprites, basic img/figure/svg styling
+@import 'xb/assets/animations';                // css-based animations
+
+
+// --------------------
+// theme - edx:
+// utilities and assets (needed in this order to override xb variables)
+// --------------------
+@import 'themes/edx/utilities';                // theme-based utilities (variables, mixins, extends)
+@import 'themes/edx/assets';                   // theme-based assets (fonts, graphics/sprites, animations)
+
+
+// --------------------
+// general - xblock:
+// shared base type, controls, and UI elements
+// --------------------
+// xblock: elements
+@import 'xb/elements/base';                    // basic styles
+@import 'xb/elements/typography';              // font sizes/scale and applied/canned definitions
+@import 'xb/elements/controls';                // buttons, link styles, sliders, etc.
+@import 'xb/elements/forms';                   // form elements
+
+// xblock: contextual
+@import 'xb/contexts/ie';                      // Internet Explorer-specific styling
+
+
+// --------------------
+// theme - edx:
+// elements, views, and contexts (needed in this order to override xb)
+// --------------------
+@import 'themes/edx/base';
+@import 'themes/edx/elements';
+
+
+// --------------------
+// app - openassessment:
+// specific UI for this application
+// --------------------
+@import 'oa/utilities/variables';              // specific variables and overrides
+@import 'oa/elements/header';                  // view/app headers
+@import 'oa/elements/footer';                  // view/app footers
+@import 'oa/elements/navigation';              // navigation sets
+@import 'oa/elements/layout';                  // applied layouts and deliberate class-based breakpoints
+@import 'oa/views/oa-base';                    // open assessment base view
+
+// openassessment: contextual
+@import 'oa/contexts/ie';                      // open assessment-specific Internet Explorer-specific styling
+@import 'oa/contexts/lms';                     // open assessment-specific LMS constraints
+
+// openassessment: misc.
+@import 'oa/utilities/developer';              // developer-friendly file: add rough/WIP styling that needs UI triage
+@import 'oa/utilities/shame';                  // used for any bad-form/orphaned css/clean up code needed

apps/openassessment/xblock/static/sass/themes/edx/_assets.scss

+// edX theme: assets
+// ====================
+
+// NOTES:
+// * This is where any edX-theme related assets (fonts, graphics/sprites, and animations) are defined
+
+
+// --------------------
+// font: Open Sans - http://www.google.com/fonts/specimen/Open+Sans
+// --------------------
+@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);
+
+
+// --------------------
+// EXAMPLE: image - edX logo
+// --------------------
+// $logo--edx: '../images/logo--edx.png';

apps/openassessment/xblock/static/sass/themes/edx/_base.scss

+// edX theme: base
+// ====================
+
+// NOTES:
+// * This is where any edX-theme related base styling is defined

apps/openassessment/xblock/static/sass/themes/edx/_elements.scss

+// edX theme: elements
+// ====================
+
+// NOTES:
+// * This is where any edX-theme related element styling or overrides are included

apps/openassessment/xblock/static/sass/themes/edx/_utilities.scss

+// edX theme: utilities
+// ====================
+
+// NOTES:
+// * This is where any edX-theme related utilities (variables, mixins, extends) are defined or override previously defined elements
+
+
+// --------------------
+// variables: new
+// --------------------
+$edx-blue: rgb(58, 162, 224);
+$edx-blue-l1: tint($edx-blue,20%);
+$edx-blue-l2: tint($edx-blue,40%);
+$edx-blue-l3: tint($edx-blue,60%);
+$edx-blue-l4: tint($edx-blue,80%);
+$edx-blue-l5: tint($edx-blue,90%);
+$edx-blue-d1: shade($edx-blue,20%);
+$edx-blue-d2: shade($edx-blue,40%);
+$edx-blue-d3: shade($edx-blue,60%);
+$edx-blue-d4: shade($edx-blue,80%);
+$edx-blue-d5: shade($edx-blue,90%);
+$edx-blue-s1: saturate($edx-blue,15%);
+$edx-blue-s2: saturate($edx-blue,30%);
+$edx-blue-s3: saturate($edx-blue,45%);
+$edx-blue-u1: desaturate($edx-blue,15%);
+$edx-blue-u2: desaturate($edx-blue,30%);
+$edx-blue-u3: desaturate($edx-blue,45%);
+$edx-blue-t0: rgba($edx-blue,0.125);
+$edx-blue-t1: rgba($edx-blue,0.25);
+$edx-blue-t2: rgba($edx-blue,0.50);
+$edx-blue-t3: rgba($edx-blue,0.75);
+
+$edx-pink: rgb(182,37,104);
+$edx-pink-l1: tint($edx-pink,20%);
+$edx-pink-l2: tint($edx-pink,40%);
+$edx-pink-l3: tint($edx-pink,60%);
+$edx-pink-l4: tint($edx-pink,80%);
+$edx-pink-l5: tint($edx-pink,90%);
+$edx-pink-d1: shade($edx-pink,20%);
+$edx-pink-d2: shade($edx-pink,40%);
+$edx-pink-d3: shade($edx-pink,60%);
+$edx-pink-d4: shade($edx-pink,80%);
+$edx-pink-d5: shade($edx-pink,90%);
+$edx-pink-s1: saturate($edx-pink,15%);
+$edx-pink-s2: saturate($edx-pink,30%);
+$edx-pink-s3: saturate($edx-pink,45%);
+$edx-pink-u1: desaturate($edx-pink,15%);
+$edx-pink-u2: desaturate($edx-pink,30%);
+$edx-pink-u3: desaturate($edx-pink,45%);
+$edx-pink-t0: rgba($edx-pink,0.125);
+$edx-pink-t1: rgba($edx-pink,0.25);
+$edx-pink-t2: rgba($edx-pink,0.50);
+$edx-pink-t3: rgba($edx-pink,0.75);
+
+
+// --------------------
+// variables: overrides
+// --------------------
+// application - fonts
+$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
+$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
+
+// application - colors
+$color-primary: $edx-blue-d1;
+$color-secondary: $edx-blue-l1;
+$color-tertiary: $gray-l1;
+$color-quarternary: $gray-l2;
+
+// application - colors: decorative
+$decorative__color-primary: $edx-blue-u1;
+$decorative__color-secondary: $edx-pink-l2;
+
+// application - colors: copy and headings
+$heading-color: $gray-d3;
+$heading-primary-color: $black;
+$heading-secondary-color: $gray;
+$heading-tertiary-color: $gray-l4;
+
+$copy-color: $gray-l2;
+$copy-color-alt: $gray-d1;
+$copy-color-focus: $gray-d4;
+
+$copy-lead__color: $gray;
+$copy-lead__color: $gray-d1;
+$copy-lead__color-focus: $gray-d4;
+
+$copy-supplemental-color: $gray-l2;
+$copy-supplemental-color-alt: $gray-l2;
+$copy-supplemental-color-focus: $gray-d1;
+
+// application - colors:states
+$selected-bg: $edx-blue-t1;
+$selected-color: $edx-blue-s1;
+
+// application - colors: view-based elements
+$bg-view: $gray-l6;
+
+$bg-header-main: $white;
+$color-header-main: $black;
+
+$bg-content: $gray-l6;
+$color-content: $gray-d1;
+
+$bg-content-main: $gray-l5;
+$color-content-main: $gray-d1;
+
+// application - colors: view-based elements
+$bg-view: $gray-l6;
+$bg-content: $white;
+
+
+// --------------------
+// mixins:
+// --------------------
+
+
+// --------------------
+// extends:
+// --------------------

apps/openassessment/xblock/static/sass/xb/assets/_animations.scss

+// xblock: assets - animations
+// ====================
+
+// NOTES:
+// * these are bourbon-translated animations that can be used on any xblock
+
+
+// --------------------
+// fade in
+// --------------------
+@include keyframes(fadeIn) {
+  0% {
+    opacity: 0.0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-fadeIn {
+  @include animation(fadeIn $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// fade in + left
+// --------------------
+@include keyframes(fadeInLeft) {
+  0% {
+    @include transform(translateX(-($baseline-h)));
+    opacity: 0;
+  }
+
+  100% {
+    @include transform(translateX(0));
+    opacity: 1;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-fadeInLeft {
+  @include animation(fadeInLeft $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// fade in + right
+// --------------------
+@include keyframes(fadeInRight) {
+  0% {
+    @include transform(translateX($baseline-h));
+    opacity: 0;
+  }
+
+  100% {
+    @include transform(translateX(0));
+    opacity: 1;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-fadeInRight {
+  @include animation(fadeInRight $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// fade in + up
+// --------------------
+@include keyframes(fadeInUp) {
+  0% {
+    @include transform(translateY($baseline-v));
+    opacity: 0;
+  }
+
+  100% {
+    @include transform(translateY(0));
+    opacity: 1;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-fadeInUp {
+  @include animation(fadeInUp $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// fade in + down
+// --------------------
+@include keyframes(fadeInDown) {
+  0% {
+    @include transform(translateY(-($baseline-v)));
+    opacity: 0;
+  }
+
+  100% {
+    @include transform(translateY(0));
+    opacity: 1;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-fadeInDown {
+  @include animation(fadeInDown $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// fade out
+// --------------------
+@include keyframes(fadeOut) {
+  0% {
+    opacity: 1.0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 0.0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-fadeOut {
+  @include animation(fadeOut $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// slide in left
+// --------------------
+@include keyframes(slideInLeft) {
+  0% {
+    @include transform(translateX(-($anim-distance-offviewport)));
+    opacity: 0;
+  }
+
+  100% {
+    @include transform(translateX(0));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-slideInLeft {
+  @include animation(slideInLeft $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// slide in right
+// --------------------
+@include keyframes(slideInRight) {
+  0% {
+    @include transform(translateX($anim-distance-offviewport));
+    opacity: 0;
+  }
+
+  100% {
+    @include transform(translateX(0));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-slideInRight {
+  @include animation(slideInRight $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// slide in down
+// --------------------
+@include keyframes(slideInDown) {
+  0% {
+    @include transform(translateY(-($anim-distance-offviewport)));
+    opacity: 0;
+  }
+
+  100% {
+    @include transform(translateY(0));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-slideInDown {
+  @include animation(slideInDown $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// slide in up
+// --------------------
+@include keyframes(slideInUp) {
+  0% {
+    @include transform(translateY($anim-distance-offviewport));
+    opacity: 0;
+  }
+
+  100% {
+    @include transform(translateY(0));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-slideInUp {
+  @include animation(slideInUp $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// slide out left
+// --------------------
+@include keyframes(slideOutLeft) {
+  0% {
+    @include transform(translateX(0));
+  }
+
+  100% {
+    @include transform(translateX(-($anim-distance-offviewport)));
+    opacity: 0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-slideOutLeft {
+  @include animation(slideOutLeft $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// slide out right
+// --------------------
+@include keyframes(slideOutRight) {
+  0% {
+      @include transform(translateX(0));
+    }
+
+    100% {
+      @include transform(translateX($anim-distance-offviewport));
+      opacity: 0;
+    }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-slideOutRight {
+  @include animation(slideOutRight $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// slide out up
+// --------------------
+@include keyframes(slideOutUp) {
+  0% {
+    @include transform(translateY(0));
+  }
+
+  100% {
+    @include transform(translateY(-($anim-distance-offviewport)));
+    opacity: 0;
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-slideOutUp {
+  @include animation(slideOutUp $tmg-f2 linear 1);
+}
+
+
+// --------------------
+// rotate up
+// --------------------
+@include keyframes(rotateUp) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(-90deg));
+  }
+
+  100% {
+    @include transform(rotate(-180deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-rotateUp {
+  @include animation(rotateUp $tmg-f2 ease-in-out 1);
+}
+
+
+// --------------------
+// rotate down
+// --------------------
+@include keyframes(rotateDown) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(90deg));
+  }
+
+  100% {
+    @include transform(rotate(180deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-rotateDown {
+  @include animation(rotateDown $tmg-f2 ease-in-out 1);
+}
+
+
+// --------------------
+// rotate clockwise
+// --------------------
+@include keyframes(rotateCW) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(180deg));
+  }
+
+  100% {
+    @include transform(rotate(360deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-rotateCW {
+  @include animation(rotateCW $tmg-s1 linear infinite);
+}
+
+
+// --------------------
+// rotate counter-clockwise
+// --------------------
+@include keyframes(rotateCCW) {
+  0% {
+    @include transform(rotate(0deg));
+  }
+
+  50% {
+    @include transform(rotate(-180deg));
+  }
+
+  100% {
+    @include transform(rotate(-360deg));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-rotateCCW {
+  @include animation(rotateCCW $tmg-s1 linear infinite);
+}
+
+
+// --------------------
+// bounce in
+// --------------------
+@include keyframes(bounceIn) {
+  0% {
+    opacity: 0.0;
+    @include transform(scale(0.3));
+  }
+
+  50% {
+    opacity: 1.0;
+    @include transform(scale(1.05));
+  }
+
+  100% {
+    @include transform(scale(1));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-bounceIn {
+  @include animation(bounceIn $tmg-f1 ease-in-out 1);
+}
+
+
+// --------------------
+// bounce out
+// --------------------
+@include keyframes(bounceOut) {
+  0% {
+    @include transform(scale(1));
+  }
+
+  50% {
+    opacity: 1.0;
+    @include transform(scale(1.05));
+  }
+
+  100% {
+    opacity: 0.0;
+    @include transform(scale(0.3));
+  }
+}
+
+// canned animation - use if you want out of the box/non-customized anim
+%anim-bounceOut {
+  @include animation(bounceOut $tmg-f1 ease-in-out 1);
+}

apps/openassessment/xblock/static/sass/xb/assets/_fonts.scss

+// xblock: assets - fonts
+// ====================
+
+// NOTES:
+// * use this area to load external font/typography assets or reference any bundled with xblocks
+
+
+// --------------------
+// EXAMPLE: Google webfonts import
+// --------------------
+// import from google fonts - Lato (http://www.google.com/fonts/specimen/Lato)
+// @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

apps/openassessment/xblock/static/sass/xb/assets/_graphics.scss

+// xblock: assets - graphics
+// ====================
+
+// NOTES:
+// * this is where any rasterized graphics/sprites are defined as well as where images/visual media are styled
+
+// --------------------
+// EXAMPLE: image
+// --------------------
+// $logo--app: '../images/logo--app.png';

apps/openassessment/xblock/static/sass/xb/contexts/_ie.scss

+// xblock: contexts - internet explorer
+// ====================
+
+// NOTES:
+// * any x-block-specific support-based styling needed for internet explorer should be placed here
+
+// --------------------
+// CASE: less than or equal to IE9
+// --------------------
+.lte9 {
+
+}
+
+
+// --------------------
+// CASE: less than or equal to IE8
+// --------------------
+.lte8 {
+
+}
+
+
+// --------------------
+// CASE: less than or equal to IE7
+// --------------------
+.lte7 {
+
+}

apps/openassessment/xblock/static/sass/xb/elements/_base.scss

+// xblock: elements - base
+// ====================
+
+// NOTES:
+// * all base set-up styles that can be applied to any xblock
+
+// --------------------
+// fonts
+// --------------------
+.wrapper--xblock {
+  @extend %t-copy-base;
+  overflow-y: scroll;
+  font-size: 62.5%;
+  background: $bg-view;
+}
+
+
+// --------------------
+// layout
+// --------------------
+[class^="wrapper-"] {
+  @extend %wrapper;
+  padding: 0;
+}
+
+
+// --------------------
+// semantic dividers
+// --------------------
+.sr, hr.divider {
+  @extend %ui-text-sr;
+}
+
+
+// --------------------
+// semantic lists used for UI
+// --------------------
+.list--actions,
+.list--docs,
+.list--steps,
+.list--controls,
+.list--fields,
+.list--help,
+.nav--wizard,
+.list--tips,
+.field--group {
+  @extend %ui-no-list;
+  @extend %wipe-last-child;
+}

apps/openassessment/xblock/static/sass/xb/elements/_controls.scss

+// xblock: elements - controls
+// ====================
+
+// NOTES:
+// * all UI-based controls that can be extends in any xlbock
+
+
+// --------------------
+// links
+// --------------------
+// links - copy
+%link-copy {
+  @include transition(color $tmg-f1 ease-in-out, border $tmg-f1 ease-in-out);
+  border-bottom: 1px solid transparent;
+  color: $action-primary-color;
+  text-decoration: none;
+
+  &:hover, &:focus {
+    color: $action-primary-color-focus;
+    border-color: $action-primary-color-focus;
+  }
+
+  &:active, &.is--current {
+    color: $action-primary-color-active;
+    border-color: $action-primary-color-active;
+  }
+}
+
+// links - meta
+%link-meta {
+  @include transition(color $tmg-f1 ease-in-out, border $tmg-f1 ease-in-out);
+  border-bottom: 1px solid transparent;
+  color: $action-secondary-color;
+  text-decoration: none;
+
+  &:hover, &:focus {
+    color: $action-secondary-color-focus;
+    border-color: $action-secondary-color-focus;
+  }
+
+  &:active, &.is--current {
+    color: $action-secondary-color-active;
+    border-color: $action-secondary-color-active;
+  }
+}
+
+// links - page nav
+%link-nav-page {
+  @include transition(color $tmg-f1 ease-in-out, border $tmg-f1 ease-in-out);
+  display: block;
+  border-right: 1px solid solid $gray-l5;
+  padding: ($baseline-v/2) ($baseline-h/4);
+  color: $gray-l3;
+  font-family: $f-action;
+  text-decoration: none;
+
+  &:hover, &:active {
+    border-left-color: $action-secondary-color-focus;
+    color: $action-secondary-color-focus;
+  }
+}
+
+// --------------------
+// buttons
+// --------------------
+// buttons - archetypes
+%btn {
+  @include box-sizing(border-box);
+  @include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover, &:active, &:focus {
+    text-decoration: none;
+  }
+
+  &.disabled, &[disabled] {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+%btn-pill {
+  @extend %btn;
+  border-radius: $baseline-v/5;
+}
+
+%btn-rounded {
+  @extend %btn;
+  border-radius: ($baseline-v/2);
+}
+
+%btn-edged {
+  @extend %btn;
+  border-radius: ($baseline-v/10);
+}
+
+
+// buttons - primary
+%btn--primary {
+  @extend %btn-edged;
+  @extend %t-weight3;
+  padding: ($baseline-v/2) ($baseline-h);
+  background: $action-primary-color;
+  border-color: saturate($action-primary-color, 15%);
+  color: tint($action-primary-color, 90%);
+
+
+  &:hover, &:active, &:focus {
+    background: $action-primary-color-focus;
+    border-color: $action-primary-color-focus;
+    color: tint($action-primary-color, 95%);
+  }
+
+  &.current, &.active {
+    background: $action-primary-color-active;
+    border-color: $action-primary-color-active;
+
+
+    &:hover, &:active, &:focus {
+
+    }
+  }
+
+  &.disabled, &.is-disabled, &[disabled] {
+    opacity: 0.5;
+  }
+}
+
+
+// buttons - secondary
+%btn--secondary {
+  @extend %btn-edged;
+  @extend %t-weight3;
+  padding: ($baseline-v/2) ($baseline-h);
+  background: $action-secondary-color;
+  border-color: saturate($action-secondary-color, 15%);
+  color: tint($action-secondary-color, 90%);
+
+
+  &:hover, &:active, &:focus {
+    background: $action-secondary-color-focus;
+    border-color: $action-secondary-color-focus;
+    color: tint($action-secondary-color, 95%);
+  }
+
+  &.current, &.active {
+    background: $action-secondary-color-active;
+    border-color: $action-secondary-color-active;
+
+    &:hover, &:active, &:focus {
+
+    }
+  }
+
+  &.disabled, &.is-disabled, &[disabled] {
+    opacity: 0.5;
+  }
+}
+
+
+// buttons - tertiary
+%btn--tertiary {
+  @extend %btn-edged;
+  @extend %t-weight3;
+  padding: ($baseline-v/2) ($baseline-h);
+  background: $action-tertiary-color;
+  border-color: saturate($action-tertiary-color, 15%);
+  color: tint($action-tertiary-color, 90%);
+
+
+  &:hover, &:active, &:focus {
+    background: $action-tertiary-color-focus;
+    border-color: $action-tertiary-color-focus;
+    color: tint($action-tertiary-color, 95%);
+  }
+
+  &.current, &.active {
+    background: $action-tertiary-color-active;
+    border-color: $action-tertiary-color-active;
+
+    &:hover, &:active, &:focus {
+
+    }
+  }
+
+  &.disabled, &.is-disabled, &[disabled] {
+    opacity: 0.5;
+  }
+}

apps/openassessment/xblock/static/sass/xb/elements/_forms.scss

+// xblock: elements - forms
+// ====================
+
+// NOTES:
+// * basic form element (fields, fieldsets/wrappers, actions, and states) styling for all xblocks
+

apps/openassessment/xblock/static/sass/xb/elements/_typography.scss

+// xblock: elements - typography
+// ====================
+
+// NOTES:
+// * all typographical settings should be placed here for general xblocks use
+// * typographical scale reference: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
+
+
+// --------------------
+// weight
+// --------------------
+%t-weight0 {
+  font-weight: 300;
+}
+
+%t-weight1 {
+  font-weight: 400;
+}
+
+%t-weight2 {
+  font-weight: 500;
+}
+
+%t-weight3 {
+  font-weight: 600;
+}
+
+%t-weight4 {
+  font-weight: 700;
+}
+
+
+// --------------------
+// canned icon sizes
+// --------------------
+%t-icon-s {
+  @include font-size(12);
+}
+
+%t-icon-m {
+  @include font-size(16);
+}
+
+%t-icon-l {
+  @include font-size(24);
+}
+
+%t-icon-xl {
+  @include font-size(36);
+}
+
+
+// --------------------
+// canned headings
+// --------------------
+%hd-alpha {
+  @include font-size(48);
+  @include lh(48);
+  @extend %t-weight4;
+  text-transform: uppercase;
+  font-family: $f-title;
+  letter-spacing: 0.50rem;
+  color: $heading-primary-color;
+}
+
+%hd-bravo {
+  @extend %t-weight2;
+  @include font-size(24);
+  @include lh(24);
+  margin: 0 0 ($baseline-v/4) 0;
+  font-family: $f-title;
+  color: $heading-primary-color;
+}
+
+%hd-charlie {
+  @extend %t-weight1;
+  @include font-size(18);
+  @include lh(18);
+  margin: 0 0 ($baseline-v/2) 0;
+  font-family: $f-title;
+  color: $heading-primary-color;
+}
+
+%hd-charlie-alt {
+  @extend %t-weight2;
+  @include font-size(18);
+  @include lh(18);
+  margin: 0 0 ($baseline-v/4) 0;
+  font-family: $f-title;
+  color: $heading-color;
+}
+
+%hd-delta {
+  @extend %t-weight1;
+  @include font-size(16);
+  @include lh(16);
+  margin: 0 0 ($baseline-v/2) 0;
+  text-transform: uppercase;
+  font-family: $f-title;
+  letter-spacing: 0.125rem;
+  color: $heading-tertiary-color;
+}
+
+%hd-epsilon {
+  @extend %t-weight1;
+  @include font-size(14);
+  @include lh(14);
+  font-family: $f-title;
+  color: $heading-secondary-color;
+}
+
+%hd-foxtrot {
+  @extend %t-weight1;
+  @include font-size(16);
+  @include lh(16);
+  margin: 0 0 ($baseline-v/10) 0;
+  font-family: $f-title;
+  color: $heading-secondary-color;
+}
+
+%hd-golf {
+  @extend %t-weight1;
+  @include font-size(14);
+  @include lh(14);
+  margin: 0 0 ($baseline-v/10) 0;
+  text-transform: uppercase;
+  font-family: $f-title;
+  letter-spacing: 0.25rem;
+  color: $heading-tertiary-color;
+}
+
+%hd-hotel {
+  @include font-size(24);
+  @include lh(24);
+  @extend %t-weight4;
+  text-transform: uppercase;
+  font-family: $f-title;
+  letter-spacing: 0.25rem;
+  color: $heading-tertiary-color;
+}
+
+
+// --------------------
+// canned copy
+// --------------------
+%copy-base {
+  @extend %t-weight1;
+  @include font-size(16);
+  @include lh(16);
+  font-family: $f-copy;
+  color: $copy-color;
+}
+
+%copy-lead {
+  @extend %t-weight0;
+  @include font-size(24);
+  @include lh(24);
+  font-family: $f-copy;
+  color: $copy-color;
+}
+
+%copy-showcase {
+  @include font-size(18);
+  @include lh(18);
+  color: $copy-color;
+  font-family: $f-copy;
+}
+
+%copy-detail {
+  @include font-size(14);
+  @include lh(14);
+  font-family: $f-copy;
+  color: $copy-color;
+}
+
+%copy-metadata {
+  @include font-size(12);
+  @include lh(12);
+  font-family: $f-copy;
+  color: $copy-supplemental-color;
+}
+
+
+// --------------------
+// canned actions
+// --------------------
+
+
+// --------------------
+// visual emphasis
+// --------------------
+%emphasis {
+  font-style: normal;
+}
+
+
+%emphasis-alpha {
+  @extend %emphasis;
+  @extend %t-weight3;
+}
+
+%emphasis-bravo {
+  @extend %emphasis;
+  @extend %t-weight2;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/_bourbon-deprecated-upcoming.scss

+//************************************************************************//
+// These mixins/functions are deprecated
+// They will be removed in the next MAJOR version release
+//************************************************************************//
+@mixin box-shadow ($shadows...) {
+  @include prefixer(box-shadow, $shadows, spec);
+  @warn "box-shadow is deprecated and will be removed in the next major version release";
+}
+
+@mixin background-size ($lengths...) {
+  @include prefixer(background-size, $lengths, spec);
+  @warn "background-size is deprecated and will be removed in the next major version release";
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/_bourbon.scss

+// Custom Helpers
+@import "helpers/deprecated-webkit-gradient";
+@import "helpers/gradient-positions-parser";
+@import "helpers/linear-positions-parser";
+@import "helpers/radial-arg-parser";
+@import "helpers/radial-positions-parser";
+@import "helpers/render-gradients";
+@import "helpers/shape-size-stripper";
+
+// Custom Functions
+@import "functions/compact";
+@import "functions/flex-grid";
+@import "functions/grid-width";
+@import "functions/linear-gradient";
+@import "functions/modular-scale";
+@import "functions/px-to-em";
+@import "functions/radial-gradient";
+@import "functions/tint-shade";
+@import "functions/transition-property-name";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/appearance";
+@import "css3/backface-visibility";
+@import "css3/background";
+@import "css3/background-image";
+@import "css3/border-image";
+@import "css3/border-radius";
+@import "css3/box-sizing";
+@import "css3/columns";
+@import "css3/flex-box";
+@import "css3/font-face";
+@import "css3/hidpi-media-query";
+@import "css3/image-rendering";
+@import "css3/inline-block";
+@import "css3/keyframes";
+@import "css3/linear-gradient";
+@import "css3/perspective";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+@import "css3/user-select";
+@import "css3/placeholder";
+
+// Addons & other mixins
+@import "addons/button";
+@import "addons/clearfix";
+@import "addons/font-family";
+@import "addons/hide-text";
+@import "addons/html5-input-types";
+@import "addons/position";
+@import "addons/prefixer";
+@import "addons/retina-image";
+@import "addons/size";
+@import "addons/timing-functions";
+@import "addons/triangle";
+
+// Soon to be deprecated Mixins
+@import "bourbon-deprecated-upcoming";

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_clearfix.scss

+// Micro clearfix provides an easy way to contain floats without adding additional markup
+//
+// Example usage:
+//
+//    // Contain all floats within .wrapper
+//    .wrapper {
+//      @include clearfix;
+//      .content,
+//      .sidebar {
+//        float : left;
+//      }
+//    }
+
+@mixin clearfix {
+  *zoom: 1;
+
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+// Acknowledgements
+// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_font-family.scss

+$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
+$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+$verdana: Verdana, Geneva, sans-serif;

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_hide-text.scss

+@mixin hide-text {
+  color:            transparent;
+  font:             0/0 a;
+  text-shadow:      none;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_html5-input-types.scss

+//************************************************************************//
+// Generate a variable ($all-text-inputs) with a list of all html5
+// input types that have a text-based input, excluding textarea.
+// http://diveintohtml5.org/forms.html
+//************************************************************************//
+$inputs-list: 'input[type="email"]',
+              'input[type="number"]',
+              'input[type="password"]',
+              'input[type="search"]',
+              'input[type="tel"]',
+              'input[type="text"]',
+              'input[type="url"]',
+
+              // Webkit & Gecko may change the display of these in the future
+              'input[type="color"]',
+              'input[type="date"]',
+              'input[type="datetime"]',
+              'input[type="datetime-local"]',
+              'input[type="month"]',
+              'input[type="time"]',
+              'input[type="week"]';
+
+$unquoted-inputs-list: ();
+@each $input-type in $inputs-list {
+  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
+}
+
+$all-text-inputs: $unquoted-inputs-list;
+
+
+// Hover Pseudo-class
+//************************************************************************//
+$all-text-inputs-hover: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-hover: $input-type + ":hover";
+      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
+}
+
+// Focus Pseudo-class
+//************************************************************************//
+$all-text-inputs-focus: ();
+@each $input-type in $unquoted-inputs-list {
+      $input-type-focus: $input-type + ":focus";
+      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
+}
+
+// You must use interpolation on the variable:
+// #{$all-text-inputs}
+// #{$all-text-inputs-hover}
+// #{$all-text-inputs-focus}
+
+// Example
+//************************************************************************//
+//   #{$all-text-inputs}, textarea {
+//     border: 1px solid red;
+//   }

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_position.scss

+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $top: nth($coordinates, 1);
+  $right: nth($coordinates, 2);
+  $bottom: nth($coordinates, 3);
+  $left: nth($coordinates, 4);
+
+  position: $position;
+
+  @if $top == auto {
+    top: $top;
+  }
+  @else if not(unitless($top)) {
+    top: $top;
+  }
+
+  @if $right == auto {
+    right: $right;
+  }
+  @else if not(unitless($right)) {
+    right: $right;
+  }
+
+  @if $bottom == auto {
+    bottom: $bottom;
+  }
+  @else if not(unitless($bottom)) {
+    bottom: $bottom;
+  }
+
+  @if $left == auto {
+    left: $left;
+  }
+  @else if not(unitless($left)) {
+    left: $left;
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_prefixer.scss

+//************************************************************************//
+// Example: @include prefixer(border-radius, $radii, webkit ms spec);
+//************************************************************************//
+$prefix-for-webkit:    true !default;
+$prefix-for-mozilla:   true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera:     true !default;
+$prefix-for-spec:      true !default; // required for keyframe mixin
+
+@mixin prefixer ($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      @if $prefix-for-webkit {
+        -webkit-#{$property}: $value;
+      }
+    }
+    @else if $prefix == moz {
+      @if $prefix-for-mozilla {
+        -moz-#{$property}: $value;
+      }
+    }
+    @else if $prefix == ms {
+      @if $prefix-for-microsoft {
+        -ms-#{$property}: $value;
+      }
+    }
+    @else if $prefix == o {
+      @if $prefix-for-opera {
+        -o-#{$property}: $value;
+      }
+    }
+    @else if $prefix == spec {
+      @if $prefix-for-spec {
+        #{$property}: $value;
+      }
+    }
+    @else  {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
+}
+
+@mixin disable-prefix-for-all() {
+  $prefix-for-webkit:    false;
+  $prefix-for-mozilla:   false;
+  $prefix-for-microsoft: false;
+  $prefix-for-opera:     false;
+  $prefix-for-spec:      false;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_retina-image.scss

+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) {
+  @if $asset-pipeline {
+    background-image: image-url("#{$filename}.#{$extension}");
+  }
+  @else {
+    background-image: url("#{$filename}.#{$extension}");
+  }
+
+  @include hidpi {
+
+    @if $asset-pipeline {
+      @if $retina-filename {
+        background-image: image-url("#{$retina-filename}.#{$extension}");
+      }
+      @else {
+        background-image: image-url("#{$filename}@2x.#{$extension}");
+      }
+    }
+
+    @else {
+      @if $retina-filename {
+        background-image: url("#{$retina-filename}.#{$extension}");
+      }
+      @else {
+        background-image: url("#{$filename}@2x.#{$extension}");
+      }
+    }
+
+    background-size: $background-size;
+
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_size.scss

+@mixin size($size) {
+  @if length($size) == 1 {
+    @if $size == auto {
+      width:  $size;
+      height: $size;
+    }
+
+    @else if unitless($size) {
+      width:  $size + px;
+      height: $size + px;
+    }
+
+    @else if not(unitless($size)) {
+      width:  $size;
+      height: $size;
+    }
+  }
+
+  // Width x Height
+  @if length($size) == 2 {
+    $width:  nth($size, 1);
+    $height: nth($size, 2);
+
+    @if $width == auto {
+      width: $width;
+    }
+    @else if not(unitless($width)) {
+      width: $width;
+    }
+    @else if unitless($width) {
+      width: $width + px;
+    }
+
+    @if $height == auto {
+      height: $height;
+    }
+    @else if not(unitless($height)) {
+      height: $height;
+    }
+    @else if unitless($height) {
+      height: $height + px;
+    }
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_timing-functions.scss

+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+// EASE OUT
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+// EASE IN OUT
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);

apps/openassessment/xblock/static/sass/xb/libs/bourbon/addons/_triangle.scss

+@mixin triangle ($size, $color, $direction) {
+  height: 0;
+  width: 0;
+
+  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
+    border-color: transparent;
+    border-style: solid;
+    border-width: $size / 2;
+
+    @if $direction == up {
+      border-bottom-color: $color;
+
+    } @else if $direction == right {
+      border-left-color:   $color;
+
+    } @else if $direction == down {
+      border-top-color:    $color;
+
+    } @else if $direction == left {
+      border-right-color:  $color;
+    }
+  }
+
+  @else if ($direction == up-right) or ($direction == up-left) {
+    border-top: $size solid $color;
+
+    @if $direction == up-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == up-left {
+      border-right: $size solid transparent;
+    }
+  }
+
+  @else if ($direction == down-right) or ($direction == down-left) {
+    border-bottom: $size solid $color;
+
+    @if $direction == down-right {
+      border-left:  $size solid transparent;
+
+    } @else if $direction == down-left {
+      border-right: $size solid transparent;
+    }
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_animation.scss

+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+// Official animation shorthand property.
+@mixin animation ($animations...) {
+  @include prefixer(animation, $animations, webkit moz spec);
+}
+
+// Individual Animation Properties
+@mixin animation-name ($names...) {
+  @include prefixer(animation-name, $names, webkit moz spec);
+}
+
+
+@mixin animation-duration ($times...) {
+  @include prefixer(animation-duration, $times, webkit moz spec);
+}
+
+
+@mixin animation-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out
+  @include prefixer(animation-timing-function, $motions, webkit moz spec);
+}
+
+
+@mixin animation-iteration-count ($values...) {
+// infinite | <number>
+  @include prefixer(animation-iteration-count, $values, webkit moz spec);
+}
+
+
+@mixin animation-direction ($directions...) {
+// normal | alternate
+  @include prefixer(animation-direction, $directions, webkit moz spec);
+}
+
+
+@mixin animation-play-state ($states...) {
+// running | paused
+  @include prefixer(animation-play-state, $states, webkit moz spec);
+}
+
+
+@mixin animation-delay ($times...) {
+  @include prefixer(animation-delay, $times, webkit moz spec);
+}
+
+
+@mixin animation-fill-mode ($modes...) {
+// none | forwards | backwards | both
+  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_appearance.scss

+@mixin appearance ($value) {
+  @include prefixer(appearance, $value, webkit moz ms o spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_backface-visibility.scss

+//************************************************************************//
+// Backface-visibility mixin
+//************************************************************************//
+@mixin backface-visibility($visibility) {
+  @include prefixer(backface-visibility, $visibility, webkit spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_background-image.scss

+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+
+@mixin background-image($images...) {
+  background-image: _add-prefix($images, webkit);
+  background-image: _add-prefix($images);
+}
+
+@function _add-prefix($images, $vendor: false) {
+  $images-prefixed: ();
+  $gradient-positions: false;
+  @for $i from 1 through length($images) {
+    $type: type-of(nth($images, $i)); // Get type of variable - List or String
+
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient-type: nth(nth($images, $i), 1); // linear or radial
+      $gradient-pos: null;
+      $gradient-args: null;
+
+      @if ($gradient-type == linear) or ($gradient-type == radial) {
+        $gradient-pos:  nth(nth($images, $i), 2); // Get gradient position
+        $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
+      }
+      @else {
+        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
+      }
+
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+      $images-prefixed: append($images-prefixed, $gradient, comma);
+    }
+    // If variable is a string - Image
+    @else if $type == string {
+      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
+    }
+  }
+  @return $images-prefixed;
+}
+
+//Examples:
+  //@include background-image(linear-gradient(top, orange, red));
+  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_background.scss

+//************************************************************************//
+// Background property for adding multiple backgrounds using shorthand
+// notation.
+//************************************************************************//
+
+@mixin background(
+  $background-1       , $background-2: false,
+  $background-3: false, $background-4: false,
+  $background-5: false, $background-6: false,
+  $background-7: false, $background-8: false,
+  $background-9: false, $background-10: false,
+  $fallback: false
+) {
+  $backgrounds: compact($background-1, $background-2,
+                $background-3, $background-4,
+                $background-5, $background-6,
+                $background-7, $background-8,
+                $background-9, $background-10);
+
+  $fallback-color: false;
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+  @else {
+    $fallback-color: _extract-background-color($backgrounds);
+  }
+
+  @if $fallback-color {
+    background-color: $fallback-color;
+  }
+  background: _background-add-prefix($backgrounds, webkit);
+  background: _background-add-prefix($backgrounds);
+}
+
+@function _extract-background-color($backgrounds) {
+  $final-bg-layer: nth($backgrounds, length($backgrounds));
+  @if type-of($final-bg-layer) == list {
+    @for $i from 1 through length($final-bg-layer) {
+      $value: nth($final-bg-layer, $i);
+      @if type-of($value) == color {
+        @return $value;
+      }
+    }
+  }
+  @return false;
+}
+
+@function _background-add-prefix($backgrounds, $vendor: false) {
+  $backgrounds-prefixed: ();
+
+  @for $i from 1 through length($backgrounds) {
+    $shorthand: nth($backgrounds, $i); // Get member for current index
+    $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
+
+    // If shorthand is a list (gradient)
+    @if $type == list {
+      $first-member: nth($shorthand, 1); // Get first member of shorthand
+
+      // Linear Gradient
+      @if index(linear radial, nth($first-member, 1)) {
+        $gradient-type: nth($first-member, 1); // linear || radial
+        $gradient-args:      false;
+        $gradient-positions: false;
+        $shorthand-start:    false;
+        @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
+          $gradient-positions: nth($first-member, 2);
+          $gradient-args:      nth($first-member, 3);
+          $shorthand-start: 2;
+        }
+        @else { // Linear gradient only - lg(red,orange),...
+          $gradient-positions: nth($shorthand, 2);
+          $gradient-args:      nth($shorthand, 3); // Get gradient (red, blue)
+        }
+
+        $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
+        $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+
+        // Append any additional shorthand args to gradient
+        @if $shorthand-start {
+          @for $j from $shorthand-start through length($shorthand) {
+            $gradient: join($gradient, nth($shorthand, $j), space);
+          }
+        }
+        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+      }
+      // Image with additional properties
+      @else {
+        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+      }
+    }
+    // If shorthand is a simple string (color or image)
+    @else if $type == string {
+      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+    }
+  }
+  @return $backgrounds-prefixed;
+}
+
+//Examples:
+  //@include background(linear-gradient(top, orange, red));
+  //@include background(radial-gradient(circle at 40% 40%, orange, red));
+  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
+  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_border-image.scss

+@mixin border-image($images) {
+  -webkit-border-image: _border-add-prefix($images, webkit);
+     -moz-border-image: _border-add-prefix($images, moz);
+       -o-border-image: _border-add-prefix($images, o);
+          border-image: _border-add-prefix($images);
+}
+
+@function _border-add-prefix($images, $vendor: false) {
+  $border-image: null;
+  $images-type:  type-of(nth($images, 1));
+  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)
+
+  // If input is a gradient
+  @if $images-type == string {
+    @if ($first-var == "linear") or ($first-var == "radial") {
+      $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($images, 2);           // Get gradient position
+      $gradient-args: nth($images, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+    }
+    // If input is a URL
+    @else {
+      $border-image: $images;
+    }
+  }
+  // If input is gradient or url + additional args
+  @else if $images-type == list {
+    $type: type-of(nth($images, 1));           // Get type of variable - List or String
+
+    // If variable is a list - Gradient
+    @if $type == list {
+      $gradient: nth($images, 1);
+      $gradient-type: nth($gradient, 1);           // Get type of gradient (linear || radial)
+      $gradient-pos:  nth($gradient, 2);           // Get gradient position
+      $gradient-args: nth($gradient, 3);           // Get actual gradient (red, blue)
+      $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
+      $border-image:  _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
+
+      @for $i from 2 through length($images) {
+        $border-image: append($border-image, nth($images, $i));
+      }
+    }
+  }
+  @return $border-image;
+}
+
+//Examples:
+// @include border-image(url("image.png"));
+// @include border-image(url("image.png") 20 stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow));
+// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
+// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
+// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
+

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_border-radius.scss

+//************************************************************************//
+// Shorthand Border-radius mixins
+//************************************************************************//
+@mixin border-top-radius($radii) {
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-top-right-radius, $radii, spec);
+}
+
+@mixin border-bottom-radius($radii) {
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
+}
+
+@mixin border-left-radius($radii) {
+  @include prefixer(border-top-left-radius, $radii, spec);
+  @include prefixer(border-bottom-left-radius, $radii, spec);
+}
+
+@mixin border-right-radius($radii) {
+  @include prefixer(border-top-right-radius, $radii, spec);
+  @include prefixer(border-bottom-right-radius, $radii, spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_box-sizing.scss

+@mixin box-sizing ($box) {
+//  content-box | border-box | inherit
+  @include prefixer(box-sizing, $box, webkit moz spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_columns.scss

+@mixin columns($arg: auto) {
+// <column-count> || <column-width>
+  @include prefixer(columns, $arg, webkit moz spec);
+}
+
+@mixin column-count($int: auto) {
+// auto || integer
+  @include prefixer(column-count, $int, webkit moz spec);
+}
+
+@mixin column-gap($length: normal) {
+// normal || length
+  @include prefixer(column-gap, $length, webkit moz spec);
+}
+
+@mixin column-fill($arg: auto) {
+// auto || length
+  @include prefixer(columns-fill, $arg, webkit moz spec);
+}
+
+@mixin column-rule($arg) {
+// <border-width> || <border-style> || <color>
+  @include prefixer(column-rule, $arg, webkit moz spec);
+}
+
+@mixin column-rule-color($color) {
+  @include prefixer(column-rule-color, $color, webkit moz spec);
+}
+
+@mixin column-rule-style($style: none) {
+// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
+  @include prefixer(column-rule-style, $style, webkit moz spec);
+}
+
+@mixin column-rule-width ($width: none) {
+  @include prefixer(column-rule-width, $width, webkit moz spec);
+}
+
+@mixin column-span($arg: none) {
+// none || all
+  @include prefixer(column-span, $arg, webkit moz spec);
+}
+
+@mixin column-width($length: auto) {
+// auto || length
+  @include prefixer(column-width, $length, webkit moz spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_flex-box.scss

+// CSS3 Flexible Box Model and property defaults
+
+// Custom shorthand notation for flexbox
+@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
+  @include display-box;
+  @include box-orient($orient);
+  @include box-pack($pack);
+  @include box-align($align);
+}
+
+@mixin display-box {
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+}
+
+@mixin box-orient($orient: inline-axis) {
+// horizontal|vertical|inline-axis|block-axis|inherit
+  @include prefixer(box-orient, $orient, webkit moz spec);
+}
+
+@mixin box-pack($pack: start) {
+// start|end|center|justify
+  @include prefixer(box-pack, $pack, webkit moz spec);
+}
+
+@mixin box-align($align: stretch) {
+// start|end|center|baseline|stretch
+  @include prefixer(box-align, $align, webkit moz spec);
+}
+
+@mixin box-direction($direction: normal) {
+// normal|reverse|inherit
+  @include prefixer(box-direction, $direction, webkit moz spec);
+}
+
+@mixin box-lines($lines: single) {
+// single|multiple
+  @include prefixer(box-lines, $lines, webkit moz spec);
+}
+
+@mixin box-ordinal-group($int: 1) {
+  @include prefixer(box-ordinal-group, $int, webkit moz spec);
+}
+
+@mixin box-flex($value: 0.0) {
+  @include prefixer(box-flex, $value, webkit moz spec);
+}
+
+@mixin box-flex-group($int: 1) {
+  @include prefixer(box-flex-group, $int, webkit moz spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_font-face.scss

+// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
+
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    @if $asset-pipeline == true {
+      src: font-url('#{$file-path}.eot');
+      src: font-url('#{$file-path}.eot?#iefix')          format('embedded-opentype'),
+           font-url('#{$file-path}.woff')                format('woff'),
+           font-url('#{$file-path}.ttf')                 format('truetype'),
+           font-url('#{$file-path}.svg##{$font-family}') format('svg');
+    } @else {
+      src: url('#{$file-path}.eot');
+      src: url('#{$file-path}.eot?#iefix')               format('embedded-opentype'),
+           url('#{$file-path}.woff')                     format('woff'),
+           url('#{$file-path}.ttf')                      format('truetype'),
+           url('#{$file-path}.svg##{$font-family}')      format('svg');
+    }
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_hidpi-media-query.scss

+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+@mixin hidpi($ratio: 1.3) {
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: #{round($ratio*96)}dpi),
+  only screen and (min-resolution: #{$ratio}dppx) {
+    @content;
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_image-rendering.scss

+@mixin image-rendering ($mode:optimizeQuality) {
+
+  @if ($mode == optimize-contrast) {
+      image-rendering: -moz-crisp-edges;
+      image-rendering: -o-crisp-edges;
+      image-rendering: -webkit-optimize-contrast;
+      image-rendering: optimize-contrast;
+  }
+
+  @else {
+      image-rendering: $mode;
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_inline-block.scss

+// Legacy support for inline-block in IE7 (maybe IE6)
+@mixin inline-block {
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_keyframes.scss

+// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
+@mixin keyframes($name) {
+  $original-prefix-for-webkit:    $prefix-for-webkit;
+  $original-prefix-for-mozilla:   $prefix-for-mozilla;
+  $original-prefix-for-microsoft: $prefix-for-microsoft;
+  $original-prefix-for-opera:     $prefix-for-opera;
+  $original-prefix-for-spec:      $prefix-for-spec;
+
+  @if $original-prefix-for-webkit {
+    @include disable-prefix-for-all();
+    $prefix-for-webkit: true;
+    @-webkit-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-mozilla {
+    @include disable-prefix-for-all();
+    $prefix-for-mozilla: true;
+    @-moz-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-opera {
+    @include disable-prefix-for-all();
+    $prefix-for-opera: true;
+    @-o-keyframes #{$name} {
+      @content;
+    }
+  }
+  @if $original-prefix-for-spec {
+    @include disable-prefix-for-all();
+    $prefix-for-spec: true;
+    @keyframes #{$name} {
+      @content;
+    }
+  }
+
+  $prefix-for-webkit:    $original-prefix-for-webkit;
+  $prefix-for-mozilla:   $original-prefix-for-mozilla;
+  $prefix-for-microsoft: $original-prefix-for-microsoft;
+  $prefix-for-opera:     $original-prefix-for-opera;
+  $prefix-for-spec:      $original-prefix-for-spec;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_linear-gradient.scss

+@mixin linear-gradient($pos, $G1, $G2: false,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $deprecated-pos1: left top,
+                       $deprecated-pos2: left bottom,
+                       $fallback: false) {
+  // Detect what type of value exists in $pos
+  $pos-type: type-of(nth($pos, 1));
+  $pos-spec: null;
+  $pos-degree: null;
+
+  // If $pos is missing from mixin, reassign vars and add default position
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
+     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
+     $pos: null;
+  }
+
+  @if $pos {
+    $positions: _linear-positions-parser($pos);
+    $pos-degree: nth($positions, 1);
+    $pos-spec:   nth($positions, 2);
+  }
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Set $G1 as the default fallback color
+  $fallback-color: nth($G1, 1);
+
+  // If $fallback is a color use that color as the fallback color
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  background-color: $fallback-color;
+  background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
+  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
+  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_perspective.scss

+@mixin perspective($depth: none) {
+  // none | <length>
+  @include prefixer(perspective, $depth, webkit moz spec);
+}
+
+@mixin perspective-origin($value: 50% 50%) {
+  @include prefixer(perspective-origin, $value, webkit moz spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_placeholder.scss

+$placeholders: '-webkit-input-placeholder',
+               '-moz-placeholder',
+               '-ms-input-placeholder';
+
+@mixin placeholder {
+  @each $placeholder in $placeholders {
+    @if $placeholder == "-webkit-input-placeholder" {
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else if $placeholder == "-moz-placeholder" {
+      // FF 18-
+      &:#{$placeholder} {
+        @content;
+      }
+
+      // FF 19+
+      &::#{$placeholder} {
+        @content;
+      }
+    }
+    @else {
+      &:#{$placeholder} {
+        @content;
+      }
+    }
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_radial-gradient.scss

+// Requires Sass 3.1+
+@mixin radial-gradient($G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null,
+                       $deprecated-pos1: center center,
+                       $deprecated-pos2: center center,
+                       $deprecated-radius1: 0,
+                       $deprecated-radius2: 460,
+                       $fallback: false) {
+
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
+
+  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  // Strip deprecated cover/contain for spec
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  // Set $G1 as the default fallback color
+  $first-color: nth($full, 1);
+  $fallback-color: nth($first-color, 1);
+
+  @if (type-of($fallback) == color) or ($fallback == "transparent") {
+    $fallback-color: $fallback;
+  }
+
+  // Add Commas and spaces
+  $shape-size: if($shape-size, '#{$shape-size}, ', null);
+  $pos:        if($pos, '#{$pos}, ', null);
+  $pos-spec:   if($pos, 'at #{$pos}', null);
+  $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
+
+  background-color:  $fallback-color;
+  background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
+  background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
+  background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_transform.scss

+@mixin transform($property: none) {
+//  none | <transform-function>
+  @include prefixer(transform, $property, webkit moz ms o spec);
+}
+
+@mixin transform-origin($axes: 50%) {
+// x-axis - left | center | right  | length | %
+// y-axis - top  | center | bottom | length | %
+// z-axis -                          length
+  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
+}
+
+@mixin transform-style ($style: flat) {
+  @include prefixer(transform-style, $style, webkit moz ms o spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_transition.scss

+// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include transition (all, 2.0s, ease-in-out);
+//          @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
+//          @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
+
+@mixin transition ($properties...) {
+  @if length($properties) >= 1 {
+    @include prefixer(transition, $properties, webkit moz spec);
+  }
+
+  @else {
+    $properties: all 0.15s ease-out 0;
+    @include prefixer(transition, $properties, webkit moz spec);
+  }
+}
+
+@mixin transition-property ($properties...) {
+   -webkit-transition-property: transition-property-names($properties, 'webkit');
+      -moz-transition-property: transition-property-names($properties, 'moz');
+           transition-property: transition-property-names($properties, false);
+}
+
+@mixin transition-duration ($times...) {
+  @include prefixer(transition-duration, $times, webkit moz spec);
+}
+
+@mixin transition-timing-function ($motions...) {
+// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
+  @include prefixer(transition-timing-function, $motions, webkit moz spec);
+}
+
+@mixin transition-delay ($times...) {
+  @include prefixer(transition-delay, $times, webkit moz spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/css3/_user-select.scss

+@mixin user-select($arg: none) {
+  @include prefixer(user-select, $arg, webkit moz ms spec);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_compact.scss

+// Remove `false` values from a list
+
+@function compact($vars...) {
+  $list: ();
+  @each $var in $vars {
+    @if $var {
+      $list: append($list, $var, comma);
+    }
+  }
+  @return $list;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_flex-grid.scss

+// Flexible grid
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+// Flexible gutter
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
+// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
+//
+// The calculation presumes that your column structure will be missing the last gutter:
+//
+//   -- column -- gutter -- column -- gutter -- column
+//
+//  $fg-column: 60px;             // Column Width
+//  $fg-gutter: 25px;             // Gutter Width
+//  $fg-max-columns: 12;          // Total Columns For Main Container
+//
+//  div {
+//    width: flex-grid(4);        // returns (315px / 995px) = 31.65829%;
+//    margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
+//
+//    p {
+//      width: flex-grid(2, 4);  // returns (145px / 315px) = 46.031746%;
+//      float: left;
+//      margin: flex-gutter(4);  // returns (25px / 315px) = 7.936508%;
+//    }
+//
+//    blockquote {
+//      float: left;
+//      width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
+//    }
+//  }
\ No newline at end of file

apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_grid-width.scss

+@function grid-width($n) {
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
+//
+//  $gw-column: 100px;         // Column Width
+//  $gw-gutter: 40px;          // Gutter Width
+//
+//  div {
+//    width: grid-width(4);    // returns 520px;
+//    margin-left: $gw-gutter; // returns 40px;
+//  }

apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_linear-gradient.scss

+@function linear-gradient($pos, $gradients...) {
+  $type: linear;
+  $pos-type: type-of(nth($pos, 1));
+
+  // if $pos doesn't exist, fix $gradient
+  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
+    $gradients: zip($pos $gradients);
+    $pos: false;
+  }
+
+  $type-gradient: $type, $pos, $gradients;
+  @return $type-gradient;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_modular-scale.scss

+@function modular-scale($value, $increment, $ratio) {
+  @if $increment > 0 {
+    @for $i from 1 through $increment {
+      $value: ($value * $ratio);
+    }
+  }
+
+  @if $increment < 0 {
+    $increment: abs($increment);
+    @for $i from 1 through $increment {
+      $value: ($value / $ratio);
+    }
+  }
+
+  @return $value;
+}
+
+//  div {
+//                     Increment Up GR with positive value
+//   font-size:        modular-scale(14px,   1, 1.618); // returns: 22.652px
+//
+//                     Increment Down GR with negative value
+//   font-size:        modular-scale(14px,  -1, 1.618); // returns: 8.653px
+//
+//                     Can be used with ceil(round up) or floor(round down)
+//   font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
+//   font-size:  ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
+//  }
+//
+// modularscale.com
+
+@function golden-ratio($value, $increment) {
+  @return modular-scale($value, $increment, 1.618)
+}
+
+//  div {
+//    font-size: golden-ratio(14px, 1); // returns: 22.652px
+//  }
+//
+// goldenratiocalculator.com

apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_px-to-em.scss

+// Convert pixels to ems
+// eg. for a relational value of 12px write em(12) when the parent is 16px
+// if the parent is another value say 24px write em(12, 24)
+
+@function em($pxval, $base: 16) {
+  @return ($pxval / $base) * 1em;
+}
+

apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_radial-gradient.scss

+// This function is required and used by the background-image mixin.
+@function radial-gradient($G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false,
+                       $pos: null,
+                       $shape-size: null) {
+
+  $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
+  $G1:  nth($data, 1);
+  $G2:  nth($data, 2);
+  $pos: nth($data, 3);
+  $shape-size: nth($data, 4);
+
+  $type: radial;
+  $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+
+  $type-gradient: $type, $shape-size $pos, $gradient;
+  @return $type-gradient;
+}
+
+

apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_tint-shade.scss

+// Add percentage of white to a color
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/functions/_transition-property-name.scss

+// Return vendor-prefixed property names if appropriate
+// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
+//************************************************************************//
+@function transition-property-names($props, $vendor: false) {
+	$new-props: ();
+	
+	@each $prop in $props {
+		$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+	}
+
+	@return $new-props;
+}
+
+@function transition-property-name($prop, $vendor: false) {
+	// put other properties that need to be prefixed here aswell
+	@if $vendor and $prop == transform {
+		@return unquote('-'+$vendor+'-'+$prop);
+	}
+	@else {
+		@return $prop;
+	}
+}
\ No newline at end of file

apps/openassessment/xblock/static/sass/xb/libs/bourbon/helpers/_deprecated-webkit-gradient.scss

+// Render Deprecated Webkit Gradient - Linear || Radial
+//************************************************************************//
+@function _deprecated-webkit-gradient($type,
+                                     $deprecated-pos1, $deprecated-pos2,
+                                     $full,
+                                     $deprecated-radius1: false, $deprecated-radius2: false) {
+  $gradient-list: ();
+  $gradient: false;
+  $full-length: length($full);
+  $percentage: false;
+  $gradient-type: $type;
+
+  @for $i from 1 through $full-length {
+    $gradient: nth($full, $i);
+
+    @if length($gradient) == 2 {
+      $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1));
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+    @else if $gradient != null {
+      @if $i == $full-length {
+        $percentage: 100%;
+      }
+      @else {
+        $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%";
+      }
+      $color-stop: color-stop(unquote($percentage), $gradient);
+      $gradient-list: join($gradient-list, $color-stop, comma);
+    }
+  }
+
+  @if $type == radial {
+    $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list);
+  }
+  @else if $type == linear {
+    $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list);
+  }
+  @return $gradient;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/helpers/_gradient-positions-parser.scss

+@function _gradient-positions-parser($gradient-type, $gradient-positions) {
+  @if $gradient-positions
+  and ($gradient-type == linear)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _linear-positions-parser($gradient-positions);
+  }
+  @else if $gradient-positions
+  and ($gradient-type == radial)
+  and (type-of($gradient-positions) != color) {
+    $gradient-positions: _radial-positions-parser($gradient-positions);
+  }
+  @return $gradient-positions;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/helpers/_linear-positions-parser.scss

+@function _linear-positions-parser($pos) {
+  $type: type-of(nth($pos, 1));
+  $spec: null;
+  $degree: null;
+  $side: null;
+  $corner: null;
+  $length: length($pos);
+  // Parse Side and corner positions
+  @if ($length > 1) {
+    @if nth($pos, 1) == "to" { // Newer syntax
+      $side: nth($pos, 2);
+
+      @if $length == 2 { // eg. to top
+        // Swap for backwards compatability
+        $degree: _position-flipper(nth($pos, 2));
+      }
+      @else if $length == 3 { // eg. to top left
+        $corner: nth($pos, 3);
+      }
+    }
+    @else if $length == 2 { // Older syntax ("top left")
+      $side: _position-flipper(nth($pos, 1));
+      $corner: _position-flipper(nth($pos, 2));
+    }
+
+    @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
+      $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
+    }
+    $spec: to $side $corner;
+  }
+  @else if $length == 1 {
+    // Swap for backwards compatability
+    @if $type == string {
+      $degree: $pos;
+      $spec: to _position-flipper($pos);
+    }
+    @else {
+      $degree: -270 - $pos; //rotate the gradient opposite from spec
+      $spec: $pos;
+    }
+  }
+  $degree: unquote($degree + ",");
+  $spec:   unquote($spec + ",");
+  @return $degree $spec;
+}
+
+@function _position-flipper($pos) {
+ @return if($pos == left, right, null)
+         if($pos == right, left, null)
+         if($pos == top, bottom, null)
+         if($pos == bottom, top, null);
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/helpers/_radial-arg-parser.scss

+@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
+  @each $value in $G1, $G2 {
+    $first-val: nth($value, 1);
+    $pos-type:  type-of($first-val);
+    $spec-at-index: null;
+
+    // Determine if spec was passed to mixin
+    @if type-of($value) == list {
+      $spec-at-index: if(index($value, at), index($value, at), false);
+    }
+    @if $spec-at-index {
+      @if $spec-at-index > 1 {
+        @for $i from 1 through ($spec-at-index - 1) {
+          $shape-size: $shape-size nth($value, $i);
+        }
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      @else if $spec-at-index == 1 {
+        @for $i from ($spec-at-index + 1) through length($value) {
+          $pos: $pos nth($value, $i);
+        }
+      }
+      $G1: false;
+    }
+
+    // If not spec calculate correct values
+    @else {
+      @if ($pos-type != color) or ($first-val != "transparent") {
+        @if ($pos-type == number)
+        or ($first-val == "center")
+        or ($first-val == "top")
+        or ($first-val == "right")
+        or ($first-val == "bottom")
+        or ($first-val == "left") {
+
+          $pos: $value;
+
+          @if $pos == $G1 {
+            $G1: false;
+          }
+        }
+
+        @else if
+           ($first-val == "ellipse")
+        or ($first-val == "circle")
+        or ($first-val == "closest-side")
+        or ($first-val == "closest-corner")
+        or ($first-val == "farthest-side")
+        or ($first-val == "farthest-corner")
+        or ($first-val == "contain")
+        or ($first-val == "cover") {
+
+          $shape-size: $value;
+
+          @if $value == $G1 {
+            $G1: false;
+          }
+
+          @else if $value == $G2 {
+            $G2: false;
+          }
+        }
+      }
+    }
+  }
+  @return $G1, $G2, $pos, $shape-size;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/helpers/_radial-positions-parser.scss

+@function _radial-positions-parser($gradient-pos) {
+  $shape-size: nth($gradient-pos, 1);
+  $pos:        nth($gradient-pos, 2);
+  $shape-size-spec: _shape-size-stripper($shape-size);
+
+  $pre-spec: unquote(if($pos, "#{$pos}, ", null))
+             unquote(if($shape-size, "#{$shape-size},", null));
+  $pos-spec: if($pos, "at #{$pos}", null);
+
+  $spec: "#{$shape-size-spec} #{$pos-spec}";
+
+  // Add comma
+  @if ($spec != '  ') {
+    $spec: "#{$spec},"
+  }
+
+  @return $pre-spec $spec;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/helpers/_render-gradients.scss

+// User for linear and radial gradients within background-image or border-image properties
+
+@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
+  $pre-spec: null;
+  $spec: null;
+  $vendor-gradients: null;
+  @if $gradient-type == linear {
+    @if $gradient-positions {
+      $pre-spec: nth($gradient-positions, 1);
+      $spec:     nth($gradient-positions, 2);
+    }
+  }
+  @else if $gradient-type == radial {
+    $pre-spec: nth($gradient-positions, 1);
+    $spec:     nth($gradient-positions, 2);
+  }
+
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+  }
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
+  }
+  @return $vendor-gradients;
+}

apps/openassessment/xblock/static/sass/xb/libs/bourbon/helpers/_shape-size-stripper.scss

+@function _shape-size-stripper($shape-size) {
+  $shape-size-spec: null;
+  @each $value in $shape-size {
+    @if ($value == "cover") or ($value == "contain") {
+      $value: null;
+    }
+    $shape-size-spec: "#{$shape-size-spec} #{$value}";
+  }
+  @return $shape-size-spec;
+}

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_bordered-pulled.scss

+// Bordered & Pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  padding: .2em .25em .15em;
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+}
+
+.pull-right { float: right; }
+.pull-left { float: left; }
+
+.#{$fa-css-prefix} {
+  &.pull-left { margin-right: .3em; }
+  &.pull-right { margin-left: .3em; }
+}

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_core.scss

+// Base Class Definition
+// -------------------------
+
+.#{$fa-css-prefix} {
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_fixed-width.scss

+// Fixed Width Icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  width: (18em / 14);
+  text-align: center;
+}

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_larger.scss

+// Icon Sizes
+// -------------------------
+
+/* makes the font 33% larger relative to the icon container */
+.#{$fa-css-prefix}-lg {
+  font-size: (4em / 3);
+  line-height: (3em / 4);
+  vertical-align: -15%;
+}
+.#{$fa-css-prefix}-2x { font-size: 2em; }
+.#{$fa-css-prefix}-3x { font-size: 3em; }
+.#{$fa-css-prefix}-4x { font-size: 4em; }
+.#{$fa-css-prefix}-5x { font-size: 5em; }

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_list.scss

+// List Icons
+// -------------------------
+
+.#{$fa-css-prefix}-ul {
+  padding-left: 0;
+  margin-left: $fa-li-width;
+  list-style-type: none;
+  > li { position: relative; }
+}
+.#{$fa-css-prefix}-li {
+  position: absolute;
+  left: -$fa-li-width;
+  width: $fa-li-width;
+  top: (2em / 14);
+  text-align: center;
+  &.#{$fa-css-prefix}-lg {
+    left: -$fa-li-width + (4em / 14);
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_mixins.scss

+// Mixins
+// --------------------------
+
+@mixin fa-icon-rotate($degrees, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
+  -webkit-transform: rotate($degrees);
+     -moz-transform: rotate($degrees);
+      -ms-transform: rotate($degrees);
+       -o-transform: rotate($degrees);
+          transform: rotate($degrees);
+}
+
+@mixin fa-icon-flip($horiz, $vert, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
+  -webkit-transform: scale($horiz, $vert);
+     -moz-transform: scale($horiz, $vert);
+      -ms-transform: scale($horiz, $vert);
+       -o-transform: scale($horiz, $vert);
+          transform: scale($horiz, $vert);
+}

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_path.scss

+/* FONT PATH
+ * -------------------------- */
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
+  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+  //src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
+  font-weight: normal;
+  font-style: normal;
+}

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_rotated-flipped.scss

+// Rotated & Flipped Icons
+// -------------------------
+
+.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
+.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
+.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
+
+.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
+.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_spinning.scss

+// Spinning Icons
+// --------------------------
+
+.#{$fa-css-prefix}-spin {
+  -webkit-animation: spin 2s infinite linear;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+}
+
+@-moz-keyframes spin {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(359deg); }
+}
+@-ms-keyframes spin {
+  0% { -ms-transform: rotate(0deg); }
+  100% { -ms-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/_stacked.scss

+// Stacked Icons
+// -------------------------
+
+.#{$fa-css-prefix}-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.#{$fa-css-prefix}-stack-1x { line-height: inherit; }
+.#{$fa-css-prefix}-stack-2x { font-size: 2em; }
+.#{$fa-css-prefix}-inverse { color: $fa-inverse; }

apps/openassessment/xblock/static/sass/xb/libs/font-awesome/font-awesome.scss

+/*!
+ *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+@import "variables";
+@import "mixins";
+@import "path";
+@import "core";
+@import "larger";
+@import "fixed-width";
+@import "list";
+@import "bordered-pulled";
+@import "spinning";
+@import "rotated-flipped";
+@import "stacked";
+@import "icons";

apps/openassessment/xblock/static/sass/xb/libs/neat/_neat-helpers.scss

+// Functions
+@import "functions/private";
+@import "functions/new-breakpoint";
+
+// Settings
+@import "settings/grid";
+@import "settings/visual-grid";

apps/openassessment/xblock/static/sass/xb/libs/neat/_neat.scss

+// Bourbon Neat 1.5.0
+// MIT Licensed
+// Copyright (c) 2012-2013 thoughtbot, inc.
+
+// Helpers
+@import "neat-helpers";
+
+// Grid
+@import "grid/private";
+@import "grid/reset";
+@import "grid/grid";
+@import "grid/omega";
+@import "grid/outer-container";
+@import "grid/span-columns";
+@import "grid/row";
+@import "grid/shift";
+@import "grid/pad";
+@import "grid/fill-parent";
+@import "grid/media";
+@import "grid/to-deprecate";
+@import "grid/visual-grid";

apps/openassessment/xblock/static/sass/xb/libs/neat/functions/_new-breakpoint.scss

+@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+  @if length($query) == 1 {
+    $query: $default-feature nth($query, 1) $total-columns;
+  }
+
+  @else if length($query) == 2 or length($query) == 4 {
+    $query: append($query, $total-columns);
+  }
+
+  @if not belongs-to($query, $visual-grid-breakpoints) {
+    $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
+  }
+
+  @return $query;
+}

apps/openassessment/xblock/static/sass/xb/libs/neat/functions/_private.scss

+// Checks if a number is even
+@function is-even($int) {
+  @if $int%2 == 0   {
+    @return true;
+  }
+
+  @return false;
+}
+
+// Checks if an element belongs to a list
+@function belongs-to($tested-item, $list) {
+  @each $item in $list {
+    @if $item == $tested-item {
+      @return true;
+    }
+  }
+
+  @return false;
+}
+
+// Contains display value
+@function contains-display-value($query) {
+  @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) {
+    @return true;
+  }
+
+  @return false;
+}
+
+// Parses the first argument of span-columns()
+@function container-span($span: $span) {
+  @if length($span) == 3 {
+    $container-columns: nth($span, 3);
+    @return $container-columns;
+  }
+
+  @else if length($span) == 2 {
+    $container-columns: nth($span, 2);
+    @return $container-columns;
+  }
+
+  @else {
+    @return $grid-columns;
+  }
+}
+
+@function container-shift($shift: $shift) {
+  $parent-columns: $grid-columns !default;
+
+  @if length($shift) == 3 {
+    $container-columns: nth($shift, 3);
+    @return $container-columns;
+  }
+
+  @else if length($shift) == 2 {
+    $container-columns: nth($shift, 2);
+    @return $container-columns;
+  }
+
+  @else {
+    @return $parent-columns;
+  }
+}
+
+// Generates a striped background
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+  $transparent: rgba(0,0,0,0);
+
+  $column-width: flex-grid(1, $grid-columns);
+  $gutter-width: flex-gutter($grid-columns);
+  $column-offset: $column-width;
+
+  $values: ($transparent 0, $color 0);
+
+  @for $i from 1 to $grid-columns*2 {
+    @if is-even($i) {
+      $values: append($values, $transparent $column-offset, comma);
+      $values: append($values, $color $column-offset, comma);
+      $column-offset: $column-offset + $column-width;
+    }
+
+    @else {
+      $values: append($values, $color $column-offset, comma);
+      $values: append($values, $transparent $column-offset, comma);
+      $column-offset: $column-offset + $gutter-width;
+    }
+  }
+
+  @return $values;
+}
+
+// Layout direction
+@function get-direction($layout, $default) {
+  $direction: nil;
+  
+  @if $layout == LTR or $layout == RTL {
+    $direction: direction-from-layout($layout);
+  } @else {
+    $direction: direction-from-layout($default);
+  }
+
+  @return $direction;
+}
+
+@function direction-from-layout($layout) {
+  $direction: nil;
+
+  @if $layout == LTR {
+    $direction: right;
+  } @else {
+    $direction: left;
+  }
+
+  @return $direction;
+}
+
+@function get-opposite-direction($direction) {
+  $opposite-direction: left;
+
+  @if $direction == left {
+    $opposite-direction: right;
+  }
+
+  @return $opposite-direction;
+}

apps/openassessment/xblock/static/sass/xb/libs/neat/grid/_fill-parent.scss

+@mixin fill-parent() {
+  width: 100%;
+
+  @if $border-box-sizing == false {
+    @include box-sizing(border-box);
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/neat/grid/_grid.scss

+@if $border-box-sizing == true {
+  * {
+    @include box-sizing(border-box);
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/neat/grid/_media.scss

+@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+  @if length($query) == 1 {
+    @media screen and ($default-feature: nth($query, 1)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 2 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 3 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 3);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 4 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 5 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 5);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else {
+    @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/neat/grid/_omega.scss

+// Remove last element gutter
+@mixin omega($query: block, $direction: default) {
+  $table: if(belongs-to(table, $query), true, false);
+  $auto: if(belongs-to(auto, $query), true, false);
+
+  @if $direction != default {
+    @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
+  } @else {
+    $direction: get-direction($layout-direction, $default-layout-direction);
+  }
+
+  @if length($query) == 1 {
+    @if $auto {
+      &:last-child {
+        margin-#{$direction}: 0;
+      }
+    }
+
+    @else if contains-display-value($query) {
+      @if $table {
+        padding-#{$direction}: 0;
+      }
+
+      @else {
+        margin-#{$direction}: 0;
+      }
+    }
+
+    @else {
+      @include nth-child($query, $direction);
+    }
+  }
+
+  @else if length($query) == 2 {
+    @if $table {
+      @if $auto {
+        &:last-child {
+          padding-#{$direction}: 0;
+        }
+      }
+
+      @else {
+        &:nth-child(#{nth($query, 1)}) {
+          padding-#{$direction}: 0;
+        }
+      }
+    }
+
+    @else {
+      @if $auto {
+        &:last-child {
+          margin-#{$direction}: 0;
+        }
+      }
+
+      @else {
+        @include nth-child(nth($query, 1), $direction);
+      }
+    }
+  }
+
+  @else {
+    @warn "Too many arguments passed to the omega() mixin."
+  }
+}
+
+@mixin nth-child($query, $direction) {
+  $opposite-direction: get-opposite-direction($direction);
+
+  &:nth-child(#{$query}) {
+    margin-#{$direction}: 0;
+  }
+
+  @if type-of($query) == number {
+    &:nth-child(#{$query}+1) {
+      clear: $opposite-direction;
+    }
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/neat/grid/_outer-container.scss

+@mixin outer-container {
+  @include clearfix;
+  max-width: $max-width;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}

apps/openassessment/xblock/static/sass/xb/libs/neat/grid/_pad.scss

+@mixin pad($padding: flex-gutter()) {
+  $padding-list: null;
+  @each $value in $padding {
+    $value: if($value == 'default', flex-gutter(), $value);
+    $padding-list: join($padding-list, $value);
+  }
+  padding: $padding-list;
+}

apps/openassessment/xblock/static/sass/xb/libs/neat/grid/_private.scss

+$parent-columns: $grid-columns !default;
+$fg-column: $column;
+$fg-gutter: $gutter;
+$fg-max-columns: $grid-columns;
+$container-display-table: false !default;
+$layout-direction: nil !default;
+
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+@function grid-width($n) {
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
+
+@function get-parent-columns($columns) {
+  @if $columns != $grid-columns {
+    $parent-columns: $columns;
+  } @else {
+    $parent-columns: $grid-columns;
+  }
+
+  @return $parent-columns;
+}
+
+@function is-display-table($container-is-display-table, $display) {
+  $display-table: false;
+
+  @if $container-is-display-table == true {
+    $display-table: true;
+  } @else if $display == table {
+    $display-table: true;
+  }
+
+  @return $display-table;
+}
+
+@function get-padding-for-table-layout($columns, $total-columns) {
+  $total-padding: flex-gutter($total-columns) * ($columns - 1);
+  $padding: $total-padding / $columns;
+
+  @return $padding;
+}